数组相关方法使用笔记

赵花花5070

已于 2023-05-08 18:18:32 修改

阅读量460

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html5

于 2022-07-20 22:05:32 首次发布

本文链接：https://blog.csdn.net/weixin_42728767/article/details/125882539

版权

JavaScript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

`Array.push() 向数组的末尾添加新内容`

参数：要添加的项。传递多个用逗号（,）隔开，任何数据类型都可以

返回值：新增后数组的长度

是否改变原数组：改变

var arr = [1,2,3,4]

console.log('newArry::', arr.push(1), arr)

// VM1023:3 newArry:: 5 (5) [1, 2, 3, 4, 1] 返回数组的长度

`Array.pop() 删除数组的最后一项`

参数：无

返回值：被删除的项

是否改变原数组：改变

var arr = [1,2,3,4]

console.log('newArry::', arr.pop(), arr)
// VM1052:3 newArry:: 4 (3) [1, 2, 3]

`Array.unshift() 向数组首位添加新内容`

参数：要添加的项，多项用逗号（,）隔开

返回值：新数组的长度

是否改变原数组：改变

var arr = [1,2,3,4]

console.log('newArry::', arr.unshift(11), arr)
// VM1098:3 newArry:: 5 (5) [11, 1, 2, 3, 4]

`Array.shift() 删除数组的第一项`

参数：无

返回值：被删除的项

是否改变原数组：改变

var arr = [1,2,3,4]

console.log('newArry::', arr.shift(11), arr)
// VM1108:3 newArry:: 1 (3) [2, 3, 4]  
// 删除第一个，改变了原数组，传递参数也不会影响运行结果，不报错

`Array.slice() 根据开始索引和结束索引实现对原数组内容的截取`

参数：Array.slice(开始索引，结束索引)

从索引 n开始查找到 m处（不包含m）

array.slice(n, m)

第二个参数省略，则一直查找到末尾

array.slice(n)

原样输出内容，可以实现数组克隆

array.slice(0)

slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项，依次类推

array.slice(-n, -m) -m 可以不写，表示倒数第 n 项开始截取

返回值：返回一个新数组

是否改变原数组：不改变

// 场景一：
var arr = [1,2,3,4]
console.log('newArry::', arr.slice(0, 1), arr)
// VM1210:3 newArry:: [1] (4) [1, 2, 3, 4]

// 场景二：
var arr = [1,2,3,4]
console.log('newArry::', arr.slice(1), arr)
// VM1239:3 newArry:: (3) [2, 3, 4] (4) [1, 2, 3, 4]

// 场景三：
var arr = [1,2,3,4]
console.log('newArry::', arr.slice(0), arr)
// VM1256:3 newArry:: (4) [1, 2, 3, 4] (4) [1, 2, 3, 4]

// 场景四：
var arr = [1,2,3,4]
console.log('newArry::', arr.slice(-2), arr)
// VM1349:3 newArry:: (2) [3, 4] (4) [1, 2, 3, 4]

// 场景五：
var arr = [1,2,3,4]
console.log('newArry::', arr.slice(-3,-1), arr)
// VM1493:3 newArry:: (2) [2, 3] (4) [1, 2, 3, 4]

`Array.splice() 对数组进行增，删，改`

参数：Array.splice(索引，长度，替换内容)

返回值：返回删除的新数组

是否改变原数组：改变

// 增加
ary.splice(n,0,m)
// 结论：从索引n开始删除0项，把m或者更多的内容插入到索引n的前面（返回空数组）


// 修改
ary.splice(n,x,m)
// 结论：从索引n开始删除x个，m替换删除的部分（把原有内容删除掉，然后用新内容替换掉）


// 删除
ary.splice(n,m)
// 结论：从索引n开始删除m个内容（如果第二个参数省略，则从n删除到末尾）

`Array.join() 用指定的分隔符将数组每一项拼接为字符串（将数组转换为字符串）`

参数：指定的分隔符（如果省略该参数，则使用逗号作为分隔符）

返回值：拼接好的字符串

