JS学习笔记——JavaScript中数组的常用方法和基本使用

老Chen先生

已于 2022-03-09 16:25:12 修改

阅读量453

点赞数 4

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

于 2021-09-28 23:01:57 首次发布

本文链接：https://blog.csdn.net/MRlaochen/article/details/120531350

版权

JavaScript 专栏收录该内容

28 篇文章 8 订阅

订阅专栏

在平时工作和学习中，我们常常面对的就是对于数组、对象和字符串的处理，这些知识散而碎，所以我就想抽个空来总结一下，不仅对于知识是个总结，同时对于小伙伴们的面试也很有帮助。

今天这篇先来聊聊前端中关于数组（Array）的一些方法和基本的使用

1、方法一(数组的定义方法)：

1、push()

语法：数组.push()
参数：要增加的数据，可以是0个、1个或者n个
功能：在数组尾部添加若干元素
返回值：数组增加后的长度
是否改变原数组：是

var arr1 = [1,2,3,4,5]
var arr2 = arr1.push('hello','world')

console.log('--arr1--',arr1) [1, 2, 3, 4, 5, 'hello', 'world']//直接改变原始数组
console.log('--arr2--',arr2) 7//添加过后数组的长度

2、pop()

语法：数组.pop()
参数：无
功能：删除数组中的最后一个元素
返回值：被删除的那一个元素
是否改变原数组：是

var arr1 = [1,2,3,4,5]
var arr2 = arr1.pop()

console.log('--arr1--',arr1) [1, 2, 3, 4]//直接改变原始数组
console.log('--arr2--',arr2)  5 //被删除的那一个数据

3、unshift()

语法：数组.unshift()
参数：要增加的数据，可以是0个、1个或者n个
功能：在数组头部添加若干元素
返回值：数组增加后的长度
是否改变原数组：是

var arr1 = [1,2,3,4,5]
var arr2 = arr1.unshift('ni','hao')

console.log('--arr1--',arr1)   ['ni', 'hao', 1, 2, 3, 4, 5] //直接改变原始数组
console.log('--arr2--',arr2)  7//改变后数组的长度

4、shift()

语法：数组.shift()
参数：无
功能：删除数组中的头部第一个元素
返回值：被删除的那一个元素
是否改变原数组：是

var arr1 = [1,2,3,4,5]
var arr2 = arr1.shift()

console.log('--arr1--',arr1)  [2, 3, 4, 5] //直接改变原始数组
console.log('--arr2--',arr2)  1//被删除的那一条数据

5、concat()

语法：数组.concat()
参数：(理论上)任何数据。如果是数组的话，会被展开再合并进去
功能：对数组进行合并拼接
返回值：合并拼接过后的新数组
是否改变原数组：否

var arr1 = [1,2,3,4,5]
var arr2 = arr1.concat(99,'哈哈','*')

console.log('--arr1--',arr1)   [1, 2, 3, 4, 5]  //不改变原始数组
console.log('--arr2--',arr2)   [1, 2, 3, 4, 5, 99, '哈哈', '*']  //拼接过后的数组

6、splice()

语法：数组.splice()
参数：1个(开始截取的索引位置)：表示从索引位置开始截取，到数组的末尾
功能：对数组进行截取，并插入任意元素
返回值：被截取出来的元素（不管截取多少个内容，都是以数组的形式返回）
是否改变原数组：是

var arr1 = [1,2,3,4,5]
var arr2 = arr1.splice(2)

console.log('--arr1--',arr1)  [1, 2] //直接改变原始数组
console.log('--arr2--',arr2)  [3, 4, 5] //截取出来的内容

语法：数组.splice()
参数：2个(开始截取的索引位置，截取n个元素)：表示从索引位置开始截取，截取n个元素
功能：对数组进行截取，并插入任意元素
返回值：被截取出来的元素（不管截取多少个内容，都是以数组的形式返回）
是否改变原数组：是

var arr1 = [1,2,3,4,5]
var arr2 = arr1.splice(2,2)

console.log('--arr1--',arr1)  [1, 2, 5] //直接改变原始数组
console.log('--arr2--',arr2)  [3, 4] //截取出来的内容

语法：数组.splice()
参数：3个及3个以上(开始索引位置，截取元素个数，插入元素1，插入元素2，···)：表示从索引位置开始截取，截取n个，并插入相应元素
功能：对数组进行截取，并插入任意元素
返回值：被截取出来的元素（不管截取多少个内容，都是以数组的形式返回）
是否改变原数组：是

