知识：10个JavaScript数组方法（是否改变原数组）_shift()会改变原数组码

一、改变原数组的方法：

1、pop()：删除输入的最后一个元素，返回该元素；
2、push()：向数组尾部添加一个元素，返回更新后的数组长度；
3、shift()：删除数组的第一个元素，返回该元素；
4、unshift()：向数组头部添加一个元素，返回更新后的数组长度；
5、sort()：数组排序（默认按照ASCII进行排序，可自定义规则）；
6、reverse()：数组反转；
7、splice()：可以向数组任意位置删除或者添加元素，返回更新后的数组。

二、不改变原数组的方法：

1、slice()：截取数组中两个索引之间的元素，不包括结束索引的元素，不改变原数组，返回新数组；
2、concat()：连接多个数组，返回连接后的新数组，不去重处理；
3、JSON.parse(JSON.stringify())：数据处理：深拷贝

三、10个数组处理方法详解

1、pop()：

// 1、pop()：删除输入的最后一个元素，返回该元素
var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.pop()
console.log(arr) // ['Tom', 'Jerry', 'Jack']
console.log(newArr) // 'Mary'
1
2
3
4
5

2、push()：

// 2、push()：向数组尾部添加一个元素，返回更新后的数组长度
var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
varnewArr = arr.push('Jan')
console.log(arr) // ['Tom', 'Jerry', 'Jack', 'Mary', 'Jan']
console.log(newArr) // 5
1
2
3
4
5

3、shift()：

// 3、shift()：删除数组的第一个元素，返回该元素；
vararr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.shift()
console.log(arr) // ['Jerry', 'Jack', 'Mary']
console.log(newArr) // 'Tom'
1
2
3
4
5

4、unshift()：

// 4、unshift()：向数组头部添加一个元素，返回更新后的数组长度
var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.unshift('Jane')
console.log(arr) // ['Jane', 'Tom', 'Jerry', 'Jack', 'Mary']
console.log(newArr) // 5
1
2
3
4
5

5、sort()：

// 5、sort()：数组排序（默认按照ASCII进行排序，可自定义规则）
var arr = [4, 3, 1, 2] // 默认排序 - ASCII排序
var newArr = arr.sort()
console.log(arr) // [1, 2, 3, 4]
console.log(newArr) // [1, 2, 3, 4]

var arr1 = [4, 40, 14, 100]
var newArr1 = arr1.sort() // 默认排序 - ASCII排序 - 事实是有问题的
console.log(arr1) // [100, 14, 4, 40]
console.log(newArr1) // [100, 14, 4, 40]

var newArr1 = arr1.sort((a, b) => a - b) // 自定义排序 - 从小到大排序
console.log(arr1) // [4, 14, 40, 100]
console.log(newArr1) // [4, 14, 40, 100]

var newArr1 = arr1.sort((a, b) => b - a) // 自定义排序 - 从大到小排序
console.log(arr1) // [4, 14, 40, 100]
console.log(newArr1) // [4, 14, 40, 100]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

6、reverse()：

// 6、reverse()：数组反转
var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.reverse()
console.log(arr) // ['Mary', 'Jack', 'Jerry', 'Tom']
console.log(newArr) // ['Mary', 'Jack', 'Jerry', 'Tom']
1
2
3
4
5

7、splice(index, howmany, item1, …, itemn)：

// 7、splice(index, howmany, item1, ..., itemn)：可以向数组任意位置删除或者添加元素，返回被删除项组成的数组
var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.splice(0, 1) // 从索引为0的元素开始删除，删除1位元素
console.log(arr) // ['Jerry', 'Jack', 'Mary']
console.log(newArr) // ['Tom']

var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.splice(1, 2) // 从索引为1的元素开始删除，删除2位元素
console.log(arr) // ['Tom', 'Mary']
console.log(newArr) // ['Jerry', 'Jack']

var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.splice(-1, 1) // 从最后一位开始删除，删除1位元素
console.log(arr) // ['Tom', 'Jerry', 'Jack']
console.log(newArr) // ['Mary']

var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.splice(-2, 2) // 从最后一位开始删除，删除2位元素
console.log(arr) // ['Tom', 'Jerry']
console.log(newArr) // ['Jack', 'Mary']

var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.splice(0, 0, 'Jane') // 从索引为0的元素开始删除，删除0位元素，添加新元素'Jane'
console.log(arr) // ['Jane', 'Tom', 'Jerry', 'Jack', 'Mary']
console.log(newArr) // []

var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.splice(0, 1, 'Jane') // 从索引为0的元素开始删除，删除1位元素，添加新元素'Jane'
console.log(arr) // ['Jane', 'Jerry', 'Jack', 'Mary']
console.log(newArr) // ['Tom']

var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.splice(0, 1, 'Jane', 'Green') // 从索引为0的元素开始删除，删除1位元素，添加新元素'Jane'、'Green'
console.log(arr) // ['Jane', 'Green', 'Jerry', 'Jack', 'Mary']
console.log(newArr) // ['Tom']

var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.splice(0, 1, 'Jane', 'Green', 1, { name: 'Smith' }, [1, 2]) // 从索引为0的元素开始删除，删除1位元素，添加新元素'Jane'、'Green'、1
console.log(arr) // ['Jane', 'Green', 1, { name: 'Smith' }, Array(2), 'Jerry', 'Jack', 'Mary']
console.log(newArr) // ['Tom']
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

8、slice(startIndex, endIndex)：

// 8、slice(startIndex, endIndex)：截取数组中部分元素，不改变原数组，返回新数组
vararr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.slice(1) // 从索引为1的元素开始截取元素，直到最后一位
console.log(arr) // ['Tom', 'Jerry', 'Jack', 'Mary']
console.log(newArr) // ['Jerry', 'Jack', 'Mary']

var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.slice(1, 2) // 从索引为1的元素开始截取，截到索引为2的地方，不包括索引为2的元素
console.log(arr) // ['Tom', 'Jerry', 'Jack', 'Mary']
console.log(newArr) // ['Jerry']

var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.slice(1, -1) // 从索引为1的元素开始截取，截取到数组数组尾部倒数第一位，不包括倒数第一位
console.log(arr) // ['Tom', 'Jerry', 'Jack', 'Mary']
console.log(newArr) // ['Jerry', 'Jack']

var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.slice(1, -2) // 从索引为1的元素开始截取，截取到数组数组尾部倒数第二位，不包括倒数第二位
console.log(arr) // ['Tom', 'Jerry', 'Jack', 'Mary']
console.log(newArr) // ['Jerry']
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

9、concat(array1, array2 , …, arrayX)：

// 9、concat(array1, array2 , ..., arrayX)：连接多个数组，返回连接后的新数组，不去重处理
var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var arr1 = [1, 2, 3, 4]
var arr2 = [3, 4, 5]
var newArr = arr.concat(arr1, arr2) // 从索引为1的元素开始截取元素，直到最后一位
console.log(arr) // ['Tom', 'Jerry', 'Jack', 'Mary']
console.log(newArr) // ['Tom', 'Jerry', 'Jack', 'Mary', 1, 2, 3, 4, 3, 4, 5]
1
2
3
4
5
6
7

10、JSON.parse(JSON.stringify())：

// 10、JSON.parse(JSON.stringify())：数据处理：深拷贝
var arr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = JSON.parse(JSON.stringify(arr))
arr = [1, 2, 3]
console.log(arr) // [1, 2, 3]
console.log(newArr) // ['Tom', 'Jerry', 'Jack', 'Mary']
1
2
3
4
5
6