美文网首页
数组操作方法大全(包括ES6方法)

数组操作方法大全(包括ES6方法)

作者: 小龙虾Julian | 来源:发表于2020-05-01 15:46 被阅读0次
    一、concat()——连接两个或多个数组。该方法不会改变原数组,仅会返回被连接数组的一个副本
    var arr1 = [1,2,3];
    var arr2 = [4,5];
    var arr3 = arr1.concat(arr2);
    console.log(arr1);     //[1, 2, 3]
    console.log(arr3);     //[1, 2, 3, 4, 5]
    
    二、join()——把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的,默认使用“,”分隔,不会改变原数组
    var arr = [2,3,4];
    console.log(arr.join());     //2,3,4
    console.log(arr);     //[2, 3, 4]
    
    三、push()——向数组的末尾添加一个或多个元素,并返回新的长度。末尾添加,返回的是长度,会改变原数组。push方法可以一次添加多个元素push(data1,data2....)
    var a = [2,3,4];
    var b = a.push(5);
    console.log(a);     //[2,3,4,5]
    console.log(b);     //4
    
    四、pop()——删除并返回数组的最后一个元素。返回最后一个元素,会改变原数组
    var arr = [2,3,4];
    console.log(arr.pop());     //4
    console.log(arr);     //[2,3]
    
    五、shift()——删除数组的第一个元素。返回第一个元素,会改变原数组
    var arr = [2,3,4];
    console.log(arr.shift());     //2
    console.log(arr);     //[3,4]
    
    六、unshift()——向数组的开头添加一个或多个元素,并返回新的长度。开头添加,返回的是长度,会改变原数组。unshift方法可以一次添加多个元素push(data1,data2....)
    var arr = [2,3,4,5];
    console.log(arr.unshift(3,6));     //6
    console.log(arr);     //[3, 6, 2, 3, 4, 5]
    
    七、slice()——返回一个新的数组,包含从start到end(不包括该元素)的arrayObject中的元素。返回选定的元素,不会改变原数组
    var arr = [2,3,4,5];
    console.log(arr.slice(1,3));     //[3,4]
    console.log(arr);     //[2,3,4,5]
    
    八、splice()——删除从index处开始的零个或多个元素,并且用参数列表中的一个或多个值来替换被删除的元素。如果从arrayObject中删除了元素,则返回的是含有被删除元素的数组,该方法会直接对数组进行修改(第二个参数是0,代表的是添加元素,不是0代表的是删除元素)
    var a = [5,6,7,8];
    console.log(a.splice(1,0,9));     //[]
    console.log(a);     // [5, 9, 6, 7, 8]
    var b = [5,6,7,8];
    console.log(b.splice(1,2,3));     //[6, 7]
    console.log(b);     //[5, 3, 8]
    
    九、substring()和substr()

    1、相同点:如果只有一个参数,两者的作用一样,都是截取字符串从当前下标开始直到字符串最后的字符串片段
    substr(startIndex);
    substring(startIndex);

    var str = '123456789';
    console.log(str.substr(2));     //  "3456789"
    console.log(str.substring(2));     //  "3456789"
    

    2、不同点:第二个参数:substr(startIndex,lenth): 第二个参数是截取字符串的长度(从起始点截取某个长度的字符串);substring(startIndex, endIndex): 第二个参数是截取字符串最终的下标 (截取2个位置之间的字符串,‘含头不含尾’)

    console.log("123456789".substr(2,5));     //  "34567"
    console.log("123456789".substring(2,5));     //  "345"
    
    十、sort()——按照 Unicode Code 位置排序,默认升序,会改变原数组
    var fruit = ['cherries', 'apples', 'bananas'];
    console.log(fruit.sort());     // ['apples', 'bananas', 'cherries']
    var scores = [1, 10, 21, 2];
    console.log(scores.sort());     // [1, 10, 2, 21]
    console.log(scores) ;    // [1, 10, 2, 21]
    
    十一、reverse()——颠倒数组中元素的顺序。返回的是颠倒后的数组,会改变原数组
    var arr = [2,3,4];
    console.log(arr.reverse());     //[4, 3, 2]
    console.log(arr);     //[4, 3, 2]
    
    十二、indexOf() 和 lastIndexOf()——都接受两个参数:查找的值、查找的起始位置。如果不存在,返回 -1,存在,返回位置。indexOf是从前往后查找,lastIndexOf是从后往前查找
    var a = [2, 9, 9];
    a.indexOf(2);     // 0
    a.indexOf(7);     // -1
    
    if (a.indexOf(7) === -1) {
        // element doesn't exist in array
    }
    
    var numbers = [2, 5, 9, 2];
    numbers.lastIndexOf(2);     // 3
    numbers.lastIndexOf(7);     // -1
    numbers.lastIndexOf(2, 3);     // 3
    numbers.lastIndexOf(2, 2);     // 0
    numbers.lastIndexOf(2, -2);      // 0
    numbers.lastIndexOf(2, -1);      // 3
    
    十三、every()——对数组的每一项都运行给定的函数,每一项都返回true,则最后返回true
    function isBigEnough(element, index, array) {
        return element < 10;
    }    
    console.log([2, 5, 8, 3, 4].every(isBigEnough));     // true
    
    十四、some()——对数组的每一项都运行给定的函数,任意一项都返回 ture,则最后返回 true
    function compare(element, index, array) {
        return element > 10;
    }    
    [2, 5, 8, 1, 4].some(compare);     // false
    [12, 5, 8, 1, 4].some(compare);     // true
    
    十五、filter()——对数组的每一项都运行给定的函数,返回结果为true的项组成的数组
    var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];
    var longWords = words.filter(function(word){
        return word.length > 6;
    });
    console.log(longWords)     // ["exuberant", "destruction", "present"]
    
    十六、map()——对数组的每一项都运行给定的函数,返回每次函数调用的结果组成的一个新数组,不会改变原数组
    var numbers = [1, 5, 10, 15];
    var doubles = numbers.map(function(x) {
        return x * 2;
    });
    console.log(doubles )     // [2, 10, 20, 30]
    console.log(numbers )     // [1, 5, 10, 15]
    
    十七、forEach()——数组遍历
    const items = ['item1', 'item2', 'item3'];
    const copy = [];    
    items.forEach(function(item){
        copy.push(item)
    });
    console.log(copy)     // ['item1', 'item2', 'item3']
    
    ES6新增的操作数组的方法
    十八、find()——传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它,并且终止搜索
    const arr = [1, "2", 3, 3, "2"]
    console.log(arr.find(n => typeof n === "number"))     // 1
    
    十九、findIndex()——传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它的下标,并终止搜索
    const arr = [1, "2", 3, 3, "2"]
    console.log(arr.findIndex(n => typeof n === "number"))     // 0
    console.log(arr.findIndex(n => typeof n === "string"))     // 1
    
    二十、fill()——用新元素替换掉数组内的元素,可以指定替换下标范围,arr.fill(value, start, end)
    const arr = [1, 2, 3, 4, 5]
    console.log(arr.fill(10, 1, 3))     // [1, 10, 10, 4, 5]
    
    二十一、copyWithin()——选择数组的某个下标,从该位置开始复制数组元素,默认从0开始复制。也可以指定要复制的元素范围,arr.copyWithin(target, start, end)
    const arr = [1, 2, 3, 4, 5]
    console.log(arr.copyWithin(3))     // [1,2,3,1,2] 从下标为3的元素开始,复制数组,所以4, 5被替换成1, 2
    const arr1 = [1, 2, 3, 4, 5]
    console.log(arr1.copyWithin(3, 1))      // [1,2,3,2,3] 从下标为3的元素开始,复制数组,指定复制的第一个元素下标为1,所以4, 5被替换成2, 3
    const arr2 = [1, 2, 3, 4, 5]
    console.log(arr2.copyWithin(3, 1, 2))      // [1,2,3,2,5] 从下标为3的元素开始,复制数组,指定复制的第一个元素下标为1,结束位置为2,所以4被替换成2
    
    二十二、from()——将类似数组的对象(array-like object)和可遍历(iterable)的对象转为真正的数组
    const bar = ["a", "b", "c"];
    console.log(Array.from(bar));     // ["a", "b", "c"]
    console.log(Array.from('foo'));     // ["f", "o", "o"]
    
    二十三、of()——用于将一组值转换为数组。这个方法的主要目的是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异
    console.log(Array());     // []
    console.log(Array(3));     // [, , ,] 或 [ empty x 3 ]
    console.log(Array(3, 11, 8));     // [3, 11, 8]
    console.log(Array.of(7));       // [7]
    console.log(Array.of(1, 2, 3));     // [1, 2, 3]
    console.log(Array(7));          // [ , , , , , , ] 或 [ empty x 7 ]
    console.log(Array(1, 2, 3));      // [1, 2, 3]
    
    二十四、entries() 返回迭代器——返回键值对
    //数组
    const arr = ['a', 'b', 'c'];
    for(let v of arr.entries()) {
        console.log(v)     // [0, 'a'] [1, 'b'] [2, 'c']
    }
    
    //Set
    const arr1 = new Set(['a', 'b', 'c']);
    for(let v of arr1.entries()) {
        console.log(v)     // ['a', 'a'] ['b', 'b'] ['c', 'c']
    }
    
    //Map
    const arr2 = new Map();
    arr2.set('a', 'a');
    arr2.set('b', 'b');
    for(let v of arr2.entries()) {
        console.log(v)     // ['a', 'a'] ['b', 'b']
    }
    
    二十五、values() 返回迭代器——返回键值对的value
    //数组
    const arr = ['a', 'b', 'c'];
    for(let v of arr.values()) {
        console.log(v)     //'a' 'b' 'c'
    }
    
    //Set
    const arr1 = new Set(['a', 'b', 'c']);
    for(let v of arr1.values()) {
        console.log(v)     // 'a' 'b' 'c'
    }
    
    //Map
    const arr2 = new Map();
    arr2.set('a', 'a');
    arr2.set('b', 'b');
    for(let v of arr2.values()) {
        console.log(v)     // 'a' 'b'
    }
    
    二十六、keys() 返回迭代器——返回键值对的key
    //数组
    const arr = ['a', 'b', 'c'];
    for(let v of arr.keys()) {
        console.log(v)     // 0 1 2
    }
    
    //Set
    const arr1 = new Set(['a', 'b', 'c']);
    for(let v of arr1.keys()) {
        console.log(v)     // 'a' 'b' 'c'
    }
    
    //Map
    const arr2 = new Map();
    arr2.set('a', 'a');
    arr2.set('b', 'b');
    for(let v of arr2.keys()) {
        console.log(v)     // 'a' 'b'
    }
    
    二十七、includes()——判断数组中是否存在该元素,参数:查找的值、起始位置,可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN,会判断错误
    var arr = [1, 2, 3];
    console.log(arr .includes(2));     // true
    console.log(arr .includes(4));     // false
    console.log(arr .indexOf(2))     // 1
    console.log(arr .indexOf(4))     // -1
    

    相关文章

      网友评论

          本文标题:数组操作方法大全(包括ES6方法)

          本文链接:https://www.haomeiwen.com/subject/mhhqghtx.html