ES6入门(4)数组的扩展

2019/03/04 10:58 上午 posted in  ES6

ES6 关于数组的扩展

Array类上的扩展

    console.dir(Array);

    // Array 类是一个函数 返回一个数组
    // Array(x,y,z) 将参数编程一个数组返回
    console.log(Array(1, 2, 3)); // [1,2,3]
    console.log(Array("1")); // ["1"]
    // 注意:只有一个参数,并且参数都是数字n,返回有n个空位的数组
    console.log(Array(7));

    //Array.of();跟Array一样, 唯一不同的是解决参数是一个数字的时候,返回任然一个只有一项的数组
    console.log(Array.of(7)); // [7]

    // Array.from(数组/类数组) 返回一个数组,参数是一个数组或者类数组
    console.log(Array.from([1, 2, 3])); // [1, 2, 3]
    console.log(Array.from("123")); // ["1", "2", "3"]

数组原型上的扩展

    // 所有数组实例上的方法的参数是从索引n到m的 都是 [n,m)
    console.log(Array.prototype);

    // copyWithin 是从原数组中读取内容 替换数组的指定位置的内容
    // 参数 copyWithin(替换目标的起始位置,查找的起始位置,查找的结束位置默认到结束位置)
    // 如果有超出部分会自动截取
    // 修改原数组
    let ary1 = [1,2,3,4,5,6,7,8];
    console.log(ary1.copyWithin(4, 2, 4)); // [1, 2, 3, 4, 3, 4, 7, 8]
    console.log(ary1.copyWithin(3, 2)); // [1, 2, 3, 3, 4, 3, 4, 7]
    console.log(ary1); // [1, 2, 3, 3, 4, 3, 4, 7]

    // fill 按照指定字符填充数组的指定位置
    // 将数组的每一项都编程指定字符
    console.log(ary1.fill("martix")); // ["martix", "martix", "martix", "martix", "martix", "martix", "martix", "martix"]
    let ary2 = [1,2,3,4,5,6,7,8];
    // 将数组的索引的 3,4位置替换成“martix”
    console.log(ary2.fill("martix", 3, 5)); // [1, 2, 3, "martix", "martix", 6, 7, 8]
    console.log(ary2);  // [1, 2, 3, "martix", "martix", 6, 7, 8]

    // includes 判断数组中有没有某一项
    // 第一个参数,查找对象
    // 第二个参数,查找的起始位置
    console.log([1, 2, 3].includes(1,1)); // false


    // 遍历数组的方法,参数都是一个函数,这个函数中的this是widow,我们可以通过第二个参数函数中的this  (reduce 的第二个参数不是)

    // filter 过滤数组 根据返回值去过滤原数组
    // 返回一个新的数组,原数组不变
    let ary3 =  ["martix", "martix", 1,2,3 ,"martix", "martix"];
    let arr = ary3.filter(function (item, index) {
        // 如果返回true 就留下当前项,
        // 返回false 就不留下当前项
        return typeof item==='number';
    });
    console.log(arr); // [1, 2, 3]

    // find  先遍历数组,一单参数函数返回true 停止查找,返回当前项
    // 只会查找一个
    let a = ary3.find(function (item) {
       return typeof item==="number";
    });
    console.log(a); // 1

    // findIndex  先遍历数组,一单参数函数返回true 停止查找,返回当前项的索引
    // 只会查找一个

    let i = ary3.findIndex(function (item) {
        return typeof item==="string";
    });
    console.log(i); // 0

    // every 遍历数组,如果每一项都返回ture,最后结果为ture,只要有一个为false 结果就是false
    console.log([1, 2, 3, 4, 5, 6].every(function (item) {
        return typeof item === "number";
    }));  // true

    console.log([1, 2, 3, 4, "matrix", 6].every(function (item) {
        return typeof item === "number";
    }));  // false


    // some 遍历数组 只要有一项是true ,最后记过就是true

    console.log([1, 2, 3, 4, "matrix", 6].some(function (item) {
        return typeof item === "string";
    })); // true


    // reduce 迭代
    // 第一个参数 是参数函数
    // 第二个值作为初始prev的值
    let ary4 = [1,2,3,4,5];
    console.log(ary4.reduce(function (prev, item) {
        // prev 上一次的返回值 item:当前项
        // console.log(prev);
        return prev + item
    })); // 15

    // reduceRight 跟reduce 一样 只是顺序从右开始

    // keys遍历,每一项索引的接口 使用for of 遍历
    let ary5 = [1,2,3,4];
    console.log(ary5.keys()); // Array Iterator {}
    for (let key of  ary5.keys()){
        console.log(key); // 0  1  2  3
    }

    // 默认使用for of 遍历数组,默认遍历的就是每一项
    for(let item of ary5)
        console.log(item);


    // entries 遍历接口 可以遍历到索引和每一项 ,每一项遍历都得到一个数组,[索引,当前项]
    for (let e of ary5.entries()){
        console.log(e); //  [0, 1] [1, 2] [2, 3] [3, 4]
    }
    // 可以解构一下
    for (let [index,item] of ary5.entries()) {
        console.log(index);
        console.log(item);
    }

数组的空位

// 数组的空位,数组的某个索引位置没有任何值 undefined不是空位
    // 判断一个数组的位置是不是空位 in
    // in 判断数组索引位置上有没有值
    let arr=[,,,,,]; // 五个空位的数组
    console.log(arr);
    console.log(arr.length); // 5

    console.log(1 in arr); // false

    // ES5中的数组对空位的处理不一致,一般直接跳过空位
    // ES6中将空位处理成undefined
    let arr1 = [1,2,,,,3];
    // ES5中的filter
    arr1.filter(function (item) {
        console.log(item);
    });

    // ES6中的find
    arr1.find(function (item) {
        console.log(item);
    });

    // ES6
    for (let item of arr1){
        console.log(item);
    }

    // ES5
    for (let key in arr1){
        console.log(key);
    }

    // 面试题 得到一个有7个1的数组
    console.log(Array(7).fill(1));