let

  • 不存在变量提升
  • 通过let声明的变量仅在块级作用域内有效
  • 不允许在同一个作用域内重复声明一个变量
防止值公用
var oUl = document.querySelectorAll('ul>li');
for(let i=0,len=oUl.length;i<len;i+=1){
oUl[i].onclick = function(){
console.log(`text:${this.innerText} index:${i}`);
};
}

不用再使用自执行函数了,兴奋。

typeof不再安全

直接typeof一个不存在的变量

console.log(typeof x); //undefined

而如果typeof一个后定义的let变量,则会报错

console.log(typeof x); //Uncaught ReferenceError: x is not defined
let x = 1;

解决方法:

try{
console.log(x);
}catch(err){
console.log(err);
}
let x = 1;
注意点

尽管通过let声明的变量不存在变量名提升,但只要在一个块级作用域中使用了let,那么就算这个let在定义之前使用,也不会到外部查找同名的变量。

var a = 10;
if(true){
console.log(a);
let a = 12;
}

不能在定义之前使用

a = 10;
console.log(a); //Uncaught ReferenceError: a is not defined
let a = 15;

块级作用域

在大括号中通过let或函数声明的变量不存在变量名提升,但因为一些历史原因,函数可能还是会存在变量提升的问题。

const

  • 定义一个常量,不可更改,并且在初始化时就得赋值,不然报错。
  • 只在当前作用域内有效
  • 不存在变量提升
  • 在同一个作用域中,不可重复声明
  • 当值是一个对象时,对象的值还是可以改变的,只是说引用不可改变
只在当前作用域内有效
const a = 10;
{
const a = 15;
console.log(a); //15
}
console.log(a); //10
当值是一个对象时
const obj = {
name:'zmz',
love:[1,2,3]
}; console.log(obj.name); //zmz
obj.name = 'o-o';
console.log(obj.name); //o-o

如果不想让其进行修改,可以使用Object.freeze方法

const obj = Object.freeze({
name:'zmz',
love:[1,2,3]
}); console.log(obj.name); //zmz
obj.name = 'o-o';
console.log(obj.name); //zmz
从es6开始新增的一些声明命令,其变量名不再属于顶级对象window

变量解构赋值

按照一定的模式进行赋值

数组解构赋值
var [a,b] = [1,2];
console.log(a,b); // 1 2

左边变量,右边值,一一对应

var [a,...b] = [1,2,3,4,5];
console.log(a,b); // 1 [2,3,4,5]

...会将后面剩余的所有参数当作一个数组,但为了方便阅读,也可以用一个括号将值阔起来,如下代码

var [a,[...b]] = [1,[2,3,4,5]];
console.log(a,b); // 1 [2,3,4,5]

直接用...和使用[]还是有区别的,如下

var [a,[...b],c] = [1,[2,3,4,5],6];
console.log(a,b,c); // 1 [2,3,4,5] 6

而直接用...的

var [a,...b,c] = [1,2,3,4,5,6];
console.log(a,b,c); // Uncaught SyntaxError: Rest element must be last element in array

报错了。

...的真正目的
var [a,...b] = [1,[2],3,4];
console.log(a,b); //1 [Array[1], 3, 4]

...所做的两件事,将剩余的所有参数归为所有,并且其自身是一个数组。

解构不成功的值

当解构不成功值为undefined

var [a,b] = [1];
console.log(a,b); //1 undefined
当值多余时

属于不完全解构,只解构需要的。

默认值

只有当值全等与undefined时才会起作用

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

默认值也可以引用解构赋值中的其他变量,但是这个变量必须已经声明

let [a,b = a] = [1];
console.log(a,b); //1 1 let [a = b,b = 1] = [];
console.log(a,b); //Uncaught ReferenceError: b is not defined

对象解构赋值

对象的解构,变量和属性名对应即可,跟顺序无关。

var {a} = {haha:'haha',a:'hello'};
console.log(a); //hello

也可以起一个别名

var {haha:a} = {haha:'haha',a:'hello'};
console.log(a); //haha

最后被赋值的是a,而不是haha

对象解构也可以使用默认值。

字符串解构
var [a,b,c] = 'haa';
console.log(a,b,c); //h a a

解构的用途

1、简写
var {log,info,time,timeEnd} = console;

time('time');
log('Hello');
timeEnd('time');

2、使接口更友好,并且与顺序无关
function fn({name,age,hello}){
hello(name,age);
} fn({
name:'老王',
age:23,
hello:function(name,age){
console.log('This is ' + name + ' ' + age); // This is 老王 23
}
});
3、交换变量
var a = 1;
var b = 2;
[a,b] = [b,a];
console.log(a,b); //2 1
4、函数默认值
function fn({a = 1,b}){
console.log(a,b); // 1 2
}
fn({b:2});
5、只取需要的值
var arr = [
{
title:1111,
love:{
one:'one_1',
two:'two_1'
}
},
{
title:2222,
love:{
one:'one_2',
two:'two_2'
}
}
]; for(let {title,love:{two}} of arr){
console.log(title,two);
}

