ES6对于数组的扩展

Posted 2022-09-23 xjy20170907

扩展运算符（...），用于将数组转化为逗号分隔的参数序列。

...实现数组的拷贝：

数组是一维数组时，扩展运算符可以深拷贝一个数组（对象同理）：

let arr = [1, 2, 3, 4, 5, 6];
let arr1 = [...arr];

arr == arr1  // false

当数组为多维时，数组中的数组变成浅拷贝（对象同理）：

let arr = [1, 2, 3, 4, 5, 6, [1, 2, 3]];
let arr1 = [...arr];
arr1.push(7);
arr1[arr1.length - 2][0] = 100;
console.log(arr); //[1, 2, 3, 4, 5, 6,[100, 2, 3]]
console.log(arr1); //[1, 2, 3, 4, 5, 6, [100, 2, 3],7]

合并数组：

[...arr,...arr2,...arr3]

// 结合解构赋值，生成剩余数组 -- 扩展运算符只能置于参数最后

let [one,...rest] = [1,2,3,4,5];
one   // 1
rest   // [2,3,4,5]

// 扩展字符串成数组

[...‘babe‘]   // ["b", "a", "b", "e"]

// 可以把类数组对象转换为真正的数组

function convert2Arr()
    return [...arguments];

        
let result = convert2Arr(1,2,3,4,5);
result // [1,2,3,4,5]

Array.from()

用于将类数组对象、可遍历的对象转为真正的数组

// 类数组对象
let obj = 
    0: ‘hello‘,
    1: ‘world‘,
    4: ‘outof bounds data‘,
    length: 3 


Array.from(obj);   // ["hello", "world", undefined]
// 根据属性名对应到数组的index, 超过length部分舍弃。没有对应的属性，置为undefined

// 注意:
    // Array.from()是一个很不严谨的角色，只要对象含有length属性，且值为正整数就能转，不保证转出来的东西质量是否符合要求。
    Array.from(user:‘babe‘,length:5)
    // [undefined, undefined, undefined, undefined, undefined]
        
    // Array.from()可接收第二个参数，用于对数组的每一项进行处理并返回
    Array.from([1,2,3],x=>x*x)
    // [1, 4, 9]
        
    Array.from([1,2,3],x=>x*x)
    // [undefined, undefined, undefined]  --切记处理函数中一定要返回
        
    // Array.from()还可接收第三个参数，这样在处理函数中就可以使用传进去的对象域中的值
    let that = 
        user:‘babe‘
    
    let obj = 
        0:‘babe‘,
        1:‘zhangsan‘,
        2:‘lisi‘,
        length:3
    
    let result = Array.from(obj,(user) =>
        if(user == that.user)
            return user;
        

        return 0;
    ,that);
    result   // ["babe", 0, 0]

 

 

 

 

 

 

 

 

 

 

 

原文：

https://segmentfault.com/a/1190000014784362