1. let const
let和const相遇比var有两个重要的不同点
-
let和const没有声明提升，只存在块级作用域
-
let和const只能声明一次
function ES6() {
let a = 1;
const b = 2;
console.log(a,b);// 1,2
}
console.log(a,b);// a is not defined
function ES6() {
let a = 1;
const b = 2;
const b = 3;
console.log(a,b);// Identifier 'b' has already been declared
}
2. 模板字符串
ES5处理拼接字符串：
let data = {userName:'张三',age:'18'}
'the userName is ' + data.userName + 'age is '+ data.age //the userName is 张三 age is 18
`the userName is ${data.userName} age is ${data.age}` //the userName is 张三 age is 18
3. 箭头函数
说明：箭头函数是一种函数简写，去除function关键字，括号里面为参数，跟随一个 =>
特点：
-
不需要function关键字
-
省略return关键字
-
继承上下文this
// ES5
let add = function (a,b) {
return a + b;
}
// 使用箭头函数
let add = (a,b) => a + b;
箭头函数没有自己的this,使用call(),apply(),bind()时，第一个参数被忽略，call()内部实现为调用传入函数的this指向，箭头函数没有this,所以忽略
let adder = {
base : 1,
add : function(a) {
let f = v => v + this.base;
return f(a);
},
addThruCall: function(a) {
let f = v => v + this.base;
let b = {
base : 2
};
return f.call(b, a);
}
};
console.log(adder.add(1)); // 输出 2
console.log(adder.addThruCall(1)); // this作用域仍然是adder，所以仍然输出2
支持默认传参和解构赋值
let f = ([a,b] = [1,2], {x: c} = {x: a + b}) => a + b + c;
f() // 6
4. 函数参数默认值
//ES5:
function defaultValue(test) {
test = test || 'default';
return test;
}
defaultValue(); // 'default'
defaultValue('kaqi007'); // 'kaqi007'
//ES6:
//function声明函数
function defaultValue(test = 'default') {
return test;
}
// 箭头函数
(test = 'default') => {
return test;
}
defaultValue(); // 'default'
defaultValue('kaqi007'); // 'kaqi007'
5. Spread/Rest操作符(三点运算符)
Spread是扩展运算符，用于数组的解析于构造
// 构造
let arr1 = [1,0,2,4];
let arr2 = [9,9,6];
let arrAdd = [...arr1,...arr2];
console.log(arrAdd);// [1, 0, 2, 4, 9, 9, 6]
function foo(a,b,c,d){
console.log(a,b,c,d)
}
let arr = [1,0,2,4] // 1 0 2 4
foo(...arr)
// 解析
let arrSon1, arrSon2;
[arrSon1, ...arrSon2] = arr1;
console.log(arrSon1);//1
console.log(arrSon2);//[2,3,4]
Rest是剩余运算符，让所有参数变为一个统一变量
function foo(...args){
console.log(args)
}
foo(1,0,2,4,9,9,6);// [1, 0, 2, 4, 9, 9, 6]
6. 解构赋值
const student = {
name: 'Sam',
age: 22,
sex: '男'
}
// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name , age , sex);// Sam 22 男
// ES6
const { name, age, sex } = student;
console.log(name , age , sex);// Sam 22 男
const student = ['Sunny', 20, '女'];
// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name , age , sex);// Sunny 20 女
// ES6
const { name, age, sex } = student;
console.log(name , age , sex);// Sunny 20 女
7. 模块化
// a.js
let a = 2
export {a} // 解构赋值，相当于{a: 2}
// b.js
import {a} form 'a.js'
console.log(a) // 2
8. 超类
var parent = {
foo() {
console.log('我是父级')
}
}
var child = {
foo() {
super.foo();
console.log('我是子级')
}
}
Object.setPrototypeOf(child,parent);
child.foo(); //'我是父级' &nbps '我是子级'
补充：setPrototypeOf，接收两个参数，第一个为现有对象，第二个为原型对象，相当于在child._proto_添加了实例原型，形成原型链，自身找不到，会去父级进行寻找属性或方法
9. class和继承
- class：js只有对象本质是没有class类这个概念，只是函数包装后的语法糖
class Person {
constructor (name,age) {
this.name = name;
this.age = age;
}
print() {
console.log(this.name); // kaqi
console.log(this.age); // 22
}
}
var person = new Person('kaqi',22);
person.print();
- 继承：用到extends和super
class Child extends Person {
constructor (name,age,sex) {
super(name,age);
this.sex = sex;
}
print() {
console.log(this.name); // kaqi
console.log(this.age); // 22
console.log(this.sex); // 男
}
}
var child = new Child('kaqi', 22 ,'男');
child.print();
