ES6之数组的扩展

ES6中对字符串、函数、对象、数组等都进行了扩展，感觉目的呢就是完善一下JS所为外行人诟病的一些伪bug.其实个人觉得不完美的JS才是真的美，什么东西都无懈可击了就显得不够有趣了。好了，接下来又要开始拾人牙慧了...

---

主要讲解:

1. 扩展运算符...
2. Array.from()
3. Array.of()
4. Array.prototype.find() 和 Array.prototype.findIndex() --常用

---

1.扩展运算符... 用于将数组转为逗号分隔的参数序列

如: ...[1,2,3] => 1,2,3 --只限一维转换,这种转换只有放进函数中调用才有意义，不能单独存在

基础用法:
   function plus(x,y){
        return x+y;
    }

    plus(...[3,7]);
    //10
    plus(3,...[7])
    plus(...[3],7)
    //可以灵活的置于函数参数中任意位置，只要根据传进的数据进行解析即可。
    
    //Array原生push方法(可向数组末尾添加一个或多个元素,顺序添加，且不创建新数组，直接修改原数组)
    let arr = [1,2,3];
    arr.push(4,5); //直接传参
    arr // [1,2,3,4,5]

    //使用扩展的方式:传入一个数组，进行拼接
    arr.push(...[6,7,8]);
    arr //[1,2,3,4,5,6,7,8]
    

---

应用:
    i.数组的浅拷贝
        let arr = [12,34,56];

        let arr2 = [...arr];
        let [...arr3] = arr;
        arr2 // [12,34,56]
        arr3 // [12,34,56]

        arr2 == arr 
        //false

    ii.合并数组
        [...arr,...arr2,...arr3]
        //[12, 34, 56, 12, 34, 56, 12, 34, 56]

    iii.结合解构赋值，生成剩余数组 -- 扩展运算符只能置于参数最后
        let [one,...rest] = [1,2,3,4,5];
        one // 1
        rest // [2,3,4,5]

    iv. 扩展字符串成数组 --感觉这个好像没啥用,'babe'.split('')也可以
        [...'babe']
        //["b", "a", "b", "e"]
        //不过阮老师的书上说扩展运算符的写法可以识别四个字节的Unicode字符
        //有相关需求可以使用这种方式解剖字符串

    v. 实现了Iterator接口的对象均可以使用扩展运算符转化成真正的数组(关于Iterator下次再写)
        
        function convert2Arr(){
          return [...arguments];
        }
        
        let result = convert2Arr(1,2,3,4,5);
        result // [1,2,3,4,5]

---

2.Array.from()

用于将类数组对象、可遍历的对象转为真正的数组(类数组对象特征:属性为非负整数、存在length属性、length>=0)

//类数组对象
let obj = {
    0:'hello',
    1:'world',
    4:'outof bounds data',
    length:3   //因为length不能动态改变，随意赋值，最后得到的数组长度就是其值
}
Array.from(obj);
// ["hello", "world", undefined]
//根据属性名对应到数组的index,超过length部分舍弃。没有对应的属性，置为undefined

---

//实现了Iterator接口的数据结构
let str = 'babe';
Array.from(str);
// ["b", "a", "b", "e"]
[...str]
// ["b", "a", "b", "e"]
//嗯，感觉现在JavaScript向着更幸福的方向发展了，条条大路通罗马。

---

注意:
    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]

---

3.Array.of()

用于将一组值转换为数组，存在的意义是替代以构造函数的形式创建数组，修复数组创建因参数不一致导致表现形式不同的伪bug.

//原始方式
new Array()
// []
new Array(2)
// [empty × 2]
new Array(1,2,3,4,5)
// [1, 2, 3, 4, 5]

//先进改良方式
Array.of();
// []
Array.of(2);
// [2]
Array.of(1,2,3,4,5);
// [1, 2, 3, 4, 5]

---

4.Array.prototype.find() 和 Array.prototype.findIndex()方法 --常用

find方法用于查找第一条符合要求的数据，找到返回该数据，否则返回undefined; findIndex则用于找到第一条符合要求的数组位置，找到返回index,否则返回-1;----这两个方法都可以使用indexOf替代，只是比indexOf更精细(可以查找NaN所在位置)

let result = [
    {extractId:1,sec:'Fi900'},
    {extractId:2,sec:'Fi901'},
    {extractId:3,sec:'Fi902'},
    {extractId:4,sec:'Fj900'},
    {extractId:5,sec:'Fj901'}
];

result.find(obj => obj.sec == 'Fi902')
// {extractId: 3, sec: "Fi902"}
result.findIndex(obj => obj.sec == 'Fi902')
// 2

//这个还要记住一个处理函数的接收参数顺序，依次为:当前值、当前位置、原始数组
result.find((val,index,arr)=>{...});
result.findIndex((val,index,arr)=>{});
//此两个方法均可接收第二个参数，传进去一个作用域对象,然后在处理函数中可以使用传入的对象
let scope = {extractId:2};
result.findIndex(item=>item.extractId == scope.extractId,scope);
// 1

---

今天就先写到这里了(每次都有点虎头蛇尾，介绍的也只是我感兴趣的点，以后尽量全，然后有侧重点)，如果bug请指正Thanks♪(･ω･)ﾉ