欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6 —(数组扩展)

程序员文章站 2023-12-22 14:03:22
...

1、扩展运算符

  扩展运算符(...)将一个数组转为用逗号分隔的参数序列。扩展运算符后面可以放置表达式,也可以是一个空数组,若是空数组,则不产生任何效果。

const arr = [
                ...(x > 0 ? ['a'] : []),
                'b'
            ];
[...[], 1]   // [1]

用途
  (1)用于函数调用。并且,扩展运算符与正常的函数参数可以结合使用。

function f(a,b,c,d,e) {}
var arg1 = [1,2,3,4,5];
f( ...arg1);  // 相当于 f(1, 2, 3, 4, 5);
var arg2 = [3,4];
f(1, 2, ...arg2, 5); // 相当于 f(1, 2, 3, 4, 5);

  (2)替代数组的 apply 方法。
  由于扩展运算符可以展开数组,所以不需要 apply 方法,将数组转为函数的参数了。

function f(x, y, z){}
var args = [1, 2, 3];
f.apply(null, args); // ES5 的写法
f(...args);  // ES6 的写法
--------------------------------------------
// 将 arr2 数组添加到 arr1 数组的尾部
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2); // ES5 的写法
arr1.push(...arr2); // ES6 的写法

  (3)合并数组

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = arr1.concat(arr1, arr2); // ES5 的写法
var arr4 = [...arr1, ...arr2];  // ES6 的写法

  (4)与解构赋值结合,并且扩展运算符只能放在参数的最后一位,否则会报错。

const [first, ...rest] = [1, 2, 3]; // first => 1, rest => [ 2, 3]
const [first, ...rest] = []; // first => undefined, rest => []
const [...rest, first] = [1, 2, 3]; // 报错, 

  (5)函数的返回值,js的函数只能有一个返回值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。
  (6)字符串,扩展运算符可将字符串转为真正的数组。并且能正确识别 32 位的 Unicode 字符。

[...'hello'] => ['h', 'e', 'l', 'l', 'o']
'x\uD83D\uDE80y'.length // 4, 错误未正确识别出 32 位的 Unicode 字符
[...'x\uD83D\uDE80y'].length // 3, 正确识别出了 32 位的 Unicode 字符

  (7)实现了 Iterator 接口的对象,都可以用扩展运算符转为真正的数组。如 Map 和 Set 结构, Generator 函数。

2、Arry.from()

   Arry.from() 方法将:类似数组的对象(所谓类似数组对象,本质特征只有一点,即必须有 length 属性),可遍历对象(实现了 Iterator 接口的对象),转为真正的数组。返回一个数组。
   Arry.from() 方法还可以接受第二个参数,作用类似于数组的 map 方法,用于对每个元素进行处理,将处理后的值放入返回的数组。

Arry.form('hello') => ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b']);
Array.from(namesSet) => ['a', 'b']
let arr = {
            '0': 'a',
            '1': 'b',
            length: 3
          } 
var arr1 = [].slice.call(arr);  // ES5 ['a', 'b']
var arr2 = Array.from(arr);    //ES6 ['a', 'b',undefined]

可以看出,slice 忽略空属性,而 Array.from() 将空属性保存为 undefined ,使原对象的长度不变。

3、Array.of()

  Array.of() 方法将一组值,转换为数组。该方法主要是弥补数组构造函数 Array() 由于参数个数不同导致的行为有差异。

Array()  => []
Array(3) => [ , , ,]    // Array参数少于2时, 参数表示数组长度
Array(3,2,1) => [3, 2, 1]  // Array参数不少于2时,返回有参数组成的新数组
--------------------------------------------------------
Array.of(3)  => [3]
Array.of(3).length => 1  
Array.oc(3,2,1) => [3, 2, 1]

4、数组实例的 copyWithin()

  数组实例的 copyWithin() 方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。该方法会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数:
- target (必需):从该位置开始替换数据
- start (可选):从该位置开始读取数据,默认为0,如果负值,表示倒数(从后往前)
- end (可选):到该位置前停止读取数据,默认为数组长度,如果为负值,表示倒数(从后往前)

[0, 1, 2, 3, 4, 5].copyWithin(2,3,4) => [0, 1, 3, 3, 4, 5]

5、数组实例的 find() 、findeIndex()

  数组实例的 find() 方法,用于找到第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员一次执行该回调函数,直到找到第一个返回值为 true 的成员,然后返回该成员。
  数组实例的 findIndex() 方法的用法与 find 类似,返回第一个符合条件数组成员的位置,如果所有成员都不符合条件,则返回 -1。
  以上两个方法都可以接受第二个参数,用于绑定回调函数的 this 对象。
  这两个方法都可以发现 NaN ,弥补了 indexOf() 方法的不足。

[NaN].findIndex(y => Object.is(NaN, y))  => 0

6、数组实例的 fill()

  fill() 方法使用给定值,填充一个数组,数组中已有的元素会被覆盖。用于空数组初始化非常方便。该方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

7、数组实例的 enteries() keys() 和 vauels

  ES6 提供这三个新方法用于遍历数组,他们都返回一个遍历器对象,可以用于 for...of 循环进行遍历。
- keys() 是对键值名遍历
- values() 是对键值遍历
- entries() 是对键值对遍历

for(let index of ['a', 'b'].keys()){
    console.log(index);
} // 0 1

8、数组实例的 includes()

  Array.prototype.includes() 该方法返回一个布尔值,表示某个数组是否包含给定的值与字符串的 indcludes() 方法类型。能识别 NaN
  该方法的第二个参数表示搜索的起始位置,默认为 0 ,如果第二个参数为负数,则表示倒数位置(从后往前)。

9、数组的空位

  数组的空位指,数组的某一个位置没有任何值。
注意:一个位置的值等于 undefined,该位置依然有值。 空位是没有任何值。

0 in [undefined] => true
0 in [ , , ,] => false 

ES5 对空位的处理,很多情况下会忽略空位。
- forEach() filter() every()some() 都会跳过空位。
- map() 会跳过空位,但会保留这个值。
- join()toString() 会将空位视为 undefined, 而 undefinednull 会被处理成空字符串。
ES6 则是明确将空位转为 undefined
   如 Array.from()、 扩展运算符(...、) enteries()keys()vauels()find()findIndex() 将空位转为 undefined
   copyWithin() 会将空位一起拷贝。
   fill() 会将空位视为正常的数组位置。
   for...of 循环也会遍历空位。

10、将函数参数转化为数组(不是ES6知识)

方法一:
var args = Array.prototype.slice.call(arguments);
方法二:
var args = [].slice.call(arguments, 0);
方法三:
var args = [];
for(var i = 0; i < arguments.length; i++){
    args.push(arguments[i]);
    或 args[i] = arguments[i];
}

阮一峰:ECMAScript 6入门

上一篇:

下一篇: