Yuan的博客
EN 中

数组

JavaScript 中有哪些阵列 (Array) 的遍历方法(for loop, for…in, for…of, forEach, map, filter, every, some)

  1. for loop 可用 break / continue / return。手动控制索引。
let arr=[0,1,2,3,4,5];
for(let i=0;i<arr.length;i++) {
  if(i>2) break;
  console.log(arr[i]);
}
// 0
// 1
// 2
  • continue作用：跳过当前这一次循环，进入下一次循环不会结束整个 loop。
  • break 作用：结束整个循环（loop），之后的循环都不会再执行。
  • return 作用：结束整个函数（function），并把值返回给调用者
  1. for…of 不能遍历普通对象（Object），直接拿 value
const arr = ["apple","orange","banana"];
for (const item of arr) {
  if(item==="orange") continue;
  console.log(item);
}
  1. for…in 遍历的是键值 (key)，而在阵列中的 键值 (key) 就是 索引 (index),大部分情况，for…in 会被拿来遍历物件,不建议遍历阵列。
const arr=["apple","orange","banana"]
for (const item in arr){
  const.log(item);
}
// 0
// 1
// 2
  1. forEach:不能用 break / continue，return 也无效。不返回新数组。
const fruits = ["apple","orange","banana"];
fruits.forEach((item,index) => {
  console.log(index,item);
})
//0 apple
//1 orange
//2 banana
  1. map:针对每一个元素执行提供的函式，并回传新阵列
const arr = [1,2,3,4];
const newArr = arr.map((x) => x+1);
console.log(newArr);
// [2,3,4,5]
console.log(arr);
// [1,2,3,4] // 原阵列不会被改变
  1. filter:创建回传一个新阵列，并过滤掉没有通过所提供函式的元素
const arr = [19,2,13,40];
const newArr = arr.filter((x) => x>18);
console.log(newArr);
// [19, 40]
console.log(arr);
// [19, 2, 13, 40] // 原阵列不会被改变
  1. every:返回布尔值。所有元素满足条件 → true。只要一个失败 → 提前返回 false。
[12,5,8,130,44].every((x) => x>10); //false
[12,54,18,130,44].every((x) => x>10); //false
  1. some:只要阵列当中有一个元素通过测试函式，就会回传 true
[2,5,8,1,4].some((x)=> x>10);//false
[12,5,8,1,4].some((x) => x>10);//false
  • map 与 filter 会回传新的阵列，因此如果是在 React 等要求写不可变 (immutable) 的程式码时，经常需要用到这两个方法。

JavaScript 中的 sort 传入 (a,b) => b - a 会是升序还是降序？为什么呢？

  • 关键机制（真正要理解的点）Array.prototype.sort(compareFn) 依赖 compareFn 返回的三个值：

    • 0 → a 放到 b 后面

    • < 0 → a 放到 b 前面
    • = 0 → 位置不变

  • 所以：a - b：小的排前 → 升序，b - a：大的排前 → 降序

如何用 JavaScript 算出数组的平均数？

  1. for 回圈 (for loop) 解法
function getAverage(array){
  let sum =0;
  for(let i=0;i<array.length;i++){
    sum += array[i]
  }
  return sum/array.length
}
  1. 函式编程 (functional programming) reduce 解法
const getAverage = (array) =>
  array.reduce((sum,currentValue) => sum+currentValue,0)/array.length

请实践数组扁平化 (flatten)

  1. 方法一：flat()
let array = [1, 2, [3, [4, 5, [6, 7, [8]]]]];

function flatten (arr) {
  return arr.flat(Infinity);
}

const flattenArray = flatten(array);
console.log(flattenArray); //[1,2,3,4,5,6,7,8]
  1. 方法二：reduce
let array = [1, 2, [3, [4, 5, [6, 7, [8]]]]];
function flatten (arr) {
  return arr.reduce((acc,cur) =>
    Array.isArray(arr) ? [...acc,...flatten(cur)]:[...acc,cur]
    ,[])
}
const flattenArray = flatten(arrty);
console.log(flattenArray);//[1,2,3,4,5,6,7,8]
  • …flatten(cur)：对扁平结果做解构，… 是 spread operator（展开运算符）把一个可迭代对象（例如数组）的每个元素，依次展开成独立值。如：
[... [1,2,3]]
  [1,2,3]

数组去除重复 (remove duplicates) 方法

  1. 解法一：使用 Set 去重复,Set 中只能储存任何资料的唯一值
function removeDuplicate(arr){
  return [...new Set(arr)];
}
  1. filter 搭配 indexOf
function removeDuplicate(arr) {
  return arr.filter((item,index,array) => array.indexOf(item) === index);
}