var arr1 = [1,2,3,4,5]
var arr2 = arr1.splice(1,3,'hello','我爱你')

console.log('--arr1--',arr1) [1, 'hello', '我爱你', 5] //直接改变原始数组
console.log('--arr2--',arr2) [2, 3, 4]  //截取出来的内容

7、slice()

语法：数组.slice()
参数：1个(开始截取的索引位置)：表示从索引位置开始截取，到数组的末尾
功能：数组进行截取
返回值：被截取出来的元素
是否改变原数组：否

var arr1 = [1,2,3,4,5]
var arr2 = arr1.slice(2)

console.log('--arr1--',arr1) [1, 2, 3, 4, 5] //不改变原始数组
console.log('--arr2--',arr2) [3, 4, 5] //截取出来的内容

语法：数组.slice()
参数：2个(开始索引位置，结束索引位置)：表示从索引位置开始截取，到结束的索引位置 💢【注：包前不包后】
功能：对数组进行截取
返回值：被截取出来的元素
是否改变原数组：否

var arr1 = [1,2,3,4,5]
var arr2 = arr1.slice(2,4)

console.log('--arr1--',arr1) [1, 2, 3, 4, 5] //不改变原始数组
console.log('--arr2--',arr2) [3, 4] //截取出来的内容

8、sort()

语法：数组.sort()
参数：无
功能：按照字符的排序规则对数组进行排序
返回值：排序之后的数组
是否改变原数组：是

var arr1 = [1,40,5,219,12,101,25,201]
var arr2 = arr1.sort()

console.log('--arr1--',arr1) [1, 101, 12, 201, 219, 25, 40, 5] //直接改变原始数组
console.log('--arr2--',arr2) [1, 101, 12, 201, 219, 25, 40, 5] //排序好的数组

语法：数组.sort()
参数：
function (a, b) { return a - b} 表升序
function (a, b) { return b - a} 表降序
功能：按照数字升降序对数组进行排序
返回值：排序之后的数组
是否改变原数组：是

var arr1 = [1,40,5,219,12,101,25,201]
var arr2 = arr1.sort(function(a,b){return a-b})

console.log('--arr1--',arr1) [1, 5, 12, 25, 40, 101, 201, 219] //直接改变原始数组
console.log('--arr2--',arr2) [1, 5, 12, 25, 40, 101, 201, 219] //直接改变原始数组

9、reverse()

语法：数组.reverse()
参数：无
功能：对数组按照倒装顺序重新排列
返回值：反转后的数组
是否改变原数组：是

var arr1 = [1,2,3,4,5,'你好','&']
var arr2 = arr1.reverse()

console.log('--arr1--',arr1) ['&', '你好', 5, 4, 3, 2, 1] //直接改变原始数组
console.log('--arr2--',arr2) ['&', '你好', 5, 4, 3, 2, 1] //反转后的数组

10、 join()

语法：数组.join()
参数：某个间隔符（没有传参数时，默认以,链接）
功能：将数组以指定间隔符连接成字符串
返回值：指定字符链接好的字符串（💢注：是字符串）
是否改变原数组：否

var arr1 = [1,2,3,4,5,'你好','&']
var arr2 = arr1.join()

console.log('--arr1--',arr1) [1, 2, 3, 4, 5, '你好', '&'] //不改变原始数组
console.log('--arr2--',arr2) 1,2,3,4,5,你好,&  //连接好的字符串

var arr1 = [1,2,3,4,5,'你好','&']
var arr2 = arr1.join('@+#')
 
console.log('--arr1--',arr1) [1, 2, 3, 4, 5, '你好', '&']//不改变原始数组
console.log('--arr2--',arr2) 1@+#2@+#3@+#4@+#5@+#你好@+#& //连接好的字符串

总结

不改变原数组的有：

concat()
slice()
join()

改变原数组的有：

push()
pop()
unshift()
shift()
splice()
sort()
reverse()

2、方法二(数组的常用API)：

1、indexOf

语法：数组.indexOf()
参数：
1、要查找的元素
2、开始查找的起始位置（可选）
功能：查找某个元素在数组中出现的位置（第一个）。如果没有，则返回 -1
返回值：索引值 或 -1
是否改变原数组：否

