JS数组

Posted on

数组对象

Array 对象是用于构造数组的全局对象。

创建数组

新建

1
2
3
let arr = [1, 2, 3]
let arr new Array(1, 2, 3)
let arr = new Array(3) // 长度

转化

1
2
3
4
5
6
7
8
9
10
11
12
let arr1 = '1, 2, 3'
arr1.split(',') // 将字符串用逗号隔开，转化为数组
let arr2 = '123'
arr2.split('') // 或用空字符串

// 示例
Array.from('123')
['1', '2', '3']
Array.from({0:'a',1:'b',2:'c',3:'d',length:4})
[ "a", "b", "c", "d" ]
Array.from({0:'a',1:'b',2:'c',3:'d',length:2})
[ "a", "b"]

伪数组

1
2
3
4
5
6
7
// 伪数组的原型链中没有数组的原型
array1 = {0:'a',1:'b',2:'c',length:3}

let divList = document.querySelectorAll('div')
// 获取的数组是 伪数组
let divArray = Array.from(divList)
// 转化为数组

续

1
2
3
4
5
6
7
8
9
10
11
12
13
// 合并两个数组，得到新数组
let arr1 = [1,2]
let arr2 = [3,4]
let arr3 = arr1.concat(arr2)
[1,2,3,4]
// 截取一个数组的一部分
arr3.slice(1) // 从第二个元素开始
let arr4 = arr3.slice(2)
[3,4]

arr5 = arr3.alice(0)
// 相当于复制数组
// 注意 JS 只提供浅拷贝

删除数组

1
2
3
4
5
6
7
8
9
let arr = ['a','b','c']
delete arr[0]
arr // [empty,'b','c']
// 长度没变

// 修改 length
arr.length = 1
arr //['a']
// 不要随便修改 length

删除头部元素

arr.shift() arr 被修改，并返回被删元素

删除尾部元素

arr.pop() arr 被修改，并返回被删元素

删除中间元素

arr.splice(index, 1) 删除 index 的一个元素

arr.splice(index, 1, ’x’) 并在删除位置添加 ‘x’

arr.splice(index, 1, ’x’, ’y’) 并在删除位置添加 ‘x’, 'y'

查看所有元素

查看所有属性名

1
2
3
4
5
6
7
let arr = [1, 2, 3, 4, 5];
arr.x = 'x'
Object.keys(arr)
Object.values(arr)
for(let key in arr) {
    console.log('${keys}: ${arr[key]}')
}

查看数字（字符串）属性名和值

1
2
3
4
5
6
7
8
for(let i = 0; i < arr.length; i++){
    console.log(`${i}: ${[i]}`)
}

arr.forEach(function(item, index){
    console.log(`${index}: ${item}`)
})

forEach原理

1
2
3
4
5
6
7
8
9
10
11
12
function forEach(array,fn){
  for(let i = 0; i < array.length; i++){
    fn(array[i], i, array); 
    // 获取数组每一项，把数值传到 fn
  }
}

forEach(['a', 'b', 'c'], function(x, y, z){
    console.log(x, y, z);
})
// forEach 用 for 访问 array 的每一项
// 对每一项调用 fn(array[i], i, array)

查看单个属性

1
let arr = [11, 22, 33]arr[0]

索引越界

1
arr[arr.legnth] === undefinedarr[-1] === undefined// 示例let arr = [1,2,3,4,5,6,7]for(let i = 0; i<= arr.length; i++){    console.log(arr[i].toString());}// 报错: Cannot read property 'toString' of undefined// 意思是你读取了 undefined 的 toString 属性// 不是 toString 的 undefined// x.toString() 其中 x 如果是 undefined 就报这个错

查找某个元素是否在数组里 indexOf

arr.indexOf(item) 存在换回索引,否则返回 -1

使用条件查找元素 find

arr.find(item => item % 2 === 0) 找第一个偶数

使用条件查找元素的索引 findIndex

