数组方法集合(包含es6)

新接触的项目中有es6的数组方法,开始不是太理解,但是确实让开发变得更加便捷,遂整理如下:

改变数组的方法--->
1.arr.push() 从数组后边添加元素,返回值为添加完成后数组的长度
  let arrPush = [1, 2, 3, 4, 5]
  console.log(arrPush.push(6)) //6返回值是数组的长度
  consolelog(arrPush) //[1,2,3,4,5,6]
2.arr.pop()从数组后边删除元素,返回值是删除的元素
  let arrPop = [1, 2, 3, 4, 5]
  console.log(arrPop.pop()) //5
  console.log(arrPop) //[1,2,3,4]
3.arr.shift()从数组前边删除元素,返回值是删除的元素
    let arrShift = [1, 2, 3, 4, 5];
    console.log(arrShift.shift()) //1
    console.log(arrShift) //[2,3,4,5]
4.arr.unshift()从数组前边添加元素,返回值是添加完之后数组的长度
   let arrUnshift = [1, 2, 3, 4, 5];
   console.log(arrUnshift.unshift(0)); //6
   console.log(arrUnshift) //[0,1,2,3,4,5]
5.arr.splice(i,n)从索引为i的位置开始删除,n是删除的个数,即从索引i开始删除n个项,返回值是删除的元素
let arrSplice = [1, 2, 3, 4, 5];
console.log(arrSplice.splice(1, 2)) //2,3
console.log(arrSplice) //1,4,5
6.arr.reverse()数组反转,返回值是翻转后的数组
 let arrReverse = [1, 2, 3, 4, 5];
 conole.log(arrReverse.reverse()) //[5,4,3,2,1]
 conole.log(arrReverse) //[5,4,3,2,1]
7.arr.copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
 //语法:arr.copyWithin(target[, start[, end]])
// target
 // 0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。
 // 如果 target 大于等于 arr.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。

// start
/ 0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。
// 如果 start 被忽略，copyWithin 将会从0开始复制。

// end
// 0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。
// 如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）。
 let array1 = ['a', 'b', 'c', 'd', 'e'];

// copy to index 0 the element at index 3
 console.log(array1.copyWithin(0, 3, 4)); // ["d", "b", "c", "d", "e"]
// copy to index 1 all elements from index 3 to the end
 console.log(array1.copyWithin(1, 3)); //["d", "d", "e", "d", "e"]
 console.log(array1) // ["d", "d", "e", "d", "e"]

 let numbers = [1,2,3,4,5];
 numbers.copyWithin(-2); // [1, 2, 3, 1, 2]
 numbers.copyWithin(0, 3); // [4, 5, 3, 4, 5]
 numbers.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
 numbers.copyWithin(-2, -3, -1); // [1, 2, 3, 3, 4]
8.arr.sort()将数组按照字符编码的顺序进行排序 返回值是排好的数组,默认是按照最左边的数字进行排序,不是按照数字大小排序
let arrSort = [1, 3, 2, 14, 5];
console.log(arrSort.sort()) //[1, 14, 2, 3, 5]
console.log(arrSort.sort((m, n) => m - n)) //[1,2,3,5,14]
console.log(arrSort.sort((m, n) => n - m)) //[14,5,3,2,1]
不改变数组的方法--->
1.arr.concat() 连接两个数组 返回值为连接后的新数组
let arrConcat = [1, 2, 3, 4, 5];
console.log(arrConcat.concat([6, 7])) //[1,2,3,4,5,6,7]
console.log(arrConcat) //[1,2,3,4,5]
2.arr.split()将字符串转化为数组,返回值就是转化后的数组
 let str = "12345";
 console.log(str.split("")); //[1,2,3,4,5]
3.arr.slice(start,end)从start开始截止到end,不包含end,返回的是截取出来的数组
 var arrSlice = [1, 2, 3, 4, 5];
 console.log(arrSlice.slice(1, 3)) //2,3
 console.log(arrSlice) //[1,2,3,4,5]
4.arr.forEach(value,index,array)遍历数组,相当与for循环,无返回值
   let arr = [1, 2, 3, 4, 5]
   arr.forEach((value, index, array) => {
     console.log(`value:${value}    index:${index}     array:${array}`)
  })
  //  value:1    index:0     array:1,2,3,4,5
  //  value:2    index:1     array:1,2,3,4,5
  //  value:3    index:2     array:1,2,3,4,5
  //  value:4    index:3     array:1,2,3,4,5
  //  value:5    index:4     array:1,2,3,4,5