var arr1 = [1,2,3,4,5,6,5,4,3,2,1]
var arr2 = arr1.indexOf(4)
var arr3 = arr1.indexOf(4,5)
var arr4 = arr1.indexOf(7)

console.log('--arr1--',arr1) [1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1]//不改变原始数组
console.log('--arr2--',arr2) 3 
console.log('--arr3--',arr3) 7
console.log('--arr4--',arr4) -1

MDN - - - - indexOf

2、forEach

语法：数组.forEach( function(item,index,self){ } , this )
参数一：(必填)
function( item , index , self){ }
item：数组的每一项(常用)
index：每一项的索引
self：当前数组本身
参数二：(可选)
没传参数二的时候，this指向window；如果传了参数二，this指向参数二本身
功能：遍历数组每一项，对数组中的每一项运行给定函数
返回值：【注意】没有返回值
是否改变原数组：否

（没有参数二）

var arr1 = [1,2,3]
var arr2 = arr1.forEach(function(item,index,self){
    console.log('--item--',item)
    console.log('--index--',index)
    console.log('--self--',self)
    console.log('this',this)
})

console.log('--arr1--',arr1) [1, 2, 3] //不改变原数组
console.log('--arr2--',arr2) undefined //没有返回值

在这里插入图片描述
（有参数二）

var arr1 = [1,2,3]
var arr2 = arr1.forEach(function(item,index,self){
    console.log('--item--',item)
    console.log('--index--',index)
    console.log('--self--',self)
    console.log('this',this)
},{name:'zhang'})

console.log('--arr1--',arr1) [1, 2, 3] //不改变原数组
console.log('--arr2--',arr2) undefined //没有返回值

在这里插入图片描述
注意：

如果第一个参数使用箭头函数，那么注意this指向问题
在forEach中使用break和continue会报错；
在forEach中使用return只会中断当前这次的循环，但是不会中断整个forEach循环执行，既无法跳出整个forEach循环，总是会将所有遍历完，所以如果想中断循环执行，可以改用for循环

MDN- - - - forEach

3、map

语法：数组.map( function(item,index,self){ } )
参数一：
function( item , index , self){ }
item：数组的每一项(必填)
index：每一项的索引(可选)
self：当前数组本身(可选)
功能：遍历数组每一项，对数组中的每一项运行给定函数，返回新元素
返回值：返回一个对原始数组中每个元素经过函数处理后得到的新元素组成的新数组
是否改变原数组：否

var arr1 = [1,2,3]
var arr2 = arr1.map((item,index,self)=>{
    console.log('item',item)
    console.log('index',index)
    console.log('self',self)
    return item * 2
})
console.log('--arr1--',arr1) [1, 2, 3] //不改变原数组
console.log('--arr2--',arr2) [2, 4, 6] //返回新元素组成的数组

在这里插入图片描述
注意：

map不会对空数组进行遍历，所以在日常的开发过程中，需要注意这一点

MDN- - - - map

4、filter

语法：数组.filter(function(item,index,self){ 对应筛选条件 })
参数一：
function( item , index , self){ }
item：数组的每一项(必填)
index：每一项的索引(可选)
self：当前数组本身(可选)
功能：遍历数组每一项，对数组中的每一项进行过滤，返回满足筛选条件的元素
返回值：返回一个满足筛选条件的元素组成的新数组
是否改变原数组：否

var arr1 = [1,2,3,4]
var arr2 = arr1.filter((item,index,self)=>{
    console.log('item',item)
    console.log('index',index)
    console.log('self',self)
    return item < 3
})
console.log('--arr1--',arr1) [1, 2, 3, 4] //不改变原数组
console.log('--arr2--',arr2) [1, 2] //返回筛选条件为true的

在这里插入图片描述
注意：

filter不会对空数组进行遍历，所以在日常的开发过程中，需要注意这一点

MDN- - - -filter

5、reduce

语法：数组.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数一：
function(total, currentValue, currentIndex, arr)
total：初始值或者计算结束后的返回值;(必填)
currentValue：当前元素(必填)
currentIndex：当前元素的索引(可选)
arr：当前数组本身(可选)
参数二：
initialValue：传递给函数的初始值(可选)
功能：遍历数组每一项，对数组中的每一项进行给定函数
返回值：返回一个值，即函数累计处理的结果
是否改变原数组：否

（没有参数二initialValue）

