来源于红宝书第四版和一些个人的积累

1. 创建方法

  1. 构造函数
1
2
3
4
let colors = new Array() // 创建了一个空数组
let colors = new Array(20) // 创建了长度为20的数组，元素均为empty即空
let colors = new Array("yellow") // ["yellow"] 创建包含yellow字符串的数组
let colors = new Array("green","yellow") // 也可以传入多个参数 ["green","yellow"]
  1. 字面量
1
2
let colors = []
let colors = ["green","yellow"]

2. 数组方法（静态方法）

Array.from() 将类数组对象转化为真实数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 可以是任意可迭代元素，如字符串
console.log(Array.from("Matt")) // =console.log()> ["M","a","t",'t']

// Map结构
const m = new Map().set(1,2).set(3,4) // Map(2) {1 => 2, 3 => 4}
console.log(Array.from(m)) // [[1,2],[3,4]]

// Set结构
const s = new Set(1,2,3,4) // Set(3) {1, 2, 3}
console.log(Array.from(s)) //[1,2,3,4]

//函数arguments
function getArgsArray(){
    return Array.from(arguments)
}
getArgsArray(1,2,3,4) // [1,2,3,4]

可以利用Set的特性和Array.from实现快速的数组去重

1
2
3
4
function noRepeat(arr){
	return Array.from(new Set(arr))
    // return [...new Set(arr)] 利用扩展运算符的写法
}

Array.of() 用于将一组参数转为数组对象

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

Array.isArray() 检测元素是否是数组

1
2
console.log(Array.isArray(new Set([1,2,3]))) // false
console.log(Array.isArray([1,2,3])) // true

3. 数组空位

1
2
3
4
5
const arr = [,,,,]  // 创建了包含5个元素的数组 每一项都是空/empty
// map 会忽略empty
arr.map(v=>6) // [empty × 5]
// join 会视为 空字符串
arr.join('-') // "---"

4. 数组索引

取得或设置数组的值，需要使用索引（下标）访问对应元素

1
2
3
4
let colors = ['yellow','blue','green']
colors[0] // 'yellow'
colors[1] = 'black'
console.log(colors) // ['yellow','black','green']

length 保存数组的长度信息

1
2
let colors = ['yellow','blue']
console.log(colors.length) // 2

length 属性并不是只读的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 设置为小于当前长度的值，会删除掉尾部元素
let colors = ['yellow','blue']
colors.length = 1
console.log(colors) // ['yellow']

// 设置为大于当前长度的值，会填充为empty，访问时为undefined
let colors = ['yellow','blue']
colors.length = 5
console.log(colors) // ['yellow','blue',empty,empty,empty]
console.log(colors[3]) // undefined

// 快速的向数组的尾部追加元素（类似push方法）
let colors = ['yellow']
colors[colors.length] = 'green'
colors[colors.length] = 'red'
console.log(colors) // ['yellow','green','red']

5. 数组方法（实例方法）

5.1迭代器方法

keys() 返回数组索引的迭代器

values() 返回数组元素的迭代器

entries() 返回 索引=>值 对 的迭代器

1
2
3
4
5
6
// 返回的都是迭代器，可以通过扩展运算符或Array.from转换为数组
const arr = ['this','is','array','function']
console.log(Array.from(arr.keys())) // [0,1,2,3]
console.log([...arr.keys()]) // [0,1,2,3]
console.log(Array.from(arr.values())) // ['this','is','array','function']
console.log(Array.from(arr.entries())) // [[0,'this'],[1,'is'],[2,'array'],[3,'function']]

5.2复制和填充方法

ES6新增的两个方法

fill() 将指定元素全部或部分填充到数组

1
2
3
4
5
6
7
8
9
10
11
12
13
// 全部替换
let arr = [1,2,3,4]
arr.fill(0) // [0,0,0,0]

// 部分替换
let arr1 = [1,2,3,4]
arr1.fill(0,2) // [1,2,0,0] 填充索引大于等于2的部分

let arr2 = [1,2,3,4,5]
arr1.fill(0,1,4) // [1,0,0,0,5] // 填充索引大于等于1，小于4的部分

let arr3 = [1]
arr2.fill(0,-1,3) // [1] // 索引超出部分无效，部分有效仅生效有效索引部分

copyWithin() 按照指定范围浅复制数组中的部分内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let ints
// 重置ints数组的方法
function reset(){
    ints = [0,1,2,3,4,5,6,7,8,9]
}
reset()
// 从0开始复制，填充到索引5的位置
ints.copyWithin(5)
console.log(ints) // [0,1,2,3,4,5,0,1,2,3,4,5]
reset()
// 从5开始复制，填充到索引0的位置
ints.copyWithin(0,5) // [5,6,7,8,9,5,6,7,8,9]
reset()
// 从0开始到3结束复制，填充到索引4的位置 含0不含3
ints.copyWithin(4,0,3) // [0,1,2,3,0,1,2,7,8,9]

// 超出索引范围无效

5.3转换方法

toString() & toLocaleString()

**valueOf() **

1
2
3
4
5
const colors = ['yellow','red','green']
console.log(colors.toString()) // yellow,red,green
console.log(colors.valueOf()) // ["yellow", "red", "green"]
// alert 期待字符串会在后台调用toString() 方法
alert(colors.valueOf()) // yellow,red,green

注意： 如果数组中的某一项是 null 或 undefined，则在 join()、toLocaleString()、toString()、valueOf() 返回的结果中会以空字符串表示

5.4栈方法

push() 数组尾部推入一个或多个元素，返回数组最新的长度

pop() 数组尾部删除一个元素，返回被删除的元素

