JavaScript - 总结【Array】

最新推荐文章于 2024-06-19 23:35:43 发布

ぃ Gavin

最新推荐文章于 2024-06-19 23:35:43 发布

阅读量122

点赞数

分类专栏： Javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45064834/article/details/120609678

版权

Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（一）如何判断一个对象是否是数组 - 2种

instanceof 操作符

const cars = ['Audi', 'Benz', 'BMW']
cars instanceof Array	// true

Array.isArray()方法

const cars= ['Audi', 'Benz', 'BMW']
Array.isArray(cars)		// true

（二）创建数组的方式 - 4种

使用 Array 构造函数

const arr1 = new Array()	// []
const arr2 = new Array(5)	// [ <5 empty items> ] 传入一个数值，会被解析会数组的 length,并创建该数组
const arr3 = new Array('red', 'green', 'blue'， 6)	//  ['red', 'green', 'blue', 6] 传入要保存的元素，会直接创建包含 传入项 的数组

注意：
（1）new 操作符可省略
（2）如果在构造函数中传入一个数值，则会创建一个长度为该数值的新数组；如果传入的是其他类型的数据，会被当做数组项来解析

数组字面量
```
const arr4 = []
```
注意：
（1）使用数组字面量创建数组时，不会调用 Array 构造函数
ES6 中新增的 Array.from() & Array.of()
Array.from() - 用于将 类数组 转换为数组
Array.of() - 用于将 一组参数 转换为数组
```
const str = 'hello world!'
Array.from(str)				// [ 'h', 'e', 'l', 'l', 'o' ]
Array.of(1, 3, 5, 7, 9)		// [ 1, 3, 5, 7, 9 ]
```
注意：
（1）类数组一般指：一个可迭代的数据结构或提供了 length 属性和可索引元素的结构

（三）迭代器方法

在 ES6 中，在 Array 的原型上提供了三个用于检索 数组内容 的方法

Object.keys() — 返回数组索引的迭代器
Object.values() — 返回数组元素的迭代器
Object.entries() — 返回数组 索引/值 的迭代器

const cars =  ['Audi', 'Benz', 'BMW']
Object.keys(cars)		// [ '0', '1', '2' ]
Object.values(cars)		//  [ 'Audi', 'Benz', 'BMW' ]
Object.entries(cars)	//  [ [ '0', 'Audi' ], [ '1', 'Benz' ], [ '2', 'BMW' ] ]

（四）栈方法

数组提供了 push() & pop() 方法，可以使数组成为像栈一样 后进先出（LIFO）的结构！

push() 方法：新增方法 (又名：推入) 接收任意数量的参数，会把参数添加到数组的末尾，并返回数组的最新长度
pop() 方法：删除方法 (又名：弹出) 删除数组末尾的最后一项，并返回被删除的元素

const cars =  ['Audi', 'Benz', 'BMW']
const len = cars.push('Porsche')	// 4
const delItem = cars.pop()			// 'Porsche'

（五）队列方法

数组提供了 unshift() & shift() 方法，可以使数组成为像队列一样 先进先出（FIFO）的结构！

unshift(): 新增方法，在数组的开头添加任意多的值，并返回数组的最新长度
shift():删除方法，删除数组开头的第一项，并返回被删除的项

const cars =  ['Audi', 'Benz', 'BMW']
const len = cars.unshift('JEEP')	// 4
const delItem = cars.shift()			// 'JEEP'

（六）排序方法

数组有两个方法可以用来对元素进行排序：reverse() & sort() 方法

reverse()：将数组元素反向排列
sort()：默认按照升序的方式排列数组元素

const nums = [1, 2, 13, 4, 15]
nums.reverse()		// [ 15, 4, 13, 2, 1 ]
nums.sort() 		// [ 1, 13, 15, 2, 4 ]

因为 sort() 方法在工作时，会把每一项元素转换为字符串再进行比较，结果出现了：2 比 15 大，所以，在使用 sort() 方法时，可以传递一个 比较函数 给 sort() 方法：

// 完整写法
nums.sort((a, b) => a < b ? -1 : a > b ? 1 : 0)		// [ 1, 2, 4, 13, 15 ]

// 简写（常用）
nums.sort((a, b) => a - b)		// [ 1, 2, 4, 13, 15 ]

比较函数：其接收两个参数，如果第一个参数应该排在第二个参数前面，则返回一个负值；如果第一个参数应该排在第二个参数后边，则返回一个正值；如果两个参数相等，返回0即可；

（七）操作方法

concat() 方法：可接受任意多参数，在现有数组后面进行拼接

	const cars = ['Audi', 'Benz', 'BMW']
	const newCars = cars.concat('JEEP', ['Porsche', 'Bentley'])
	console.log(cars)		// cars ==> [ 'Audi', 'Benz', 'BMW' ]
	console.log(newCars)	// newCars ==> [ 'Audi', 'Benz', 'BMW', 'JEEP', 'Porsche', 'Bentley' ]

slice() 方法：截取数组元素
- 只传入一个参数：返回该索引到数组末尾的所有元素
- 传入两个参数：第一个值作为开始截取位置的索引，第二值作为结束截取的索引位置 ( start, end ]

