ES6数组方法

零、数组类型判断

Array.isArray()


    let arr = [1,2,3]

    let res = Array.isArray(arr)    //true

一、数组创建

Array构造函数的特性

如果使用构造函数传入一个数值型的值,那么数组的长度length属性会被设置为该值;


    let array = new Array(2);

    console.log(array.length);     //2

    console.log(array[0]);             //undefiend

    console.log(array[1]);             //undefiend

如果传入一个非数值型的值,那么这个值会成为目标数据的唯一项;

如果传入多个值,无论这些值是不是数值型的,都会成为数组的元素。

Array.of()

无论有多少参数,参数是什么类型的,Array.of()方法会创建一个包含所有参数的数组


    let array = Array.of(2);

    console.log(array.length);    //1

    console.log(array[0]);         //2

二、伪数组转数组

ES5方式一

function makeArray(arrayLike){

      var result = [];

      for(var i = 0, len = arrayLike.length;i

ES5方式二

function makeArray (arrayLike) {

        return Array.prototype.slice.call(arrayLike);

}

console.log(makeArray('world')); // ["w", "o", "r", "l", "d"]

ES6方式一

    let str = "hello";

    let arr = [...str];

    console.log(arr);    //["h","e","l","l","o"];

ES6方式二

    let str = "hello";

    let arr = Array.from(str);

    console.log(arr);    //["h","e","l","l","o"];

Arrary.from()可接收三个参数,第一个参数为类数组对象,第二个参数为函数,如果使用了映射函数,可以传第三个参数表示映射函数的this值。

    function translate(){

        return Array.from(arguments,(value)=>value +1 )

    }

    let numbers = translate(1,2,3,4);

    console.log(numbers);   //[2,3,4,5]


        let helper = {

            add(value){

                return value + 1;

            }

        }

        function translate(){

            return Array.from(arguments,helper.add,helper)

        }

        let numbers = translate(1,2,3);

        console.log(numbers);     //[2,3,4]

三、查找元素

find()和findIndex()

ES5中可以通过indexOf()和lastIndexOf()查找与特定值匹配的元素,

而ES6中的find()和findIndex()可以根据某个条件去查找匹配的元素。

参数为回调函数和回调函数的this值,

回调函数的参数同forEach(),分别为:元素,索引,数组本身。

find()返回查找的值,findIndex()返回查找的值的索引,两者都只返回第一个满足条件的值。


        let numbers = [1,2,3,4,5];

        console.log(numbers.find(n=>n>3));        //4

        console.log(numbers.findIndex(n => n >3 )) ;   //3

includes()

includes()方法用来判断一个数组是否包含一个指定的值,如果是返回true,否则返回false;

语法:arr.includes(searchElement,fromIndex) fromIndex可选


        [1,2,3].includes(2);      //true

        [1,2,3].includes(4);     //false

        [1,2,NaN].includes(NaN);     //true

如果fromIndex大于等于数组长度,则返回false。该数组不会被搜索:


        var arr = ['a','b','c'];

        arr.includes('c',3);   //false

        arr.includes('c',100);   //fasle

如果为负值,则按升序从array.length + fromIndex的索引开始搜索。默认为0。如果计算出的索引小于0,则整个数组都会被搜索。


        //数组的长度是3

        //fromIndex是 -100

        // computed index 是 3+(-100) =  -97

        var arr = ['a','b','c'];

        arr.includes('a',-2);      //false

        arr.includes('a',-100);   //true

四、数组遍历

forEach()

forEach不能中断遍历,没有返回值


        let arr = [1,2,3];

        arr.forEach((item,index,arr) => {

                console.log(index + '----' + item);

                console.log(arr);

        })

map()

map返回一个新的数组


        let arr=[1,2,3];

        let newArr = arr.map((item,index,arr)=>{

             return    item*2;

        })

        console.log(arr)           // [1, 2, 3]

        console.log(newArr)   // [2, 4, 6]

filter()

filter可以过滤数组,包含满足条件的数组项,返回一个新数组


        let arr = [1,2,3];

        let newArr = arr.filter((item,index,arr)=>{

                return item<=2;

        })

        console.log(arr)   // [1, 2, 3]

        console.log(newArr)  // [1, 2]

some()

some返回布尔值,如果有一个满足条件的值则返回true,后面的不再执行


        let arr = [1,2,3];

        let result = arr.some((item,index,arr)=>{

                return item<2;

        })

        console.log(result)      // true

every()

every返回布尔值,如果所有数组项都满足条件则返回true;如果有一个不满足返回false,后面的不再执行


        let arr = [1,2,3];

        let result = arr.every((item,index,arr)=>{

                console.log(index)

                return item<2;

        })

        console.log(result)   // false

五、遍历器

keys()

返回一个包含数组中每个索引键的Array Iterator对象。


    let arr = ['a','b','c'];

    let iterator = arr.keys()

    for(let key of iterator){

            console.log(key);// expected output: 0 1 2

    }

对象也有相应的方法,获取对象所有属性的键

var arr = ["a",,"c"];

var sparseKeys = Object.keys(arr);

var denseKeys = [...arr.keys()];

console.log(sparseKeys);   // ['0', '2']

console.log(denseKeys);// [0, 1, 2]

values()

values() 方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值。


    let arr = ['a','b','c'];

    let iterator = arr.values();

    for(const value of iterator){

            console.log(value);    // expected output: "a" "b" "c"

    }

对象也有相应的方法,获取对象所有属性的值


    var arr = ["a",,"c"];

    var sparseKeys = Object.values(arr);

    var denseKeys = [...arr.values()];

    console.log(sparseKeys);// ["a", "c"]

    console.log(denseKeys);// ["a", undefined, "c"]

entries()

entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。


    var arr = ["a","b","c"];

    var iter = arr.entries();

    var a = [];

    // for(var i=0; i< arr.length; i++){ // 实际使用的是这个 

    for(var i = 0;i < arr.length+1;i++){    // 注意,是length+1,比数组的长度大

            var tem = iter.next();        // 每次迭代时更新next

            console.log(tem.done);   // 这里可以看到更新后的done都是false

            if(tem.done!==true){        // 遍历迭代器结束done才是true

                console.log(tem.value);

                a[i]=tem.value;

            }

    }

    console.log(a);            // 遍历完毕,输出next.value的数组

对象也有相应的方法,获取对象所有属性的键值对


    const obj = {foo:'bar',baz:42};

    console.log(Object.entries(obj));     // [ ['foo', 'bar'], ['baz', 42] ]

转自 lesdom 链接:https://www.jianshu.com/p/941ee41a264a 来源:

你可能感兴趣的:(ES6数组方法)