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())
  

总结

本文主要介绍了 Js 中的数组访问方法，如有错误请您指出，希望能得到您的指正，之后还会讲剩下的迭代方法，敬请期待~

参考链接

• Array - JavaScript | MDN
• JavaScript Array Methods
• ECMAScript 6入门