繁杂的数组 API

JavaScript 数组的API在开发过程中尤为重要。

数组的方法分为，改变自身的数组方法，不改变自身的数组方法，以及遍历数组的方法。

创建数组的方法

数组的构造器 Array

// 对象字面量的写法
const arr1 = []

// Array 构造器方法
const arr2 = Array(5)  // [empty*5] 创建一个数组长度为5的数组

const arr3 = Array(1, 2, 3) // [1, 2, 3]

ES6 新增的构造方法：Array.of 和 Array.from

Array.of

作用：是将参数依次转化成数组的，然后返回这个新数组，不管这个参数是数字还是其他。

它与 Array 构造器功能一致，唯一的区别就是在单个参数的处理上。

Array.of(8); // [8]
Array(8); // [empty × 8]

Array.of(8, 5); // [8, 5]
Array(8, 5); // [8, 5]

Array.of('8'); // ["8"]
Array('8'); // ["8"]

Array.from

作用：是将一个类数组转化成一个数组，只要一个对象有迭代器，就可以转换成数组（返回新数组，不改变原数组）

可以传三个参数，作用分别为：

1. 类数组对象，必传
2. 加工函数，新的数组可以经过包装之后，再返回，必须有返回值
3. this 作用域，表示加工函数的 this 指向

const obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

const arr = Array.from(obj, function (value, index){
  console.log(value, index, this, arguments.length)
  return value.repeat(2)
}, obj)

console.log(arr)

输出结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wMYpTRqL-1615198628238)(C:\Users\63260\Desktop\js\数组API\ArrayFrom.png)]

Array.from 还可以处理，String，Set，Map 数据结构

// String
Array.from('abc'); // ["a", "b", "c"]

// Set
Array.from(new Set(['abc', 'def']));  // ["abc", "def"]

// Map
Array.from(new Map([[1, 'ab'], [2, 'de']]));  // [[1, 'ab'], [2, 'de']]

数组的判断方法

const arr = []

console.log(Array.isArray(arr)) // true

console.log(arr instanceof Array)  // true

console.log(arr.constructor === Array)  // true

console.log(Array.prototype.isPrototypeOf(arr))  //true
 
console.log(Object.getPrototypeOf(arr) === Array.prototype)  // true

console.log(Object.prototype.toString.apply(arr) === '[object Array]')  // true

实现一个 Array.isArray 方法

Array.isArray = function(arg) {
    return Object.prototype.toString.apply(arg) === '[object Array]'
}

数组改变自身的方法

改变数组自身的方法，一共有九种，pop，push，reverse，shift，sort，splice，unshift，以及ES6新增的 copyWithin 和 fill。

pop

删除数组最后一个元素，返回被删除的元素，数组为空返回 undefined

const arr = ['red', 'blue', 'green']

const res1 = arr.pop()
console.log(res1)  // 'green'
console.log(arr)   // ['red', 'blue']

push

在数组后面追加元素，返回的是数组新的 length

const arr = ['red', 'blue', 'green']

const res = arr.push('black', 'white')
console.log(res)  // 5
console.log(arr)  // ['red', 'blue', 'green', 'black', white]

reverse

颠倒元素的位置，改变了原数组，并且返回该数组的引用

const arr = ['red', 'blue', 'green']

const res = arr.reverse()
console.log(res)  // ["green", "blue", "red"]
console.log(arr)  // ["green", "blue", "red"]

shift

删除数组的第一个元素，并返回删除的元素

const arr = ['red', 'blue', 'green']

const res = arr.shift()
console.log(res)  // 'red'
console.log(arr)  // ['blue', 'green']

unshift

将一个或多个元素添加到数组开头，并且返回数组的新长度（length）

const arr = ['red', 'blue', 'green']

const res = arr.unshift('white', 'black')
console.log(res)  // 5
console.log(arr)  // ["white", "black", "red", "blue", "green"]

sort

将数组进行排序，并返回新数组

const arr = ['red', 'blue', 'green']

const res = arr.sort()
console.log(res)  // ["blue", "green", "red"]
console.log(arr)  // ["blue", "green", "red"]

如果是数字

从小到大排序

const arr2 = [3, 5, 1]
const res = arr2.sort((a, b) => a-b)
console.log(res)  // [1, 3, 5]

从大到小排序

const arr2 = [3, 5, 1]
const res = arr2.sort((a, b) => b-a)
console.log(res)  // [5, 3, 1]

splice

传三个参数：

• 第一个参数为开始索引，必传，如果只穿一个参数则表示，将这个元素后面的所有元素删除掉，如何使负数，从-1开始，删除最后一位，返回出来
• 第二个参数为删除元素（传几删几个），可选参数
• 第三个参数为添加的内容（可以传多个元素），可选参数
• 并且返回被删除内容的数组形式。

const arr = ['red', 'blue', 'green']

const res = arr.splice(1, 1)
console.log(res)  // ['blue']
console.log(arr)  // ['red', 'green']