5.arr.map(value,index,array)遍历数组,返回一个新的数组
   let arr = [1, 2, 3, 4, 5]
   arr.map((value, index, array) => {
   console.log(`value:${value}    index:${index}     array:${array}`)
 })
  //  value:1    index:0     array:1,2,3,4,5
  //  value:2    index:1     array:1,2,3,4,5
  //  value:3    index:2     array:1,2,3,4,5
  //  value:4    index:3     array:1,2,3,4,5
  //  value:5    index:4     array:1,2,3,4,5
6.arr.filter(value,index,array)过滤数组,返回一个满足要求的数组,不改变原始数组
  var arrFilter = [1, 2, 3, 4, 5];
  console.log(arrFilter.filter((item) => item <= 3)); //[1,2,3]
  console.log(arrFilter) //[1,2,3,4,5] 
//数组方法中的map和filter的区别:一般如果我们要操作数组的话,就实用Map.而一般仅仅是过滤数组中满足条件的项的话,我们就使用filter
7.arr.every()根据条件判断,如果所有项都满足这个条件,则返回true,如果有一项不满足,则返回false,返回值是布尔值
  let arrEvery = [1, 2, 3, 4, 5]
  console.log(arrEvery.every(item => item > 3)) //false
8.arr.some()遍历数组,根据条件判断,如果有一项满足则返回true,如果都不满足则返回false
let arrSome = [1, 2, 3, 4, 5];
console.log(arrSome.some(item => item >= 3)) //true
console.log(arrSome.some(item => item >= 6)) //false
9.arr.reduce(callback,initialValue)迭代数组的所有项,累加器,数组中的每个值(从左到右)合并,最终计算为一个值
 //参数 callback:previousValue:必选--上一次调用回调返回的值,或者是提供的初始值(initivalValue)
//    currentValue:必选--数组中当前被处理的数组项
//    index可选--当前数组项在数组中的索引值
//    array可选--初始值
//应用场景1:数组中所有值的和
let arrReduce = [1, 2, 3, 4, 5];
let sum = arrReduce.reduce((preVal, curVal) => preVal + curVal);
console.log(sum) //15
//应用场景2:累加对象数组里面的值
let initivalValue = 0
let arrObj = [{
     x: 1
}, {
    x: 2
}, {
    x: 3
}]
let objSum = arrObj.reduce((preVal, curVal) => preVal + curVal, initivalValue)
console.log(objSum) //6
//应用场景3:将二维数组转化为一维数组
let flattened = [
  [0, 1],
  [2, 3],
  [4, 5]
].reduce((preVal, curVal) => preVal.concat(curVal))
 console.log(flattened) //[0,1,2,3,4,5];
//应用场景4:计算数组中每个元素出现的次数
let names = ['Clice', 'BOb', 'Tiff', 'Bruce', 'Alice'];
let count = names.reduce((nameObj, name) => {
            if (name in nameObj) {
                nameObj[name]++
            } else {
                nameObj[name] = 1
            }
            return nameObj
        })
console.log(count) //{ 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
10.arr.reduceRight(callback,initivalValue)与arr.redduce()的功能一样,不同的是,reduceRight是从数组的末尾向前将数组中的每一项进行累加(参考上例理解即可)
11.arr.indexOf()查看某个元素的索引值,若有重复的,则返回第一个查到的索引值,若不存在,则返回-1
        let arrIndexOf = [1, 2, 3, 4, 5];
        console.log(arrIndexOf.indexOf(2)) //  1 存在
        console.log(arrIndexOf.indexOf(9)) // -1 不存在
12.arr.lastIndexOf()和arr.indexOf()的功能一样，不同的是从后往前查找(参考上例理解即可)
13.arr.from()将伪数组变成数组,只要有length就可以转成数组 --es6
//注意转化对象的时候,只有当其中有length这个属性才能转化,而且对象中的key值只有从索引为0开始才能生效
        let str = '张三';
        Array.from(str) //['张','三']

        let fromObj = {
            0: "张三",
            1: 18,
            2: "man",
            length: 3
        }
        Array.from(fromObj) // ["张三", 18, "man"]
        let fromObj1 = {
            name: "张三",
            age: 18,
            sex: "man",
            length: 3
        }
        Array.from(fromObj1) //[undefined,undefined,undefined]
