这是我参与11月更文挑战的第3天,活动详情查看:2021最后一次更文挑战
改变原数组的有:push()、unshift()、pop()、shift()、reverse()、splice()、sort()
数组结尾追加元素 push(value)
将value添加到数组的最后,返回值是更新后数组的长度,会改变原数组
// Base
let a = [1, 2, 3, 4, 5]
let result = a.push(1)
console.log(result) // 6
console.log(a) // [1, 2, 3, 4, 5, 1]
// More
result = a.push('a', 'b') // 可一次添加多个值
console.log(result) // 8
console.log(a) // [1, 2, 3, 4, 5, 1, 'a', 'b']
数组开头添加 unshift(value)
将value添加到数组的开头,返回值是更新后数组的长度,会改变数组
// Base
let a = [1, 2, 3, 4, 5]
let result = a.unshift(1)
console.log(result) // 6
console.log(a) // [1, 1, 2, 3, 4, 5]
// More
result = a.unshift('a', 'b') // 可一次添加多个值
console.log(result) // 8
console.log(a) // ['a', 'b', 1, 1, 2, 3, 4, 5]
删除数组尾元素 pop()
删除数组中最后一个元素,返回值是删除的那个元素,会改变原数组
// Base
let a = [5]
let result = a.pop()
console.log(result) // 5
console.log(a) // []
// More
result = a.pop() // 数组为空数组后,执行pop()方法,返回undefined
console.log(result) // undefined
console.log(a) // []
删除数组首元素 shift()
删除数组中的第一个元素,返回值是删除的那个元素, 会改变原数组
// Base
let a = [5]
let result = a.shift()
console.log(result) // 5
console.log(a) // []
// More
result = a.shift() // 数组为空数组后,执行shift()方法,返回undefined
console.log(result) // undefined
console.log(a) // []
数组转字符串 join(value)
将数组用value连接成字符串,返回值是连接的字符串,不改变原数组
// Base
let a = [1, 2, 3, 4, 5]
let result = a.join()
console.log(result) // 1,2,3,4,5
result = a.join('')
console.log(result) // 12345
result = a.join(',')
console.log(result) // 1,2,3,4,5
result = a.join('&')
console.log(result) // 1&2&3&4&5
// More
let obj = {
toString: function () {
console.log('调用了toString()方法!')
return 'a'
},
toValue: function () {
console.log('调用了toValue()方法!')
return 'b'
}
}
result = a.join(obj) // 使用对象时会调用对象自身的toString方法,我们这里重写了toString
// 调用了toString()方法
console.log(result) // 1a2a3a4a5
console.log(a) // [1, 2, 3, 4, 5]
// 数组中的join()方法相对的一个方法是字符串的split()方法
console.log(result.split('a')) // ["1", "2", "3", "4", "5"]
反转数组 reverse()
反转数组,返回值是反转后的数组,会改变原数组
// Base
let a = [1, 2, ,3, ,4, 5]
let result = a.reverse()
console.log(result) // [5, 4 ,3 ,2 ,1]
console.log(a) // [5, 4 ,3 ,2 ,1]
// More
a = [1, [2, 3], [4, 5]]
result = a.reverse()
console.log(result) // [[4, 5], [2, 3], 1]
console.log(a) // [[4, 5], [2, 3], 1]
// 可以看到这里的反转只是基于数组的第一层,属于浅反转
// 一个简单的深反转需要使用递归实现
const deepReverse = (array) => {
let temp = array.reverse()
temp.forEach(v => {
if (Object.prototype.toString.call(v) === '[object Array]') {
deepReverse(v)
}
})
return temp
}
a = [1, [2, 3], [4, 5]]
result = deepReverse(a)
console.log(result) // [[5, 4], [3, 2], 1]
获取子数组 slice(star,end)
获取子数组,包含索引star到end的值,不含end,返回值是获取的子数组,不改变原数组
// Base
let a = [1, 2, 3, 4, 5]
let result = a.slice(2, 4)
console.log(result) // [3, 4]
console.log(a) // [1, 2, 3, 4, 5]
// More
console.log(a.slice(1)) // [2, 3, 4, 5] 只有一个参数且不小于0时,则从此索引开始截取到数组的末尾
console.log(a.slice(-1)) // [5] 只有一个参数且小于0时,则从倒数|start|位截取到数组的末尾
console.log(a.slice(-1, 1)) // [] 反向截取,不合法,返回空数组
console.log(a.slice(1, -1)) // [2, 3, 4] 从第1位截取到倒数第1位
console.log(a.slice(-1, -2)) // [] 反向截取,不合法,返回空数组
console.log(a.slice(-2, -1)) // [4] 倒数第2位截取到倒数第1位
截取一段/插入数组 splice
splice(index, count, value1,value2,....) 从索引为index的开始删除count个,在向数组里插入value1,value2等,返回值是删除的数组,会改变原数组的值
// Base
let a = [1, 2, 3, 4, 5]
let result = a.splice(1, 2, 0)
console.log(result) // [2, 3]
console.log(a) // [1, 0, 4, 5]
// More
a = [1, 2, 3, 4, 5]
console.log(a.splice(-2)) // [4, 5] 当参数为单个且小于0时,将截取从倒数|index|位到数组的末尾
console.log(a) // [1, 2, 3]
a = [1, 2, 3, 4, 5]
console.log(a.splice(-1)) // [5] 当参数为单个且小于0时,将截取从倒数|index|位到数组的末尾
console.log(a) // [1, 2, 3, 4]
a = [1, 2, 3, 4, 5]
console.log(a.splice(0)) // [1, 2, 3, 4, 5] 当参数为单个且不小于0时,将截取从index位到数组的末尾
console.log(a) // []
a = [1, 2, 3, 4, 5]
console.log(a.splice(1)) // [2, 3, 4, 5] 当参数为单个且不小于0时,将截取从index位到数组的末尾
console.log(a) // [1]
a = [1, 2, 3, 4, 5]
console.log(a.splice(-1, 2)) // [5] 从倒数第1位开始截取两个元素
console.log(a) // [1, 2, 3, 4]
a = [1, 2, 3, 4, 5]
console.log(a.splice(0, 2, 'a', 'b', 'c')) // [1, 2]
console.log(a) // ['a', 'b', 'c', 3, 4, 5] 截取后将value值依次填充到截取位置处,旧值被向后顺移
按ASCII排序 sort()
对数组进行排序,排序是比较ASCII码大小不是数值大小,返回排序过后的新数组,会改变原数组
// Base
let a = [31, 22, 27, 1, 9]
let result = a.sort()
console.log(result) // [1, 22, 27, 31, 9]
console.log(a) // [1, 22, 27, 31, 9]
// More
a = ['c', 'ac', 'ab', 'A1', '1c', 13, 12, '13', '12', '3', '2', '1b', '1a', 1, 'aa', 'a', 3, 'b', 2]
a.sort()
console.log(a) // [1, 12, "12", 13, "13", "1a", "1b", "1c", "2", 2, "3", 3, "A1", "a", "aa", "ab", "ac", "b", "c"]
// 可以看出sort排序是根据每个字符对应的ASCII码值进行排序的,而非值的大小。
// 先比较第一位的ASCII码值,如果第一位的ASCII码值相同,则开始比较第二位的ASCII码值,以此类推
// ASCII码表(http://tool.oschina.net/commons?type=4 + K)
a = [31, 22, 27, 1, 9]
a.sort((a, b) => {
return a - b
})
console.log(a) // [1, 9, 22, 27, 31] 按数值大小正序排列
a = [31, 22, 27, 1, 9]
a.sort((a, b) => {
return b - a
})
console.log(a) // [31, 27, 22, 9, 1] 按数值大小倒序排列
数组转字符串 toString()
将数组中改成用逗号拼接的字符串,返回拼接后的字符串,不改变原数组
```js
// Base
let a = [1, 2, 3, 4, 5]
let result = a.toString()
console.log(result) // 1,2,3,4,5
console.log(a) // [1, 2, 3, 4, 5]
// 除了toString()方法之外,String()方法也可以将数组转换成字符串
result = String(a)
console.log(result) // 1,2,3,4,5
```
倒序查找索引 lastIndexOf(value)
倒序查找数组中包含value的索引,查找到就返回匹配的第一索引,如果没有查找到就返回-1,不改变原数组
```js
// Base
let a = [1, 2, 3, 2, 5]
let result = a.lastIndexOf(2)
console.log(result) // 3
console.log(a) // [1, 2, 3, 4, 5]
result = a.lastIndexOf(6)
console.log(result) // -1
console.log(a) // [1, 2, 3, 4, 5]
```
连接成新数组 concat(value)
将数组或值连接成新数组,返回新数组,不改变原数组
```js
// Base
let a = [1, 2], b = [3, 4], c = 5
let result = a.concat(b, c)
console.log(result) // [1, 2, 3, 4, 5]
console.log(a) // [1, 2]
// More
b = [3, [4]]
result = a.concat(b, c)
console.log(result) // [1, 2, 3, [4], 5] concat对于嵌套数组无法拉平
console.log(a) // [1, 2]
```
遍历数组 forEach()
对数组进行遍历,对数组中的每一项运行给定函数,参数是function,默认传参有:遍历数组内容,索引,数组本身,没有返回值
```js
var arr = [1, 2, 3, 4, 5]
arr.forEach(function (item, index, a) {
console.log(item + '|' + index + '|' + (a === true))
})
// 输出为:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
```
数组映射 map()
指映射,对数组中的每一项运行给定函数,返回值是运行函数之后结果组成的数组,不改变原数组
```js
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.map(function (item, index, a) {
return item * item
})
console.log(arr1) // [1, 4, 9, 16, 25]
```
数组过滤 filter()
指过滤,对数组中的每一项运行给定函数,返回值是满足条件的值组成的数组,不改变原数组
```js
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr1 = arr.filter(function (item, index, a) {
return index % 3 === 0 || item >= 8
})
console.log(arr1) // [1, 4, 7, 8, 9, 10]
```
元素是否全部满足条件 every()
判断数组中的每一项是否都满足条件,只有全都满足条件,才返回true
```js
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.every(function (item, index, a) {
return item < 10
})
console.log(arr1) // true
var arr2 = arr.every(function (item, index, a) {
return item < 3
})
console.log(arr2) // false
```
某一项满足条件 some()
判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true
```js
var arr = [1, 2, 3, 4, 5]
var arr1 = arr.some(function (item, index, a) {
return item < 3
})
console.log(arr1) // true
var arr2 = arr.some(function (item, index, a) {
return item < 1
})
console.log(arr2) // false
```
是否包含 includes(value)
在数组中查找value,如果找到就返回true,否之就返回false
```js
const array1 = [1, 2, 3];
console.log(array1.includes(2)); // true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat')); // true
console.log(pets.includes('at')); // false
```