知识:10个JavaScript数组方法(是否改变原数组)

一、改变原数组的方法:

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'

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

3、shift():

// 3、shift():删除数组的第一个元素,返回该元素;
vararr = ['Tom', 'Jerry', 'Jack', 'Mary']
var newArr = arr.shift()
console.log(arr) // ['Jerry', 'Jack', 'Mary']
console.log(newArr) // 'Tom'

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

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]

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']

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']

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']

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]

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']
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值