携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 13 天，点击查看活动详情
start
- 芭比 Q 了，数组的常用的几个方法不熟悉。
- 现在赶紧重新熟悉一波。
数组比较常用的方法（不含遍历类型的）
1. concat
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
const array1 = ['a', 'b', 'c']
const array2 = ['d', 'e', 'f']
const array3 = array1.concat(array2)
console.log(array3)
// ["a", "b", "c", "d", "e", "f"]
注意事项
- 合并的顺序是向后追加；
- 返回的是新数组，不会更改现有数组；
- 如果实参不为数组，会把它当做数组的一项添加进新数组；
- concat 生成的数组是浅拷贝，拷贝的对象，是对象的引用值；
- js 版本：1.2
2. push
push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
const arr1 = ['a', 'b', 'c']
let count = arr1.push('tomato', 123)
console.log(count, arr1)
// 5 [ 'a', 'b', 'c', 'tomato',123]
注意事项
- 尾部追加（可追加多个）
- 会更改现有数组
- 返回值是数组最新的长度
- js 版本：1.2
3. pop
pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。
const arr1 = ['a', 'b', 'c']
let output = arr1.pop()
console.log(output, arr1)
// c [ 'a', 'b']
注意事项
- 尾部删除一个元素
- 会更改现有数组
- 返回值是删除的元素
- js 版本：1.2
4. unshift
unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度（该方法修改原有数组）。
const arr1 = ['a', 'b', 'c']
let count = arr1.unshift('tomato')
console.log(count, arr1)
// 4 [ 'tomato', 'a', 'b', 'c' ]
注意事项
- 头部添加元素（可追加多个）
- 会更改现有数组
- 返回值是数组最新的长度
- 和 push 方法相似，不过 unshift 是头部添加
- js 版本：1.2
5. shift
shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
const arr1 = ['a', 'b', 'c']
let count = arr1.shift('tomato')
console.log(count, arr1)
// a [ 'b', 'c' ]
注意事项
- 头部删除一个元素
- 会更改现有数组
- 返回值是删除的元素
- js 版本：1.2
6. join
join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。
const elements = ['Fire', 'Air', 'Water']
console.log(elements, elements.join())
// ["Fire", "Air", "Water"] "Fire,Air,Water"
console.log(elements.join(''))
// "FireAirWater"
console.log([undefined, 1, null, 2].join())
// ",1,,2"
注意事项
- 不改变原数组
- 默认用逗号分隔，英文的逗号
- 返回值是生成的字符串
- 如果一个元素为 undefined 或 null，它会被转换为空字符串
- js 版本：1.1
7. slice
slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括 end）。原始数组不会被改变。
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']
console.log(animals.slice(2))
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4))
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5))
// expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2))
// expected output: Array ["duck", "elephant"]
console.log(animals.slice(2, -1))
// expected output: Array ["camel", "duck"]
console.log(animals.slice())
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]
注意事项
- 不改变原数组
- slice 可以理解为截取,当我们要去获取数组的某几项数据的时候使用它非常好用。当然字符串也有 slice 方法，非常好用。
- 返回值是截取项的数组（浅拷贝）
- 包括 begin，不包括 end
- 负数及从尾部向头部开始计数
- js 版本：1.2
8. splice
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。
var arr = [1, 2, 3, 4]
console.log(arr.splice(1, 2, 'a', 'b'))
// [ 2, 3 ]
console.log(arr)
// [ 1, 'a', 'b', 4 ]
注意事项
- 改变原数组
- splice 可以理解为拼接 ,需要添加删除修改数组的时候，即可使用 splice
- 返回值是删除项的数组（浅拷贝）
- js 版本：1.2
9. sort
sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的
/* 默认的排序 */
var arr = [1, 30, 4, 21, 100000]
console.log(arr.sort()) // [ 1, 100000, 21, 30, 4 ]
console.log(arr) // [ 1, 100000, 21, 30, 4 ]
/* 指定排序的规则 */
var arr = [1, 30, 4, 21, 100000]
console.log(
arr.sort((a, b) => {
return a - b
})
) // [ 1, 4, 21, 30, 100000 ]
注意事项
- 改变原数组
- 由上述的例子可以看到，默认的排序规则还有点特殊，需要注意
- js 版本：1.1
10. reverse
reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。
var arr = ['a', 'b', 'c', 'd']
var output = arr.reverse()
console.log(output, arr)
// [ 'd', 'c', 'b', 'a' ] [ 'd', 'c', 'b', 'a' ]
注意事项
- 改变原数组
- js 版本：1.1
思考与实践
1. vue2 中支持的响应式的七种数组方法：
- push
- splice
- pop
- shift
- unshift
- sort
- reverse
2. 小 tips
2.1 记忆技巧
- push , pop 一组,对数组尾部进行增删
- unshift, shift 一组,对数组头部进行增删
2.2 各个方法的返回值
- pop 和 shift 方法返回值是删除项，在那种既需要删除项，又需要对删除项进行某些操作的时候，对返回值需要注意一下.
- splice 返回的是删除项组成的数组
2.3 是否会修改原数组
是
push
pop
unshift
shift
splice
sort
reverse
否
concat
join
slice
2.4 reverse
前几天刚好看到一个题目：给你一个数组，将数组中元素的位置颠倒。
当时我就想直接 js 的 reverse 不就 ok 了。
这里记录一下当时写的逻辑
/* 双指针法 */
var arr = ['a', 'b', 'c', 'd', 'e']
var i = 0,
j = arr.length - 1
while (i < arr.length / 2) {
;[arr[i], arr[j]] = [arr[j], arr[i]]
i++
j--
}
console.log(arr) // [ 'e', 'd', 'c', 'b', 'a' ]
2.5 分不清楚 slice splice
这两方法就差一个字母,非常容易混淆。
首先从中文释义解释：
- slice：截取
- splice：拼接 可以理解到 slice 用于截取数组的项，splice 就比较全能，增删改都可以支持。
然后理解一下这两个方法的传参。
slice(begin,end) 截取 begin 到 end-1 项；
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
start 开始的索引 删除多少项，后续的参数就是插入的数据
end
加油
