[JavaScript知识库]JS学习笔记——JavaScript中数组的常用方法和基本使用（持续更新中）

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

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

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)

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()

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

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@+#你好@+#& //连接好的字符串