本文共 3245 字，大约阅读时间需要 10 分钟。

1. 解构

1.1. 数组的解构

const arr = [100, 200, 300]let [x, y, z] = arrconsole.log(1, x, y, z)// 1 100 200 300const [, b, ] = arr  // 丢弃console.log(2, b)// b = 10  // 异常，b声明为const，不能改变const [d, e] = arrconsole.log(3, d, e)  // 3 100 200const [m, n, o, p] = arrconsole.log(4, m, n, o, p)// 4 100 200 300 undefinedconst [f, ...args] = arrconsole.log(5, f)  // 100console.log(...args)  // 200 300const [j=1, k,,, l=10] = arrconsole.log(6, j, k, l)// 6 100 200 10  // j优先用100，1只是缺省值

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

const arr = [1, [2, 3 ], 4]const [a, [b, c], d] = arrconsole.log(a, b, c, d)const [e, f] = arrconsole.log(e, f)  // 1 [ 2, 3 ]const [g, h, i, j=10] = arrconsole.log(g, h, i, j)// 1 [ 2, 3 ] 4 10const [k, ...l] = arrconsole.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} = objconsole.log(x, y, z)// undefined undefined undefinedvar {a, b, c} = objconsole.log(a, b, c)var {a:m, b:n, c} = obj  // m, c可以理解为a，b的别名console.log(m, n, c)var {a:M, c:N, d:D='python'} = objconsole.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 = 100a = 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.数组的操作

// mapconst 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的平方值。

// 方法1const 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 ] ]*/// assignvar 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' }// copyvar l2 = new Object(l)console.log(l2)// { a: 1000, b: 2000, c: 3000, d: 'python' }

转载地址：http://pvfvi.baihongyu.com/