Js | Js数组方法使用及细节总结（中）

前言

本文将总结 Js 中数组方法中的访问方法，和上一篇一样，对于大部分都是很少使用的方法，则以简单的示例说明功能和使用方法，您还可以参考文末给出的链接再加深学习，里面的介绍也更加地全面，本文样例代码均基于ES6语法。

访问方法

访问方法即是不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值的方法，与之对立的是修改器方法，具体可见上一篇，下面开始介绍访问方法：

arr.concat(value1[, value2[, ...[, valueN]]])

用于合并两个或多个数组，参数value可为数组/数值。此方法不会更改现有数组，而是返回一个新数组，详细使用方法请见链接。

let arr = [1, 2, 3]

// output: [1, 2, 3, 4, 5, 6]
// 将参数按顺序一个一个添加到数组
console.log(arr.concat(4, 5, 6))

// output: [1, 2, 3, [4], 5, 6]
// 将数组元素按顺序一个一个添加到数组
console.log(arr.concat([[4], 5, 6]))

// output: [1, 2, 3, 4, 5, 6]
// 参数可同时包括数组或数值
console.log(arr.concat(4, [5, 6]))

// output: [1, 2, 3]
// 原数组未被修改，因此只有使用如下格式保存结果才有意义
// let newArr = oldArray.concat(arr)
console.log(arr)

arr.join([separator])

将一个数组（或一个类数组对象）的所有元素按separarator分割连接成一个字符串并返回这个字符串，separarator默认为,。如果数组只有一个元素，那么将返回该元素而不使用分隔符，详细使用方法请见链接。

let arr1 = [1, 2, 3, 4, 5]

// output: "1,2,3,4,5"
// 默认以<,>分割
console.log(arr1.join())

// output: "1-2-3-4-5"
// 使用<->进行分割
console.log(arr1.join('-'))

let arr2 = [1, 2, [3, 4, 5]]

// output: "1,2,3,4,5"
// 数组内的数组元素会被拆分合并
console.log(arr2.join())

// output: "1, 2, 3,4,5"
// 可以发现<3,4,5>并没有使用<, >进行拆分
// 和[1, 2, 3, 4, 5].join(', ')结果不同
// 因此在数组中有数组元素时，结果可能会不符合预期
console.log(arr2.join(', '))

// output: [1, 2, [3, 4, 5]]
// 原数组不变
console.log(arr2)

arr.slice([begin[, end]])

方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end），原始数组不会被改变，由于是浅拷贝，特别需要注意数组存在引用类型数据，详细使用方法请见链接。

let arr1 = [1, 2, 3, 4, 5]

// output: [2, 3, 4]
// 返回下标[1, 3]范围内的数据
console.log(arr1.slice(1, 4))

// output: [3, 4, 5]
// 返回下标[2, arr1.length - 1]范围内的数据
console.log(arr1.slice(2))

// output: [1, 2, 3, 4, 5]
// 返回原数组所有数据的一个浅拷贝
console.log(arr1.slice())

// output: [1, 2, 3, 4, 5]
// 原数组内容不变
console.log(arr1)

let arr2 = [[1], 2, 3, 4, 5]
let temp = arr2.slice()

// output: [[1], 2, 3, 4, 5]
// 无参时返回元素组的浅拷贝
console.log(temp)

temp[0][0] = [0]

// output: [[0], 2, 3, 4, 5]
// temp内的数据被修改
console.log(temp)

// output: [[0], 2, 3, 4, 5]
// 由于是浅拷贝，元素组的数据也被修改
console.log(arr2)

注意

对于arr.slice([begin[, end]])中的两个参数begin和end均可省略，end若省略，则默认为arr.length，begin若省略，则默认为0，此外begin和end均可为负，对于负数参数的讨论可见上一篇，此外自己也可进行编码验证。此外关于深拷贝与浅拷贝的区别，大家可以自行搜索，了解区别，这里推荐一篇文章。

arr.indexOf(searchElement[, fromIndex])

方法返回在数组中从给定起始位置(若省略参数，则从下标0开始，起始位置也可为负数)，可以找到的一个给定元素的第一个索引，如果不存在，则返回-1，详细使用方法请见链接。

let arr1 = [3, 2, 3, 3, 2]

// 以下四个例子，结果很明显不做解释
// output: 0
console.log(arr1.indexOf(3))
// output: 2
console.log(arr1.indexOf(3, 2))
// output: 2
console.log(arr1.indexOf(3, -3))
// output: -1
console.log(arr1.indexOf(4))

let arr2 = [3, 2, {age: 18}, [3], 2]

// 由于indexOf使用strict equality（===）进行判断
// 故以下两种情况结果均为-1，即未查找到
// 若需要在数组中查找引用类型数组，则需要自己写for循环进行判断
// output: -1
console.log(arr2.indexOf([3]))
// output: -1
console.log(arr2.indexOf({age: 18}))

arr.lastIndexOf(searchElement[, fromIndex])

方法返回指定元素从给定起始位置(若省略参数，则从下标arr.length - 1开始，起始位置也可为负数)，在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始，需要注意的点也和indexOf相同，这里只展示示例代码及结果，详细使用方法请见链接。
```
let arr = [3, 2, 3, 3, 2]

// 以下四个例子，结果很明显不做解释
// output: 3
console.log(arr.lastIndexOf(3))
// output: 2
console.log(arr.lastIndexOf(3, 2))
// output: 2
console.log(arr.lastIndexOf(3, -3))
// output: -1
console.log(arr.lastIndexOf(4))
```
arr.toString()

返回一个字符串，表示指定的数组及其元素，其中使用逗号分隔每个数组元素，该方法无参。详细使用方法请见链接。
```
let arr = [1, 2, 3, [4, 5]]

// ouput: "1,2,3,4,5"
console.log(arr.toString())
```

arr.toLocaleString([locales[,options]])

返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 “,”）隔开。

let arr1 = [
  new Date(2018, 1, 1), 
  new Date(2019, 1, 1), 
  new Date(2020, 1, 1)
]

// output: "H30/2/1 0:00:00,H31/2/1 0:00:00,R2/2/1 0:00:00"
// 该日期格式化为将传入的日期格式（默认为本地日期格式），转换为日本的日期格式
// 2018为平成30年，2020为令和2年，故输出中出现 H30 和 R2
console.log(arr1.toLocaleString("ja-JP-u-ca-japanese"))

let arr2 = [1, 2, 3]
let option = { style: 'currency', currency: 'CNY' }

// output: "¥1.00,¥2.00,¥3.00"
// 将数组中的每个元素以逗号分隔，并将数字格式化为人民币表示形式
console.log(arr2.toLocaleString('zh-CN', option))

关于toLocaleString中的locale参数及option的更多信息，可以查看该链接。

arr.includes(valueToFind[, fromIndex])(ES6)

用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回false，该方法的注意事项也和indexOf相同（特别注意参数为引用元素时），该方法可以简化判断一个数组是否在指定值，不必再使用arr.indexOf(target) ！== -1这种格式了。详细使用方法请见链接。
```
let arr = [1, 2, 3, 4, 5]

// 以下三个例子，结果很明显不做解释
// output: true
console.log(arr.includes(3))
// output: false
console.log(arr.includes(6))
// output: false
console.log(arr.includes(3, 4))
```
~~toSource()~~(非标准)

返回一个字符串，代表该数组的源代码，该方法无参，为非标准特性，不建议使用，只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，目前只有Firefox for Android支持，详细使用方法请见链接。
```
let arr = new Array("a", "b", "c")

//ouput: "["a", "b", "c"]"
console.log(arr.toSource())
```