【总结系列】对JS数组来一次总结

前言

数组是最常用的数据类型之一,那么按道理讲已经非常熟悉了吧,为什么还要来一次总结呢??其实目的还是为了一些不常用的属性和方法,或者通过这些方法实现一些异想天开的小需求吧。所以,本文将总结一切关于数组的东西,但是不是一个基础教程,对于简单的概念以及用法就忽略啦。

通过本文可以学习到:

  • 数组的属性
  • 数组的静态方法
  • 数组的实例方法
  • ES6+ 新方法
  • 通过数组的内置方法实现一些小功能

数组的属性

MDN 文档上,记录着数组的属性只有两个:length 和指向原型的 prototype 。所以就一笔带过啦,前者是描述数组长度的属性,后者是指向原型对象的家伙。

不过这里想提点一下 length 的一个另类用法:去除数组的最后一个元素。

移除元素有很多方法,通过 length 也可以移除元素,如果将数组的长度缩小(比原长度小),那么将会有部分元素被移除。

【示例】:

//原数组,长度为5
let arr = [1,2,3,4,5]
arr.length -= 1
console.log(arr) //[1,2,3,4]

数组的静态方法

如果没有过 Java 经验,静态方法这个表达似乎有点不太友好,其实就是定义在 Array 上的方法啦,注意是直接定义在 Array 上的,而不是原型对象上。

Array.from()

这是 ES6 新增的方法,该方法用于将两类对象转换为数组:

  • 可迭代对象(可遍历对象)
  • 类数组对象(伪数组对象)

转个字符串试试看:

//将字符串转数组
let result = Array.from("jonas")
result //["j", "o", "n", "a", "s"]

当然,类数组,Set,甚至是 Map 都是可以通过该方法转换的,通过 Set 元素的唯一性和这个方法就可以实现数组去重了:

Array.from(new Set(arr))

Array.isArray()

该方法是 ES5 的方法了,所以基本可以放心使用。用于判断一个对象是否为数组,返回布尔值。

用于很简单,这里不贴代码咯。需要注意的是,Array.prototype 也是一个数组,该方法会返回 true

Array.of()

该方法用于创建数组,将不定长的参数作为数组的元素,结果返回这个新建的数组。

【示例】:

let arr = Array.of(1,2,3,4,5)
arr //[1,2,3,4,5]

数组的实例方法

实例方法就是定义在 Array.prototype 上的方法,数组实例都可以调用。

遍历器相关的方法

与遍历器相关的方法有三个:

  • entries() —— 该方法返回一个遍历器对象,该对象包含数组中每个元素的索引和值。
  • keys() —— 返回一个包含数组每个元素索引的遍历器对象
  • values() —— 返回一个包含数组每个元素值的遍历器对象

【示例】:

let arr = [1,2,3,4,5]
let result = arr.entries()
result.next() //{value: [0,1], done: false}

let result2 = arr.keys()
result2.next() //{value: 0, done: false}

let result3 = arr.values()
result3.next() //{value: 1, done: false}

遍历元素的方法

forEach()

这是最纯粹遍历数组元素的方法,该方法接受两个参数,第一个参数是回调函数,每个元素都会执行一次,函数接受三个参数,分别是当前元素的值,索引,以及原数组;第二个参数能给回到函数指定 this

该方法没有返回值。

filter()

该方法用于过滤数组元素,接受两个参数,第一个参数是一个回调函数,用于设置过滤条件;第二个参数可以设置函数中的 this

需要注意的是,该方法不会改变原数组,而是返回一个新的数组,新的数组只会留下能通过回调函数检测的元素。

【示例】:

let arr =  [1,2,3,4,5]
let result = arr.filter(item => item > 2)
console.log(result) //[3, 4, 5]

map()

该方法可以给数组的元素加工,同样接受两个参数,第一个是回调函数,第二个参数可以设置函数中的 this

【示例】:

