解构

2020-09-24 本文已影响0人懂会悟

1、const

const实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。

2、变量的解构赋值

解构赋值: 按照一定模式，从数组和对象中提取值，对变量进行赋值,

常用的结构赋值包括:

数组结构
对象结构
字符结构

3、数组结构

数组结构：从数组中提取值，按照对应位置，对变量赋值。

let [a, b, c] = [1, 2, 3]
// 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

let [foo, [[bar], baz]] = [1, [[2], 3]]

// foo: 1 bar: 2 baz: 3

如果解构不成功，变量的值就等于undefined

let [foo] = [];
let [bar, foo] = [1];
// 以上两种情况都属于解构不成功，foo的值都会等于undefined。

另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let [x, y] = [1, 2, 3]
x 1
y 2

let [a, [b], d] = [1, [2, 3], 4]
a  1
b  2
d  4

4、对象的解构赋值

<font size='4'>
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo "aaa"
bar  "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz  undefined

对象的解构赋值是下面形式的简写

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者

5、字符串解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象

const [a, b, c, d, e] = 'hello';
a "h"
b "e"
c "l"
d "l"
e "o"

5、解构赋值常见的用途

交换变量的值

let x = 1
let y = 2
[x, y] = [y, x]

// x: 2，y:1

从函数返回多个值

// 返回一个数组

function example() {
  return [1, 2, 3]
}
let [a, b, c] = example()

// 返回一个对象

function example() {
  return { foo: 1, bar: 2 }
}
let { foo, bar } = example()

函数参数的定义

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3])

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1})

变量赋值

let jsonData = { id: 42, status: "OK", data: [867, 5309] }
let { id, status, data } = jsonData
console.log(data)
// [867, 5309]
const { SourceMapConsumer, SourceNode } = require("source-map")

解构