ES6基础
1. let & const
let和const是es6新出的变量声明方式。其中最重要的特性就是提供了块级作用域和变量不会被提升。
let声明一个变量，这个变量的值能被改变。
const声明一个变量，这个变量的值不会被改变，也可以称之为常量。
2. 模板字符串
用法：把东西写在``中；${}里面可以写变量或者表达式。
const a = 'Hello';
const b = 'Sun';
// es6模板字符串
const str = `${a}, ${b}`;
// 两者结果一样，就是以前的写法很复杂。
const str1 = 'a' + ', ' + 'b';
3. 字符串重复
repeat()，返回新的字符串。注意，括号中的参数可以是小数，会自动向下取整；即repeat(2.9)会重复2次。参数如果是 NaN或者是 -1 到 0 之间的小数，结果都是repeat 0次。参数除上述外，不可以是负数或者infinity，会报错的哟。
console.log('hhh,'.repeat(2)); // 'hhh,hhh,'
4. 解析结构
数组解析结构，需要注意的是这是一个有序的对应关系：
const arr = [1, 2, 3];
const [a, b, c] = arr;
// 以上的写法等同于 es5 中
var arr = [1, 2, 3];
var a = arr[0];
... ...
对象解析结构，这是无需的对应关系，是根据属性名来对应的：
const obj = {
name: 'Sun',
age: 24,
checked: true
}
/**
* 然后我们要取对象中的两个值；
* 可以给这一个默认值，即如果obj对象中找不到age时，age就等于默认值18：
**/
const { name, age = 18 } = obj;
// 上面的写法就等同于 es5 中
var name = obj.name;
var age = obj.age;
5. 展开运算符 ...
const arr = [1, 2, 3];
const arr1 = [...arr, a, b, c];
// arr1就等于[1, 2, 3, a, b, c]
const obj = {
name: 'sun',
age: '20'
};
const obj1 = {...obj, fruit: 'mango'};
// obj1就等于 {name: 'sun', age: 18, fruit: 'mango'}
展开运算符可以用在函数的参数中，来表示函数的不定参数。注意，不定参需要放在最后。
const fn = (x, y, ...others) => {
console.log(others);
return others.reduce((a, b) => a + b) + x + y
}
fn(1, 2, 3, 5, 7, 20); // others: [3, 5, 7, 20]
// result: 38
reduce() 函数知识补充
语法： array.reduce(function(total, currentValue), initialValue)
最终计算返回一个值。其中initialValue是传给函数的初始值，可以不写的。
const arr = [1, 2, 4, 7, 9];
const sum = (total, num) => {
return total+num;
}
arr.reduce(sum); // 23
6. 函数默认参数
function fn(a=10, b=20) {
return a+b;
}
7. 箭头函数
es5函数和es6箭头函数的写法区别：
// es5
var test = function(a, b) {
return a+b;
}
// es6箭头函数： 当函数直接被return时，可以省略函数体的括号。
const test = (a, b) => a+b;
// 不省略括号
const test = (a, b) => {
console.log(a);
return a+b;
}
需要注意的是，箭头函数中没有this对象。如果在箭头函数中使用了this，那么该this一定就是外层的this。
const func = () => {
console.log(this);
}
func(); // Window
补充说明
function这个关键字定义的东西是全局的，function a(){}这个a函数就是全局的。a()调用的时候省略了window，即原来长成这样window.a()。也就是说函数的调用者是window。
然后我们来整一下this。使用function关键字定义的函数中的this不是指向函数，而是指向函数的调用者。this的指向只和调用函数的对象有关。所以下面例子里面的c(),因为调用者是obj，所以this指向的就是这个obj。
箭头函数 不是function关键字定义的函数; 箭头函数中的 this 在函数被定义的时候就已经绑定好了，而不是取决于谁调用这个函数，this就指向谁。箭头函数的this取决于最近的一个非箭头父级函数的this指向。
var obj = {
a: 10,
b: () => {
console.log(this.a); //undefined
console.log(this); //window
},
c: function() {
console.log(this.a); //10
console.log(this); //obj{...}
}
}
obj.b();
obj.c();
var obj1 = {
a: 20,
b: function() {
return () => console.log(this.a);
},
c: function() {
console.log(this.a);
}
};
obj1.b()(); // 20
8. class
class是es6提供的语法糖，用于创建对象。
es5例子：
// 构造函数
function Animal(name, voice) {
this.name = name;
this.voice = voice;
this.getVoice = function() {
return voice;
}
}
// 原型方法
Animal.prototype.getName = function() {
return this.name;
}
es6例子：
class Animal {
// 构造函数
constructor(name, voice) {
this.name = name;
this.voice = voice;
}
// 方法将被添加到原型中
getName() {
return this.name;
}
}
10. 继承
es6继承需要使用关键字 extends；
此外，还需要调用一个 super方法，super关键字用于访问和调用一个对象的父对象上的函数。在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前使用。
class Animal {
constructor(name, voice) {
this.name = name;
this.voice = voice;
}
getName() {
return this.name;
}
}
// Cat类继承Animal类
class Cat extends Animal {
constructor(name, voice, eatFish) {
super(name, voice);
this.eatFish = eatFish;
}
}
待更新...
