【ES6】let命令、const命令、解构赋值

let命令

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是也存在新的特性。

let所声明的变量，只在let命令所在的代码块内有效，避免全局污染。(适用于for循环)

{let a = 10;var b = 20;console.log(a)  //10
}
console.log(b)  //20
console.log(a)  //a is not defined

不存在变量提升。

console.log(test)   //undefined
var test = 10;console.log(test)  //报错
let test = 10;

暂时性死区。在代码块内，使用let命令声明变量之前，该变量都是不可用的。

for(var i=1;i<=5;i++){}
console.log(i)  //6for(let i=1;i<=5;i++){console.log(i)  //1  2  3  4  5
}
console.log(i)  //i is not defined

不允许重复声明。

function () { let a = 10; let a = 1;
}    // 报错

Let实际上为Javascript新增了块级作用域。外层作用域无法读取内层作用域的变量，内层作用域可以定义外层作用域的同名变量。

let foo = 1;
{    let foo =2 ;    //定义同名变量let bar ="one";
}
console.log(foo);   //1
console.log(bar);   //报错

块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

const命令

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const b
b = 10
console.log(b)  //报错

console所声明的常量，只在console命令所在的代码块内有效（块级作用域）

const obj = {name:'tom',age:12
}
obj.name = 'lerry'
console.log(obj)    //{ name: 'lerry', age: 12 }

暂时性死区。

if (true) {console.log(MAX);  //MAX is not defined
}

不允许重复声明。

function () { console a = 10; console a = 1;
}    // 报错

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。例如：let [a, b, c] = [1, 2, 3];。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。

let [a,b,c,d,e] = [1,2,3]
console.log(a,b,c,d,e)   //1 2 3 undefined undefined

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

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

数组的解构赋值

不完全解构

let [a,[b],d] = [1,[2,3],4]
console.log(a,b,d)   //1 2 4

集合解构

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

默认值（当匹配值严格等于undefined时，默认值生效）

let [a,b='22'] = [10,20]
console.log(a,b)    //10 20let [a,b='22'] = [10]
console.log(a,b)    //10 22

默认值也可以为函数

function f(){console.log('aaa');
}
let [x = f()] = [1];
console.log(x)  //1

数组嵌套对象

let [a,{name:user}] = ['hello',{name:"terry"}]
console.log(a,user) //hello terry

对象嵌套数组

let {test:arr} = {test:[1,2,3]}
console.log(arr)    //[ 1, 2, 3 ]

对象的解构赋值

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let {name,age} = {name:'tom',age:12}
console.log(name,age)   //tom 12

默认值（当匹配值严格等于undefined时，默认值生效）。

let {a,b=4} = {a:1}
console.log(a,b)    //1 4

嵌套解构

let obj = {p:['hello',{y:'whord'}]}
let {p:[x,{y}]} = obj;
console.log(x,y)    //hello whord

字符串的解构赋值

解构时，字符串被转换成了一个类似数组的对象。

let [a,b,c,d,e] = 'hello'
console.log(typeof a,b,c,d,e)  //string e l l o

可以对数组的属性解构。

let {length:len} = 'hello'
console.log(len)    //5let {trim} = 'hello'
console.log(trim)   //[Function: trim]
console.log(trim === String.prototype.trim)  //truelet {toSting} = true
console.log(toSting === Boolean.prototype.toSting)  //true

数值和布尔值的解构赋值

解构时，如果等号右边是数值或布尔值，则会先转为对象。

let {a,b,c} = 123
console.log(a,b,c)  //undefined undefined undefinedlet [a,b,c] = 123
console.log(a,b,c)  //报错！123 is not iterable v

函数参数的解构赋值

基本语法。

function test([a,b]){return a+b
}
let res = test([1,2])
console.log(res)    //3

默认值（当匹配值严格等于undefined时，默认值生效）。

function test({a=2,b=3}){return a*b
}
let res = test({a:1})
console.log(res)    //3

解构赋值的常见用途

交换变量的值。

let a = 1;
let b = 2;
[a,b] = [b,a]
console.log(a,b)    //2 1

从函数返回多个值。

function test(){return ['hello',12,true]
}
let [a,b,c] = test()
console.log(a,b,c)  //hello 12 true

函数参数的定义。

function f([x,y,z]){console.log(x,y,z)
}
f([1,2,3]);     //1 2 3

提取JSON数据。

let jsonData = { id: 42, status: "OK", data: [867, 5309] };
let {id, status, data} = jsonData;
console.log(id, status, data)   //42 OK [ 867, 5309 ]

【ES6】let命令、const命令、解构赋值相关推荐

最详细ES6教程_变量的解构赋值
最详细ES6教程_变量的解构赋值数组的解构赋值基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定 ...
【ES6】阮一峰ES6学习(一) let、const、解构赋值
let 和 const 命令 1. let 概念:块级作用域. 不存在变量提升:在声明变量前使用该变量,会报错. 暂时性死区:形成了封闭作用域,在代码块内,使用let声明变量之前,该变量都是不可用的. ...
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map
根据视频进行整理 [https://www.bilibili.com/video/BV1uK411H7on?p=1] 视频资源(百度网盘): 链接:[https://pan.baidu.com/s/1 ...
JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值
1.解构赋值的定义在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3;//等价于var [a, b, ...
ES6入门：变量的解构赋值
1.数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b ...
ES6学习之 - 变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring) 1. 数组的解构赋值以前,为变量赋值,只能直接指定值. let a = 1; let b ...
ES6基础：变量的解构赋值
ES6基础系列之变量的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.这种方式的出现大大提高了代码的扩展性前言一.数组的解构赋值二.对象的解构赋值三.函 ...
【ES6学习】对象的解构赋值
解构不仅可以用于数组,还可以用于对象. let { foo , bar } = { foo :"aaa ", bar :"bbb " } ; too // &q ...
ES6基础语法（let、const、解构赋值、模板字符串、简化对象、箭头函数、扩展运算符）（一）
系列文章目录第二章:ES6深入(Symbol.类.迭代器.Set.Map)(二) 第三章:ES6深入(生成器.Promise.async/await)(三) 第四章:ES6+新增API拓展(对象AP ...
[OHIF-Viewers]医疗数字阅片-医学影像-es6解构赋值-const{}=-let{}=
[OHIF-Viewers]医疗数字阅片-医学影像-es6解构赋值-const{}=-let{}= 解构赋值语法是一种 Javascript 表达式.通过解构赋值, 可以将属性/值从对象/数组中取出, ...