关于javascript:爆-肝-一-周-总-结-最全-JavaScript-Array-方法详解

前言

咱们在日常开发中，与接口打交道最多了，前端通过拜访后端接口，而后将接口数据二次解决渲染到页面当中。

二次解决的过程是考验 Coder 对 Array 是否纯熟以及在何种场景下应用哪种办法解决最优。

小编，在最近开发中就遇到了 Array 问题，在解决简单的业务需要时，没想到Array 有相似的办法，而后将办法组合起来解决当下问题。

文章用下班时间肝了一周才写完，看完点赞、转发是对我最大的反对。

遍历数组办法

不会扭转原数组的遍历办法

`forEach()`

forEach() 办法依照升序为数组中每一项执行一次给定的函数。

语法

arr.forEach(callback(currentValue , index , array) ，thisArg)

currentValue : 数组以后项值
index : 数组以后项索引
arr : 数组对象自身
thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。

留神

如果应用 箭头函数表达式来传入函数参数， thisArg 参数会被疏忽，因为箭头函数在词法上绑定了 this 值。
forEach 不会间接扭转调用它的对象，然而那个对象可能会被 callback 函数扭转。
every 不会扭转原数组。

//防盗贴：微信公众号: 前端自学社区const arr = [2,3,4,1,44]arr.forEach(val =>{    console.log(`值为${val*2}`)    })console.log(`原数组为${arr}`);// 值为4// 值为6// 值为8// 值为2// 值为88// 原数组为2,3,4,1,44

`reduce()`

reduce()数组元素累计器，返回一个合并的后果值。

语法

arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

accumulator : 累计器，默认为数组元素第一个值
currentValue : 以后值
index : 以后元素索引 可选
array : 数组 可选
initialValue : 初始值 可选

reduce 有两个参数，一个是回调函数，一个是初始值。

它有两种取值状况：

1. 当提供了 initialValue 初始值时，那么accumulator 的值为 initialValue , currentValue 的值为 数组第一个值
1. 当没有提供 initialValue 初始值时，那么 accumulator 的值为数组第一个值， currentValue 为第二个值。

留神

如果数组为空，且没有提供initialValue 初始值时，会抛出 TypeError .
如果数组有一个元素，且没有提供initialValue 或者提供了initialValue ，数组为空，那么惟一值被返回不会执行 callback 回调函数。

求和

//防盗贴：微信公众号: 前端自学社区/const arr = [1, 2, 3, 4]const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 10)console.log(sum) //20 // accumulator  累计器// currentValue  以后值// initialValue  累计 初始值 为10 //10 + 1 + 2 + 3 + 4## 留神// 回调函数第一次执行时，accumulator 和currentValue的取值有两种状况：// 如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；// 如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。

计算对象中的值

要累加对象数组中蕴含的值，必须提供初始值，以便各个item正确通过你的函数。

/* * @Description:  * @Author: 微信公众号: 前端自学社区 * @Date: 2021-08-07 00:53:51 * @LastEditTime: 2021-08-07 00:53:51 * @LastEditors: Do not edit */const data = [    {        date: '2021-8-1',        income: 200    },    {        date: '2021-8-2',        income: 400    },    {        date: '2021-8-3',        income: 300    },]console.log(`总收入： ${data.reduce( (pre,currentValue) => pre + currentValue.income,0)}`);//总收入： 900

二维数组转一位数组

const array = [[1,2],[3,4]]console.log(array.reduce((a,b) => a.concat(b)));//[ 1, 2, 3, 4 ]

`find()`

find() 返回满足特定条件的元素对象或者元素值，不满足返回 undefined

语法

arr.find((element,index,array), thisArg)

element ：以后元素
index : 以后元素索引 可选
array : 数组自身 可选
thisArg : 执行回调时用作this 的对象。 可选

// 从数据中找出第一个满足特定条件的对象const data = [    {        name:'张三',        article: 3    },    {        name:'老王',        article: 9    },    {        name:'老李',        article: 10    }]console.log(data.find(item => item.article > 9 ));// { name: '老李', article: 10 }

`findIndex()`

findIndex() 返回数组中符合条件的第一个元素的索引，没有，则返回 -1 。

语法

arr.findIndex((element,index,array), thisArg)

element ：以后元素
index : 以后元素索引 可选
array : 数组自身 可选
thisArg : 执行回调时用作this 的对象。 可选

