ES6初步学习
let和const
let
用来声明变量,但是所声明的变量只在let
命令所在的代码块内有效
let不像var那样会发生变量提升,所以一定要先声明后使用。
console.log(foo); //undefined
console.log(bar); //报错ReferenceError
var foo = 2;
let bar = 3;
块级作用域
ES6明确允许在块级作用域中声明函数。但是尽量避免在块级作用域内声明函数,如果需要也要写成函数表达式,而不是函数声明语句。
在ES6中,块级作用域之中,函数声明的语句的行为类似let,在块级作用域之外不能被引用。
let实际上为javascript新增了块级作用域
外层作用域无法读取内层作用域的变量
内层作用域可以定义外层作用域的同名变量
块级作用域实际上使得广泛运用的立即执行函数变得不再必要了。
function f1() {
let n =5;
if(rue) {let n = 10;}
console.log(n); //5,注意只能在f1这个作用域使用
}
javascript没有块级作用域,但是用let
声明的变量可以绑定到所在的任意作用域中,换句话说let为其声明的变量隐式的劫持了所在的块作用域{...}
var foo = true;
if(foo) {
let bar = foo * 2;
bar = something(bar);
console.log(bar); //bar只在foo作用域中有效
}
console.log(bar); //ReferenceError
不太明显的“死区”
有兴趣的可以自行搜索了解一下TDZ(暂存死区)
,记得当时还是看到阮大神的微博知道的~~
function bar(x = y; y = 2) {
return [x, y];
}
bar(); //报错,此时相当于y未声明的情况下
let不允许在相同作用域内重复声明同一个变量,不能在函数内部重新声明参数。const也是这样。
function(arg) {let arg; //报错}
const
const
同样可以创建块作用域变量,同样只在声明所在的块级作用域中有效。但其值是固定的,不可更改,只读。
一旦声明变量,就必须立即初始化,不能留到以后赋值。
//只声明不赋值就会报错
const foo; //SyntaxError:
const声明的变量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。
if(true) {
console.log(MAX); //ReferenceError
const MAX = 5;
}
对于复合类型的变量,变量名不指向数据,而是指向数据所在的地址。const只保证变量名指向的地址不变,不保证该地址的数据保持不变。不能把foo指向另一个地址。
const foo = {};
foo.prop = 123;
foo.prop; //123
foo = {}; //TypeError:"foo" is read-only
顶层对象的属性
浏览器环境指的是window对象 Node中指的是global对象
ES6中,var命令和function命令声明的全局变量依旧是顶层对象的属性,但是let和const以及class声明的全局变量不属于顶层对象的属性。
var a = 1;
window.a; //1
let b = 1;
window.b; //undefined
异常
严格模式下LHS查询失败时,并不会创建并返回一个全局变量,引擎会抛出同RHS查询失败时类似的
ReferenceError
异常如果RHS查询到一个变量,尝试对这个变量的值进行不合理的操作时,比如对一个非函数类型的值进行函数调用,或者引用null或undefined类型的值中的属性,引擎会抛出另外一中的异常
TypeError
ReferenceError
同作用域的判别失败有关,TypeError
则表示作用域判别成功了,但是对结果的操作是非法的或者不合理的。
查找的目的是对变量进行赋值,那么就会使用LHS查询,如果目的是获取变量的值,那么就会使用RHS查询。
像var a = 2
这样的会被分解两个步骤:(1)var a 会在作用域中声明新变量,代码执行前进行(2)a = 2 会查询(LHS)变量a并对其进行赋值。
闭包
循环和闭包
每次迭代都生成一个新的作用域,使得延迟函数的回调可以将新的作用域封闭在每个迭代内部。
for(var i = 0; i <= 5; i++) {
(functiong(j) {
setTimeout(function timer() {
console.log(a);
}, 1000);
})(i);
}
var的循环,每一次循环都是新的i值覆盖旧的i值,只有一个i,所以只输出最后一个。
let的循环 每次循环都是一个新的变量i,多个i,所以会每个都输出,每次迭代都进行重新绑定,与闭包有关
Generator函数
异步
最大的特点就是可以交出函数的执行权(即暂停执行)
函数名之前加星号.yield表示执行到此处,执行权将交给其他协程。
function* gen(x) {
var y = yield x + 2;
return y;
}
var g = gen(1);
g.next() //{value:3,done:false}
//value是yield语句后面表达式的值,表示当前阶段的值,done表示函数是否执行完毕,是否还有下一个阶段。
g.next() //{value:undefined,done:true}
调用generator函数会返回一个内部指针g,执行它不会返回结果返回的是指针对象。调用指针的g的next方法,会移动内部指针,指向第一个遇到的yield语句即x+2处。
Set数据结构
类似于数组但是成员的值都是唯一的,没有重复的值。
var s = new Set([1,2,3,4,4]);
[...s] //[1,2,3,4]
Set实例的方法
操作方法和遍历方法
操作数据
(1) 操作方法
add:添加某个值,放回set结构本身
delete:删除某个值返回一个布尔值,表示删除是否成功
has(value):返回一个布尔值,表示该值是否为set的成员
clear:清除所有成员,没有返回值
s.add(2).add(3).add(2);
s.size //2
s.has(1) //false
s.has(2) //true
s.has(3) //true
s.delete(2);
s.has(2) //false
(2) Array.from方法可以将set数据结构转为数组
var items = new Set([1,2,3,4,5]);
var array = Array.from(items);
(3) 扩展运算符...
也可以将某些数据结构转换一个数组
function foo() {
var args = [...arguments];
}
[...document.querySelectorAll("div")]
(4)数组去重的另一种方法
function dedupe(array) {
return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]
遍历操作
keys:返回键名的遍历器
values:返回键值的遍历器
entries:返回键值对的遍历器
forEach:使用回掉函数遍历每个成员
附录(易错点):
隐式的强制转换
3 + true; //4
NaN !== NaN; //true
Null == undefined; //true
浮点数
0.1 + 0.2; //0.300000004
(8).toString(2); //"1000"
parseInt("1001", 2); //9
数据类型
typeof null; //"object"
typeof "hello"; //"string"
var s = new String("hello");
typeof s; //"object"
var s1 = new String("hello");
var s2 = new String("hello");
s1 === s2; //false
s1 == s2; //false
NaN !==NaN