是否改变原数组：不改变

var arr = [1,2,3,4]

console.log('newArry::', arr.join(','))
VM930:3 newArry:: 1,2,3,4

`Array.concat() 用于连接两个或多个数组`

参数：参数可以是具体的值，也可以是数组，对象。可以是任意多个

返回值：返回连接后的新数组

是否改变原数组：不改变

var arr = [1,2,3,4]
var b = [6,7,8,['1','2'],'asda','dgdgd','中文', {aa:122}]

console.log('newArry::', arr.concat(b))
/*
VM844:4 newArry:: 
(12) [1, 2, 3, 4, 6, 7, 8, Array(2), 'asda', 'dgdgd', '中文', {…}]
	0: 1
	1: 2
	2: 3
	3: 4
	4: 6
	5: 7
	6: 8
	7: (2) ['1', '2']
	8: "asda"
	9: "dgdgd"
	10: "中文"
	11: {aa: 122}
	length: 12
	[[Prototype]]: Array(0)
*/

`Array.map() 循环遍历数组每一项`

参数：Array.map((currentValue, index, arr) => {})

currentValue: 【必需】当前每一项
index: 【可选】当前每一项的索引值
arr: 【可选】当前数组（一般不用传递）

返回值：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

是否改变原数组：不改变

注意： map() 不会对空数组进行检测。

var arr = [1,2,3,4]

var newArry = arr.map((e, index,arr) => {
    console.log('输出每一项：：',e, index,arr)
    return e + 3
})
console.log('newArry::', newArry, arr)

/*
输出每一项：： 1 0 (4) [1, 2, 3, 4]
VM590:4 输出每一项：： 2 1 (4) [1, 2, 3, 4]
VM590:4 输出每一项：： 3 2 (4) [1, 2, 3, 4]
VM590:4 输出每一项：： 4 3 (4) [1, 2, 3, 4]
VM590:7 newArry:: (4) [4, 5, 6, 7] (4) [1, 2, 3, 4]  // 从这里可以看出并没有改变原数组数据
*/

`Array.forEach() 循环遍历数组每一项`

forEach的优势就是，它传入一个函数，因此形成了一个作用域，它内部所定义的变量不会像for循环一样污染全局变量
forEach()本身无法跳出循环，必须遍历所有的数据才能结束

参数：array.forEach((item, index, array) => {})

item: 当前每一项 
index: 当前每一项的索引值
arry: 当前数组（一般不用传递）

返回值：无

是否改变原数组：不改变

var arr = [1,2,3,4]
var newArry = arr.forEach((item, index, arr)=>{
    console.log('输出每一项：', item, index, arr)
    return item + 1
})

console.log('newArry::', newArry, arr)
/*
VM1876:5 输出每一项： 1 0 (4) [1, 2, 3, 4]
VM1876:5 输出每一项： 2 1 (4) [1, 2, 3, 4]
VM1876:5 输出每一项： 3 2 (4) [1, 2, 3, 4]
VM1876:5 输出每一项： 4 3 (4) [1, 2, 3, 4]
VM1876:10 newArry:: undefined (4) [1, 2, 3, 4]
*/

注意：
forEach中不能使用continue和break跳出循环，浏览器会报错。
也不能使用return跳出循环，没效果。
只能使用three Error('手动跳出循环')

`报错 break`

var arr = [1,2,3,4]
var newArry = arr.forEach((item, index, arr)=>{
    console.log('输出每一项：', item, index, arr)
    if(item == 2) break
})

console.log('newArry::', newArry, arr)
// VM1987:7 Uncaught SyntaxError: Illegal break statement（浏览器报错，非法中断语句）

`报错 continue`

var arr = [1,2,3,4]
var newArry = arr.forEach((item, index, arr)=>{
    console.log('输出每一项：', item, index, arr)
    if(item == 2) continue;
})

console.log('newArry::', newArry, arr)
// VM2002:7 Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement（浏览器报错，非法的continue语句：没有周围的迭代语句）

`无效 return`

