如何创建数组

  1. 使用Array构造函数
  • 可以为Array构造函数传递一个数值，然后length属性就会被自动创建并设置为这个值。例如创建一个长度为10的数组：
let colors=new Array(10)
  • 同时可以给Array构造函数传入要保存的元素。
//创建包含三个字符串值的数组
let colors=new Array("red","blue","yellow")
  1. 使用字面量表示法
let colors=["red","blue","yellow"]

数组的length

通过修改length属性，可以从数组删除或添加元素，例如：

let colors=["red","black"]
colors.length=1
console.log(colors[1]) //undefined
colors[colors.length]="yellow"
console.log(colors[1]) //yellow

检测数组

  • instanceOf操作符
let value=[]
if(value instanceOf Array){
console.log('success') //输出success
}
  • isArray()方法
let value=[]
if(Array.isArray(value)){
console.log('success')
}

区别
instanceOf在只有一个全局执行上下文使用，当使用框架出现多个全局执行上下文使用isArray()方法。

数组的静态方法

from()

  • 描述
    用于将类数组结构转换为数组实例，Array.from()的第一个参数是一个类数组对象，即任何可迭代的结构，或者有一个 length属性和可索引元素的结构。这种方式可用于很多场合：
  • 使用案例
    字符串会被拆分为单字符数组
console.log(Array.from("Matt")); // ["M", "a", "t", "t"]

可以使用 from()将集合和映射转换为一个新数组

 const m = new Map().set(1, 2)
 .set(3, 4); 
const s = new Set().add(1) 
 .add(2) 
 .add(3) 
 .add(4); 
console.log(Array.from(m)); // [[1, 2], [3, 4]] 
console.log(Array.from(s)); // [1, 2, 3, 4]

Array.from()对现有数组执行浅复制

const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1); 
console.log(a1); // [1, 2, 3, 4] 
alert(a1 === a2); // false

可以使用任何可迭代对象

 *[Symbol.iterator]() { 
 yield 1; 
 yield 2; 
 yield 3; 
 yield 4; 
 } 
}; 
console.log(Array.from(iter)); // [1, 2, 3, 4]

arguments 对象可以被轻松地转换为数组

function getArgsArray() { 
 return Array.from(arguments); 
} 
console.log(getArgsArray(1, 2, 3, 4)); // [1, 2, 3, 4]

from()也能转换带有必要属性的自定义对象

 0: 1, 
 1: 2, 
 2: 3, 
 3: 4, 
 length: 4 
}; 
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]

**Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值，而无须像
调用 Array.from().map()那样先创建一个中间数组。还可以接收第三个可选参数，用于指定映射函
数中 this 的值。但这个重写的 this 值在箭头函数中不适用。**

const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1, x => x**2); 
const a3 = Array.from(a1, function(x) {return x**this.exponent}, {exponent: 2}); 
console.log(a2); // [1, 4, 9, 16] 
console.log(a3); // [1, 4, 9, 16]

of()

  • 描述
    Array.of()可以把一组参数转换为数组。这个方法用于替代在 ES6之前常用的 Array.prototype.

slice.call(arguments)，一种异常笨拙的将 arguments 对象转换为数组的写法：

  • 例子
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 
console.log(Array.of(undefined)); // [undefined]

数组中的常用方法

join()方法

  • 描述
    join(str)方法中str参数为分割符，其作用将数组以某个分隔符连接成字符串。
  • 案列
let colors=["red","black","yellow"]
console.log(colors.join(","))  //red,black,yellow

栈方法

  1. push()方法
    该方法作用：向数组末尾插入数据项。
  2. pop()方法
    该方法作用：删除数组的最后一项，同时减少length的值，返回被删除的项。

栈方法的构建
栈的特点是先进后出，以下是模拟栈的先进后出的流程：

let colors=new Array() //创建一个数组
let count =colors.push("red","green") //推入两项，
console.log(count) //2
count=colors.push("black")
console.log(3)
let item=colors.pop() //删除最后一项
console.log(item) //black
console.log(colors.length) //2

队列方法

  1. shift()方法
    该方法的作用：删除数组的第一项同时返回删除的元素
  2. unshift()方法
    该方法的作用：在数组开头添加任意多个值，然后返回新的长度

队列方法的构建
队列的特点是先进先出，下面是模拟队列工作的流程：

let colors=new Array()
let count=colors.push("red","green")
console.log(count) //2
count=colors.push("black")
console.log(count) //3
let item=colors.shift()
console.log(item) //red
console.log(colors.length)  //2

排序方法

  1. reverse()方法
    该方法的作用是将数组元素方向排列。例如：
let value=[1,2,3,4,5]
value.reverse()
console.log(value) //5,4,3,2,1
  1. sort()方法
    该方法中可以传入一个比较函数作为参数，然后对数组进行降序或者升序排序，该比较函数接收两个参数。当第一个参数小于第二个参数返回-1时，对数组进行升序排序，当第一个参数小于第二个参数返回1时，对数组进行降序排序。
  • 升序排序
function compare(value1,value2){
if(value1<value2){
return -1
}else if(value1>value2){
return 1
}else{
return 0
}
}
let values=[3,4,2,1,6]
values.sort(compare)
console.log(values) //1,2,3,4,6
  • 降序排序
function compare(value1,value2){
if(value1<value2){
return 1
}else if(value1>value2){
return -1
}else{
return 0
}
}
let values=[0,1,5,10]
values.sort(compare)
console.log(values) //10，5，1，0