const arr = [22,33,44,55]console.log(arr.findIndex(val => val > 33));    //2console.log(arr.findIndex(val => val > 99));    //-1

`key()`

key() 返回一个新的Array Iterator对象，该对象蕴含数组中每个索引的键。

语法

keys()

留神

如果数组中有空原元素，在获取key 时，也会退出遍历的队列中。

const inputModal = [    {        name:''    },    {        age:''    },    {        hobby:''    }]for(const key of inputModal.keys()){    console.log(key)}// 0// 1// 2const arr = [1,2,,3]for(const key of arr.keys()){    console.log(key);}// 0// 1// 2// 3//Object.keys() 办法会返回一个由一个给定对象的本身可枚举属性组成的数组// 所以 Object.keys(arr) = [ '0', '1', '3' ]for(const key of Object.keys(arr)){    console.log(key);}// 0// 1// 3

`values()`

values() 办法返回一个新的 Array Iterator 对象，该对象蕴含数组每个索引的值。

语法

arr.values()

const Color = ['red','yelloe','orange']for(val of Color.values()){    console.log(val);}// red// yelloe// orange

<hr/>

返回布尔值

`every()`

every 用来判断数组内所有元素是否合乎某个条件，返回 布尔值

语法

arr.every(callback(currentValue , index , array) ，thisArg)

currentValue : 数组以后项值 必须
index : 数组以后项索引 可选
arr : 数组对象自身可选
thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。可选

留神

当所有的元素都符合条件才会返回true
every 不会扭转原数组。
若传入一个空数组，无论如何都会返回 true。

//防盗贴：微信公众号: 前端自学社区const arr = [2,3,4,1,44]console.log(arr.every(val =>  val > 0 ));   //trueconsole.log(arr.every(val => { val > 2 })) //false

`some()`

some() 用来判断数组元素是否合乎某个条件，只有有一个元素合乎，那么返回 true.

语法

arr.some(callback(currentValue , index , array) ，thisArg)

currentValue : 数组以后项值 必须
index : 数组以后项索引 可选
arr : 数组对象自身可选
thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。可选

留神

some() 被调用时不会扭转数组。
如果用一个空数组进行测试，在任何状况下它返回的都是false。
some() 在遍历时，元素范畴曾经确定，在遍历过程中增加的元素，不会退出到遍历的序列中。

const arr = [2,3,4,1,44]console.log(arr.some(val => val > 2))  //trueconsole.log([].some(val => val > 2 )); //falseconst newList = [11,22,33,44]console.log(newList.some(val => {    newList.push(55)    newList.push(66)    val > 55}));   //false

不扭转原有数组，造成新的数组

`filter()`

filter() 用来遍历原数组，过滤拿到符合条件的数组元素，造成新的数组元素。

语法

arr.some(callback(currentValue , index , array) ，thisArg)

currentValue : 数组以后项值 必须
index : 数组以后项索引 可选
arr : 数组对象自身可选
thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。可选

留神

filter 不会扭转原数组，它返回过滤后的新数组。
filter() 在遍历时，元素范畴曾经确定，在遍历过程中增加的元素，不会退出到遍历的序列中。

const arr = [11,22,33,44,55,66] console.log(arr.filter(val => val > 44 ))console.log(`原数组为${arr}`);// [ 55, 66 ]// 原数组为11,22,33,44,55,66

`map()`

map() 创立一个新的数组，其后果是该数组中的每个元素都调用一个提供的函数后返回的后果。

语法

arr.map(callback(currentValue , index , array) ，thisArg)

currentValue : 数组以后项值 必须
index : 数组以后项索引 可选
arr : 数组对象自身可选
thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。可选

留神

map 不批改调用它的原数组自身
map() 在遍历时，元素范畴曾经确定，在遍历过程中增加的元素，不会退出到遍历的序列中。

const arr = [1,2,3,4]console.log(arr.map(val => val*3 ))  // [ 3, 6, 9, 12 ]console.log(arr)  // [ 1, 2, 3, 4 ]

<hr/>

数组 CRUD

扭转原数组办法

`reverse()`

reverse() 办法将数组中元素的地位颠倒，并返回该数组。数组的第一个元素会变成最初一个，数组的最初一个元素变成第一个。该办法会扭转原数组。

const arr = [1,2,3]console.log(arr.reverse(11,22,33))  //[ 3, 2, 1 ]

`sort()`

