JS数组
数组对象
Array
对象是用于构造数组的全局对象。
创建数组
新建
1 | let arr = [1, 2, 3] |
转化
1 | let arr1 = '1, 2, 3' |
伪数组
1 | // 伪数组的原型链中没有数组的原型 |
续
1 | // 合并两个数组,得到新数组 |
删除数组
1 | let arr = ['a','b','c'] |
删除头部元素
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 | let arr = [1, 2, 3, 4, 5]; |
查看数字(字符串)属性名和值
1 | for(let i = 0; i < arr.length; i++){ |
forEach原理
1 | function forEach(array,fn){ |
查看单个属性
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’
修改数组中的元素
反转顺序 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](https://cdn.jsdelivr.net/gh/Drwna/image//images/Snipaste_2021-09-01_19-41-33.png)
map
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
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
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 |