【JavaScript基础】你真正了解如今的Js数组吗，看这篇就（Go）够了

【JavaScript基础】你真正了解如今的Js数组吗，看这篇就（Go）够了

博客说明

文章所涉及的部分资料来自互联网整理，当然还有自己个人的总结和看法，分享的目的在于共建社区和巩固自己。

引用的资料如有侵权，请联系本人删除！

幸好我在，感谢你来！

说明

数组用过很多了，应该是太平常了。在循环♻️的时候，我这么说是不是不太专业呀（有点不太聪明的样子）！

那好，这样说？

在遍历数组时候，甚至想对数组有所操作的（是不是已有内置的方法了？），都可以考虑一下，先别自己写一大坨（我以前就是！！！），特别是在加入了es6语法之后。

熟悉数组的操作是一项基本工，在刷LeetCode的时候，因为对数组不熟悉而不能落实自己的思路，那简直就是，太可惜了！所以学数组，从现在起！！！

不过话说回来，你看了本文也不一定记得全部，一定要多用，多练，多总结！然后多出点BUG（这个法子特别灵，一下就会！）

什么是数组？

那当然是一堆数字的组合？这样说有点不准！

数组：小子！注意！是相当不准！

我：是一堆元素的组合！

数组：。。。

来看百度百科的解释

数组（Array）是有序的元素序列。 若将有限个类型相同的变量的集合命名，那么这个名称为数组名。

组成数组的各个变量称为数组的分量，也称为数组的元素，有时也称为下标变量。

用于区分数组的各个元素的数字编号称为下标。数组是在程序设计中，为了处理方便， 把具有相同类型的若干元素按有序的形式组织起来的一种形式。 这些有序排列的同类数据元素的集合称为数组。

数组是用于储存多个相同类型数据的集合。

数组的属性

• constructor 返回创建数组对象的原型函数。

  [].length = 2
  // 2
  

• length 设置或返回数组元素的个数。

  [1,3].length
  // 2
  

• prototype 允许你向数组对象添加属性或方法。

  // 添加属性
  Array.prototype.myToUser = 'hahah'
  // 'hahah'
  [].myToUser
  // 'hahah'
  
  // 添加方法
  Array.prototype.toOne = function() {
    for (i = 0; i < this.length; i++) {
      this[i]='one';
    }
  }
  var arr = ["red","hi","good","hello"];
  arr.toOne()
  // arr ['one', 'one', 'one', 'one']
  

我知道xdm估计只有length用的最多，别问我怎么知道！

不过现在既然看了文章，也同时了解一下其他的两个属性吧！

数组的方法

高阶函数相关

这些高级数组操作，你看看有几个眼熟？

filter()

方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意

filter() 不会对空数组进行检测。

filter() 不会改变原始数组。

语法

array.filter(function(currentValue,index,arr), thisValue)

示例

const arr = [1,2,3,4]

arr.filter(item => item > 2)
// 注意是返回值！
(2) [3, 4]

forEach()

方法用于调用数组的每个元素，并将元素传递给回调函数。

注意

forEach() 对于空数组是不会执行回调函数的。

语法

array.forEach(function(currentValue, index, arr), thisValue)

示例

const arr = [1,2,3,4]
let sum = 0
arr.forEach(item => sum += item)
// arr 10

every()

方法用于检测数组所有元素是否都符合指定条件。

注意

every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

every() 不会对空数组进行检测。

every() 不会改变原始数组。

语法

array.every(function(currentValue,index,arr), thisValue)

示例

const arr = [1,2,3,4]
arr.every(item => item > 1)
// false
arr.every(item => item > 0)
// true

find()

方法返回通过测试（函数内判断）的数组的第一个元素的值。

注意

find() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 undefined

find() 对于空数组，函数是不会执行的。

find() 并没有改变数组的原始值。

语法

array.find(function(currentValue, index, arr),thisValue)

示例

const arr = [1,2,3,4]
arr.find(item => item > 1)
// 2

findIndex()

方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

注意

findIndex() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组，函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

语法

array.findIndex(function(currentValue, index, arr),thisValue)

示例

const arr = [1,2,3,4]
arr.findIndex(item => item > 1)
// 1
arr.findIndex(item => item === 7)
// -1

some()

方法返回通过测试（函数内判断）的数组的第一个元素的值。

注意

方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

语法

array.some(function(currentValue, index, arr),thisValue)

示例

const arr = [1,2,3,4]
arr.some(item => item > 1)
// true
arr.some(item => item > 5)
// false

map()

方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

注意

map() 方法按照原始数组元素顺序依次处理元素。

map() 不会对空数组进行检测。

map() 不会改变原始数组。

语法

array.map(function(currentValue,index,arr), thisValue)

示例

const arr = [1,2,3,4]
const arr2 = arr.map(item => item + 1)
// arr2
// (4) [2, 3, 4, 5]

sort()

方法用于对数组的元素进行排序。

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

注意

当数字是按字母顺序排列时"40"将排在"5"前面。

使用数字排序，你必须通过一个函数作为参数来调用。

这种方法会改变原始数组！

语法

array.sort(sortfunction)

示例

var arr = [1,3,5,3,2];
arr.sort(function(a,b){return a-b});
// arr [1, 2, 3, 3, 5]

操作数组相关

pop()

方法用于删除数组的最后一个元素并返回删除的元素。

注意

此方法改变数组的长度！

语法

array.pop()

示例

const arr = [1,2,3,4]
arr.pop()
// 4
// arr [1, 2, 3]

push()

方法可向数组的末尾添加一个或多个元素，并返回新的长度。

注意