let arr = [1,2,3,4,5]
let result = arr.map(item => item * 2)
console.log(result) //[2, 4, 6, 8, 10]

every()

该方法用于测试数组中的每个元素是否都能通过某个指定函数的测试,返回一个布尔值。如果参数为空数组,则返回 true

【示例】:

let arr = [1,2,3,4,5]
let result = arr.every(item => item > 0)
console.log(result) //true

some()

every() 是相似的,上面的方法是全部通过才返回 true,而 some() 只要有一个元素通过一个函数的测试就返回 true。如果参数是一个空数组,则返回 false

let arr = [1,2,3,4,5]
let result = arr.some(item => item > 10)
console.log(result) //false

操作元素的方法

push()

该方法用于向数组末尾添加一个或多个元素,接收一个不定长参数,返回数组最新的长度。该方法会改变原数组。

pop()

删除数组的最后一个元素,返回被删除的值。该方法会改变原数组。

unshift()

向数组的开头添加一个或多个元素,该方法接收一个不定长参数,返回新的长度。该方法会改变原数组。

shift()

删除数组中的第一个元素,并返回这个值。该方法会改变原数组。

splice()

该方法可以添加,插入,修改,删除元素。这是一个多功能方法,该方法会改变原数组。

slice()

截取数组,该方法接收两个参数,分别表示开始索引和结束索引。截取的结果放到一个新数组中,该方法不会改变数组。

注意:该方法是倩考本的!

flat()

该方法用于数组的扁平化,参数表示层数。可以传入 Infinity 表示将所有层次扁平,得到一个一维数组。

copyWithin()

该方法用于复制数组的一部分到同一个数组的另外一个位置,该方法不会改变原数组。该方法接收三个参数:

  • 第一个参数是目标位置的索引
  • 第二个参数是截取片段的开始索引
  • 第三个参数截取片段的结束索引(不包括这个位置)

注意:结果会覆盖原位置上的元素,而不是插入操作

【示例】:

let arr = [1,2,3,4,5]
let result = arr.copyWithin(2,0,2)
console.log(result) //[1, 2, 1, 2, 5]

查找元素的方法

find()

返回数组中满足提供的函数的第一个元素的值,否则返回 undefined

let arr = [1,2,3,4,5]
let result = arr.find(item => item > 0)
console.log(result) //1

findIndex()

方法返回数组中满足提供函数的第一个元素的索引。

indexOf()

方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回 -1

与之相似的还有一个方法: lastIndexOf() 不同的是该方法会从个数组的末尾往前检索。

includes()

该方法用于判断一个数组是否包含一个指定的值,返回一个布尔值。

排序方法

sort()

该方法用原地算法对数组的元素进行排序,并返回数组。该方法不会改变原数组,返回排序后的数组。

该方法接收一个函数作为参数,函数接受两个参数,这两个参数就是一次排序比较中从数组取出的两个元素。如果返回值小于0,则不交换顺序。

let arr = [1,4,2,5,3]
let result = arr.sort((a,b) => a-b) //升序,降序改为b-a即可

reverse()

取数组的倒序,并返回排序后的数组。

转换方法

join()

默认返回一个以逗号分隔每个元素的字符串,接收一个参数,该参数表示分隔符。

toString()

返回一个以逗号分隔每个元素的字符串。

注意:toString() 是调用 Array.prototype 上的,而不是 Object 原型上的。

concat()

以调用该方法的数组为副本创建一个数组,参数为不定长参数,如果参数为数组,那么直接将数组中的所有元素浅拷贝到调用该方法的数组中;如果参数为非数组,那么直接将这个参数作为新数组的元素。

【示例】:

//原数组
let arr = [1,2,3]
let result = arr.concat(4,5,6,[7,8,9])
result //[1,2,3,4,5,6,7,8,9]

结语

文中故意省略了一个常用的方法 reduce() ,原因是该方法的用途和功能太多了,会另外以一篇文章来介绍。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章