解构赋值和序列化

扩展运算符

扩展运算符 spread(...)

将...后面的参数拆分开使用或者赋值，...后面跟数组，接受参数的时候...后面是最后一个参数

function foo(...arr) {
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i])
    }
}
foo(1, 1, 2, 3, 5, 8) //1 1 2 3 5 8

let [x, ...y] = [1, 23, 456, 78910]
console.log(x, y) //1 [23, 456, 78910]

赋值

let [...x] = [1, ...[2, 3], 5, ...[6, 7]] //其中等号左边的x被分解开来接受参数，等号右边的数组被分解开来传值
function foo(x, ...y) {
    console.log(x, y)
}
foo(...[1, ...[2, 3], 5, ...[6, 7]])

let foo = () => {}
let arr = [1, 2]
foo.call(window, ...arr)
foo.apply(window, arr) //与上式等价

合并数组

let a = [1, 2],
    b = [3, 4]
let c = a.concat(b) //[1,2,3,4]
c = [...a, ...b] //[1,2,3,4]

拆分字符串

console.log([..."666"]) //["6", "6", "6"]

解构赋值

左右结构一定要相同

数组

一般的赋值方法是对单个变量进行赋值，现在可以对多个变量以相同的结构赋值，按顺序赋值

let [a, b] = [1, 2]
console.log(a, b) //1 2
let [a1, [
    [a2], a3
]] = [3, [
    [4], 5
]]

此时左右同为数组结构，因为右边为数组，左边赋值的时候需要写出类似的结构，变量 a,b 是当前作用域的变量。

交换两个变量值

;
[a, b] = [b, a]

使用扩展运算符

let [a, ...b] = [1, 2, 3, 5, 7]
console.log(a, b) //1 [2,3,5,7]
let [c, ...d] = [11]
console.log(c, d) //11 []

其中 b 是将剩余的参数全部拿到了，所以是一个数组，如果拿不到就是undefined，数组就是空数组

设置默认值

如果

1. 匹配到的值是undefined
2. 有默认值，则是默认值

let [, b = 1, c = 2] = ["a", "b"]
console.log(b, c) //"b" 2
let [x = 1, y = x] = [2]
console.log(x, y) //2 2

对象

对象解构赋值时赋值对象的属性值，所以匹配的时候需要对象的属性名相同。

let {
    name,
    age
} = {
    age: 18,
    name: "Gin",
}
console.log(name, age) //"Gin" 18

如果是变量名与属性名不一致，则结构上需保证两边的属性名匹配，

let {
    name: myname,
    age: myage,
    sex: sex = "boy", //默认值
} = {
    name: "Gin Tama",
    age: 18,
}
console.log(myname, myage)

Array 对象上有很多我们学过的方法。于是。。。

let {
    toString,
    valueOf
} = Array
//数组的方法就被我迅速拿到了

• 函数传参解构赋值。

function add([x = 0, y = 0]) {
    return x + y
} //数组前两项的和
add([1, 2, 3, 5, 7]) //3

序列化

JSON 格式对象

JSON全称 JavaScript 对象格式(JavaScript Object Notation)。是 JS 原生的数据存储格式。书写方式和对象非常类似，并且更加严格。尤其是属性名需要加引号，属性之间以逗号分隔。最后一个属性不加逗号，值可以是数组可以是对象嵌套，获取以及修改的方式。

存储在 JSON 格式的文件中。

{
  "name": "Gin",
  "own": ["apple", "banana", "pen"],
  "type": {
    "age": 18,
    "intrests": ["1", "2", "3"]
  }
}

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，无需解析器，JavaScript 程序能够使用内建的eval()函数，即可用 JSON 数据来生成原生的 JavaScript 对象。

在很多使用不了eval()函数的情况下，比如vue.js的插值表达式({{}})中无法使用.

JSON.stringify() //序列化 obj→str
JSON.parse() //反序列化 str→obj