1
2
3
4
5
6
7
8
9
// push
let colors = ['blue']
const count = colors.push('yellow','red')
console.log(colors) //['blue','yellow','red']
console.log(count) // 3
// pop
const item = colors.pop()
console.log(colors) // ['blue','yellow']
console.log(item) // red

5.5队列方法

unshift()

shift()

1
2
3
4
5
6
7
8
9
10
// shift
let colors = ['yellow','red']
const item = colors.shift() 
console.log(item) // yellow
console.log(colors) // ['red']

//unshift
const count = colors.unshift('green','blue')
console.log(count) // 3
console.log(colors) // ['green','blue','red']

5.6排序方法

sort() 数组排序

reverse() 数组反转

1
2
3
// sort
[2,3,1,4].sort((a,b)=>a-b) //从小到大
[2,3,1,4].sort((a,b)=>b-a) //从大到小

5.7操作方法

concat() 数组合并 不改变原数组

1
2
3
4
5
6
7
8
9
let coldColors = ['blue','purple']
let warmColors = ['blue','purple']
//如果传入的是一个或多个数组，会把数组的每一项都添加到末尾
let colors = coldColors.concat(warmColors)
console.log(colors) // ['blue','purple','red',yellow]
// 传入的不是数组，会将其直接放到结果数组的末尾
console.log(coldColors.concat('cyan')) // ['blue','purple','cyan']

console.log(coldColors,warmColors)// ['blue','purple']，['blue','purple']

splice() 会改变原数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 删除 传入两个参数：要删除的第一个元素的位置，删除元素的数量，返回删除元素的数组
let colors = ['red','yellow','blue']
const deleteItems = colors.splice(0,1)
console.log(colors,deleteItems) // ['yellow','blue'],['red']

// 插入 传入3个以上参数，开始位置、0（删除元素的数量）,后续参数均作为要插入的元素，会在开始位置之前插入元素
let colors = ['red','blue']
colors.splice(1,0,'yellow','green') // 返回[]
console.log(colors) //  ["red", "yellow", "green", "blue"]

// 替换 传入三个以上的参数，开始位置，需要替换元素的数量，替换的元素
let colors = ['red','blue']
colors.splice(0,2,'green','yellow') // ['red','blue']
console.log(colors) // ['green','yellow']

5.8搜索和位置方法

ECMAScript 提供两类搜索数组的方法：按严格相等搜索，按断言函数搜索

  1. 严格相等

indexOf() 从0开始搜索，与每一项进行全等比较，返回第一个匹配的索引，如果没有匹配返回-1

lastIndexOf() 从末尾开始搜索，与每一项进行全等比较，返回第一个匹配的索引，如果没有匹配返回-1

includes() 如果数组中有至少一项匹配，返回true，没有返回 false

  1. 断言函数

find()

findIndex()

断言函数接收三个参数，元素，索引，数组本身

5.9 迭代方法

every() 每一项都运行传入的函数，如果结果都为true，返回true，否则返回false

some() 每一项都运行传入的函数，如果结果都为false，返回false，否则返回true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let numbers = [1,2,3,4,5]
let flag1 = numbers.every((item,index,array)=>{
    return item > 4
})
let flag2 = numbers.every((item,index,array)=>{
    return item > 0
})
let flag3 = numbers.some((item,index,array)=>{
    return item > 4
})
let flag4 = numbers.every((item,index,array)=>{
    return item > 6
})
console.log(flag1,flag2,flag3,flag4) //false true true false

forEach() 每一项都运行传入的函数，没有返回值

map() 每一项都运行传入的函数，返回每次函数运行结果组成的数组

filter() 每一项都运行传入的函数，返回每次函数运行结果为 true 组成的数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let arr = [1,2,3,4,5]
//forEach
const newArr = []
const res1 = arr.forEach((item,index)=>{
    newArr.push(item + 1)
})
console.log(newArr) // [2,3,4,5,6]
console.log(res1) //undefined
//map
const res2 = arr.map((item,index)=>{
    return item + 1
})
console.log(res2) // [2,3,4,5,6]
//filter
const res3 = arr.filter((item,index)=>{
    return item % 2
})
console.log(res3) // [1,3,5]

可以使用map快速取出数组对象的某一属性组成的数组

1
2
3
let list = [{id:1,name:'张三'},{id:2,name:'李四'},{id:3,name:'王五'}]

const nameList = list.map(v=>v.name) // ['张三','李四','王五']

因为filter，reduce，map等返回值还是数组，所以可以连续使用

1
2
3
4
5
6
7
const ScoreList = [{id:1,name:'李四',score:90},{id:2,name:'王五',score:80},{id:1,name:'张三',score:95},{id:1,name:'郭乐',score:85}]

// 计算所有人的成绩
const ScoreSum = ScoreList.map(v=>v.score).reduce((a,b)=>a+b,0) // 350
// 计算分数大于80分的成绩总和
const WellSum = ScoreList.filter(v=>v.score > 80).map(v=>v.score).reduce((a,b)=>a+b,0) // 270
//或 ScoreList.map(v=>v.score).filter(v=>v > 80).reduce((a,b)=>a+b,0) // 270

5.10 归并方法

reduce() 从数组第一项开始遍历到最后一项

reduceRight() 从数组的最后一项开始遍历到第一项

迭代数组的所有项在此基础上构建一个最终返回值

1
2
3
4
5
6
7
8
9
10
// 接收四个参数，上一个归并值，当前项，当前项的索引和数组本身
// 累加
const values = [1,2,3,4,5,6]
let sum = values.reduce((prev,current,index,arr)=>prev+current)
console.log(sum) // 21

// 当数组为空数组时，对其使用reduce会报错
[].reduce((a,b)=>a+b) // Uncaught TypeError: Reduce of empty array with no initial value
// 可以给reduce传递一个初始值
[].reduce((a,b)=>a+b,0) // 0