arr.findIndex(item => item % 2 === 0) 找第一个偶数的索引

增加数组中的元素

在尾部添加元素 push

arr.push(newItem) 修改数组，返回新长度

arr.push(item1, item2) 修改数组，返回新长度

在头部添加元素 unshitf

arr.unshift(newItem) 修改数组，返回新长度

arr.unshift(item1, item2) 修改数组，返回新长度

在中间添加元素 splice

arr.splice(index, 0, ‘x’) 在 index 出插入 ’x’

arr.splice(index. 0, ‘x’, ‘y’) 插入 ‘X’,’y’

Array.prototypr.splice() MDN

修改数组中的元素

反转顺序 reverse

arr.reverse() 修改原数组

自定义顺序 sort

arr.sort((a, b)) => a-b)

1
// 示例let arr = [1,4,2,3,5]arr.sort() // [1,2,3,4,5]arr.sort(function(a, b){    console.log('a:'+ a)    console.log('b:'+ b)    if(a>b){        return 1    }else if(a===b){        return 0    }else{        return -1    }})// 等价于arr.sort((a, b) => a-b) 
1
let arr1 = [    {name: 'jack', score: 99},    {name: 'erik', score: 96},    {name: 'evan', score: 100}]arr1.sort(function(a, b){    if(a.score > b.score){return 1}    else if(a.score === b.score){return 0}    else{return -1}})// 等价于arr1.sort((a, b) => a-b)

反转字符串

1
let s = 'abcdefg';s.plit('').reverse().join('')

数组变换

Snipaste_2021-09-01_19-41-33

map

Array.prototype.map() MDN

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原数组元素顺序依次处理元素

1
let arr1 = [1, 2, 3, 4, 5, 6]// 将数组每个值平方arr1.map((item) => (item * item))// 等价于for(let i = 0; i < arr1.length; i++){    arr1[i] = arr1[i] * arr1[i]}

filter

Array.prototype.filter() MDN

filter() 方法返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

1
let arr1 = [1, 2, 3, 4, 5, 6]// 偶数arr1.filter(item => item % 2 === 0)// 返回数组元素长度大于6let words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];words.filter(word => word.length > 6)

reduce

Array.prototype.reduce.() MDN

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

1
let arr = [1, 2, 3, 4, 5, 6]// 累加let sum = 0;for(let i = 0; i < arr.length; i++){    sum += arr[i]} consloe.log(sum)// 等价于arr.reduce((sum, item) => sum + item, 0)// 从5开始：5 + 1 + 2 + 3 + 4 + 5 + 6 = 26arr.reduce((sum, item) => sum + item, 5)
1
// let arr = [1, 2, 3, 4, 5, 6]// 平方 等价于 arr.map(item => Math.pow(item, 2))arr.reduce((result, item) => {return result.concat(item * item)}, [])
1
let arr = [1, 2, 3, 4, 5, 6]arr.filter(item => item %2 === 0)// 等价于arr.reduce((result, item) => {    if(item % 2 === 0){        return result    }else{        return result.concat(item)    }}, [])arr.reduce((result, item) => item % 2 === 1 ? result : result.concat(item), [])arr.reduce((result, item) => item % 2 === 1 ? result.concat([]) : result.concat(item), [])arr.reduce((result, item) => result.concat(item % 2 ? [] : item), [])

面试题: 数据变换

1
let arr = [    {名称: '动物', id: 1, parent: null},    {名称: '狗', id: 2, parent: 1},    {名称: '猫', id: 3, parent: 1}]// 数组变成对象{    id: 1, 名称: '动物', children: [        {id: 2, 名称: '狗', children: null},        {id: 3, 名称: '猫', children: null}    ]}// 答案arr.reduce((result, item) => {    if(item.parent === null){        result.id = item.id        result['名称'] = item['item']    }else{        result.children.push(item)        delete item.parent        item.chrldren = null    }    return result}, {id: null, children: []})

1