// 报错
function() {
var a = 10;
let a = 10;
}
// 报错
function() {
let b = 10;
let b = 10;
}
// 报错
function(arg) {
let arg ;
}
// 不报错
function(arg) {
{
let arg ;
}
}
1.2 块级作用域
块级作用域的出现让广泛应用的 IIFE 不再必要了
// IIFE 写法
(function(){
var tmp = '';
....
})()
// 块级作用域写法
{
let tmp = '';
....
}
块级作用域外部无法调用块级作用域内部的函数
{
let a = 'aaa';
function f() {
return a;
}
}
f() // 报错
这样来处理
let f;
{
let a = 'aaa';
f = function() {
return a;
}
}
f() // 'aaa'
1.3 const
声明常量
const一旦声明就必须立即初始化,不能留到以后赋值。
const foo;
// SyntaxError: missing = in const declaration
let {prop: x} = undefined; // TypeError
let {prop: y} = null; // TypeError
// 转为 ES5 的代码 一目了然
var x = undefined.prop;
var _ref = null;
var y = _ref.prop;
2.5 函数参数
function add([x,y]){
return x + y;
}
add([1,2]) //3
可以避免在函数内部再写 var foo = config.foo || 'defaule foo';
6) 遍历 Map
任何部署了 Iterator 接口的对象,都可以用 for...of 循环再遍历。Map原生支持 Iterator 接口,使用变量的解构赋值获取 key value 很方便。
var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for(let [key, value] of map){
console.log(key, value);
}
// 只获取键
let [key] of map
// 只获取值
let [,value] of map
7) 输入模块的指定的方法
加载模块时候,往往需要指定哪些方法。
const {parseURL, util} = require('base');
转成 ES5
'use strict';
var _require = require('base');
var parseURL = _require.parseURL;
var util = _require.util;
ES6 笔记一
思维导图
1. let const
1.1 let
基本用法
let 很适合用在
for
循环中的计数器不存在变量提升
暂时性死区 (TDZ temporal dead zone)
只要块级作用域内存在
let
命令,它所声明的变量就 "绑定" 这个区域,不再受外部的影响不允许重复声明
let 不允许在相同作用域内重复声明同一个变量
1.2 块级作用域
块级作用域的出现让广泛应用的 IIFE 不再必要了
块级作用域外部无法调用块级作用域内部的函数
这样来处理
1.3 const
声明常量
const一旦声明就必须立即初始化,不能留到以后赋值。
const 复合型变量
变量名不指向数据,而是指向数据所在的地址。
真想冻结对象 可用 freeze 方法
const foo = Object.freeze({});
1.4 跨模块常量
const声明的常量只在当前代码块有效。如下方法来跨模块:
1.5 全局对象的属性
ES6中规定
2. 变量解构赋值 Destructuring
按照一定模式,从数组和对象中提取值,对变量进行赋值。
2.1 Array
用法
结构不成功, 变量的值就是
undefind
如果等号的右边不是 可遍历结构 ,那将会报错
因为上面等号右边的值, 幺妹转为对象后不具备 Iterator 接口(前5个),要么本身就不具备 Iterator 接口(最后一个)。
Set 结构, 也可以使用数组的解构赋值
默认值 ES6中使用 === 判断哪一个位置是否有值。所以,一个数组成员不严格等于 undefined ,默认值是不会生效的
2.2 对象
和数组的不同点 数组的元素是有次序的,变量的取值由他的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
如果变量名与属性名不一致
实际上,对象的解构赋值是以下形式的简写
真正赋值的是后者 不是前者
其他
此时 foo 的属性对应一个子对象。该子对象的bar属性结构时会报错。因为 foo 现在为undefined。
对于已经声明的变量用于解构赋值必须很小心。因为上面的代码 js 引擎会把 {x} 理解成一个代码块,发生语法错误。正确的写法:
解构赋值允许等号左边的模式中不放置任何变量名。于是写出很古怪的表达式
上面的表达式毫无意义 但是语法是合法可以执行的。
对象的解构赋值可以很方便的将现有对象的方法赋值到某个变量。
let { log, sin, cos } = Math
2.3 String
字符串被转换成一个类似数组的对象
类似数组的对象都有 length 属性,因此可以对这个属性解构赋值
2.4 Number & Boolean
解构赋值时,如果等号右边是数值或布尔值,则会 先转为对象 。
上面代码中 数值 和 布尔值 的包装对象都有
toString
属性,因此 s 都能取到值。解构赋值的规则是,只要等号右边的值不是对象,就现将其转为对象。 由于 undefined 和 null 无法转为对象,所以对他们进行解构赋值都会报错。
2.5 函数参数
上面的代码,函数的参数不是一个数组,而是通过解构得到的变量 x 和 y
上面的代码,函数 move 的参数是一个对象,通过对这个对象进行解构,得到变量 x y 的值。 解构失败,则等于x y等于默认值。
上面的代码视为函数 move 的参数指定默认值,而不是为 x y 指定默认值,所以结果不同。
2.6 关于圆括号
一个式子是模式还是表达式,没有办法一开始就知道,必须解析到或解析不到等号才知道。
ES6的规则是,只要有可能导致解构歧义,就不得使用圆括号。
不使用圆括号
变量声明语句中,模式不能带有圆括号
函数参数也属于声明变量
不能将整个模式或嵌套模式的一层放在圆括号中
使用圆括号
只有一种情况:赋值语句的非模式部分可以使用后圆括号
因为上面语句都是赋值语句,不是声明语句;他们的圆括号都不属于模式的一部分
2.7 用途
1) 变换变量的值
babel转换后
2) 从函数返回多个值
函数只能返回一个值,想要多个就只能放在数组或对象中返回了。
3) 函数参数定义
很方便的将一组参数和变量对应起来
4) 提取 JSON 数据
十分有用
5) 函数参数的默认值
可以避免在函数内部再写 var foo = config.foo || 'defaule foo';
6) 遍历 Map
任何部署了 Iterator 接口的对象,都可以用 for...of 循环再遍历。Map原生支持 Iterator 接口,使用变量的解构赋值获取 key value 很方便。
7) 输入模块的指定的方法
加载模块时候,往往需要指定哪些方法。
const {parseURL, util} = require('base');
转成 ES5