const res = arr.splice(1, 1, 'white', 'black')
console.log(res)  // ['blue']
console.log(arr)  // ["red", "white", "black", "green"]

const arr = ['red', 'blue', 'green']

const res = arr.splice(-1)
console.log(res)  // ['green']
console.log(arr)  // ['red', 'blue']

copyWithin

浅拷贝数组的一部分复制到同一个数组的另一个位置（覆盖数组的原来的位置），并返回这个新数组，不会改变数组的长度

const arr = ['red', 'blue', 'green']

const res = arr.copyWithin(0, 1, 2)
console.log(res)  // ["blue", "blue", "green"]
console.log(arr)  // ["blue", "blue", "green"]

传三个参数：

• 第一个参数是要覆盖添加的位置索引
• 第二个参数是复制开始的位置
• 第三个参数是复制结束的位置，但不包含结束位置的元素

fill

用一个固定元素，填充数组，可选起始位置和终止位置，并且返回一个新的数组

const arr = ['red', 'blue', 'green']

const res = arr.fill(6, 1, 2)
console.log(res)  // ["red", 6, "green"]
console.log(arr)  // ["red", 6, "green"]

const res1 = arr.fill(6)
console.log(res)  // [6, 6, 6]

传三个参数：

• 第一个参数，表示用来填充数组的值
• 第二个参数，表示索引开始填充的位置，可选传入的参数
• 第三个参数，表示索引结束的位置，不包含结束位置索引的位置，可选传入的参数

出一道题目

给你两个有序整数数组 nums1 和 nums2，请你将 nums2 合并到 nums1 中，使 nums1 成为一个有序数组。
输入:
nums1 = [1,2,3,0,0,0]； m = 3
nums2 = [2,5,6]； n = 3
输出: [1,2,2,3,5,6]

let nums1 = [1,2,3,0,0,0], nums2 = [2,5,6], m =3, n =3

const merge = (nums1, m, nums2, n) => {
  nums1.splice(m)
  nums2.splice(n)
  nums1.push(...nums2)
  nums1.sort((a, b) => a - b)
  return nums1
}

nums1 = merge(nums1, m, nums2, n)
console.log(nums1)   // [1, 2, 2, 3, 5, 6]

不改变数组自身的方法

不改变数组自身的方法，分别有：concat join slice toString toLocaleString indexOf lastIndexOf toSource(未形成标准) includes

concat

用于连接数组或值，并且返回一个新的数组，不改变原数组

const arr = ['red', 'blue', 'green']

const res = arr.concat('white', ['black', 'yellow'])
console.log(res)  // ["red", "blue", "green", "white", "black", "yellow"]
console.log(arr)  // ['red', 'blue', 'green']

join

可以将数组（或者类数组），根据传入的指定字符，连接成字符串，如果不传，则用逗号分开，并且返回连接的字符串，不改变原数组

const arr = ['red', 'blue', 'green']

const res = arr.join()
console.log(res)   // red,blue,green
console.log(arr)   // ['red', 'blue', 'green']

const res1 = arr.join('')
console.log(res1)  // redbluegreen

const res2 = arr.join('-')
console.log(res2)  // red-blue-green

slice

将一个数组根据这个数组的索引开始和结束位置，剪切成一个新的数组，并且返回这个新数组，不改变原数组

const arr = ["red", "blue", "green", "yellow"]

const res = arr.slice(1, 3)
console.log(res)  // ["blue", "green"]
console.log(arr)  // ["red", "blue", "green", "yellow"]

const res1 = arr.slice(1)
console.log(res1)  // ["blue", "green", "yellow"]

传参方式：

• 不传参，表示默认从零开始，到最后一个索引（包含最后一个元素）
• 传一个参数表示索引开始的位置，如果是负数，从-1开始，则取出最后一位元素，以数组的形式返回
• 传两个参数表示索引结束的位置，但是不包含结束位置索引的元素，如果开始结束都为负数，如slice(-2, -1)，则表示取出数组的倒数第二位元素

toString

将数组元素转换成以逗号连接的字符串，并且返回这个字符串，不改变原数组，和 join() 方法相似

const arr = ["red", "blue", "green", "yellow"]

const res = arr.toString()
console.log(res)  // red,blue,green,yellow
console.log(arr)  // ["red", "blue", "green", "yellow"]

toLocaleString

返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串以逗号连接在一起。

const array= [{name:'zz'}, 123, "abc", new Date()];

const str = array.toLocaleString();
console.log(str); // [object Object],123,abc,2016/1/5 下午1:06:23

indexOf

是否能找到该元素的索引值，找不到返回 -1，找到则返回对应的索引值。

const arr = ["red", "blue", "green", "yellow"]

const res = arr.indexOf('blue')
console.log(res)  // 1

const res1 = arr.indexOf('white')
console.log(res1)  // -1

const res2 = arr.indexOf('green', 2)
console.log(res2)  // 2

传参：

