参考资料 微软中文javascript文档 阮一峰老师的ECMAScript 6入门 infoq 深入浅出ES6 ECMAScript 2015 简易教程 张鑫旭老师的blog,相关链接放在相应的位置
参考资料
微软中文javascript文档
阮一峰老师的 ECMAScript 6入门
infoq 深入浅出ES6
ECMAScript 2015 简易教程
张鑫旭老师的blog,相关链接放在相应的位置
一.变量
1.1 let
let 类似java的变量声明方式,严格模式,
let特性:
1、不允许重复声明
2、没有预解析。
3、块级作用域
一对{}包括的区域称为代码块
块级作用域指一个变量或者函数只在该区域才起作用。
从块的开始到声明这段的区域 暂存死区
1.不允许重复声明
let a = 1;let a =3; //Uncaught SyntaxError: Identifier 'a' has already been declared
类比java代码
//类比java的变量声明int a = 1;int a = 2;//重复声明
2.没有预解析。[暂存死区]
console.log(a);//error Uncaught ReferenceError: a is not defined let a = 1;
类比java
//类比java的变量在使用前需要先声明public static void main(String[] args) { System.out.println(a);//a cannot be resolved to a variable int a =1; }
对比var
console.log(a);// 因为有与解析的存在,a这里就为undefined,不会报错。var a = 1;
3、块级作用域
let声明的作用域是在{}里面,而var是在函数作用域内,
{ let i = 1;//利用let 声明的i 在外部无法引用 } console.log(i); // Uncaught ReferenceError: i is not defined
对比var
{ var i = 1; } console.log(i); //利用var 声明的i 在外部还是可以引用到。
利用let声明的变量就可以不用考虑for循环的外部引用问题了。
let:
var tt = [1,2,3]; for (let i = 0; i < tt.length; i++) { tt[i] }; console.log(i); //ReferenceError: i is not defined;i 只是在 for的{}区域内有效,
对比var
var tt = [1,2,3]; for (var i = 0; i < tt.length; i++) { tt[i] }; console.log(i); //利用var 声明的i 在外部还是可以引用到。
例子:1.定时器
for (var i = 0; i < 10; i++) { setTimeout(function () { console.log(i); //闭包的问题,打印结果都为10,简单的理解, //i声明后没有立刻被使用,而是经过了一段时间后才使用。 //所以for循环跑完了。i值固定了。 }) };
如果需要每次的i打印的不一样,就让i立刻被使用,
使用var的方式,可以 使用匿名函数自执行的方式
for (var i = 0; i < 100; i++) { (function (i) { setTimeout(function () { console.log(i); //函数立刻执行了。i被使用了。所以每次的i的值都是不一样的 }) })(i) };
如果使用let的方式的话
for (let i = 0; i < 10; i++) { setTimeout(function () { console.log(i); //let是强类型:对比java,与闭包就没多大关系了。 }) };
例子:2选项卡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { display: none; } .show{ display:block; } .active { background-color: yellow; } </style></head><body> <input type="button" value="btn1" class="active"> <input type="button" value="btn2"> <input type="button" value="btn3"> <div class="show">div1</div> <div>div2</div> <div>div3</div> <script type="text/javascript"> var tabs = document.getElementsByTagName('input'); var divs = document.getElementsByTagName('div'); for(let i =0, len = tabs.length;i<len;i++){ tabs[i].onclick = function () { for (let i = 0; i < tabs.length; i++) {// 这里使用了和外面一样的let声明方式也没有关系, //因为let是强类型的&&块级作用域 tabs[i].className=""; divs[i].className=""; } this.className="active"; divs[i].className="show"; } } </script></body></html>
1.2 const
const 声明常量,类似java的static final,用法也类似
比如声明了变量的话,const强调变量的引用不能再修改,而不是说变量的引用里面的值不能被修改
const a = { name:"test", age:1 }; a.name="test2";//修改常量的引用的内部的值是可以的。 console.log(a.name,a.age);
1.3 变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
1.3.1 数组的解构赋值
let ori = [1,2,[3,4]]; let [a,b,[c]] = ori;//数组是按照顺序一个个赋值的。注意,这里到3,没有到4. console.log(a,b,c);
如果模式不对,就会报错。
let ori = [1,2,[3,4]]; let [a,b,d,[c]] = ori;//这里d无法匹配原来的模式串。所以报错了。 console.log(a,b,c);
1.3.2 对象的解构
let oriObj ={ foo:function () { }, o:{name:"oo",age:1}, arr:[1,2,3], str:'sss' } let {foo,o} = oriObj;//对象的结构赋值使用的是key去对应。更多的内容参考阮一峰老师的es6 console.log(foo,o);
注意模式匹配,如上面的例子,如果我们想匹配name的值,对比上面的例子,要使用下面的写法,注意对象的解构赋值,要注意模式串的匹配。还有嵌套匹配的时候模式不是变量。
let oriObj ={ foo:function () { return "tt"; }, o:{name:"oo",age:1}, arr:[1,2,3], str:'sss' } let {foo,o:{name}} = oriObj;//参考阮一峰老师的es6讲解,这里o是一个模式不是一个变量,所以o是不能赋值的。 console.log(foo,name);
二.字符串
2.字符串扩展
2.1 codePointAt
var s = '