JavaScript之数组

{
    //  数组声明
    // 字面量声明
    const arr1 = [1,2,'a'];
    // 构造函数声明
    const arr2 = new Array('a');
    console.log(arr2);
    const arr3 = new Array(1,'a',3);
    console.log(arr3);
    //  注意点   构造函数如果只有一个数字参数   说明的是数组的长度  而非内容
    const arr4 = new Array(4);
    console.log(arr4,arr4.length);   // [ <4 empty items> ] 4   表示四个为undefined的值
    //   在ES6中   为避免这种模棱两可的情况   引进了Array.of方法来替代new Array
    const arr5 = Array.of(5);
    console.log(arr5,arr5.length);  // [ 5 ] 1
    const arr6 = Array.of(5,6,7,'a');
    console.log(arr6);  // [ 5, 6, 7, 'a' ]

}
{
    // 数组类型转换
    // 数组转换成字符串
    let str1 = [1,23,'a'].toString();
    console.log(typeof str1,str1);   // string 1,23,a
    let str2 = String([1,23,'a']);
    console.log(typeof str2,str2);   // // string 1,23,a
    let str3 = [1,23,'a'].join(',');
    console.log(typeof str3,str3);  // // string 1,23,a

    // 字符串转换成数组
    // 使用split把字符串切割成数组
    const arr1 = str1.split(',');
    console.log(Array.isArray(arr1),arr1);  // true [ '1', '23', 'a' ]
    // 类数组转换成数组
    // 使用Array.from 方法把类数组转换成数组
    const arr2 = Array.from(str2);
    console.log(Array.isArray(arr2),arr2);  // true [ '1', ',', '2', '3', ',', 'a' ]

    // const divs = document.querySelectorAll('divs');  // dom节点集合
    // // Array.from 有第二个参数为回调函数  类似map,some等数组方法中的回调函数
    // Array.from(divs, div => {
    //     div.style.color = '#333';
    // })

}

{
    // 展开语法的使用
    // 数组合拼
    const arr1 = [1,2,3];
    const arr2 = ['a','b'];
    const arr3 = [...arr1,...arr2];
    console.log(arr3);  // [ 1, 2, 3, 'a', 'b' ]

    // 类数组转换成数组
    const set1 =new Set([1,3,4]);
    console.log(Array.isArray(set1),set1);  // false Set { 1, 3, 4 }
    const arr4 = [...set1];
    console.log(Array.isArray(arr4),arr4);  //true [ 1, 3, 4 ]

    // 数组去重
    const arr5 = [1,2,3,5,3,5,2,5,1,5,'1','5'];
    const arr6 = [...new Set(arr5)];
    console.log(arr6);  // [ 1, 2, 3, 5, '1', '5' ]

    // 不定参求和
    function sum (...args) {
        return args.reduce((s,v) => 
            s += v
        , 0)
    }
    console.log(sum(1,2,4));   // 7

}

