Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )

1. Deconstruction

1.1. Deconstruction array


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只是缺省值

When deconstruction, and the variable elements are aligned from left to right, the variable parameters to be placed at the end , to the corresponding data and return the data, the corresponding data is returned is less than the default values, if no default value is returned 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 Parameters deconstruction

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

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

1.3 deconstruction object

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'

Note: The object of deconstruction, the need to provide the name of the object's properties, will find the corresponding value based on the attribute name of the object, return the default value is not found, no default value, directly returns 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

In this first little additional knowledge constants:

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

We know that in JS, constants are immutable, so constant re-evaluation, will direct throw an exception. Then the following code will throw an exception it? why?

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

arr.pop()
console.log(arr)

The above code is not throwing an exception, why define a constant array, you can add an element inside it? Constant is not impossible to change it? Very simple, immutable constant, but we defined a constant array, its address is not changed, the only change in the contents of the address. Well, then we look at the operation of the array.

2. The operation of the array

// 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 ]

First look a little practice: there is an array const arr = [1, 2, 3, 4, 5], all of the elements required is calculated and the square value is even greater than 10 square value.

// 方法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)

It provides several methods are thought to filtration, relatively high efficiency, but also can be directly calculated, and then filtered, but when the large amount of data, the efficiency is low number.

3. Operation object


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' }

From scratch learning JavaScript-- Title VI (deconstruction, array operations, object manipulation)