Array

在 ES6 中新增了很多实用的原生 API，方便开发者对 Array 的操控性更强，如 for...of、from、of、fill、find、findIndex 等。

ES6 新增的方法

• forEach

• Map

• every

• some

forEach 没有返回值，只是针对每个元素调用 func

arr.forEach((content, index) => {
  if (content == 2) {
    //xxxx todo
  }
  console.log(content);
});

重要

forEach 的代码块中不能使用 break、continue，它会抛出异常。

也不能使用 return 它不会返回

map()返回新的数组,每个元素为调用的 func 结果

let result = arr.map(function (value) {
  value += 1;
  console.log(value);
  return value;
});
console.log(arr, result);

filter()返回符合 func 条件的元素数组

let result = arr.filter(function (value) {
  console.log(value);
  return value == 2;
});
console.log(arr, result);

some()返回 boolean 判断是否有元素符合条件

let result = arr.some(function (value) {
  console.log(value);
  return value == 4;
});
console.log(result);
//true or false

every()返回 boolean,判断每个元素都符合 func 条件

let result = arr.every(function (value) {
  console.log(value);
  return value == 2;
});
console.log(result);

重要

forEach 的代码块中不能使用 break、continue，它会抛出异常。

reduce 累加器(上一个元素和下一个元素求和)

let sum = arr.reduce(function (prev, cur, index, array) {
  return prev + cur;
}, 0);
console.log(sum);

ES6 遍历数组的方式 for..of

for (let val of [1, 2, 3]) {
  console.log(val);
}
// 1,2,3

具体使用

for (let item of arr) {
  console.log(item);
}

for (let item of arr.values()) {
  console.log(item);
}

for (let item of arr.keys()) {
  console.log(item);
}

for (let [index, item] of arr.entries()) {
  console.log(index, item);
}

重要

for...in 不能用于遍历数组。 for...in 代码块中不能有 return，不然会抛出异常。

Array.from

创建数组用得上

语法：Array.from(arrayLike[, mapFn[, thisArg]])

参数	含义	必选
arrayLike	想要转换成数组的伪数组对象或可迭代对象	Y
mapFn	如果指定了该参数，新数组中的每个元素会执行该回调函数	N
thisArg	可选参数，执行回调函数 mapFn 时 this 对象	N

看了这几个参数至少能看到 Array.from 还具备 map 的功能，比如我们想初始化一个长度为 5 的数组，每个数组元素默认为 1，可以这样

Array.from(
  {
    length: 5,
  },
  function () {
    return 1;
  }
);

Array.of

这个也是创建数组的时候用得上

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为 7 的空数组（注意：这是指一个有 7 个空位(empty)的数组，而不是由 7 个 undefined 组成的数组）。

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]

Array.find

find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

let array = [5, 12, 8, 130, 44];

let found = array.find(function (element) {
  return element > 10;
});

console.log(found);
// 12

findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。其实这个和 find() 是成对的，不同的是它返回的是索引而不是值。

let array = [5, 12, 8, 130, 44];

let found = array.findIndex(function (element) {
  return element > 10;
});

console.log(found);
// 1

Array.flat()

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

参数	含义	必选
depth	指定要提取嵌套数组的结构深度,默认值为 1	N

示例

const numbers = [1, 2, [3, 4, [5, 6]]];
console.log(numbers.flat());
// [1, 2, 3, 4, [5, 6]]

注意

此时 flat 的参数没有设置，取默认值 1，也就是说只扁平化向下一级，遇到 [3, 4, [5, 6]] 这个数组会扁平会处理，不会再继续遍历内部的元素是否还有数组

const numbers = [1, 2, [3, 4, [5, 6]]];
console.log(numbers.flat(2));
// [1, 2, 3, 4, 5, 6]

当 flat 的参数大于等于 2，返回值就是 [1, 2, 3, 4, 5, 6] 了。

ES7 中 includes

ES7 引入的 Array.prototype.includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

基本方法

const arr = ["es6", "es7", "es8"];
console.log(arr.includes("es6")); // true
console.log(arr.includes("es9")); // false

接收两个参数

要搜索的值和搜索的开始索引。第二个参数可选。从该索引处开始查找 searchElement。如果为负值,则从右边开始

const arr = ["es6", "es7", "es8"];
console.log(arr.includes("es7", 1)); // true
console.log(arr.includes("es7", 2)); // false
console.log(arr.includes("es7", -1)); // false
console.log(arr.includes("es7", -2)); // true

注意

只能判断简单类型的数据，对于复杂类型的数据，比如对象类型的数组，二维数组，这些是无法判断的.

如果只想知道某个值是否在数组中存在，而并不关心它的索引位置，建议使用 includes()。如果想获取一个值在数组中的位置，那么只能使用 indexOf 方法。

ES7 中的幂运算符

示例

console.log(2 ** 10); //1024

注意

幂运算符的两个*号之间不能出现空格，否则语法会报错。

推荐阅读

• 数组

• includes