建议下一个chrome的插件Scratch.js[https://chrome.google.com/webstore/detail/alploljligeomonipppgaahpkenfnfkn]，可以直接运行ES6～
变量声明
- let ,let声明的变量拥有 块级作用域
- const 常量,重新赋值会报错
{
let a= 2;
console.log(a) \2
}
console.log(a) \报错
let x = 3;
function func(randomize) {
if (randomize) {
let x = Math.random();
return x;
}
return x;
}
console.log(func(0)); // 3
console.log(func(1)); //随机
箭头函数
let arr = [1, 2, 3];
let aqu = arr.map(x => x * x); //aqu=[1,4,9]
字符串
- 单字符串模版形势
function printCoord(x, y) {
console.log(`(${x}, ${y})`);
}
//==>
function printCoord(x, y) {
console.log("(" + x + ", " + y + ")");
}
- 字符串 -- 多行字符
const HTML5_SKELETON = `
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>`;
多个返回值，可以同时定义几个变量 超方便
let [, year, month, day] =
/^(d{4})-(d{2})-(d{2})$/
.exec('2016-12-31');
//==>
var year = /^(d{4})-(d{2})-(d{2})$/
.exec('2016-12-31')[1];
循环 for-of
let arr = ['a', 'b', 'c'];
for(let val of arr){
console.log(val)
}
// 获取index，使用arr.entries() ，先mark 不懂
let arr = ['a', 'b', 'c'];
for(let [i,val] of arr.entries()){
console.log(`i is ${i}, val is ${val}`)
}
给参数加默认值
function foo(x=1,y=2){
console.log(x+y)
}
“The spread operator (...)” 跟apply有关
let arr1 = ['a', 'b'];
let arr2 = ['c', 'd'];
arr1.push(...arr2);
//==>
arr1.push.apply(arr1, arr2)
- arguments
function logAllArguments(...args) {
for (let arg of args) {
console.log(arg);
}
}
//获取第一个之后的参数~
function logAllArguments2(pattern, ...args) {
console.log(args);
}
对象的写法
let obj = {
name : 'zhang',
sayName() {
console.log(this.name)
}
};
类
- 关键字class,
- constructor定义了该类的构造器函数，
- 类里面与constructor平行的函数都是在绑定到原型上的
class Person {
constructor(name) {
this.name = name;
}
describe() {
return 'Person called '+this.name;
}
}
// 实例
let student = new Person('xiaozhang');
student.describe(); //Person called xiaozhang"
//==>
function Person(name) {
this.name = name;
}
Person.prototype.describe = function () {
return 'Person called '+this.name;
};
继承
- 关键字 extends
class Employee extends Person {
constructor(name, title) {
super(name);
this.title = title;
}
describe() {
return super.describe() + ' (' + this.title + ')';
}
}
common.js 文件导入
与es5写法有小小的差别
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main1.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
//------ main2.js ------
import * as lib from 'lib'; // (A)
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5