完。

ECMAScript6学习笔记 ——let、const、变量解构赋值的更多相关文章

  1. ES6学习----let、const、解构赋值、新增字符串、模板字符串、Symbol类型、Proxy、Set

    这篇es6的学习笔记来自于表哥 表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 ES6就是JS6,JS的第 ...

  2. ES6 学习笔记(二)解构赋值

    一.数组的解构赋值 1.基本用法 ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,该操作即为解构 如: let [a,b,c]=[1,2,3]; console.log(a,b,c) ...

  3. ES6变量解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构ES6之前我们申明多个变量需要按照下面的方法: let l a=1; let b=2; let c=3; let d=4; ...

  4. ES6学习笔记一:let、const、解构赋值

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7236342.html 感谢阮一峰老师的无私奉献,开源推动世界!教程地址:http://es6.ruanyife ...

  5. ES6笔记(3)-- 解构赋值

    系列文章 -- ES6笔记系列 解构赋值,即对某种结构进行解析,然后将解析出来的值赋值给相关的变量,常见的有数组.对象.字符串的解构赋值等 一.数组的解构赋值 function ids() { ret ...

  6. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

  7. ES6的变量解构赋值

      前  言 ES6 解构赋值: ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构. 1.1 数组的结构赋值 1.1.1基本用法 JS中,为变量赋值直接指定.例如下面代码: ...

  8. 【es6】变量解构赋值

    1.数组解构赋值 let [a,b,c]=[1,2,3];//数组解构赋值,注意:左右两边格式需一致 let [a,b]=[1,2,3];//不完全解构,取位置靠前的值 let [a=1,b]=[un ...

  9. es6变量解构赋值的用途

    这里是我觉得es6解构赋值,在平时我们写js的时候非常有用,而且经常用到的地方,能简化我们的代码,让写代码简介优雅易读; 用途 1.交换变量的值,太方便了这逼,写法不仅简介而且一看就明白 let [x ...

随机推荐

  1. Poj2676

    经典DFS现在看来nice啊! package SoduKu; import java.io.InputStreamReader; import java.util.Scanner; /* *我用ro ...

  2. 【原】iOS学习之三种拨打电话方式的比较

    拨打电话小编从网上找到三种,在这里做一些总结和比较 1.基本使用 NSString *str = [[NSMutableString alloc] initWithFormat:@"tel: ...

  3. Codeforces Round #259 (Div. 2)

    A. Little Pony and Crystal Mine 水题,每行D的个数为1,3.......n-2,n,n-2,.....3,1,然后打印即可 #include <iostream& ...

  4. Visual Studio 2013执行项目报错:HTTP 错误 500.22

    转至:http://www.codingwhy.com/410.html 具体报错 HTTP 错误 500.22 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ...

  5. 弱省互测#2 t3

    题意 给出\(n\)个01字节和\(m\)个01字节,要求用后者去匹配前者,两个串能匹配当且仅当除了每个字节末位不同,其他位都要相同.问匹配后者至少有多少个末位不同.(\(1 \le m \le n ...

  6. 四道简单DP

    DP类题目找到子问题(状态),然后找到转移方程,就OK #dp #likes matrixchain #according to two point's distance to recurrence ...

  7. 如何让{dede:channel}有子栏目显示子栏目,无子栏目不显示同级栏目

    我们在使用织梦系统制作网站时经常会遇到网站栏目较多,显示当前栏目下的二级与三级栏目时,使用栏目嵌套标签,但是当三级栏目为空时,会显示同级栏目.从用户体验角度出发,常理情况下也是需要空白的,即二级栏目下 ...

  8. MongooseHelper

    /** * Created by lbc on 2016/11/16. */var mongoose=require("mongoose");var db=mongoose.con ...

  9. openGL实现二维图形和三维图形

    openGL是一个强大的底层图形库,其命令最初的时候使用C语言实现的.openGL定义了一个图形程序接口,常用于制作处理三维图像,功能强大,调用方便,在图像处理十分受欢迎. 实现图形主要使用的是ope ...

  10. 新版startssl 免费SSL证书申请 (实测 笔记 https http2 必要条件)

    简单说明: 目前多个大型网站都实现全站HTTPS,而SSL证书是实现HTTPS的必要条件之一. StartSSL是StartCom公司旗下的.提供免费SSL证书服务并且被主流浏览器支持的免费SSL.包 ...