1. 解构

1.1. 数组的解构


const arr = [100, 200, 300]
let [x, y, z] = arr
console.log(1, x, y, z)
// 1 100 200 300

const [, b, ] = arr  // 丢弃
console.log(2, b)
// b = 10  // 异常，b声明为const，不能改变

const [d, e] = arr
console.log(3, d, e)  // 3 100 200

const [m, n, o, p] = arr
console.log(4, m, n, o, p)
// 4 100 200 300 undefined

const [f, ...args] = arr
console.log(5, f)  // 100
console.log(...args)  // 200 300

const [j=1, k,,, l=10] = arr
console.log(6, j, k, l)
// 6 100 200 10  // j优先用100，1只是缺省值

解构的时候，变量是从左到右和元素对齐，可变参数要放到最后，能对应数据就返回数据，对应不到的数据就返回默认值，如果没有默认值，就返回defined。

const arr = [1, [2, 3 ], 4]
const [a, [b, c], d] = arr
console.log(a, b, c, d)

const [e, f] = arr
console.log(e, f)  // 1 [ 2, 3 ]

const [g, h, i, j=10] = arr
console.log(g, h, i, j)
// 1 [ 2, 3 ] 4 10
const [k, ...l] = arr
console.log(k, l)
// 1 [ [ 2, 3 ], 4 ]

1.2 参数解构

function f(x, y, z){
    console.log(x + y + z)
}

var args = [2, 3, 4]
f(...args)

1.3 对象的解构

obj = {
    a: 100,
    b: 200,
    c: 300
}

var {x, y, z} = obj
console.log(x, y, z)
// undefined undefined undefined
var {a, b, c} = obj
console.log(a, b, c)

var {a:m, b:n, c} = obj
console.log(m, n, c)

var {a:M, c:N, d:D='python'} = obj
console.log(M, N, D)
// 100 300 'python'

注意：对象解构的时候，需要提供对象的属性名，会根据对象的属性名会找到对应的值，没有找到返回缺省值，没有缺省值，直接返回undefined。

var data = {
    a: 100,
    b: [
        {
            c: 200,
            d: [],
            a: 300
        },
        {
            c: 1200,
            d: [1],
            a: 1300
        }   
    ],
    c: 500
}

var {a:m, b:[{a:n}, {a:p}]} = data  // m, n, p你可以理解为前面变量的别名
console.log(m, n, p)
// 100 300 1300

在此先小小的补充常量的知识：

const a = 100
a = 200;
console.log(a)

我们知道在JS中，常量是不可变的，所以常量重新赋值，会直接抛异常。那么下面的代码会抛出异常吗？为什么?

const arr = [1, 2, 3, 4, 5]
arr.push(6, 7)
console.log(arr)

arr.pop()
console.log(arr)

上面的代码是没有抛出异常的，为什么定义一个常量数组，就可以在里面添加元素呢?常量不是不可以改变的吗？很简单，常量是不可改变的，但是我们定义的是常量数组，它的地址是没有改变的，改变的只是放在地址里的内容。好了，那我们来看一下数组的操作。

2.数组的操作

// map
const powerArr = arr.map(x => x * x)  // 新数组
console.log(powerArr)

const new_arr = arr.forEach(x => x + 10)  // 无返回值
console.log(new_arr, arr)
// undefined [ 1, 2, 3, 4, 5, 6 ]

narr = []
new_Arr = arr.forEach(x => narr.push(x + 10))
console.log(new_Arr, narr)
// undefined [ 11, 12, 13, 14, 15, 16 ]

console.log(arr.filter(x => x % 2 == 0))  // 新数组
// [ 2, 4, 6 ]

先来看一个小的练习：有一个数组const arr = [1, 2, 3, 4, 5]，要求算出所有元素平方值是偶数且大于10的平方值。

// 方法1
const arr = [1, 2, 3, 4, 5]
console.log(arr.filter(x => x % 2 == 0).map(x => x * x).filter(x => x > 10))
// [ 16 ]


// 方法二
s = Math.sqrt(10)
console.log(arr.filter(x => x > s && !(x % 2)).map(x => x * x))

// 方法三
let new_arr = []
arr.forEach(x => {
    if (x > s && !(x % 2)){
        new_arr.push(x * x)
    }
})
console.log(new_arr)

提供的几种方法，思想都是先过滤，效率相对高一些，还可以直接计算，然后过滤，但是数据量比较大的时候，效率就低不少。

3. 对象的操作


const obj = {
    a: 100,
    b: 200,
    c: 300
}

console.log(Object.keys(obj))
console.log(Object.values(obj))  // 值，试验阶段
console.log(Object.entries(obj))  // 键值对，试验阶段
/*
[ 'a', 'b', 'c' ]
[ 100, 200, 300 ]
[ [ 'a', 100 ], [ 'b', 200 ], [ 'c', 300 ] ]
*/

// assign
var obj = {
    a: 100,
    b: 200,
    c: 300
}

var l = Object.assign({}, obj,
    {a: 1000, b: 2000},  // 覆盖
    {c: 'abc'},  // 覆盖
    {c: 3000, d: 'python'})  // 覆盖，新增

console.log(l)
// { a: 1000, b: 2000, c: 3000, d: 'python' }


// copy
var l2 = new Object(l)
console.log(l2)
// { a: 1000, b: 2000, c: 3000, d: 'python' }

从无到有的学习JavaScript——第六篇（解构、数组操作、对象操作）