新元素将添加在数组的末尾。

此方法改变数组的长度！

语法

array.push(item1, item2, ..., itemX)

示例

const arr = [1,2,3,4]
arr.push(5)
// 5
// arr [1, 2, 3, 4, 5]

shift()

方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

注意

此方法改变数组的长度！

语法

array.shift()

示例

const arr = [1,2,3,4]
arr.shift()
// 1
// arr 2, 3, 4]

unshift()

方法可向数组的开头添加一个或更多元素，并返回新的长度。

注意

该方法将改变数组的数目。

语法

array.unshift(item1,item2, ..., itemX)

示例

const arr = [1,2,3,4]
arr.unshift(3)
// 5
// arr [3, 1, 2, 3, 4]

查找数组相关

indexOf()

方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。

如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

语法

array.indexOf(item,start)

示例

const arr = [1,2,3,4]
arr.indexOf(3)
// 2

lastIndexOf()

方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

如果要检索的元素没有出现，则该方法返回 -1。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。

如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

如果在数组中没找到指定元素则返回 -1。

语法

array.lastIndexOf(item,start)

示例

const arr = [1,2,3,4]
arr.lastIndexOf(1)
// 0

includes()

方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

语法

arr.includes(searchElement, fromIndex)

示例

const arr = [1,2,3,4]
arr.includes(1)
// true
arr.includes(1,2)
// false

字符串相关

join()

方法用于把数组中的所有元素转换一个字符串。

元素是通过指定的分隔符进行分隔的。

语法

array.join(separator)

示例

const arr = [1,2,3,4]
arr.join(",")
// '1,2,3,4'

toString()

方法可把数组转换为字符串，并返回结果。

注意

数组中的元素之间用逗号分隔。

语法

array.toString()

示例

const arr = [1,2,3,4]
arr.toString()
// '1,2,3,4'

计算数组相关

reduce()

方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意

reduce() 对于空数组是不会执行回调函数的。

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

示例

const arr = [1,2,3,4]
arr.reduce((a, b) => a + b)
// 10

reduceRight()

方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

注意

reduce() 对于空数组是不会执行回调函数的。

语法

array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

示例

const arr = [1,2,3,4]
arr.reduceRight((a, b) => a + b)
// 10

返回可迭代对象

entries()

方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

迭代对象中数组的索引值作为 key， 数组元素作为 value。

语法

array.entries()

示例

const arr = [1,2,3,4]
arr.entries()
// Array Iterator {}
// [0, 1]
// [1, 2]
// [2, 3]
// [3, 4]

keys()

方法用于从数组创建一个包含数组键的可迭代对象。

如果对象是数组返回 true，否则返回 false。

语法

array.keys()

示例

const arr = [1,2,3,4]
arr.keys()
// Array Iterator {}

基本操作

from()

方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。

如果对象是数组返回 true，否则返回 false。

语法

Array.from(object, mapFunction, thisValue)

示例

const arr = [1,2,3,4]
Array.from(arr, item => item * 10);
// [10, 20, 30, 40]

reverse()

方法用于颠倒数组中元素的顺序。

语法

array.reverse()

示例

const arr = [1,2,3,4]
arr.reverse()
// [4, 3, 2, 1]

slice()

方法可从已有的数组中返回选定的元素。

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注意

slice() 方法不会改变原始数组。

语法

array.slice(start, end)

示例

const arr = [1,2,3,4]
arr.slice(0, 1)
// [1]

copyWithin()

方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

语法

array.copyWithin(target, start, end)

示例

const arr = [1,2,3,4]
arr.copyWithin(2, 0, 2)
// [1, 2, 1, 2]

valueOf()

方法返回 Array 对象的原始值。

注意

该原始值由 Array 对象派生的所有对象继承。

valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

valueOf() 方法不会改变原数组。

数组中的元素之间用逗号分隔。

语法

array.valueOf()

示例

const arr = [1,2,3,4]
arr.valueOf()
// [1, 2, 3, 4]

splice()

方法用于添加或删除数组中的元素。

注意

这种方法会改变原始数组。

语法

array.splice(index,howmany,item1,.....,itemX)

示例

const arr = [1,2,3,4]
arr.splice(2, 1)
// [3]
// arr [1, 2, 4]

const arr = [1,2,3,4]
arr.splice(2, 1, 4)
// [3]
// arr [1, 2, 4, 4]

concat()

方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

语法

arr.concat(arr1,arr2,...,arrN)

案例

const arr = []
const arr1 = [1, 2]
const arr2 = [3, 4]

arr.concat(arr1, arr2)
// 注意是返回值！
(4) [1, 2, 3, 4]

isArray()

方法用于判断一个对象是否为数组。

语法

Array.isArray(obj)

注意

不是这样用的哈，它是Array对象提供的方法，把需要检测的对象传参进去

image-20220109174511411

示例

const arr = []
Array.isArray(arr)
// true

fill()

方法用于将一个固定值替换数组的元素。

语法

array.fill(value, start, end)

示例

var arr = ["good", "yes", "no", "hello"];
arr.fill("one", 2, 4);

// 改变了原数组
(4) ['good', 'yes', 'one', 'one']

总结

这一番总结下来，着实花了我不少时间，不光是让你们学到的很多，我也是务实了不少基础。

修修补补，查漏补缺，慢慢堆积成堡垒！你我都是高级，即使不是，将来也是！

感谢

❤️❤️❤️ 万能的网络！

以及勤劳的自己，个人博客，GitHub测试，GitHub

公众号【归子莫】，小程序【小归博客】

如果你感觉对你有帮助的话，不妨给我点赞吧，持续关注也行哈！