const cars = [ 'Audi', 'Benz', 'BMW', 'JEEP', 'Porsche', 'Bentley' ]
const cars1 = cars.slice(2)			// [ 'BMW', 'JEEP', 'Porsche', 'Bentley' ]
const cars2 = cars.slice(1, 4)		// [ 'Benz', 'BMW', 'JEEP' ]
const cars3 = cars.slice(-2, -4)	// [ 'BMW', 'JEEP' ]
const cars3 = cars.slice(-4, -2)	// []

splice() 方法：在数组中 插入元素
- 删除：接收两个参数，第一个参数为删除元素的起始位置，第二个参数为删除的数量【返回被删除元素组成的数组】
- 插入：接收三个参数，分别为：开始位置、0(要删除元素的数量) 和要插入的元素【返回空数组】
- 替换：接收三个参数，分别为：开始位置、删除元素的数量和要插入的元素【返回被删除元素组成的数组】

const cars = [ 'Audi', 'Benz', 'BMW', 'JEEP', 'Porsche']
cars.splice(1, 2)		// [ 'Benz', 'BMW' ] 此时cars为 ==> [ 'Audi', 'JEEP', 'Porsche']
cars.splice(1, 0, 'BYD', '红旗')	// [] 此时cars为 ==> [ 'Audi', 'BYD', '红旗', 'JEEP', 'Porsche' ]
cars.splice(1, 2, '东方红')		// [ 'BYD', '红旗' ] cars为 ==> [ 'Audi', '东方红', 'JEEP', 'Porsche' ]

小结：先前提到的：push()、pop()、unshift()、shift()、reverse()、sort() 和 splice() 这七个方法，均会对原数组进行修改，所以 Vue2 中数据响应式对数组的七个方法进行了重写

（八）搜索和位置方法

严格相等
ES提供了3个严格相等的方法，分别是：indexOf()、lastIndexOf()、includes()；
- 它们均可提供两个参数，分别是要查找的元素和【可选】的起始搜索位置；
- indexOf()与lastIndexOf()两个方法都会返回要查找元素在数组中的位置，如果没有找到则返回 -1；
- includes()返回布尔值，表示是否至少找到了一个与指定元素匹配的项；
- 比较时，采用全等（===）比较，比较的两项必须严格相等。
```
const cars = [ 'Audi', 'Benz', 'BMW', 'JEEP', 'Porsche']
console.log(cars.indexOf('Benz'))			// 1 当前元素的位置
console.log(cars.lastIndexOf('Benz'))		// 1 从尾部向前找，该元素第一次出现的位置，仍然是1
console.log(cars.includes('Audi'))			// true
```
断言函数
ES中的find() 和 findIndex()方法使用了断言函数；
- 断言函数接受三个值：element、index、array；
  element：当前搜索的元素
  index：当前元素的索引
  array：当前正在搜索的数组
- find()方法：返回第一个匹配元素的项；
- findIndexOf()方法：返回第一个匹配元素的索引；
- 找到匹配项后，均不再继续搜索。
```
const cars = [
  {name: 'Audi', color: 'red', price: '100'},
  {name: 'BMW', color: 'blue', price: '200'},
  {name: 'Benz', color: 'black', price: '300'},
]
cars.find((ele, idx) => ele.price > 200) 		// {name: 'Benz', color: 'black', price: '300'}
cars.findIndex((ele, idx) => ele.price > 200) 	// 2
```

（九）迭代方法

ES 为数组定义了5个迭代方法，每个方法均可接收两个参数：以每一项为参数运行的函数和【可选】的作用域对象；

every()：
对数组的每一项都运行传入的函数，如果对每一项函数都返回true，那么方法返回true；
some()
对数组的每一项都运行传入的函数，如果有一项返回true，那么方法返回true；
forEach()
对数组的每一项都运行传入的函数，没有返回值；
map()
对数组的每一项都运行传入的函数，并返回由美词函数调用的结果构成的数组
filter()
对数组的每一项都运行传入的函数，并返回由函数返回true的项组成的新数组

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]
nums.every((item, index, array) => item > 0) 		// true 所有项都大于0
nums.some((item, index, array) => item < 2)			// true 第一项满足条件
nums.forEach()										// 相当于for循环
nums.map((item, index, array) => item * 2)			// [2, 4, 6, 8, 10, 12, 14, 16, 18]
nums.filter((item, index, array) => item % 2 === 0) // [2, 4, 6, 8]

（十）归并方法

ES为数组提供了两个归并方法，分别是；reduce()和reduceRight()

它们都会迭代数组的所有项，并在此基础上构建一个最终返回值；
二者的区别在于遍历数组元素的方向不同，一个是从前往后、另一个是从后往前；
方法接收两个参数
- 对每一项都会运行的归并函数------接收4个参数，分别是：
  上一个归并值（如果第二项没有指定起始值，那么此处值应为数组的第一项）
  当前项
  当前项的索引
  数组本身
- 【可选】的起始值

let nums = [1, 2, 3, 4, 5]
nums.reduce((prev, cur, index, array) => prev += cur, 100) 		// 115 起始值为：100