ES6 解构 destructuring

来源:http://www.chinese-glasses.com 作者:Web前端 人气:62 发布时间:2020-03-24
摘要:时间: 2019-11-02阅读: 70标签: 解构 一、基本 解构的作用:简化书写长度,提升开发效率。 1.目前用的版本是ESMAScript3.0,后来改名为ECMAScript5.01。 解构对象 2.ECMA-262 是 JavaScript 标准的官方名

时间: 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中提供了解构的语法糖,让左右两侧极为相似的结构进行变量赋值。

图片 1

在对象中单独写一个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

关键词:

频道精选

最火资讯