var arr = [1,2,3,4]
var newArry = arr.forEach((item, index, arr)=>{
    console.log('输出每一项：', item, index, arr)
    if(item == 2) return
})

console.log('newArry::', newArry, arr)
/*
VM1966:5 输出每一项： 1 0 (4) [1, 2, 3, 4]
VM1966:5 输出每一项： 2 1 (4) [1, 2, 3, 4]
VM1966:5 输出每一项： 3 2 (4) [1, 2, 3, 4]
VM1966:5 输出每一项： 4 3 (4) [1, 2, 3, 4]
VM1966:10 newArry:: undefined (4) [1, 2, 3, 4]
*/

`有效 throw Error('手动报错跳出循环')`

var arr = [1,2,3,4]
var newArry = arr.forEach((item, index, arr)=>{
    console.log('输出每一项：', item, index, arr)
    if(item == 2) throw Error('111');
})

console.log('newArry::', newArry, arr)
/*
VM2116:5 输出每一项： 1 0 (4) [1, 2, 3, 4]
VM2116:5 输出每一项： 2 1 (4) [1, 2, 3, 4]
VM2116:7 Uncaught Error: 111
    at <anonymous>:7:25
    at Array.forEach (<anonymous>)
    at <anonymous>:3:19
*/

`Array.some() 循环遍历数组中每一项，找到就返回true,不再继续执行，未找到返回false`

参数：Array.some((item, index, arr)=> {})

返回值：true 或者 false

true：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测

false: 如果没有满足条件的元素，则返回false。

是否改变原数组：不改变

// 匹配到内容
var arr = [1,2,3,4]
console.log('newArry::', arr.some((item, index, arr)=> item === 2), arr)
// VM2343:5 newArry:: true (4) [1, 2, 3, 4]

// 未匹配到内容
var arr = [1,2,3,4]
console.log('newArry::', arr.some((item, index, arr)=> item === 9), arr)
VM2355:5 newArry:: false (4) [1, 2, 3, 4]

`Array.every() 所有元素满足条件返回true，有一个不满足终止执行，返回false`

参数：Array.every((item, index, arr)=> {})

返回值：true / false

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

如果所有元素都满足条件，则返回 true。

是否改变原数组：不改变

注意： every() 不会对空数组进行检测。

var arr = [1,2,3,4]
var f = arr.every((item, index, arr)=> {
    console.log('输出每一项::', item, index, arr)
    return item ===9
})
console.log('newArry::', f, arr)
/*
VM2789:4 输出每一项:: 1 0 (4) [1, 2, 3, 4]
VM2789:8 newArry:: false (4) [1, 2, 3, 4]
*/

var arr = [1,2,3,4]
var f = arr.every((item, index, arr)=> {
    console.log('输出每一项::', item, index, arr)
    return item > 3
})
console.log('newArry::', f, arr)
/*
VM2765:4 输出每一项:: 1 0 (4) [1, 2, 3, 4]
VM2765:8 newArry:: false (4) [1, 2, 3, 4]
*/

var arr = [1,2,3,4]
console.log('newArry::', arr.every((item, index, arr)=> item < 9), arr)
// VM2384:5 newArry:: true (4) [1, 2, 3, 4]

`Array.filter() 对数组中的元素进行过滤`

参数：Array.filter((item, index, arr)=> {})
返回值：返回新的数组
是否改变原数组：不改变

// 场景一
var arr = [1,2,3,4]
var f = arr.filter((item, index, arr)=> item > 3)
console.log('newArry::', f, arr)
// VM2860:5 newArry:: [4] (4) [1, 2, 3, 4]

// 场景二
var arr = [{id:1},{id:2},{id:3}]
var f = arr.filter((item, index, arr)=> item.id > 3)
console.log('newArry::', f, arr)
// VM2986:5 newArry:: [] (3) [{…}, {…}, {…}]

`Array.reduce() 累加计算获取某个值（计算顺序：从左到右）`

参数：Array.reduce((total, current, index, arr)=>{}, initVal) 接收一个函数和一个初始值（可选）
total, current： 必选参数
index, arr： 可选参数
返回值：返回一个值
是否改变原数组：不改变

