❤️

ARCHAI

Undergraduate / Rookie

Back

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()方法查找对象等引用类型时会出错

5.排序方法

方法: 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-offor-inforEach()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~~

Archai
Built with Hugo
Theme Stack designed by Jimmy