数组是经常用到的一种数据结构
定义方法
let a = new Array(3)
let b = [1, 2, 3]
如何定义一个只有一个元素的数组？
new Array(n)表示有n个空元素的的数组，利用Array.of(n),可以定义一个只有n元素的数组
类型转换
利用
join可以把数组转成字符串
let a = [1, 2, 3, 4, 5]
let b = a.join('')
console.log(b);
说明： join 的作用就是将数组中的所有元素用指定的符号连接，成为一个字符串
如何把DOM集合NodeList转换成普通数组形式？
Nodelist形式无法使用.map(),reduce()等方法(能用forEach())，处理不太方便，因此需要转换成普通数组类型
let titles = document.querySelectorAll('h1');
[...titles].map((v, i,titles) => {
console.log(v);
})
titles.map()//Uncaught TypeError: titles.map is not a function
注意： 利用展开语法可以把DOM集合转换成普通数组形式
解构赋值
是一种数组间批量赋值的方法
let [name, age] = ['fin', 18]
console.log(name)//fin
console.log(age)//18
如果用到展开语法
let arr = [...'fin']
console.log(arr);//[ 'f', 'i', 'n' ]
let [a, ...b] = [1, 'fin', 2, 3]
console.log(a, b);//1 [ 'fin', 2, 3 ]
注意：
...在变量(前)位置，表示 “合并，聚拢”
...在值位置(后)，表示 “分散，拆解”
关于数组的一些方法
1.截取数组
方法： slice(from,to) & splice(from,len)
区别：
slice()只是截取并返回一部分，原数组不会改变splice()为截取并返回部分，原数组变为截取后剩余部分
let arr = [1, 2, 3, 4, 5]
console.log(arr.slice(0, 2));//[1,2]
console.log(arr);//[1,2,3,4,5]
console.log(arr.splice(2, 2));//[3,4]
console.log(arr);//[1,2,5]
2.元素添加与移除
方法： unshift() & shift() 与 push() & pop()
区别：
| 方向/方式 | 添加 | 移除 |
|---|---|---|
| 前面 | unshift() |
shift() |
| 后面 | push() |
pop() |
如何在中间某个位置插入？
let arr = [1, 2, 3, 4, 5]
arr.splice(2, 0, 'fin')
console.log(arr);//[ 1, 2, 'fin', 3, 4, 5 ]
说明：
arr.splice(2, 0, 'fin')表示在原数组中截去2开始0长度的一段，然后用'fin'替换，相当于在原数组索引为2的位置插入fin 。
/**
* 指定数组中的某个元素移动到指定位置
* @param{Array}arr
* @param{Number}from
* @param{Number}to
* @returns {*}
*/
function move(arr, from, to) {
if (from < 0 || to > arr.length) {
console.error('参数错误')
return
}
let moveItem = arr.splice(from, 1)//得到的是一个元素的数组形式、
arr.splice(to, 0, ...moveItem)
return arr
}
let arr = [1, 2, 'fin', 3, 4]
move(arr, 2, 4)
console.log(arr);//[ 1, 2, 3, 4, 'fin' ]
3.清空数组
方法：
let arr = [1, 2, 3, 4]
arr=[]
console.log(arr);//[]
let arr = [1, 2, 3, 4]
arr.length=0
console.log(arr);//[]
区别：
arr=[]只是改变了arr的指针指向；arr.length = 0是真正意义上的清空
4.查找操作
关于
indexof() lastInsexof() includes()三个方法，可以看前一篇文章,GO
补充方法： find() & findIndex()
let arr = [1, 2, 3, 4]
let a = arr.find((v, i, o) => {
return v === 3
})
console.log(a);//3
arr = [
{name: 'jqf', age: '18'},
{name: 'fin', age: '19'}
]
let res = arr.find((value) => {
return value.name = 'jqf'
})
console.log(res);//{name: 'jqf', age: '18'}
说明： find() 方法更适用于查找对象等引用类型组成的数组，这样更具有优势
注意：includes()方法查找对象等引用类型时会出错
５.排序方法
方法： sort()
使用：
let arr = [1, 8, 3, 9, 6, 5, 2, 7, 0]
arr.sort((a, b) => a - b)
console.log(arr);//[0, 1, 2, 3, 5, 6, 7, 8, 9]
let col = ['a', 'c', 'b']
col.sort()
console.log(col);//['a', 'b', 'c']
说明： 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。
6.循环遍历数组
方法： for-of、for-in、forEach()、map()、reduce()、filter()、every()、some().
说明：
👉for-of
let arr = [
{name: "jqf", age: 18, gender: 'male'},
{name: 'zzh', age: 20, gender: 'female'},
{name: "fin", age: 19, gender: 'male'}
]
for (const val of arr) {
console.log(val);//直接获得arr中的值
}
👉for-in
for (const eleKey in arr[0]) {
console.log(eleKey);//name, age, gender
}
注意： for-in 获得的是对象中的 “key” ，无法直接对数组使用
👉forEach()
arr.forEach((v, i, a) => {
console.log(v);
})
👉map()
arr.map((v, i, a) => {
console.log(v);
})
👉reduce()❗
let res = arr.reduce((res, v, i, a) => {
v.intro = 'ohhhh'
return res
}, arr)
console.log(res);
注意： reduce 方法会改变初始数组，接收五个参数
reduce(callbackfn(total,currentValue,currentIndex,array)=>{
//...do something
},initialValue)
total 用来接收initialvalue 初始值，并且记录最终返回值
👉filter()
res = arr.filter((v, i, a) => {
return v.gender === 'male'
})
console.log(res);//{name: "jqf", age: 18, gender: 'male'},{name: "fin", age: 19, gender: 'male'}
注意： 顾名思义，filter 用来批量过滤数组，最终返回处理后的数组
👉every()
let res = arr.every((v, i, a) => {
console.log(i);//0,1
return v.gender === 'male'
})
console.log(res ? '全部是male' : '有female')//有female
注意： every() 只有当数组中的所有元素都满足return 后的函数时，整个结果才为true ，否则为false
👉some()
res = arr.some((v, i, a) => {
console.log(i);//0
return v.gender = 'male'
})
console.log(res ? '有male' : '全部是female')//有male
注意： some() 与every 相对应，表示只要有满足return 后的函数的值，就立即返回true
👉 另外
map()、reduce()、filter()、every()、some() 后面都可以跟一个thisArg的参数，表示在该作用域在this的指向！
arr.map(() => {
console.log(this)//Window(),Window(),Window()
},window)
skr~skr~~