1.ES6学习之let、const

(1).var、let、const 变(常)量声明

ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

在ES6中let就诞生了,实际上它为javascript新增了块级作用域。

let只在变量声明时 ,所在的代码块中有效。

由于这一特性,let很适合在for循环中使用。

如下图是一个demo:

let声明变量的特点:

a:不存在变量提升;
console.log(m);//Uncaught ReferenceError: m is not defined
let m = 'es6'; console.log(n);
var n = 'es5';
b:不允许重复声明;
let m = 'es6';
let m = 'new-es6';
console.log(m);//Uncaught SyntaxError: Identifier 'm' has already been declared var n = 'es5';
var n = 'new-es5';
console.log(n);
c:暂时性死区;

只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

var a = 666;
if(true){
a = 'abc';//Uncaught ReferenceError: a is not defined
let a;
}

(2)小栗子:

正确:

    var a = 666;
{
let a = 456;
}
alert(a);// let b = 777;
{
b = 567;
}
alert(b);//

报错:

    let c = 888;
{
var c = 678;//Uncaught SyntaxError: Identifier 'c' has already been declared
}
alert(c);

2.变量的解构赋值

解构适用于:数组、对象、字符串、数值、布尔值和函数的参数等。

(1)完全解构

即:等号左边的模式,完全匹配等号右边的内容。

:) 解构成功:

a.数组解构:

  let [m, [[n], k]] = [1, [[3], 6]];
console.log(m); //
console.log(n); //
console.log(k); // let [ , , c] = ["aaa", "bbb", "ccc"];
console.log(c); // "ccc" let [x, , y] = [1, 2, 3];
console.log(x); //
console.log(y); // let [f, ...s] = [1, 2, 3, 4];
console.log(f); //
console.log(s); // [2, 3, 4]

b.对象解构:

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa" let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

对象可以嵌套解构:

下面代码中,只有line是变量,locstart都是模式,不会被赋值。

var node = {
loc: {
start: {
line: 1,
column: 5
}
}
}; var { loc: { start: { line }} } = node;
line //
loc // error: loc is undefined
start // error: start is undefined

对象的解构也可以指定默认值。代码如下:

var {x = 3} = {};
x // var {x, y = 5} = {x: 1};
x //
y // var {x:y = 3} = {};
y // var {x:y = 3} = {x: 5};
y // var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

:( 解构失败:会输出undefined

 let [a, b, ...e] = ['hello'];
console.log(a); // "hello"
console.log(b); // undefined
console.log(e); // []
(2)不完全解构

即:等号左边的模式,只匹配一部分的等号右边的内容。

:) 解构成功:

let [x, y] = [1, 2, 3];
console.log(x); //
console.log(y); //

:( 解构失败:

严格地说,如果等号的右边不是数组,或者说不是可遍历的结构,将会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

友情链接:http://es6.ruanyifeng.com/#docs/destructuring

ES6学习笔记(一)——let和const的更多相关文章

  1. es6学习笔记1 --let以及const

    let语句的基本用法:  1.let声明的变量为块级作用域,只在最近的{}里面有效,如果在外部引用就会报错. { let a = 10; var b = "hello" } ale ...

  2. ES6学习笔记(1)----let和const命令

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ let和const命令 let 总结1.声明变量基本使用方法与var 相同  不同点  a.在代 ...

  3. ES6学习笔记之 let与const

    在js中,定义变量时要使用var操作符,但是var有许多的缺点,如:一个变量可以重复声明.没有块级作用域.不能限制修改等. //缺点1:变量可以重复声明 var a=1; var a=2; conso ...

  4. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  5. es6学习笔记-class之一概念

    前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...

  6. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  7. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  8. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  9. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

随机推荐

  1. python challenge - map.py

    Hint: K->M    O->Q    E->G everybody thinks twice before solving this. g fmnc wms bgblr rpy ...

  2. HTML5特性

    HTML5规范围绕如何使用新增标记定义了大量Javascript API,其中一些API与DOM重叠,定义了浏览器应该支持DOM拓展. 1.与类相关的扩充 HTML5新增了getElementsByC ...

  3. Spring简化配置

    一.提取公共配置 通过bean标签将公共的配置提取出来,然后指定abstract="true". 在其它bean标签中指定其parent就可以.

  4. UDP与TCP报文格式,字段意义

    UDP报文 1.UDP有两个字段:数据字段和首部字段. 首部字段 首部字段很简单,只有8个字节,由4个字段组成,每个字段的长度都是两个字节.   1)源端口:源端口号.在需要对方回信时选用.不需要时可 ...

  5. 论C++STL源代码中关于堆算法的那些事

    关于堆,我们肯定熟知的就是它排序的时间复杂度在几个排序算法里面算是比較靠上的O(nlogn)常常会拿来和高速排序和归并排序讨论,并且它还有个长处是它的空间复杂度为O(1), 可是STL中没有给我们提供 ...

  6. jquery,js,checkbox多选框复选框取值和赋值

    今天一个同事不太会多选框的取值和赋值的问题,我帮他解决了一下,不想自己想的朋友可以参考一下. 获取checkBox的值,checkBox的html如下 <input type=" na ...

  7. Centos 7 启动错误:XFS_WANT_CORRUPTED_GOTO 修复

    参考源 如果出现以下报错 [sda] Assuming drive cache: write through Internal error xfs XFS_WANT_CORRUPTED_GOTO at ...

  8. 给linux操作系统安装中文环境

    如果设置的默认环境是英文,需要安装中文环境.最简答的方法如下: sudo apt-get install language-pack-zh-hant sudo apt-get install lang ...

  9. Web Services 平台元素

    Web Services 拥有三种基本的元素:SOAP.WSDL 以及 UDDI. 什么是 SOAP? 基本的 Web services 平台是 XML + HTTP. SOAP 指简易对象访问协议 ...

  10. PHP运算符===和==的区别

    区别: ===是恒等计算符   同时检查表达式的值与类型 ==是比较运算符号  不会检查条件式的表达式的类型 转自:  http://jingyan.baidu.com/article/03b2f78 ...