本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》
学习 20% 的知识完成 80% 的工作
关于 ES6
稍微介绍下 ES6 吧，详细介绍请自行 baidu 或 Google
- ES2015 = ES6
- ES6 泛指 ES2015、ES2016、ES2017 等等，JavaScript 的下一代标准
- 现代浏览器支持大部分（90%+）的原生 ES6 ，但是为了兼容老版本的浏览器，通常使用 Babel 将 ES6 代码转为 ES5 代码。
常量变量 let and const
先说说常量和变量的概念吧，
常量是说那种进行一次赋值后不会更改的值，比如说游戏账户的 ID，
变量是说赋值后有更改的需求的，比如游戏名，游戏密码。
在之前的 JavaScript 中是不区分常量和变量的统统使用 var 来定义全局变量，
var userId = 666;
var userPassword = "mimabunengshuo";现在 ES6 中使用 let 定义局部变量，const 定义局部常量
const userId = 666;
let userPassword = "wobuzidao";为什么需要使用局部变量与常量
//我希望重复打印 0 到 9 ，打印10次
//使用 var
function varI(){
for(var i = 0;i < 10;i++){
for(var i = 0;i < 10;i++){
console.log("varI:"+i);
}
}
}
//使用 let
function letI(){
for(let i = 0;i < 10;i++){
for(let i = 0;i < 10;i++){
console.log("letI:"+i);
}
}
}
varI();//结果打印只有一次 0 到 9
letI();//顺利完成如果非要使用 var 完成这个需求的话可以使用闭包
关于闭包本次不多做讨论
function varI() {
for (var i = 0; i < 10; i++) {
function test() {
for (var i = 0; i < 10; i++) {
console.log("varI:" + i);
}
}
test();
}
}
varI();//顺利完成结构赋值
- 左右两边必须是一样的数据类型，或者转换后是一样的类型；
- 等号右边的值应该是数组或对象，不是对象或数组，就先将其转为对象；
- 定义和赋值必须同步完成
例如声明变量
let a = 1;
let b = 2;
let c = 3;ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3];常用实例
1.交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x]; 2.提取 JSON 数据
解构赋值对提取 JSON 对象中的数据，尤其有用。
let jsonData = {
status: true,
data: ["nicai", "wobuzhidao"]
};
let { status, data } = jsonData;
console.log(status, data);// true ["nicai", "wobuzhidao"]箭头函数
在 ES6 之前定义函数是这样写
var f = function (i){
return i + 5;
}有了箭头函数可以这样写（去掉 function 关键词，在"()"后面加"=>"）
let f = (i) => {
return i + 5;
}好像没有太大区别？
- 箭头函数只有一个参数时,可以省略"()",只写参数；当只有一条返回语句时，可以省略"{}",以及 return 语句
上面的可以这样写
let f = i => return i + 5;箭头函数的 this 是固定不变的，就是指向定义时所在的对象，而不是使用时所在的对象
假如将 ES6 的箭头函数转换为 ES5 的普通函数,可以看到，箭头函数的 this 是在引用外层的 this
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}字符串模板
- 字符串模板主要用来处理变量和字符串混合的情况
- 字符串使用反引号(`字符串`)来包裹字符串，用$符加大括号 ( \${JavaScript}) 来包裹任意的 JavaScript 表达式
- 字符串模板中可以使用回车
比如用 JavaScript 来生成 HTML 元素，元素的文本想使用自己 JavaScript 运算后的结果
ES5 中比较麻烦
$('#dom').append(
'你的用户名是：' + userName + '
' +
'你已经注册了 ' + oNumber +'年'
);ES6中相对简单
$('#dom').append(
`你的用户名是：${userName}
你已经注册了${oNumber}年`
);面向对象
- class 用来定义一个类
- extends 用来表示继承哪个类
- constructor 构造函数可以定义私有方法和属性,此函数外的为共享的
- super() 在 constructor 使用该方法继承父类的 this 对象
代码示例
class user {
constructor() {
this.name = '用户1';
}
sayHello(say) {
console.log(`${this.name}，有人对你说：${say}`);
}
}
let user1 = new user();
user1.sayHello('你好'); //用户1，有人对你说：你好
class xiaoming extends user {
constructor() {
super();
this.name = '小明';
}
}
let xiaoming1 = new xiaoming();
xiaoming1.sayHello('你好'); //小明，有人对你说：你好
let user2 = new user();
user2.sayHello('你好')//用户1，有人对你说：你好[ES6] 快速掌握常用 ES6 （一）
[ES6] 快速掌握常用 ES6 （二）