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. prototype 用法

    prototype使得js面向对象使用了prototype之后,使用它里面的属性或者函数 需要new出一个对象才可以使用.否则不使用prototype,直接向对象注入 function Person( ...

  2. Sql Server分页分段查询百万级数据四种项目实例

    实际项目中需要实现自定义分页,最关键第一步就是写分页SQL语句,要求语句效率要高. 那么本文的一个查询示例是查询第100000-100050条记录,即每页50条的结果集.查询的表名为infoTab,且 ...

  3. css - 紧贴底部的页脚

    有的时候,由于页面长度不够,页面底部的页脚会很尴尬的跑上来,如图: 有的同学可能会想用position:fixed;bottom:0;来永远居底.但有些场景确实不适合. 这是我从YII2中找到的简单解 ...

  4. Android应用APP脱壳笔记

    [TOC] 天下游 模拟定位技术点简析 通过代码分析初步猜测模拟定位用到的几处技术点: 获取了Root权限 通过反射获取 android.os.ServiceManager 对应的函数 getServ ...

  5. netty的理解

    netty作为nio应用的典范,在很多设计方面都值得我们在程序开发中学习. 1.事件驱动,三种事件的传播机制.一种是在channel上触发,一种是在pipeline上触发,一种是在context上触发 ...

  6. Navicat for MySQL 之数据库迁移

    1.将数据库下的表迁移出来 2.将表全部迁入另一个数据库 重新连接数据库看看吧!

  7. Linux Linux常用命令二

    whoami 我是谁命令 --该命令用户查看当前系统当前账号的用户名 --由于系统管理员通常需要使用多种身份登录系统,李儒通常使用普通用户登录系统,然后再以su命令切换到root身份对系统进行灌篮.这 ...

  8. A Survey of Shape Feature Extraction Techniques中文翻译

    Yang, Mingqiang, Kidiyo Kpalma, and Joseph Ronsin. "A survey of shape feature extraction techni ...

  9. EXCEL VBA代码,实现点击Sheet1按钮控件保存不连续单元格的数据到Sheet2中,然后清空输入内容

    Private Sub SaveAndClear() Dim Header, Deatil, Order As Range Dim lastrow1, lastrow2 As Long Dim i A ...

  10. DBCP与C3P0数据库连接池

    数据库连接池是做什么的? 学过计算机网络的都知道,在一个内部局域网中.大部分用的都是私有地址,要想和外部 打交道,必须要有相应的合法外部地址相相应.然而内部用户数量巨大.一台机子一个外部IP 是不现实 ...