常用语法:
1、let
与var类似,不同的是let定义的变量有块级作用域,比如:
var a=1;
while(true){
var a =2;
alert(a); //2
}
alert(a); //2
//用let:
let a=1;
while(true){
let a=2;
alert(a); //2
}
alert(a); //1
2、const 用来定义变量,但是定义之后的值不能再次更改了。
一个实际的用途是用来定义引入的模块,避免重命名导致出错。
const hello = require('hello')
3、class、super、extends
ES6引入了类的概念,extends是用来继承的
代码如下:
class Animal{
constructor{
this.type=animal;
}
eat(food){
console.log(this.type+' eat '+food);
}
}
let animal = new Animal();
animal.eat('water') //animal eat water
class Dog extends Animal{
constructor{
super(); //指代父类的实例,必须调用这个方法,子类才有this,因为子类的this也是继承父类的
this.type=dog;
}
says(say){
console.log(this.type+' says '+say);
}
}
let dog = new Dog();
dog.eat('bone'); //dog eat bone
dog.says('www'); //dog says www
其中的constructor方法就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实力对象可以共享的。
4、箭头函数 arrow function
简洁的表示了函数:
function(i){
return i+1;
}
ES6可以写为: (i) => i + 1;
复杂一点的要加{},例如:
function(x,y){
x++;
y--;
return x*y;
}
写为:
(x,y) => {
x++;
y--;
return x*y;
}
除了简洁之外,箭头函数中的this永远是指向当前的对象。
这就避免了一些this的指向,比如setTimeout()中的this是指向全局对象,经常导致要求的结果不一样。例如:
setTimeout(function(){
console.log(this.type);//this指向全局对象
})
ES6: setTimeout(() => {console.log(this.type)})//this指向当前对象
5、模板字符串,比如之前的:
$("#result").append(
"There are <b>" + basket.count + "</b> " +
"items in your basket, " +
"<em>" + basket.onSale +
"</em> are on sale!"
);
字符串和变量拼接麻烦,现在ES6可以这样:
$("result").append(
`There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale!`
); //用反引号来表示字符串,用${}来表示变量,并且{}里面可以是任意js表达式,可以进行运算等,`其中的空格和缩进都会保留出来。
如果不要保留换行可以用trim()方法去掉,放在反引号后:
$("result").append(
`There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale!`.trim()
);
6、ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
以前,为变量赋值,只能直接指定值。
let a = 1;
let b = 2;
let c = 3;
ES6允许写成下面这样。
let [a, b, c] = [1, 2, 3];
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
如果右边的个数多于左边,但是模式相同,这种情况叫解构不完全,但是可以成功。
如果右边个数小于左边,则解构不成功。
//不成功
let [x, y, ...z] = ['a'];
// x:"a"
// y:undefined
// z:[]
//不完全
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
如果右边不是数组就会报错
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
7、函数的默认参数值
ES5是不能直接为函数指定默认参数的,只能变通的方法:
//传统方法
function a(x,y){
y = y || 'hello';
console.log(x,y);
}
a('friend'); //friend hello
a('friend','bye') //friend bye
a('friend','') //friend hello
//ES6方法
function a(x,y='hello'){
console.log(x,y);
}
a('friend'); //friend hello
参数变量是默认声明的,所以不能用let或const再次声明。
function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}
8、ES6 引入 rest 参数(形式为“…变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
function animals(...types){
console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]
9、遍历器
ES6引入了其他语言如pyhton的for…of…,进行迭代,适用于数组,一些类数组的对象:
const arr = ['red', 'green', 'blue'];
for(let v of arr) {
console.log(v); // red green blue
}