sort() 办法采纳 原地算法进行排序并返回数组。默认排序程序是在将元素转换为字符串，而后比拟它们的UTF-16代码单元值序列

原地算法是一个应用辅助的数据结构对输出进行转换的算法。然而，它容许有大量额定的存储空间来贮存辅助变量。当算法运行时，输出通常会被输入笼罩。原地算法仅通过替换或替换元素来更新输出序列。

const arr = [23,11,33,44,1]console.log(arr.sort())  //[ 1, 11, 23, 33, 44 ]const arr = [23,11,33,44,1000000000]console.log(arr.sort())  // [ 1000000000, 11, 23, 33, 44 ]

删除元素

`shift()`

shift() 办法从数组中删除第一个元素，并返回该元素的值。此办法更改数组的长度。

语法

arr.shift()

留神

从数组中删除的元素; 如果数组为空则返回undefined

const data = [    {        id:1,        name:'前端'    },    {        id:2,        name:'后端'    },    {        id:3,        name:'挪动端'    },    {        id:4,        name:'嵌入式开发'    },]const deleObj = data.shift()console.log('==============删除后的元素======================');console.log(data);console.log('=================删除后的元素===================');console.log('===============被删除的元素=====================');console.log(deleObj);console.log('================被删除的元素====================');//  ==============删除后的元素======================// [//     { id: 2, name: '后端' },//     { id: 3, name: '挪动端' },//     { id: 4, name: '嵌入式开发' }//   ]//   =================删除后的元素===================  //   ===============被删除的元素=====================//   { id: 1, name: '前端' }//   ================被删除的元素====================

`pop()`

pop()办法从数组中删除最初一个元素，并返回该元素的值。此办法更改数组的长度。

用法和 shift 相似。

语法

arr.pop()

留神

从数组中删除的元素; 如果数组为空则返回undefined

const data = [    {        id:1,        name:'前端'    },    {        id:2,        name:'后端'    },    {        id:3,        name:'挪动端'    },    {        id:4,        name:'嵌入式开发'    },]const deleObj = data.pop()console.log(data);// [//     { id: 1, name: '前端' },//     { id: 2, name: '后端' },//     { id: 3, name: '挪动端' }// ]console.log(deleObj);// { id: 4, name: '嵌入式开发' }

`splice()`

splice() 办法通过删除或替换现有元素或者原地增加新的元素来批改数组,并以数组模式返回被批改的内容。此办法会扭转原数组。

语法

array.splice(start,deleteCount, [item1,item2....])

start : 开始的索引
deleteCount : 删除的个数 可选
[item1，item2 .....] ；从开始的索引进行增加的减少和替换的元素， 可选

留神

由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只蕴含一个元素的数组。如果没有删除元素，则返回空数组。

如果只传递了开始的索引地位，则会删除索引后的所有元素对象

const data = [    {        id:1,        name:'前端'    },    {        id:2,        name:'后端'    },    {        id:3,        name:'挪动端'    },    {        id:4,        name:'嵌入式开发'    },]data.splice(1)console.log(data)// [ { id: 1, name: '前端' } ]

从索引为 2 开始，删除 1 个数组元素对象，增加两个数组元素对象

const data = [    {        id:1,        name:'前端'    },    {        id:2,        name:'后端'    },    {        id:3,        name:'挪动端'    },    {        id:4,        name:'嵌入式开发'    },]data.splice(2,1,...[{id:5,name:'人工智能'},{id:6,name:'大数据开发'}])console.log(data);// [//     { id: 1, name: '前端' },//     { id: 2, name: '后端' },//     { id: 5, name: '人工智能' },//     { id: 6, name: '大数据开发' },//     { id: 4, name: '嵌入式开发' }// ]

减少元素

`splice()`

下面曾经有介绍

`push()`

push() 办法将一个或多个元素增加到数组的开端，并返回该数组的新长度。

语法

arr.push(element1, ..., elementN)

const data = [    {        id:1,        name:'前端'    },    {        id:2,        name:'后端'    },]console.log(data.push({id:3,name:'挪动端'}))  //3

合并数组

const data = [    {        id:1,        name:'前端'    },    {        id:2,        name:'后端'    },]var obj = [    {        id:4,        name:'嵌入式开发'    },]// 相当于 data.push({id:4,name:'嵌入式开发'});Array.prototype.push.apply(data, obj);console.log(data);[  { id: 1, name: '前端' },  { id: 2, name: '后端' },  { id: 4, name: '嵌入式开发' }]

