时间: 2019-11-02阅读: 70标签: 解构
一、基本
解构的作用:简化书写长度，提升开发效率。
1.目前用的版本是ESMAScript3.0，后来改名为ECMAScript5.01。
解构对象
2.ECMA-262 是 JavaScript 标准的官方名称
在开发中我们常用到使用ajax请求数据，并且把数据渲染到页面上。可能这个数据返回的对象或数组。例如返回一个obj{name:'zwq',age:18,sex:woman}而我们获取里面的值保存在变量里会用 var name = obj.name,var age = obj.age。
javascript组成
在es6中提供了解构的语法糖，让左右两侧极为相似的结构进行变量赋值。
在对象中单独写一个name代表的就是 name：name，左侧name你要到对象对象找到的属性，右侧name代表你声明的变量名，所以，下面代码中obj对象的name，age属性赋值给变量name和age。在左侧的变量找到了右侧对象的相同属性并把值赋给对应变量。
ESCAScript描述了该语言的语法和基本对象。
let obj = { name: "zwq", age: 18, sex:'female'}let name,age;({ name, age } = obj);console.log(name, age); //zwq 18
文档对象模型（DOM），描述处理网页内容的方法和接口。
上面代码是先声明变量，在赋值。也可以声明变量时同时赋值，如下：
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
let {name,age} = obj;console.log(name,age); //zwq 18
3.ECMAScript6的特点ES6增添了许多必要的特性，例如模块和类(class)，块级作用域，常量与变量
当自己声明的变量不想和对应的属性重名是
4.浏览器的支持程度（不支持IE6）
let {name:Oname,age:Oage} = obj;console.log(Oname,Oage); //zwq 18
http://kangax.github.io/compat-table/es6/
默认赋值
5.可以通过Babel转码器把ES6写的代码转成ES5的，就不用担心运行环境是否支持。
下面代码采用默认赋值，形参a,分别默认赋值为10，20。当值传入一个值的时候，b并不是undefined，而是取默认值。
二、语法
function sum(a = 10,b = 20){ console.log(a+b);}sum(5);
let 是es新增的命命，用来声明变量的关键字 类似于var（let的运用不影响var）
下面代码使用默认值的方式给变量sex附上默认值male，当对象中找不到对应的属性是取默认值，当存在对用属性是，取对象里面的值。
注意：1、let声明的变量只在let所在的作用域下有效，
let {name:Oname,age:Oage,sex ='male' } = obj;console.log(Oname,Oage,sex);
2、用let声明变量时在相同作用域下不能重复声明，
解构数组
3、用let声明的变量不存在预解析
由于数组也是对象,属性名是当前的索引值，所以下面可以成功的进行变量赋值。同时数组中用length属性。因此声明length变量也可以获取对象的属性值：数组的长度
4、暂时性死区：在代码块内,使用let声明变量之前,该变量是不可用的
let arr = [1,2,3];let {0:x,1:y,2:z} = arrconsole.log(x,y,z); //1,2,3let{length} = arr;console.log(length); //3
5、{}就是一个作用域块
而解构就是使用左右两侧极为相似的解构进行赋值，在数组解构中这样书写：
eg:let n = 0;
let [x,y,z] = arr;console.log(x,y,z); //1,2,3
console.log(n);//0
当数组嵌套对象的形式也可以利用左右两侧相似解构进行赋值。
{
用，，，占位，照抄arr的结构。如下声明name变量，并且打印zwq.
let m = 12;
let arr = [1,2,3,{name:'zwq'}];let [,,,{name}] = arr;console.log(name);
}
{
console.log(n);//0
console.log(m);//m is not defined
}
代码出错那么它之后的代码都不会执行
let声明的变量在该作用域或者该作用域的父级下有效
var a = 1;
var a = 3;
console.log(a);
let a = 4;
console.log(a);//'a' has already been declared
let在相同作用域下不能重复声明。
var str='12345';
console.log(str);//12345
function fn(){
console.log(str);//undefined
if(false){
var str=true;
}
}
fn();//不是一个方法。
预处理:js中的预处理是一层一层的处理,先找的最外层的var和function并且赋值underfined,之后从上往下顺序执行,之后逐级按照这种方式预处理.
for(var i=0;i<10;i++){}
计数器功能时，用var声明变量，会泄露为全局变量
for(let i=0;i<10;i++){}
querySelector('选择器') 找到满足选择器的第一个元素
querySelectorAll(‘选择器’) 找到满足选择器的所有元素
ie8以下不支持
const 声明一个常量：
1，常量声明后就不能修改,
2, 声明必须赋值，如不赋值就会报错
3，必须先声明后使用（不能预解析）
4, 不能重复声明
eg：
用const声明的对象,可以对它的属性进行更改
const obj={name:'lisa',age:18};
console.log(obj);
obj.name="刘";
obj.sex="女";
console.log(obj)；
解构：es6允许按照一定模式，从数组或者对象中提取值，对变量进行赋值，这就被称为解构赋值。
数组解构赋值：等号左边和右边必须是数组，数组的解构赋值要一一对应,如果对应不上它的值就是undefined
eg：
var a=1,b=2,c=3;
// var arr=[1,2,3]
// a=arr[0];
// b=arr[1];
// c=arr[2]
// let [a,b,c]=[1,2,3];
// console.log(a,b,c);//1,2,3
//
// let [x,,y,z]=[1,2,3];
// console.log(x,y,z)//1,3,undefined
//
// let [m,n,q]=[1,2];
// console.log(m,n,q);
//
// {
// let [a,[b,c]]=[1,[2,3]];
// console.log(a,b,c)//1,2，3
// let [m,q,str]=[1,[2,3],'a'];
本文由10bet发布于Web前端,转载请注明出处：ES6 解构 destructuring
关键词：