JavaScript基础之数组深倔

数组是经常用到的一种数据结构

定义方法

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~~

定义方法#

类型转换#

解构赋值#

关于数组的一些方法#

1.截取数组#

2.元素添加与移除#

3.清空数组#

4.查找操作#

５.排序方法#

6.循环遍历数组#

定义方法

类型转换

解构赋值

关于数组的一些方法

1.截取数组

2.元素添加与移除

3.清空数组

4.查找操作

５.排序方法

6.循环遍历数组