var arr1 = [1,2,3,4]
var arr2 = arr1.reduce(function(total, currentValue, currentIndex, arr){
    console.log('total',total)
    console.log('currentValue',currentValue)
    console.log('currentIndex',currentIndex)
    console.log('arr',arr)
    return total + currentValue
})
console.log('--arr1--',arr1)
console.log('--arr2--',arr2)

在这里插入图片描述
可以看出：

没有参数二initialValue的时候，循环是从index下标为1开始的，而下标为0的第一个元素，被当做初始值
数组的长度为4，但是reduce只循环了3次

（有参数二initialValue）

var arr1 = [1,2,3,4]
var arr2 = arr1.reduce(function(total, currentValue, currentIndex, arr){
    console.log('total',total)
    console.log('currentValue',currentValue)
    console.log('currentIndex',currentIndex)
    console.log('arr',arr)
    return total + currentValue
},100)
console.log('--arr1--',arr1)
console.log('--arr2--',arr2)

在这里插入图片描述
可以看出：

如果第一个参数使用箭头函数，那么注意this指向问题
有参数二initialValue的时候，循环是从index下标为0开始的，第一次的初始值total，就是我们的参数二initialValue
数组的长度是4，同时reduce函数循环了4次

注意：

对于空数组[ ]，如果没有参数二initialValue，reduce遍历时会报错；如果设置了第二个参数，则reduce便利时不会报错，所以在日常的开发过程中，需要注意这一点

MDN- - - -reduce

6、some

语法：数组.some(function(currentValue, index, arr), thisValue)
参数一：
function(currentValue, index, arr)
currentValue：当前元素(必填)
index：当前元素的索引(可选)
arr：当前数组本身(可选)
参数二：
没传参数二的时候，this指向undefined或window；如果传了参数二，this指向参数二本身
thisValue：执行 callback 时使用的 this 值(可选)
功能：遍历数组每一项，检测数组中的元素是否有一个满足指定条件
返回值：布尔值。如果数组中有元素满足条件返回 true，否则返回 false
是否改变原数组：否

(没有参数二)

var arr1 = [1,2,3,4]
var arr2 = arr1.some(function(currentValue, index, arr){
    console.log('currentValue',currentValue)
    console.log('index',index)
    console.log('arr',arr)
    console.log('this',this)
    return currentValue > 3
})
console.log('--arr1--',arr1) [1, 2, 3, 4] //不改变原数组
console.log('--arr2--',arr2) true //返回一个布尔值

在这里插入图片描述

（有参数二）

var arr1 = [1,2,3,4]
var arr2 = arr1.some(function(currentValue, index, arr){
    console.log('currentValue',currentValue)
    console.log('index',index)
    console.log('arr',arr)
    console.log('this',this)
    return currentValue > 3
},{age:100})
console.log('--arr1--',arr1) [1, 2, 3, 4] //不改变原数组
console.log('--arr2--',arr2) true //返回一个布尔值

在这里插入图片描述
注意：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
如果没有满足条件的元素，则返回false
some() 不会对空数组[ ]进行检测，如果是空数组，结果会是false
如果第一个参数使用箭头函数，那么注意this指向问题

MDN - - - - some

7、every

语法：数组.every(function(currentValue, index, arr), thisValue)
参数一：
function(currentValue, index, arr)
currentValue：当前元素(必填)
index：当前元素的索引(可选)
arr：当前数组本身(可选)
参数二：
没传参数二的时候，this指向undefined或window；如果传了参数二，this指向参数二本身
thisValue：执行 callback 时使用的 this 值(可选)
功能：遍历数组每一项，检测数组中的元素是否所有满足指定条件
返回值：布尔值。如果所有元素都通过检测返回 true，否则返回 false
是否改变原数组：否

(没有参数二)

var arr1 = [1,2,3,4]
var arr2 = arr1.every(function(currentValue, index, arr){
    console.log('currentValue',currentValue)
    console.log('index',index)
    console.log('arr',arr)
    console.log('this',this)
    return currentValue > 3
})
console.log('--arr1--',arr1) [1, 2, 3, 4] //不改变原数组
console.log('--arr2--',arr2) false //返回一个布尔值

在这里插入图片描述
(有参数二)