14.arr.of()将一组值转换成数组，类似于声明数组
//Array.of()和Array构造函数之间的区别在于处理整数参数:Array.of(7)创建一个具有单个元素7的数组.
//Array(7)创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)

  console.log(Array.of(7)) // [7]
  console.log(Array.of(1,2,3)) // [1,2,3]
  console.log(Array(7)) // [empty*7] [ , , , , , , ]
  console.log(Array(1,2,3)) // [1,2,3]
15.arr.find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
        let arrFind = [5, 12, 8, 130, 44];

        var found = arrFind.find(function(element) {
            return element > 10;
        });

        console.log(found); //12
16.arr.findIndex()返回数组中满足提供的测试函数的第一个元素的索引,否则，返回-1
        var arrFindIndex = [5, 12, 8, 130, 44];
        console.log(arrFindIndex.findIndex(element => element >13)); // 3 即130
17.arr.includes()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
        // 注意：对象数组不能使用includes方法来检测。
        let arrIncludes = [1, 2, 3];
        console.log(arrIncludes.includes(2));  //  true
        let pets = ['cat', 'dog', 'bat'];
        console.log(pets.includes('cat')); //  true
        console.log(pets.includes('at')); //  false
18.arr.keys()方法返回一个包含数组中每个索引键的Array Iterator对象
        var arrKeys = ['a', 'b', 'c'];
        var iterator = arrKeys.keys(); 

        for (let key of iterator) {
          console.log(key); //  0 1 2
        }
19.arr.values()方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值
        let arrValues = ['a', 'b', 'c'];
        let iterator = arrValues.values();

        for (const value of iterator) {
          console.log(value); //  "a" "b" "c"
        }
20.arr.entries()方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
        var arrEntries = ["a", "b", "c"];
        var iterator = arrEntries.entries();
        // undefined

        for (let e of iterator) {
            console.log(e);
        }

        // [0, "a"] 
        // [1, "b"] 
        // [2, "c"]
21.arr.flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
        //语法 : var newArray = arr.flat([depth])
        //参数 : depth 可选 指定要提取嵌套数组的结构深度，默认值为 1。

        //实际用途1: 嵌套数组扁平化
        var arr1 = [1, 2, [3, 4]];
        arr1.flat(); // [1, 2, 3, 4]

        var arr2 = [1, 2, [3, 4, [5, 6]]];
        arr2.flat(); // [1, 2, 3, 4, [5, 6]]

        var arr3 = [1, 2, [3, 4, [5, 6]]];
        arr3.flat(2); // [1, 2, 3, 4, 5, 6]

        //使用 Infinity 作为深度，展开任意深度的嵌套数组
        arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]

        //实际用途2: flat() 方法会移除数组中的空项:
        var arr4 = [1, 2, , 4, 5];
        arr4.flat(); // [1, 2, 4, 5]
22.arr.flatMap()方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
        //语法 : var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
        //              返回新数组的元素
        //       }[, thisArg])

        var arr1 = [1, 2, 3, 4];

        arr1.map(x => [x * 2]); // [[2], [4], [6], [8]]

        arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8]

        // 只会将 flatMap 中的函数返回的数组 “压平” 一层
        arr1.flatMap(x => [
            [x * 2]  // [[2], [4], [6], [8]]
        ]);
        

        //下边示例更好的说明了flatMap的用法特性
        let arr = ["今天天气不错", "", "早上好"]

        arr.map(s => s.split("")) // [["今", "天", "天", "气", "不", "错"],[],["早", "上", "好"]]


        arr.flatMap(s => s.split('')); // ["今", "天", "天", "气", "不", "错", "早", "上", "好"]
23.arr.slice()方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
        let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
        let citrus = fruits.slice(1, 3);
        console.log(citrus) // ['Orange','Lemon']
        console.log(fruits) // ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
24.arr.join()方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
        let a = ['Wind', 'Rain', 'Fire'];
        let myVar1 = a.join(); // myVar1的值变为"Wind,Rain,Fire"
        let myVar2 = a.join(', '); // myVar2的值变为"Wind, Rain, Fire"
        let myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
        let myVar4 = a.join(''); // myVar4的值变为"WindRainFire"
        console.log(1) // ['Wind', 'Rain', 'Fire']
上述示例只是大概对相关方法进行了一些简单的展示,具体还需要在具体的项目中进行更深的研究,有问题的地方希望大家指正,共同学习,共同进步.
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,117评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,963评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 107,897评论 0赞 240
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,805评论 0赞 203
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,208评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,535评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,797评论 2赞 311
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,493评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,215评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,325评论 2赞 252
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,971评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2赞 266