concat()方法

该方法的作用：创建一个原来数组的副本，然后将传入的参数添加到副本的末尾创建一个新的数组，例如：

let color=["black","red","yellow"]
let color1=color.concat("green")
consloe.log(color1) //black,red,yellow,green

slice()方法

该方法用于创建一个包含原数组中一个或多个元素的新数组。slice()可以接收一个或2个参数即返回元素的开始索引和结束索引，返回的元素中不包含结束索引的元素，如果只传入一个元素则返回索引到数组末尾的所有元素，如下所示：

let colors=["red","green","blue","yellow","purple"]
let colors2=colors.slice(1)
let color3=colors.slice(1,4)
console.log(color2) //green,blue,yellow,purple
console.log(color3) //green,blue,yellow

splice()方法

该方法的主要目的是向数组中间插入元素，有三种不同的方式。

  1. 删除操作
    需要给该方法传入了2个参数，即要删除的第一个元素的位置和要删除的元素数量，例如：
let colors=["red","blue","yellow"]
let removed=colors.splice(0,1)
console.log(colors) //"blue","yellow"
console.log(removed) //red 只有一个元素的数组
  1. 插入操作
    需要给该方法传入3个参数，开始位置、0（要删除的元素数量）和要插入的元素，例如：
let colors=["red","blue"]
let removed=colors.splice(1,0,"orange","black")
console.log(colors)  //"red","orange","black","blue"
console.log(removed) //[]
  1. 替换操作
    需要给该方法出入3个参数：开始位置、要删除元素的数量和要替换的元素，例如：
let colors=["red","blace","blue"]
let removed=colors.splice(1,1,"yellow","white")
console.log(colors) //"red","yellow","white","blue"
console.log(removed) //"black"

搜素和位置方法

indexOf()方法

该方法的作用：从前往后搜索数组，返回第一次符合条件的元素索引位置，如果没有查找到返回-1例如：

let value=[1,2,3,4,4,5]
let index=value.indexOf(4)
console.log(index) //3

lastIndexOf()方法

该方法和indexOf()作用一样，只是该方法时从后往前搜索，例如：

let value=[1,2,3,4,4,5]
let index=value.lastIndexOf(4)
console.log(index) //4

includes()方法

该方法从前往后搜索数组，当找到符合条件的元素则返回true,否则返回false,例如：

let value=[1,2,3,4]
console.log(value.includes(2)) //true

find()方法

该方法从数组最小索引开始搜索，返回第一个匹配的元素。该方法传入一个函数作为参数，该函数有三个参数：元素、索引、数组本身。元素即当前搜素的元素、索引即当前搜素的元素索引，数组即搜素的数组。例如：

const people=[
{name:'matt',age:12},
{name:'tom',age:18}
]
console.log(people.find((element,index,arry)=>{element.age<15}))
//输出：{name:'matt',age:12}

findIndex()方法

该方法从数组最小索引开始搜索，返回第一个匹配的元素索引。该方法传入的参数同find()方法，例子：

const people=[
{name:'matt',age:12},
{name:'tom',age:18}
]
console.log(people.findIndex((element,index,array)=>{element.age<15})) //0

注意：当找到匹配项后，这两个方法都不再继续搜素

迭代方法

数组中定义了5个迭代方法，每个方法接收两个参数：以每一项为参数运行的函数，以及可选的作为函数运行上下文的作用域对象(影响函数中this的值)。传给每个方法的函数接收3个参数：数组元素、元素索引和数组本身。

every()方法

该方法的作用：对数组每一项都运行传入的函数，如果每一项函数都返回true，则这个方法返回true。
例如：

let numbers=[1,2,3,4]
let result=numbers.every((item,index,array)=>{item>2})
console.log(result) //false

filter()方法

该方法的作用：对数组每一项都运行传入的函数，函数返回true的项会组成数组之后返回。
例子：

let numbers=[1,2,3,4]
let filterresult=numbers.filter((item,index,array)=>{item>2})
cnnsole.log(filterresult) //[3,4]

forEach()方法

该方法的作用：对数组每一项都运行传入的函数，没有返回值，常常用来遍历数组。
例子：

let numbers=[1,2,3,4]
numbers.forEach((item,index,array)=>{console.log(item)})//输出1，2，3，4

map()方法

该方法的作用：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。
例子：

let numbers=[1,2,3]
let result=numbers.map((item,index,array)=>{item*2})
console.log(result)  //2,4,6

some()方法

该方法的作用：对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true。
例子：

let numbers=[1,3,4,5,2]
let result=numbers.some((item,index,array)=>{item>2})
console.log(result) //true

归并方法

reduce()方法和reduceRight()方法，这两个方法都会迭代数组的所有项，并在此基础上构建一个最终返回值。reduce方法从头到尾迭代，reduceRight从后往前迭代。这两个方法都接收两个参数，第一个参数：对每一项都会运行的归并函数，第二个参数：可选的以之为归并起点的初始值。第一个参数的函数接收4个参数：上一个归并值、当前项、当前项的索引和数组本身。当这两个方法可选的第二个参数没有时，就将数组的第一项作为上一个归并值。
例子：

let values=[1,2,3,4,5]
let sum=values.reduce((prev,cur,index,array)=>{
prev+cur
})
console.log(values) //15
最后修改：2022 年 05 月 13 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