JS 数组 Note-FrontEnd-15JS 数组的知识，内容包括数组对象、创建数组、删元素、查看所有元素、查看单个

JS 数组的知识，内容包括数组对象、创建数组、删元素、查看所有元素、查看单个元素、增加元素、修改元素、数组变换。

一、数组对象

JS 其实没有真正的数组，只是用对象模拟数组，JS 的数组不是典型数组。

典型数组的元素的数据类型相同，使用连续的内存存储，通过数字下标获取元素。

JS 的数组的元素的数据类型可以不同，内存不一定是连续的（对象是随机存储的），不能通过数字下标，而是通过字符串下标，这意味着数组可以有任何 key。

二、创建数组

新建一个数组

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

转化为数组

let arr = '1,2,3'.split(',')
let arr = '123'.split('')
Array.from('123')

伪数组

没有数组共用属性的「数组」就是伪数组

let divList = document.querySelectorAll('div')

合并两个数组，得到新数组

arr1.concat(arr2)

截取一个数组的一部分

arr1.slice(1)  // 从第二个元素开始
arr1.slice(0)  // 全部截取, JS 没有复制方法，就只给你用 slice(0)
// JS 只提供浅拷贝

三、删元素

删除头部的元素

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'

一个对象提供的函数就叫 API

四、查看所有元素

查看所有属性名

let arr = [1,2,3,4,5]; arr.x = 'xxx'
Object.keys(arr)
for(let key in arr){consloe.log(`${key}:${arr[key]}`)}

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

for(let i = 0; i < arr.length; i++){
    console.log(`${i}: ${arr[i]}`)
}

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

以上两种几乎是通用的，唯一的不同是for 循环可以有 break 和 continue。 for 是块作用域，forEach 是函数作用域。

五、查看单个元素

查找元素是否在数组里

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

使用条件查找元素

arr.find(item => item % 2 === 0)  // 找第一个偶数
//返回索引用 findIndex
find()函数特点：只要满足 True，它就结束，返回内容

六、增加元素

在尾部加元素

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

在头部加元素

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

在中间添加元素

arr.splice(index,0,'x')  // 在 index 处插入 'x'
arr.splice(index,0,'x','y')

七、修改元素

反转顺序

arr.reverse()  // 修改原数组

怎么反转字符串呢？触类旁通一下，先转成数组做反转顺序，再把数组转成字符串

s.split('').reverse().join('')

自定义顺序

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

你只需要告诉它 a 和 b 谁大谁小，返回正数 a 大，返回负数 b 大，排序默认小的在前面，大的在后面，但它不知道谁大谁小

八、数组变换

map -- n 变 n

// 把数字变成星期
let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr3 = ['周日', '周一', '周二',  '周三', '周四', '周五','周六']
let arr2 = arr.map(item => {return arr3[item]})
console.log(arr2)

// 用 reduce 写这道题
let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr3 = ['周日', '周一', '周二',  '周三', '周四', '周五','周六']
let arr2 = arr.reduce((result,item)=> result.concat(arr3[item]),[])
console.log(arr2)

filter -- n 变少

// 找出所有大于 60 分的成绩
let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let scores2 = scores.filter(item => item >60)
console.log(scores2)

// 用 reduce 写这道题
let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let scores2 = scores.reduce((result,item)=> result.concat(item>60?item:[]),[])
console.log(scores2)

reduce -- n 变 1

// 算出所有奇数之和
let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let sum = scores.reduce((sum, n)=>{
 return (n % 2 ===1) ? (sum + n) : (sum)
},0)
console.log(sum) // 奇数之和：598