`unshift()`

unshift() 办法将一个或多个元素增加到数组的结尾，并返回该数组的新长度。

const arr = [1,2,3]console.log(arr.unshift(11,22,33))  //6 console.log(arr)  //[ 11, 22, 33, 1, 2, 3 ]

不扭转原数组元素办法

`indexOf()`

indexOf()办法返回能够在数组中找到给定元素的第一个索引，如果不存在，则返回 -1。

语法

indexOf(searchElement)indexOf(searchElement, fromIndex)

searchElement : 要查找的元素
fromIndex ：按指定的索引进行查找呈现的指定元素的第一个索引。 可选
- 如果索引大于或等于数组的长度，则返回-1
- 如果提供的索引值为正数，则将其视为距数组开端的偏移量
- 如果提供的索引为正数，依然从前到后搜寻数组
- 如果提供的索引为 0，则将搜寻整个数组。
- 默认值：0（搜寻整个数组）。

const arr = [1,1,2,3,4,5,4,4,6]console.log(arr.indexOf(3));  //3console.log(arr.indexOf(9));  //-1console.log(arr.indexOf(3,4)); //-1//从索引为 4 的元素进行查找 3, 显然前面没有3 ， 返回 -1

数组去重

创立一个新的空数组，通过indexOf 来判断空数组是否第一次存在某个元素，

不存在则返回 [ < 0 ] ，push 到空数组中.

const newArr = []arr.forEach(val => {    if(newArr.indexOf(val) < 0){       newArr.push(val)    }})console.log(newArr);// [ 1, 2, 3, 4, 5, 6 ]

`lastIndexOf()`

lastIndexOf() 查找数组中元素最初一次呈现的索引，如未找到返回-1。

如果不存在则返回 -1。从数组的前面向前查找，从 fromIndex 处开始。

语法

arr.lastIndexOf(searchElement, fromIndex)

searchElement : 要查找的元素
fromIndex ：按指定的索引进行查找呈现的指定元素的第一个索引。 可选
- 从指定的索引地位逆向查找
- 默认为数组的长度减 1(arr.length - 1)，即整个数组都被查找。
- 如果该值大于或等于数组的长度，则整个数组会被查找。
- 如果为负值，数组依然会被从后向前查找。
- 如果该值为负时，其绝对值大于数组长度，则办法返回 -1，即数组不会被查找。

留神

lastIndexOf 应用的是 严格相等 === 比拟 searchElement 和数组中的元素。

const arr = [1,1,2,3,4,5,4,4,6]console.log(arr.lastIndexOf(4)); //7console.log(arr.lastIndexOf(4,11));  //7    指定的查找的索引 大于 数组的长度， 会进行整个数组查找console.log(arr.lastIndexOf(4,-33));// -1   指定的索引为正数，且绝对值大于数组长度， 则返回 -1console.log(arr.lastIndexOf(4,-5));//4    指定的索引为正数，且绝对值小于数组长度， 则会 从向前进行查找

`inCludes()`

includes() 办法用来判断一个数组是否蕴含一个指定的值，依据状况，如果蕴含则返回 true，否则返回false。

语法

arr.includes(searchElement, fromIndex)

searchElement : 要查找的元素
查找时，辨别大小写
fromIndex ：按指定的索引进行查找呈现的指定元素的第一个索引。 可选
- 从指定的索引进行查找
- 如果为负值，则按升序从 array.length + fromIndex 的索引开始搜
- 如果 fromIndex 大于等于数组的长度，则会返回 false，且该数组不会被搜寻。
- 默认为0

const arr = [1,1,2,3,4,5,4,4,6]console.log(arr.includes(4)); //trueconsole.log(arr.includes(4,66)); //falseconsole.log(arr.includes(1,-1)); //false

`concat()`

concat() 办法用于合并两个或多个数组。

语法

var new_array = old_array.concat([arr1][arr2])

留神

concat办法不会扭转this或任何作为参数提供的数组，而是返回一个浅拷贝，它蕴含与原始数组相结合的雷同元素的正本
- 对象援用（而不是理论对象）：concat将对象援用复制到新数组中。原始数组和新数组都援用雷同的对象。也就是说，如果援用的对象被批改，则更改对于新数组和原始数组都是可见的。这包含也是数组的数组参数的元素。
- 数据类型如字符串，数字和布尔（不是String，Number和 Boolean) 对象）：concat将字符串和数字的值复制到新数组中。