• 第一个参数为，要搜索的值
• 第二个参数，在那个索引开始搜索，如果是负数，从-1开始往后搜索

lastIndexOf

与 indexOf 相反，表示从数组最后一个元素开始查找，返回数组索引

includes

判断数组中是否包含某个元素，返回 Boolean值，有则返回 true ，没有返回 false

查找方式和传参与 indexOf 相似

const array = [-0, 1, 2];

console.log(array.includes(+0)); // true
console.log(array.includes(1)); // true

const array = [NaN];
console.log(array.includes(NaN)); // true

数组的遍历

不会改变自身遍历的方法分别有，forEach every some filter map reduce reduceRight entries find findIndex keys values

forEach

对数组的每一元素，执行一次给定的函数，不改变原数组，可以将值赋值给新变量，该方法也没有返回值。

var array = [1, 3, 5];
var obj = {name:'aa'};

var sReturn = array.forEach(function(value, index, array){
  array[index] = value;
  console.log(this.name); // 'aa' 被打印了三次, this指向obj
},obj);

console.log(array);   // [1, 3, 5]
console.log(sReturn); // undefined, 可见返回值为undefined

### every

用来检测数组里所有元素，是否都能符合条件，或者通过某个指定函数的测试。返回一个 Boolean 值。

const arr = [3, 5, 7, 13, 9]

const res = arr.every((item, index, array) => {
  return item < 20
})
console.log(res)  // true

const res1 = arr.every((item, index, array) => {
  return item < 10
})
console.log(res1)  // false

some

用来检测数组中的元素，是不是至少有1个元素，能符合条件，或者通过某个指定函数的测试。返回的是一个 Boolean 值。（可以用来检测数组中是否存在某个值）

const arr = [3, 5, 7, 13, 9]

const res = arr.some((item, index, array) => {
  return item === 5
})
console.log(res)  // true

filter

将符合条件的元素，放入一个新数组，并且返回这个新数组。

const arr = [3, 5, 7, 13, 9]

const res = arr.filter((item, index, array) => {
  return item > 10
})
console.log(res)

检索字符串

const color = ['red', 'blue', 'yellow', 'black', 'white', 'green']
function selColor (ele) {
  return color.filter(item => {
    return item.toLowerCase().indexOf(ele.toLowerCase()) !== -1
  })
}

console.log(selColor('bl'))  // ["blue", "black"]
console.log(selColor('e'))   // ["red", "blue", "yellow", "white", "green"]

map

对数组中的每一个元素进行重新包装之后，再返回一个新数组。

const arr = [3, 5, 7, 13, 9]

const res = arr.map((item, index, array) => {
  return item * 2
})
console.log(res)  // [6, 10, 14, 26, 18]

reduce

数组中的每个元素执行相加（升序执行），最后返回元素相加的和。

const res = arr.reduce((acc, cur, idx, src) => {
  acc += cur
  return acc
}, 0)
console.log(res)  // 37

参数代表：

1. Accumulator (acc) (累计器)
2. Current Value (cur) (当前值)
3. Current Index (idx) (当前索引)
4. Source Array (src) (源数组)

将二维数组转成一维数组

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
 ( acc, cur ) => acc.concat(cur),
 []
);
console.log(flattened)  // [0, 1, 2, 3, 4, 5]

计算数组中每个元素出现的个数

const color = ['red', 'black', 'black', 'white', 'green', 'red']
const newColor = color.reduce((acc, cur) => {
  if(cur in acc) {
    acc[cur]++
  }else {
    acc[cur] = 1
  }
  return acc
}, {})
console.log(newColor)  // {red: 2, black: 2, white: 1, green: 1}

数组去重

const arrs = [3, 5, 6, 3, 6, 8, 9]
const res = arrs.reduce((pre, cur) => {
  if(pre.indexOf(cur) === -1) {
    pre.push(cur)
  }
  return pre
}, [])
console.log(res)

reduceRight

与 reduce 相似，但是从后往前累加。

find

返回数组中符合条件的第一个元素的值，没有返回 undefined

const arr = [3, 5, 7, 13, 9]

const res = arr.find((item, index, array) => {
  return item > 10
})
console.log(res)   // 13

findIndex

与 find 相似，不过返回的是数组的索引（index），没有返回 -1

return acc
}, {})
console.log(newColor) // {red: 2, black: 2, white: 1, green: 1}

数组去重

```js
const arrs = [3, 5, 6, 3, 6, 8, 9]
const res = arrs.reduce((pre, cur) => {
  if(pre.indexOf(cur) === -1) {
    pre.push(cur)
  }
  return pre
}, [])
console.log(res)

reduceRight

与 reduce 相似，但是从后往前累加。

find

返回数组中符合条件的第一个元素的值，没有返回 undefined

const arr = [3, 5, 7, 13, 9]

const res = arr.find((item, index, array) => {
  return item > 10
})
console.log(res)   // 13

findIndex

与 find 相似，不过返回的是数组的索引（index），没有返回 -1