var arr1 = [1,2,3,4]
var arr2 = arr1.every(function(currentValue, index, arr){
    console.log('currentValue',currentValue)
    console.log('index',index)
    console.log('arr',arr)
    console.log('this',this)
    return currentValue > 3
},{age:100})
console.log('--arr1--',arr1) [1, 2, 3, 4] //不改变原数组
console.log('--arr2--',arr2) false //返回一个布尔值

在这里插入图片描述
注意：

如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测
如果所有元素都满足条件，则返回 true
every() 不会对空数组[ ]进行检测
如果第一个参数使用箭头函数，那么注意this指向问题

8、find

语法：数组.find(function(currentValue, index, arr), thisValue)
参数一：
function(currentValue, index, arr)
currentValue：当前元素(必填)
index：当前元素的索引(可选)
arr：当前数组本身(可选)
参数二：
没传参数二的时候，this指向undefined或window；如果传了参数二，this指向参数二本身
thisValue：执行 callback 时使用的 this 值(可选)
功能：遍历数组每一项，返回通过测试条件函数的数组的第一个元素的值
返回值：符合测试条件的第一个数组元素值；如果没有符合条件的，则返回 undefined
是否改变原数组：否

var arr1 = [1,2,3,4,5]
var arr2 = arr1.find(function(currentValue, index, arr){
     console.log('currentValue',currentValue)
     console.log('index',index)
     console.log('arr',arr)
     console.log('this',this)
     return currentValue > 3
 })
 console.log('--arr1--',arr1) [1, 2, 3, 4, 5] //不改变原数组
 console.log('--arr2--',arr2) 4 //返回符合条件的第一个元素的值

在这里插入图片描述

var arr1 = [1,2,3,4,5]
var arr2 = arr1.find(function(currentValue, index, arr){
     console.log('currentValue',currentValue)
     console.log('index',index)
     console.log('arr',arr)
     console.log('this',this)
     return currentValue > 3
 },{age:100})
 console.log('--arr1--',arr1) [1, 2, 3, 4, 5] //不改变原数组
 console.log('--arr2--',arr2) 4 //返回符合条件的第一个元素的值

在这里插入图片描述
注意：

find() 对于空数组[ ]，函数是不会执行的，返回undefined
如果第一个参数使用箭头函数，那么注意this指向问题

9、findIndex

和find方法几乎一样，不同点：find是找到符合条件的第一个元素的值，而findIndex是找到符合条件的第一个元素的下标

语法：数组.findIndex(function(currentValue, index, arr), thisValue)
参数：同find情况
功能：遍历数组每一项，返回通过测试条件函数的数组的第一个元素的下标
返回值：符合测试条件的第一个元素的下标；如果没有符合条件的，则返回 -1
是否改变原数组：否

10、includes

语法：数组.includes()
参数：（1）指定的查找值(必填)（2）索引位置(可选)
功能：判断一个数组是否包含一个指定的值
返回值：如果数组包含指定值，返回 true；否则false
是否改变原数组：否

var arr1 = [1,2,3,4,5]
var arr2 = arr1.includes(3)
console.log('--arr1--',arr1) [1,2,3,4,5] //不改变原数组
console.log('--arr2--',arr2) true //找到指定元素，返回true

var arr1 = [1,2,3,4,5]
var arr2 = arr1.includes(3,3)
console.log('--arr1--',arr1) [1,2,3,4,5] //不改变原数组
console.log('--arr2--',arr2) false //未找到指定元素，返回false

11、Array.of()

语法：Array.of(要转换的值)
参数：要声明转换的值
功能：将一组数据转化为数组
返回值：新的 Array 实例

var str1 = 'chen'
var str2 = Array.of(str1)

console.log('--arr1--',str1) 'chen'
console.log('--arr2--',str2) ['chen']

Array.of(1);          // [1]
Array.of(1, 2, 3);    // [1, 2, 3]
Array.of(undefined);  // [undefined]

注意：
Array.of()和 Array 构造函数之间的区别在于处理整数参数：以Array.of(7)为例，Array.of(7) 创建一个具有单个元素 7的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）
MDN - - - - Array.of()

Array.of(7);      // [7]

Array(7);         // [ , , , , , , ]

老Chen先生

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
JS学习笔记——JavaScript中数组的常用方法和基本使用

在平时工作和学习中，我们常常面对的就是对于数组、对象和字符串的处理，这些知识散而碎，所以我就想抽个空来总结一下，今天这篇先来聊聊前端中关于数组（Array）的一些方法的使用（本文会持续更新）...
复制链接

扫一扫