盘点JavaScript中数组常用的API方法

盘点JavaScript中数组常用的API方法

操作方法

数组基本操作方法有: 增 、 删 、 改 、 查, 需要注意哪些方法会对原数组产生影响, 这个还是比较关键的

增

1. push()

   接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度, 原数组改变。

   const arr = [] // 创建一个数组
   arr.push('red', 'green') // 末尾加入两项
   console.log(arr) // arr = ['red', 'green']
   

2. unshift()

   在数组开头添加任意多个值，然后返回新的数组长度, 原数组改变。

   // 使用上面的 arr 数组, 现 arr 里面有 red green
   arr.unshift('bule', 'pink') // 开头加入两项
   console.log(arr) // red, green, bule, pink
   

3. splice()

   传入三个参数，分别是: 开始位置、0（要删除的元素数量）、插入的元素，返回空数组

   // 继续使用上面的 arr 数组, 现 arr 里面有 red green bule pink
   arr.splice(1, 0, 'yellow', 'orange') // 从第一开始删除 0 个元素, 插入 yellow orange 两个元素
   console.log(arr) // red, green, bule, pink, yellow, orange
   

4. concat()

   会先创建一个当前数组的副本, 然后把它的参数添加到副本的末尾, 最后返回这个新构建的数组, 原数组不变。

   // 继续使用上面的 arr 数组, 现 arr 里面有 red, green, bule, pink, yellow, orange
   const Arr = arr.concat('black',['brown', 'purple'])
   console.log(arr) // red, green, bule, pink, yellow, orange
   console.log(Arr) // red, green, bule, pink, yellow, orange, black, brown, purple
   

删

1. pop()

   删除并返回数组的最后一个元素，同时减少数组的length, 若该数组为空，则返回undefined。原数组改变。

   // 继续使用上面的 arr 数组, 现 arr 里面有 red, green, bule, pink, yellow, orange, black, brown, purple
   const item = arr.pop() // 删除最后一项
   conlose.log(item) // purple
   console.log(arr) // red, green, bule, pink, yellow, orange, black, brown
   

2. shift()

   方法用于删除数组的第一个元素，同时减少数组的length 值，返回被删除的项, 若该数组为空，则返回undefined。原数组改变。

   // 继续使用上面的 arr 数组, 现 arr 里面有 red, green, bule, pink, yellow, orange, black, brown
   const item = app.shift() // 删除第一项
   console.log(item) // red
   console.log(arr) // green, bule, pink, yellow, orange, black, brown
   

3. splice()

   传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组, 原数组改变。

   // 继续使用上面的 arr 数组, 现 arr 里面有 green, bule, pink, yellow, orange, black, brown
   const removed = arr.splice(0, 1) // 从数组的 0 位置开始删除, 删除 1 个, 意思就是把 green 删掉了
   console.log(arr) // bule, pink, yellow, orange, black, brown
   console.log(removed) // ['green'] , 只有一个元素的数组
   

4. slice()

   按照条件查找出其中的部分内容; 创建一个包含原有数组中一个或多个元素的新数组, 原数组不改变。

   // 继续使用上面的 arr 数组, 现 arr 里面有 bule, pink, yellow, orange, black, brown
   const arr1 = arr.slice(1)
   const arr2 = arr.slice(1, 4)
   console.log(arr1) // ['pink', 'yellow', 'orange', 'black', 'brown']
   console.log(arr2) // ['pink', 'yellow', 'orange', 'brown']
   

改

1. splice

   传入三个参数，分别是开始位置，要删除元素的数量，要插入的任意多个元素，返回删除元素的数组，原数组改变。

   // 继续使用上面的 arr 数组, 现 arr 里面有 pink, yellow, orange, brown
   const removed = arr.splice(0, 1,'brown','purple') // 插入两个值, 删除一个元素
   console.log(removed) // ['pink'], 删除那个元素的数组
   console.log(arr) // ['brown','purple', 'yellow', 'orange', 'brown']
   

查

1. indexOf()

   返回要查找的元素在数组中的位置，如果没找到则返回 -1

   const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   numbers.indexof(4) // 3 找 numbers 数组中值为 4 的下标
   numbers.indexof(10) // -1 找不到就返回 -1
   

2. includes()

   返回要查找的元素在数组中的位置，找到返回true，否则false

   const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   numbers.includes(5) // true
   numbers.includes(20) // false
   

3. find()

   返回第一个匹配的元素

   const people = [
       {
           name: 'jeck',
           age: 21
       },
       {
           name:'rose',
           age: 24
       }
   ]
   people.find((element, index, array) => {element.age < 22}) // {name:'jeck', age:21}
   

排序方法

可以用来对元素重新排序

reverse()

将数组元素方向反转, 原数组改变。

const numbers = [1, 2, 3, 4, 5]
numbers.reverse()
console.log(numbers) // [5, 4, 3, 2, 1]

sort()

对数组元素进行排序。按照字符串Unicode码排序，原数组改变。

转换方法

join()

将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。返回包含所有项的字符串

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

迭代方法

用来迭代数组的方法(不会改变数组)

1. some()

   检测数组中的元素是否满足指定条件 如果数组中有元素满足条件返回 true，否则返回 false

   const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   const someResult = numbers.some((item, index, array) => item > 2)
   console.log(someResult) // true
   

2. every()

   检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回 true，否则返回 false

   const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   const someResult = numbers.some((item, index, array) => item > 2)
   console.log(someResult) // false
   

3. forEach()

   对数组每一项都运行传入的函数，没有返回值, 遍历数组

   const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   numbers.forEach((item, index, array) => {
   	// 执行操作
   })
   

4. filter()

   对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回

   const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   const filterResult = numbers.filter((item, index, array) => item > 2)
   console.log(filterResult) // [3, 4, 5, 6, 7, 8, 9]
   

5. map()

   原数组的每一项执行函数后，返回一个新的数组。原数组不变

   const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   const mapResule = numbers.map((item, index, array) => {
       return item * 3
   })
   console.log(mapResule) // [3, 6, 9, 12, 15, 18, 21, 24, 27]