{
    // 数组元素追加
    let arr1 = [1,2,4];
    arr1[arr1.length] = 5;
    console.log(arr1);  // [ 1, 2, 4, 5 ]
    const arr2 = ['a','b','c'];
    arr1 = [...arr1,...arr2];
    console.log(arr1);    // [1, 2, 4, 5, 'a', 'b', 'c' ]
    // 使用push方法
    arr1.push(6);
    const arr3 = ['x','y'];
    arr1.push(...arr3);
    console.table(arr1);
    console.log(arr1.push('xuwen'));  //  11    push的返回值为数组的长度


    // 数组前置元素
    arr1.unshift('xu');
    console.log(arr1);
    console.log(arr1.unshift('wen'));  // 13   unshift的返回值为数组的长度

    //  数组尾元素删除
    arr1.pop();
    console.log(arr1);
    console.log(arr1.pop());   // y   pop的返回值为删除的元素

    // 数组首元素删除
    arr1.shift();
    console.log(arr1);
    console.log(arr1.shift());  // xu  shift的返回值为删除的元素

    // 数组其他元素的增删操作
    // slice 这个方法不改变原数组
    // 数组复制
    const arr4 = arr1.slice();
    console.log(arr4);

    // 数组切割
    const arr5 = arr4.slice(1,5);   //  表示从索引1切割刀索引5    包含1但不包含5
    console.log(arr5);  // [ 2, 4, 5, 'a' ]

    // splice可以实现数组的增删改
    // 增
    arr5.splice(2,0,'xu','wen');  // 表示  从索引2开始  删除  0  个   增加 'xu' 'wen' 元素
    console.log(arr5);  // [ 2, 4, 'xu', 'wen', 5, 'a' ]
    // 改
    arr5.splice(3,2,'xuwen','tom');
    console.log(arr5);  // [ 2, 4, 'xu', 'xuwen', 'tom', 'a' ]
    // 删
    arr5.splice(1,1)  // 表示 从索引1开始  删除 1 个   返回值为删除的元素组成的数组
    console.log(arr5);  // [ 2, 'xu', 'xuwen', 'tom', 'a' ]
    console.log(arr5.splice(1,1));  // [ 'xu' ]

    // splice小例子
    // 数组元素的移动
    function move (arr,from,to) {
        if(from < 0 || from >= arr.length || to < 0 || to >= arr.length){
            console.error("参数错误");
            return;
        }
        const newArr = [...arr];
        let item = newArr.splice(from,1);   //  返回的是数组
        newArr.splice(to,0,...item);
        return newArr;
    }
    console.log(arr5);
    console.log(move(arr5,1,3));  // [ 2, 'tom', 'a', 'xuwen' ]
   
    // 数组元素的复制
    arr5.copyWithin(2,0,2);    // 表示从索引2开始替换复制    复制的元素为  索引0  到索引2   包含0不含2
    console.log(arr5);   // [ 2, 'xuwen', 2, 'xuwen' ]

    // 数组元素的查询
    let index = arr5.indexOf(2);   // 查询数组是否存在该元素   存在返回该元素的索引   不存在返回-1   查到一个元素即可  不会往下查询
    console.log(index);   //  0    

    // 在ES6中引入了includes查询数组元素  返回布尔值
    let bool = arr5.includes(2);
    console.log(bool);   //  true

    // includes只能查询基本类型  而引用类型则会失效  因为地址发生了改变  ES6中  引入了find方法来解决这个问题
    const arr_obj = [
        {name:'xuwen'},
        {height: 170},
        {weight: 66}
    ];

    // 返回数组元素
    const obj1 = arr_obj.find (item => item.name = 'xuwen');
    console.log(obj1);  // { name: 'xuwen' }
    // 返回数组元素的索引
    let index1 = arr_obj.findIndex(item => item.name = 'xuwen');
    console.log(index1);   // 0

}

{
    // 数组新增的几个方法
    // every 表示数组的每个元素都符合条件  返回布尔值   and的逻辑相似
    const arr1 = [
        {js:100},
        {js:66},
        {js:87}
    ];
    const bool = arr1.every(item => item.js > 60);
    console.log(bool);  // true

    // some   表示数组元素有一个符合即可  返回布尔值   or的逻辑相似
    const b2 = arr1.some(item => item.js > 80);
    console.log(b2); // true

    // map 映射   返回每个元素处理后的结果   会改变原数组
    const arr2 = arr1.map(item => item.js += 100);
    console.log(arr2);   // [ 200, 166, 187 ]

    // filter  过滤   返回符合条件的元素组成的数组
    console.log(arr1);
    const arr3 = arr1.filter(item => item.js > 180);
    console.log(arr3);  // [ { js: 200 }, { js: 187 } ]

    // reduce  对数组每个元素处理后的累积的结果
    // 案例
    // 1 统计数组中重复的元素的个数
    const nums = [1,2,3,5,3,4,5,6,3,4,2,'a','b','a',1,5,2,5,2,3];
    // 该方法只能实现非严格类型的数据
    function numsCount (arr) {
        return arr.reduce((obj,item) => {
            obj[item] = obj[item] ? ++obj[item] : 1;
            return obj;
        },{})
    }
    console.log(numsCount(nums));   // { '1': 2, '2': 4, '3': 4, '4': 2, '5': 4, '6': 1, a: 2, b: 1 }

    // 2统计数组元素之和
    const arr10 = [1,2,4,3,4,6,3];
    function sum (arr) {
        return arr.reduce((total,item) => {
            total += item;
            return total
        },0)
    }
    console.log(sum(arr10));  // 23
}