变量解构语法【ES6】

2019-03-27

JavaScript

变量解构语法【ES6】

我最喜欢又甜又好看的语法糖啦

基本用法

解构总的来说是“模式匹配”原则，一共的运算符也不多，[],{},...

按从左到右的匹配原则
未匹配成功为undefine
等号右边是一个Iterator，典型的是数组和Generator函数

//v1=1, v2=2, v3=3
const [v1, [v2, v3]]=[1, [2, 3]]

//head=1, tail=[2,3,4]
const [head, ...tail]=[1,2,3,4]

//a='1', b=undefine, c=undefine
const [a,b,...c]=['1']

function *fibs(){
  let f1 = 0;
  let f2 = 1;
  while(true){
    yield f2;
    [f2,f1] = [f2+f1, f2];
  }
}

//斐波那契数列前五项
let [f1,f2,f3,f4,f5] = fibs();

默认值

解构允许默认值语法。

//x='c', y='b'
let [x='a', y='b'] = ['c'];

对象解构

不支持...，按照名称解构，而不是从左到右。其他语法基本上一样

let {prop1, prop2} = {prop1='hello', prop2='world'}

字符串解构

字符串解构基本上就是把字符串当成由单个字符组成的数组，语法也类似。

let [a,b,c,d] = 'abcd'

其他变量的解构

Number的解构，转换成对象
Bool的解构，转换成对象

最佳实践

接收函数参数

function printProps({prop1, prop2}){
  if(prop1){
    console.log(prop1);
  }
  if(prop2){
    console.log(prop2);
  }
}

setProps({prop1='hello'});

交换变量的值

[a,b] = [b,a]

作为返回值

function example(){
  return [1,2,3]
}

const[a,b,c] = example();

提取JSON数据

jsondata="{id=5, date='2019-3-27'}";
{id, date}=JSON.parse(jsondata);

配合Map使用

for(let [key,value] of map){
  //居然有一种python的感觉
}

配合模块使用

const {function1, function2} = require("some-module")

总结

语法糖就是要甜，好吃！

很久没有写博文了，主要是因为最近在做一些编程题，可以来这里看我一下！

https://github.com/ExcitedSpider/CodeInterview.js