解构赋值、数组遍历方式

一、解构赋值(按照一定方式对变量进行赋值、左右每一向索引的一 一对应)

（1）数组解构赋值

数组下标是唯一的，解构的时候是按照数组顺序，通过下标逐一对应

let [a, b, c]= [1,2,3]
let [a,b,[c,d]] = [1,2,[3,4]]
let [a,b,c,d=5] = [1,2,[3,4]] // 按照索引项逐一对应

（2）对象解构赋值

对象中的key:value ， key键是唯一的，所以在对象中是按照key的唯一来进行逐一对应

let user= {name: 'hello', age: 10 }
let {name , age} = user
let {age, name} = user
let {age: uage, name:uname} = user // 别名赋值

(3)字符串解构赋值（类似数组解构赋值）

let str = '12345'
let [a,b,c,d,e] = str

(4)函数参数的解构赋值

function foo ({name,age,sex = 'male'}) {
    console.log(name, age, sex)
}
let obj = {
    name:'11',
    age: 10,
}
foo(obj)

function foo ([a,b,c]) {
    console.log(a,b,c)
}
let arr= [1,2,3]
foo(arr)

(5)json 解构(也就是对象解构)

let json = '{"name":"hello", "age":"10"}'
let {name, age} = JSON.parse(json)

应用场景1

function foo () {
    console.log(1)
}
let [a = foo()] = [] // 惰性赋值
let [a = foo()] = [1]

二、数组的各种变量方式

es5: for、 forEach、 map 、 filter 、some 、every 、reduce、for in

es6：find、findIndex、for of 、values、keys、entries

(1) for循环 || forEach 区别

forEach循环中途无法跳出循环：不支持break、continue

let arr = [1,2,3]
for (let i = 0; i< arr.length; i++ ) {
    if(arr[i] === 2) {
        break  // 跳出终止以下的循环
    }
    if(arr[i] === 2) {
        continue // 跳出当前循环，继续以下循环
    }
    console.log(arr[i])
}
arr.forEach((item, index , array) => { // forEach支持三个参数
})

(2) map 和 forEach 的区别

map循环对每一个item操作，返回一个新的数组，不改变原有数组。

forEach 只是简单的循环操作，没有return 操作。

let arr = [1,2,3]
let newarr = arr.map(item => {
    item += 1
    return item
})
console.log(newarr, arr)

(3)filter过滤

返回符合条件的，返回一个新数组，不会改变原数组

let arr = [1,2,3]
let newarr = arr.filter(item => item === 2)
console.log(newarr, arr)

(4)some 满足一个符合条件就返回true

let arr = [1,2,3]
let newarr = arr.some(item => item === 2) // 有一个条件满足就true
console.log(newarr, arr)

(5)every 满足所有符合条件返回true

let arr = [1,2,3]
let newarr = arr.every(item => item === 2) // 每一个条件满足才回返回true
console.log(newarr, arr)

(6)reduce 接受一个函数作为累加器

let arr = [1,2,3]
let newarr = arr.reduce((pre, cur, index, array) => {

}, 0) 
// reduce两个参数，第一个参数是函数，第二个参数是初始值
// 函数中有四个参数: pre: 上一个值, cur：当前值, index：索引, array 当前数组
console.log(newarr, arr)

使用场景1： 数组求和

let arr = [1,2,3]
let newarr = arr.reduce((pre, cur, index, array) => {
    return pre + cur
}, 0) 

使用场景2： 数组找最大值

let arr = [1,2,3]
let max= arr.reduce((pre, cur, index, array) => {
    return Math.max(pre, cur)
}, 0) 

使用场景3：数组去重

let arr = [1,2,3]
let repeat= arr.reduce((pre, cur, index, array) => {
   pre.indexOf(cur) == -1 && pre.push(cur)
    return pre
}, []) 

(7) for in 

for in 变量数组是有问题的

Array.prototype.foo = function () {console.log('foo')}
let arr = [1,3,5]
for (let i in arr) {
    console.log(i) // 会遍历出原型上的属性,所以变量数组不适合
}

(8)find 返回找到的第一个元素，查找某一个元素是否在数组中、找不到返回undefined 

let arr = [1,2,3,2,3,2]
let newarr = arr.find(item => item === 2)
console.log(newarr, arr)

(9)findIndex 返回对应元素的索引， 没有返回 -1

let arr = [1,2,3,2,3,2]
let newarr = arr.findIndex(item => item === 2)
console.log(newarr, arr)

(10)fo of

let arr = [1,3,5]
for (let item of arr) {
    console.log(item)
}

let arr = [1,3,5]
for (let item of arr.values()) { // 返回数组对应的项
    console.log(item)
}

let arr = [1,3,5]
for (let index of arr.keys()) { // 返回数组索引
    console.log(index)
}

let arr = [1,3,5]
for (let [index, item] of arr.entries()) { // 返回数组索引和对应的项
    console.log(index, item)
}

三、数组扩展

类数组、伪数组、 Array.form、 Array.of 、copyWithin、 fill 、includes

(1)类数组|伪数组（并不是真正的数组，但是有长度、可以使用 arr instanceof Array 来进行检测）： 不具有数组的方法

如何把伪数组转化成真正的数组。Es5: slice

let arr = Array.prototype.slice.call(xx) // slice 把伪数组转化成数组function foo () {
    console.log(arguments instanceof Array) // false
console.log(Array.prototype.slice.call(arguments) instanceof Array) // true 
}
foo(1, 'hello')

Es6： Array.form

let arraylike = { // 定义一个伪数组
    0: 'es5',
    1: 'es6',
    length:2
}
let arr = Array.from(arraylike) // 转化成真数组
arr.push('es7')

Array.of、new Array() 的不同之处

实例化一个数组， new Array() 通过传入的参数个数不同，导致展示不同：传一个参数表示：长度
var arr = new Array(1)
var arr1 = new Array(1,2)
console.log(arr, arr1)

var arr = Array.of(1) // Array.of 就能实现参数个数的统一化，返回一个数组
var arr1 = Array.of(1,2)
var arr2 = Array.of(1, true, {name:'hello'}) // 把零碎的参数拼接成一个数组
console.log(arr, arr1)

copyWithin 替换

let arr = [1,2,3,4,5]
let new = arr.copyWithin(1,3,5) 
// 下标为1开始，从索引3开始替换,5表示贴换的结尾索引

fill填充

let arr = [1,2,3,4,5]
let new = arr.fill('aa',3,5)  // 三个参数： 填充的参数、开始下标、结束下标（不包含结束下标）

includes 包含返回boolean

（可以检测到NaN、indexof是无法检测到NaN）