let arr1 = [1,2,3]let arr2 = [4,5,6]let arr3 = [[1,2],[3,4]]console.log(arr1.concat(arr2));//[ 1, 2, 3, 4, 5, 6 ]// 嵌套合并console.log(arr1.concat(arr2).concat(arr3));// [ 1, 2, 3, 4, 5, 6, [ 1, 2 ], [ 3, 4 ] ]let obj1 = [{a:1},{b:2}]let obj2 = [{c:3},{d:4}]let obj3 = obj1.concat(obj2)  console.log(obj3); //[ { a: 1 }, { b: 2 }, { c: 3 }, { d: 4 } ]obj1[0].a = 4  //扭转obj[0]对象值，会间接影响合并后的数组，因为是浅拷贝console.log(obj3); //[ { a: 4 }, { b: 2 }, { c: 3 }, { d: 4 } ]

`toString()`

toString() 返回一个字符串，示意指定的数组及其元素。

当一个数组被作为文本值或者进行字符串连贯操作时，将会主动调用其 toString 办法。

对于数组对象，toString 办法连贯数组并返回一个字符串，其中蕴含用逗号分隔的每个数组元素。

语法

arr.toString()

const arr = [1,2,3]console.log(arr.toString());  //1,2,3

`join()`

join()办法通过连贯数组元素用逗号或指定的分隔符字符串分隔，返回一个字符串。

如果数组只有一项，则将在不应用分隔符的状况下返回该项。

语法

join()join(separator)

separator : 指定的宰割的字符 可选

const arr = ['2021','08','08']console.log(arr.join());     //2021,08,08console.log(arr.join('-'));  //2021-08-08console.log(arr.join('/'));  //2021/08/08

`slice()`

slice() 办法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包含 begin，不包含end）。原始数组不会被扭转。

语法

arr.slice(begin, end)

begin : 指定截取的开始索引 可选
- 默认从0 开始
- 如果begin 为正数，则以数组开端开始的绝对值开始截取 slice(-2) 开端第2个元素
- 如果 begin 超出原数组的索引范畴，则会返回空数组。
end : 指定截取的完结索引 可选
- 如果 end 被省略，则 slice 会始终提取到原数组开端。
- 如果 end 大于数组的长度，slice 也会始终提取到原数组开端。
- 如果 end 为正数，则它示意在原数组中的倒数第几个元素完结抽取。

const arr = [11,22,33,44,55,66,77,88]console.log(arr.slice(1,4));// 应该返回 索引 1 - 3 的数组元素// [ 22, 33, 44 ]console.log(arr.slice(-4,2))  //[]console.log(arr.slice(-4));   //[ 55, 66, 77, 88 ]console.log(arr.slice(0,-1));// [//     11, 22, 33, 44,//     55, 66, 77//   ]

参考文献

Array - JavaScript | MDN

往期精彩文章

Vue 组件通信的 8 种形式
Vue3 + TypeScript 开发实际总结
Vue 权限路由+数据权限最佳实际

最初

文章用下班时间肝了一周，写作不易，文中的内容都是参考 MDN 文档。
如果喜爱的话能够点赞关注，反对一下，心愿大家能够看完本文有所播种！

前言

文章用下班时间肝了一周才写完，看完点赞、转发 是对我最大的反对。

遍历数组办法

不会扭转原数组的遍历办法

forEach()

reduce()

find()

findIndex()

key()

values()

返回 布尔值

every()

some()

不扭转原有数组，造成新的数组

filter()

map()

数组 CRUD

扭转原数组办法

reverse()

sort()

删除元素

shift()

pop()

splice()

减少元素

splice()

push()

unshift()

不扭转原数组元素办法

indexOf()

lastIndexOf()

inCludes()

concat()

toString()

join()

slice()

参考文献

往期精彩文章

最初

文章用下班时间肝了一周才写完，看完点赞、转发是对我最大的反对。

`forEach()`

`reduce()`

`find()`

`findIndex()`

`key()`

`values()`

返回布尔值

`every()`

`some()`

`filter()`

`map()`

`reverse()`

`sort()`

`shift()`

`pop()`

`splice()`

`splice()`

`push()`

`unshift()`

`indexOf()`

`lastIndexOf()`

`inCludes()`

`concat()`

`toString()`

`join()`

`slice()`