
ES6 简介:
ECMAScript 6 简称 ES6,是 JavaScript 语言的下一代标准,于 2015年06月正式发布。
ECMAScript与JavaScript之间的关系:
ECMAScript:
The specification defined in ECMA-262 中定义的标准,是用于创建通用目的脚本语言的。然而ECMA-262是标准的名称,它代表了脚本语言规范ECMAScript
ECMAScript提供脚本语言必须遵守的规则、细节和准则,这些才是其被视为兼容ECMAScript的判断标准。
JavaScript:
一种通用目的的脚本语言,遵循 ECMAScript 规范。通过阅读 ECMAScript 规范,你将学会如何创建脚本语言。通过阅读 JavaScript 文档,你将学习如何使用脚本语言。
之间的关系总结:
前者是后者的语法规格,后者是前者的一种实现 。
ES6新特性:
let、const:
相同点:定义的变量不会变量提升,且都为块作用域。
不同点:const定义的变量不能被修改。
在ES6之前,是并没有{}块级作用域的概念,只有(函数作用域、全局作用域、eval作用域)。
export、import(导入、导出):
export 导出模块:
// javascript code-model
// 导出默认
export default {};
// 部分导出
export class App extends Component {};
import 导入模块:
// javascript code-model
// 全部导入
import exaple from './example'
// 将整个模块当做单一模块导入
import * as example from './example.js'
// 引入模块中指定的部分
import { name, age } from './example'
class、super、extends(类、继承):
这里就直接找一个网上包含class、super、extends的例子了。。。
// javascript code-model
// ES5
var Shape = function(id, x, y) {
this.id = id,
this.move(x, y);
};
Shape.prototype.move = function(x, y) {
this.x = x;
this.y = y;
};
var Rectangle = function id(ix, x, y, width, height) {
Shape.call(this, id, x, y);
this.width = width;
this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var Circle = function(id, x, y, radius) {
Shape.call(this, id, x, y);
this.radius = radius;
};
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
// ES6
class Shape {
constructor(id, x, y) {
this.id = id this.move(x, y);
}
move(x, y) {
this.x = x this.y = y;
}
}
class Rectangle extends Shape {
constructor(id, x, y, width, height) {
super(id, x, y) this.width = width this.height = height;
}
}
class Circle extends Shape {
constructor(id, x, y, radius) {
super(id, x, y) this.radius = radius;
}
}
arrow functions(箭头函数):
// javascript code-model
// 代替function
let code = (val1, val2) => {
return val1 + val2;
};
// 上面只有一行表达式也可以直接简化为
let code = (val1, val2) => val1 + val2;
// 在其他地方使用
let arr2 = [1, 2, 3];
let newArr2 = arr2.map(x => {
return x + 1;
});
// 会向上继承this
let names = 'slmBlog';
let code = {
names: 'slm',
getName: val => {
return this.names;
}
};
code.getName(); // slmBlog
code.getName = function () {
return this.names;
};
code.getName(); // slm
template string(字符串模板):
在ES5中字符串拼接一直是一个痛点,如果在多个字符与变量拼接的情况下,可读性极差且及其丑陋...尤其是换行拼接!
// javascript code-model
const name = 'slm';
// ES5
console.log(name + 'Blog');
// ES6
console.log(`${name}Blog`);
destructuring (解构):
// javascript code-model
let web = {
name: 'slmBlog',
age: 3,
color: ['white', 'blue']
};
// ES5
var myName = people1.name;
var myAge = people1.age;
var mainColor = people1.color[0];
console.log(myName + '----' + myAge + '----' + mainColor); // slmBlog----3----white
// ES6
let { name, age } = web;
let [mainColor, affColor] = web.color;
console.log(`${name}----${age}----${mainColor}`); // slmBlog----3----white
default 函数默认参数:
// javascript code-model
// ES5
function bate (val1, val2) {
val1 = val1 || 'slm';
val2 = val2 || 'Blog';
return val1 + val2;
}
// ES6
function bate (val1 = 'slm', val2 = 'Blog') {
// codes ...
return val1 + val2;
}
rest arguments (rest参数):
// javascript code-model
function fool (val1, val2, ...rest) {
return rest.length * 2;
}
console.log(fool(1, 2, 3, 4, 5)); // 6
Spread Operator(展开运算符):
// javascript code-model
const arr = [5, 6, 7, 8, 9];
console.log([1, 2, 3, 4, ...arr]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
第二种用法(取其中某值):
// javascript code-model
const arr = [5, 6, 7, 8, 9];
let [first, val, ...rset] = arr;
console.log(rset); //
对象的简化:
// javascript code-model
// ES5
function fool (name, age) {
return {
name: name,
age: age
};
}
// ES6
function fool (name, age) {
return {
name,
age
};
}
function的省略:
// javascript code-model
var obj = {
name: 'slmBlog',
getName: function () {
console.log(this.name);
}
};
// ES6
let obj2 = {
name: 'slmBlog',
getName () {
console.log(this.name);
}
};
Promise:
// javascript code-model
// 发起异步请求
fetch('/api/todos')
.then(res => res.json())
.then(data => ({
data
}))
.catch(err => ({
this.$router.push({
name: 'error',
query: err
});
}));
Promise 本身是同步的,但内部代码是异步执行。