// 场景一
var arr = [1,2,3,4]
var f = arr.reduce((total, current, index, arr) => {
    console.log('输出每一项：', total, current, index, arr)
    return total += current
}, 0)

console.log('newArry::', f, arr)
/*
VM3489:4 输出每一项： 0 1 0 (4) [1, 2, 3, 4]
VM3489:4 输出每一项： 1 2 1 (4) [1, 2, 3, 4]
VM3489:4 输出每一项： 3 3 2 (4) [1, 2, 3, 4]
VM3489:4 输出每一项： 6 4 3 (4) [1, 2, 3, 4]
VM3489:8 newArry:: 10 (4) [1, 2, 3, 4]
*/

// 场景二
var _myObj = {
    a: {
        b: {
            c: 123
        }
    }
}

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

var f = arr.reduce((total, current, index, arr) => {
    console.log('输出每一项：', total, current, index, arr)
    return total[current]
}, _myObj)

console.log('newArry::', f, arr)
/*
VM3803:12 输出每一项： {a: {…}} a 0 (3) ['a', 'b', 'c']
VM3803:12 输出每一项： {b: {…}}b: {c: 123}[[Prototype]]: Object b 1 (3) ['a', 'b', 'c']
VM3803:12 输出每一项： {c: 123} c 2 (3) ['a', 'b', 'c']
VM3803:16 newArry:: 123 (3) ['a', 'b', 'c']
*/

