js中数组的api详解教程三

1,037 阅读5分钟

数组的其他常用api

reverse()

reverse方法的作用是颠倒数组中元素的顺序,该方法会改变原数组,不会生成新的数组,返回值是翻转后的数组。

let arr = [123456]

let res = arr.reverse()

console.log('翻转后的数组:', res, "原数组:", arr)
//   翻转后的数组: [ 6, 5, 4, 3, 2, 1 ] 原数组: [ 6, 5, 4, 3, 2, 1 ]

sort()

sort可以用于数组的排序,能够将数组升序排序和降序排序,该方法会改变原数组,不会生成新的数组,返回值是翻转后的数组。

let arr = [128456]

let res1 = arr.sort((a, b) => { // 升序排序
  return a - b;
})
console.log("返回值:", res1, "原数组", arr)

let res2 = arr.sort((a, b) => { // 降序排序  
   return b - a;
})
console.log("返回值:", res2, "原数组", arr)

// 返回值: [ 1, 2, 4, 5, 6, 8 ] 原数组 [ 1, 2, 4, 5, 6, 8 ]
// 返回值: [ 8, 6, 5, 4, 2, 1 ] 原数组 [ 8, 6, 5, 4, 2, 1 ]

concat()

concat 用于拼接元素,该方法可以传任意多个值,可以是具体的值,也可以是数组对象。返回值是一个新的数组。

let arr = [1]

let newArr = arr.concat(2, [34], {name'张三'}, falseundefinednull,'李四''')

console.log('拼接后的数组:', newArr, "原数组", arr)
// 拼接后的数组: [ 1, 2, 3, 4, { name: '张三' }, false, undefined, null, '李四', '' ] 
// 原数组 [ 1 ]

slice()

slice 可从已有的数组中返回选定的元素。该方法可以传入两个值,两个值都是数组元素的下标值,第一参数表示元素选取的起始位置,第二个参数表示元素选取的结束位置。使用这个方法要记住,包头不包尾,什么意思呢? 看下面的代码。该方法会返回一个子数组。

let arr = [123455]

let subArr = arr.slice(13);

console.log('子数组:', subArr, "原来的数组:", arr)
// 子数组: [ 2, 3 ] 原来的数组: [ 1, 2, 3, 4, 5, 5 ]

join()

join方法可以将数组转化为一个字符串,并用指定的字符进行分割。该方法不会影响到原数组,返回值是一个字符创。

let arr = [123455]

let strArr = arr.join('--');

console.log('转化的字符串:', strArr, "原来的数组:", arr)
// 转化的字符串: 1--2--3--4--5--5 原来的数组: [ 1, 2, 3, 4, 5, 5 ]

数组的其他不常用api

isArray()

isArray 方法可以判断一个值是否是数组。

let arr = [123455]

let isArray = Array.isArray(arr)

console.log('判断是否是数组:', isArray)
// 判断是否是数组: true

toString 和 toLocaleString

isString 和 toLocaleString 方法可以将一个数组转化为字符串。

let arr = [123455]

let strArr1 = arr.toString()
let strArr2 = arr.toLocaleString()

console.log('数组转字符串: ', strArr1)
console.log('数组转字符串: ', strArr2)
// 数组转字符串:  1,2,3,4,5,5// 数组转字符串:  1,2,3,4,5,5

valueOf()

返回 Array 对象的原始值。

let arr = [123455]

let res = arr.valueOf()

console.log('返回 arr 对象的原始值: ', res)
// 返回 arr 对象的原始值:  [ 1, 2, 3, 4, 5, 5 ]

你可能没用过的api

copyWithin()

该方法可以将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。该方法可以传入3个参数。注意: IE 11 及更早版本不支持 copyWithin() 方法

  • target:要覆盖的起始位置
  • start:要复制的起始位置
  • end: 要复制的结束位置
let arr = [12345678910]

let res = arr.copyWithin(503)

console.log('返回值: ', res, "原数组:", arr)

// 返回值:  [ 1, 2, 3, 4,  5,1, 2, 3, 9, 10] 
// 原数组: [ 1, 2, 3, 4,  5,1, 2, 3, 9, 10]

fill()

fill方法用于将一个固定值替换数组的元素,该方法可以传入三个参数。

  • value:要填充的值
  • start:要填充的起始位置
  • end:要填充的结束位置
    开始填充和结束填充的位置要记住包头不包尾
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

let res = arr.fill('--', 0, 2)

console.log('返回值: ', res)
console.log('原数组: ', arr)
// 返回值:  ['--''--', 3, 4,  5,    6,    7, 8,  9, 10 ]
// 返回值:  ['--''--', 3, 4,  5,    6,    7, 8,  9, 10 ]

很尴尬,flat,flatMap,flatten这三个方法我百度了一下,有点懵,所以就先不说着三个函数的用法了。

总结

以上数组的api的用法,是我通过百度和实践得出来的,因为篇幅实在太长了,很多api的用法其实没那么简单,有很多的奇技淫巧的,后面如果有机会会单独拎出来。总之,不断复盘,不断复盘,不断复盘。虽然花费的时间很多,但是这些都是基础,基础扎实,学什么都不虚。