js数组你不知道的事

抓抓细节，细节很重要

concat() 连接两个或更多的数组，并返回结果。

• 参数：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
• 返回值：返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

const arr = [1, 2, 3, 4, 5, 6]
const arr2 = [7, 8, 9]
let result = arr.concat(1, 2, 4) // ×标记
console.log(result) // [ 1, 2, 3, 4, 5, 6, 1, 2, 4 ]
// 需要注意的是，标记处不能使用const声明，使用const声明之后，因为数组属于引用类型，所以不能更改其引用，而concat返回的是一个引用，赋值会报错
result = arr.concat(arr2) 
console.log(result) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
arr.push(101)
arr2.push(123)
console.log(result) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] 证明concat返回的是一个新数组

细节

const arr = [1, 2, 3, 4, 5, 6]
// 数组浅拷贝的一种方法
let result = [].concat(arr)
arr.push(101)
console.log(result) // [ 1, 2, 3, 4, 5, 6 ]

// 验证是否可以实现深拷贝
const arr2 = [10, 20, 30]
arr.push(arr2)
result = [].concat(arr)
console.log(result) // [ 1, 2, 3, 4, 5, 6, 101, [ 10, 20, 30 ] ]
arr2.push(1001)
console.log(result) // [ 1, 2, 3, 4, 5, 6, 101, [ 10, 20, 30, 1001 ] ] 结果表明不行

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

• 参数：separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
• 返回值：返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

const arr = [1, 2, 3, 4, 5, 6]
let result = arr.join('-')
console.log(result) // 1-2-3-4-5-6
console.log(arr) // [ 1, 2, 3, 4, 5, 6 ] 不会改变原数组
// 验证如果不传参会发生什么
console.log(arr.join()) // 1,2,3,4,5,6
console.log(arr.join('')) // 123456
// 结果可以看出，细节决定成败，一些bug总会出现的这么猝不及防

• reverse() 颠倒数组中元素的顺序。

• 改变原数组，不会返回新数组

const arr = [1, 2, 3, 4, 5, 6]
let result = arr.reverse()
console.log(arr) // [ 6, 5, 4, 3, 2, 1 ]
console.log(result) // [ 6, 5, 4, 3, 2, 1 ]
arr.push(101)
console.log(result) // [ 6, 5, 4, 3, 2, 1, 101 ] 证明reverse返回原数组，赋值的时候赋值原引用，不是一个新的数组

toString() 把数组转换为字符串，并返回结果。toLocaleString() 把数组转换为本地字符串，并返回结果。

const arr = [1, 2, 3, 4, 5, 6]
const arr2 = [10, 20, 30]
arr.push(arr2)
arr[1] = arr2
let result = arr.toString()
let resultLocal = arr.toLocaleString()
console.log(arr) // [ 1, 2, 3, 4, 5, 6, [ 10, 20, 30 ] ]
console.log(result) // 1,2,3,4,5,6,10,20,30
console.log(resultLocal) // 1,2,3,4,5,6,10,20,30
// 数组没有任何改变，两种方法结果没有任何区别
// 需要注意的是，数组被扁平化了
// 这里遇到到了一个问题，在数组里加数组是添加引用还是实际的值
// 在这之前本想根据这个方法实现一个数组深拷贝，但是实验时候，证明不可行

// 但是还是能根据这个方法实现数组的扁平化
function flatten (arr) {
    return arr.toString().split(',').map(ele => +ele)
}
console.log(flatten(arr)) // [ 1, 10, 20, 30, 3, 4, 5, 6, 10, 20, 30 ]

pop() 删除并返回数组的最后一个元素

• 返回值：arrayObject 的最后一个元素。
• 说明：pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
• 可以与push实现出栈入栈操作，改变原数组

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

• 参数：可以是一个，也可以是多个
• 返回值：把指定的值添加到数组后的新长度。
• 说明：push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

shift() 删除并返回数组的第一个元素

const arr = [1, 2, 3, 4, 5, 6]
arr.shift()
console.log(arr) // [ 2, 3, 4, 5, 6 ]

• 可以与push实现出队列和入队列操作，改变原数组

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

参数	描述
newelement1	必需。向数组添加的第一个元素。
newelement2	可选。向数组添加的第二个元素。
newelementX	可选。可添加若干个元素。

• 返回值:arrayObject 的新长度。
• 说明:unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。
• 请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。

const arr = [1, 2, 3, 4, 5, 6]
arr.unshift(9, 10, 11)
console.log(arr) // [ 9, 10, 11, 1, 2, 3, 4, 5, 6 ]

slice() 从某个已有的数组返回选定的元素

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

• 返回值：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

• 说明：请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

• sort() 对数组的元素进行排序

const arr = [2, 3, 9, 5, 11, 4, 99, 13]
let result = arr.sort((a, b) => {
    console.log(a, b)
    // 没有返回值
})
// 输出结果如下， 有点像reduce(只是我理解的像)
// 2 3
// 3 9
// 9 5
// 5 11
// 11 4
// 4 99
// 99 13

const arr = [2, 3, 9, 1, 11, 4, 99, 13]
let result = arr.sort((a, b) => {
    console.log(a, b)
    return a - b
})
// 注意看1，原理是冒泡排序
// 2 3
// 3 9
// 9 1
// 3 1
// 2 1
// 9 11
// 11 4
// 9 4
// 3 4
// 11 99
// 99 13
// 11 13
console.log(result) // [ 1, 2, 3, 4, 9, 11, 13, 99 ]

结论：sort的参数为一个有两个参数的函数，sort根据该函数的返回值决定是否交换两个值

splice() 删除元素，并向数组添加新元素。

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目

• 返回值: 杀包含被删除的项目，如果有的话
• 说明splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
• 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
• 该方法会对数组直接进行修改，和slice不一样

const arr = [1, 2, 3, 4, 5, 6]
arr.splice(0, 2) // 如果只是想删除元素，只需要传入两个参数
console.log(arr) // [ 3, 4, 5, 6 ]
arr.splice(1, 0, 10, 11, 12) // 当第二个参数为0时，该方法变为插入值
console.log(arr) // [ 3, 10, 11, 12, 4, 5, 6 ]
// 返回新数组

fill() 方法用于将一个固定值替换数组的元素。

参数	描述
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。结束填充位置

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

reverse() 数组元素反转。

['a', 'b', 'c'].reverse()
// ['c', 'b', 'a']

includes() 查找数组是否包含某个元素 返回布尔

---

• toSource() 返回该对象的源代码

  • 该方法可以忽略，多数浏览器都不支持
  • 只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法

• valueOf() 返回数组对象的原始值

  • 关于这个的理解可以参考 www.cnblogs.com/chyingp/arc…

以上就是我对js数组基本方法的部分理解