```Array.reduceRight() 跟reouce()使用方法一致，只是（计算顺序：从右到左）``

参数：Array.reduceRight((total, current, index, arr)=>{}, initVal) 接收一个函数和一个初始值（可选）
total, current： 必选参数
index, arr： 可选参数
返回值：返回一个值
是否改变原数组：不改变

不再进行数据展示

`Array.fill()`

语法：Array.fill(value,start,end)
参数：
value: 用来填充数组元素的值
start: 起始索引，默认值为0
end: 终止索引，默认值为this.length,如果不填的话，就包括终止索引

返回值：数组
是否改变原数组：会改变

console.log([1, 2, 3].fill(4));
console.log([1, 2, 3].fill(4, 1));
console.log([1, 2, 3].fill(4, 1, 2));
console.log([1, 2, 3].fill(4, 1, 1));
console.log([1, 2, 3].fill(4, 3, 3));
console.log([1, 2, 3].fill(4, -3, -2));
console.log([1, 2, 3].fill(4, NaN, NaN));
console.log([1, 2, 3].fill(4, 3, 5));

// 输出结果
VM402:1 (3) [4, 4, 4]
VM402:2 (3) [1, 4, 4]
VM402:3 (3) [1, 4, 3]
VM402:4 (3) [1, 2, 3]
VM402:5 (3) [1, 2, 3]
VM402:6 (3) [4, 2, 3]
VM402:7 (3) [1, 2, 3]
VM402:8 (3) [1, 2, 3]

// 另外一种
console.log(new Array(10).fill(5));
// 结果输出
VM716:2 (10) [5, 5, 5, 5, 5, 5, 5, 5, 5, 5]

`Array.find() 检测当前值在数组中第一次出现的元素`

参数：Array.find((item, index, arr) => { return 判断条件})

返回值：

匹配：返回匹配到的元素，不再执行后面的函数体内容

未匹配：返回undefined

是否改变原数组：不改变

注意：find() 对于空数组，函数是不会执行的，浏览器会报错，如下
在这里插入图片描述

// 打印输出全部参数
var arr = [1,2,3,4]
arr.find((e, index, arr) => {
    console.log(e, index, arr)
})

/*
输出结果：
VM152:4 1 0 (4) [1, 2, 3, 4]
VM152:4 2 1 (4) [1, 2, 3, 4]
VM152:4 3 2 (4) [1, 2, 3, 4]
VM152:4 4 3 (4) [1, 2, 3, 4]
*/

// ------------------------------------- 分隔符 --------------------------------------------

// 添加判断条件，如果满足不再执行后面的函数体
var arr = [1,2,3,4]
var r = arr.find((e, index,arr) => {
    
    console.log(e, index,arr)
    return e === 3
})
console.log('r::',r)
/*
输出结果：
VM220:5 1 0 (4) [1, 2, 3, 4]
VM220:5 2 1 (4) [1, 2, 3, 4]
VM220:5 3 2 (4) [1, 2, 3, 4]
r:: 3 // 输出得到的结果,且不再继续执行
*/

`Array.findIndex() 检测当前值在数组中第一次出现的元素的索引值`

参数：function(currentValue, index,arr)

currentValue：【必需】当前元素
index：【可选】当前元素的索引
arr：【可选】当前元素所属的数组对象

返回值：

匹配：返回对应元素的索引值，不再执行后面的函数体内容
不匹配：如果没有符合条件的元素返回 -1

是否改变原数组：不改变

注意：findIndex() 对于空数组，函数是不会执行的，浏览器会报跟 find() 相同的错误

var arr = [1,2,3,4]

var _index = arr.findIndex((e, index,arr) => {
    console.log(e, index,arr)
    return e === 3
})
console.log('_index::', _index);

/*
VM429:5 1 0 (4) [1, 2, 3, 4]
VM429:5 2 1 (4) [1, 2, 3, 4]
VM429:5 3 2 (4) [1, 2, 3, 4]
VM429:8 _index:: 2
*/

`Array.indexOf() 检测当前值在数组中第一次出现的位置索引`

参数：array.indexOf(item,start)

item: 查找的元素 
start: 字符串中开始检索的位置

返回值：第一次查到的索引值，不再继续执行，未找到返回-1

是否改变原数组：不改变

var arr = [1,2,2,3,2,4]
var f = arr.indexOf(2)
console.log('newArry::', f, arr)
// VM3879:5 newArry:: 1 (6) [1, 2, 2, 3, 2, 4]

var arr = [1,2,6,2,3,2,4]
var f = arr.indexOf(2,2)
console.log('newArry::', f, arr)
// VM3937:5 newArry:: 3 (7) [1, 2, 6, 2, 3, 2, 4]

`Array.lastIndexOf() 检测当前值在数组中最后一次出现的位置索引，从后面向前查找`

参数：array.lastIndexOf(item,start)

item: 查找的元素 
start: 字符串中开始检索的位置

返回值：第一次查到的索引值，未找到返回-1

是否改变原数组：不改变

var arr = [1,2,2,3,2,4]
var f = arr.lastIndexOf(2)
console.log('newArry::', f, arr)
// VM3887:5 newArry:: 4 (6) [1, 2, 2, 3, 2, 4]

`Array.includes() 判断一个数组中是否包含一个指定的值`

参数：Array.includes(指定的内容, 检索元素开始索引值)

返回值：布尔值 true / false

是否改变原数组：不改变

// 成功匹配
var arr = [1,2,6,2,3,2,4]
var f = arr.includes(6)
console.log('newArry::', f, arr)
// VM4188:5 newArry:: true (7) [1, 2, 6, 2, 3, 2, 4]

// 匹配失败
var arr = [1,2,6,2,3,2,4]
var f = arr.includes(6, 3)
console.log('newArry::', f, arr)
// VM4214:5 newArry:: false (7) [1, 2, 6, 2, 3, 2, 4]

`Array.reverse() 数组倒序排列`

参数：无

返回值：倒序后的新数组

是否改变原数组：改变

var arr = [1,2,6,2,3,2,4]
var f = arr.reverse()
console.log('newArry::', f, arr)
// VM4259:5 newArry:: (7) [4, 2, 3, 2, 6, 2, 1] (7) [4, 2, 3, 2, 6, 2, 1]

`Array.sort() 对数组的元素进行排序（默认是从小到大来排序并且是根据字符串来排序的）`

参数：可选(函数) 规定排序规则默认排序顺序为按字母升序

返回值：排序后新数组

是否改变原数组：改变

sort在不传递参数情况下，只能处理10以内（个位数）数字排序

var arr = [1,2,6,2,3,2,4]
var f = arr.sort()
console.log('newArry::', f, arr)
VM4278:5 newArry:: (7) [1, 2, 2, 2, 3, 4, 6] (7) [1, 2, 2, 2, 3, 4, 6]

// 正序
var arr = [1,2,6,2,3,2,4]
var f = arr.sort((a,b) => a - b)
console.log('newArry::', f, arr)
// VM4362:5 newArry:: (7) [1, 2, 2, 2, 3, 4, 6] (7) [1, 2, 2, 2, 3, 4, 6]

// 倒序
var arr = [1,2,6,2,3,2,4]
var f = arr.sort((a,b) => b - a)
console.log('newArry::', f, arr)
// VM4408:5 newArry:: (7) [6, 4, 3, 2, 2, 2, 1] (7) [6, 4, 3, 2, 2, 2, 1]

// 常见操作：对一个列表中的数据依据时间排序

`Array.from() 通过给定的对象中创建一个数组（伪数组转换为真数组）`

参数：
返回值：返回一个数组
是否改变原数组：

var arr = [1,2,6,2,3,2,4]

var nor = new Set(arr);
console.log('newArry::', nor, arr)

var f = Array.from(nor)

console.log('newArry::', f, arr)
// VM4646:4 newArry:: Set(5) {1, 2, 6, 3, 4}[[Entries]]0: 11: 22: 63: 34: 4size: 5[[Prototype]]: Set (7) [1, 2, 6, 2, 3, 2, 4]
// VM4646:8 newArry:: (5) [1, 2, 6, 3, 4] (7) [1, 2, 6, 2, 3, 2, 4]

`Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型`

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(1) 创建一个具有单个元素 1 的数组;

而 Array(7) 创建一个长度为7的空数组(注意：这是指一个有7个空位(empty)的数组，而不是由7个 undefined 组成的数组)。
参数：任意
返回值：数组
是否改变原数组：改变

console.log('newArry::', Array.of(1))
console.log('newArry::', Array.of(2))
// VM5294:1 newArry:: [1]
// VM5294:2 newArry:: [2]

// 注意：
Array(7)
(7) [empty × 7]length: 7[[Prototype]]: Array(0)

`Array.isArray() 判断一个对象是否为数组类型`

参数：传递任意一个对象
返回值：true / false
是否改变原数组：不改变

var arr = [1,2,6,2,3,2,4]

console.log('newArry::', Array.isArray(arr), arr)
// VM4819:3 newArry:: true (7) [1, 2, 6, 2, 3, 2, 4]

`Array.at() 通过索引值获取对应的元素`

参数：索引值
返回值：索引对应的值，匹配不到返回 undefined
是否改变原数组：

// 索引为1,返回2
var arr = [1,2,6,2,3,2,4]
console.log('newArry::', arr.at(1), arr)
// VM4902:3 newArry:: 2 (7) [1, 2, 6, 2, 3, 2, 4]

// 索引为9，返回undefined
var arr = [1,2,6,2,3,2,4]
console.log('newArry::', arr.at(9), arr)
// VM4917:3 newArry:: undefined (7) [1, 2, 6, 2, 3, 2, 4]

`Array.copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中（不常用）`

参数：Array.copyWithin(拷贝元素到目标索引位置, 开始索引, 结束索引)
返回值：修改后的数组
是否改变原数组：改变

// 将2，3替换成1，2
var arr = [1,2,6,2,3,2,4]
console.log('newArry::', arr.copyWithin(3, 0, 2), arr)
// VM4967:3 newArry:: (7) [1, 2, 6, 1, 2, 2, 4] (7) [1, 2, 6, 1, 2, 2, 4]

// 将2，4 替换成 2，3
var arr = [1,2,6,2,3,2,4]
console.log('newArry::', arr.copyWithin(5, 3,5), arr)
// VM5152:3 newArry:: (7) [1, 2, 6, 2, 3, 2, 3] (7) [1, 2, 6, 2, 3, 2, 3]