es2015（es6）基础知识整理（更新中...）

1.let

 let可以声明块级作用域变量

1 'use strict';
2 
3 if (true) {
4     let app = 'apple';
5 }
6 
7 console.log(app);　　//外面是访问不到app的

 

2.const

 const可以声明常量

1 'use strict';
2 
3 const app = 'apple';
4 console.log(app);
5 
6 const app = 'peach';
7 console.log(app);　　//报错，常量不能多次赋值

 

3.Destructuring 解构

 解构赋值允许使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。

'use strict';

function breakfast () {
    return ['egg','bread','milk'];
}

//传统方法
var arr = breakfast(), egg = arr[0], bread = arr[1], milk = arr[2];
console.log(egg,bread,milk);

//es6
let [t1,t2,t3] = breakfast();
console.log(t1,t2,t3);

 

4.对象解构

'use strict';

function breakfast () {
    return {egg:'egg', milk:'milk', bread:'bread'};
}

let {egg: a1, milk: a2, bread: a3} = breakfast();    //a1,a2,a3是自己定义的名字
console.log(a1,a2,a3);

 

5.字符模板

'use strict';

let food1 = 'egg', food2 = 'bread';

let str = `今天的早餐是 ${food1} 和 
　　　　　　${food2}`;　　//通过反斜线引号可以对字符串换行

console.log(str);

 

6.字符串相关函数

'use strict';

let food1 = 'egg', food2 = 'bread';

let str = `今天的早餐是 ${food1} 和 
          ${food2}`;　

console.log(str.startsWith('今天'),str.endsWith('bread'),str.includes('早餐'));　　//true true true

 

7.函数默认值

1 'use strict';
2 
3 function breadfast (food = '食物', drink = '饮料') {
4     console.log(`${food} ${drink}`);
5 }
6 
7 breadfast();        //输出默认值
8 breadfast('面包', '啤酒');        //输出给定值

 

8.  ...操作符

1 'use strict';
2 
3 function breakfast (food, drink, ...others) {        //...表示后面除了前面两个参数，其余参数都放在others这个数组里
4     console.log(food, drink, others);
5     console.log(food, drink, ...others);    //将others数组里面的值展开
6 }
7 
8 breakfast('面包', '牛奶', '培根', '香肠');

 

9.Arrow Function(箭头函数)

 1 'use strict';
 2 
 3 //breakfast是函数名字，箭头前面是传入的参数，箭头后面是返回值
 4 let breakfast = (food,drink) => food + drink;
 5 
 6 console.log(breakfast('面包', '牛奶'));
 7 
 8 //箭头后面的大括号可以写函数的具体操作
 9 let lunch = (food, drink) => {
10     return '今天午餐吃' + food + '，喝' +drink;
11 };
12 
13 console.log(lunch('鸡肉', '汤'));

 

10.定义对象

 1 'use strict';
 2 
 3 let food = '鸡肉', drink = '汤';
 4 
 5 let breakfast = {
 6     food: food,        //添加属性
 7     drink: drink,
 8     eat(){}            //添加方法
 9 };
10 
11 console.log(breakfast);
12 
13 //添加属性的其他方法
14 let food1 = 'food1';
15 
16 breakfast.afood = '面条';
17 breakfast['hot drink'] = '牛奶';
18 breakfast[food1] = '蔬菜';    //这里的food1是变量food1的值
19 
20 console.log(breakfast);

 

11.setPrototypeOf(改变原型)

 1 'use strict';
 2 
 3 let lunch = {
 4     getDrink(){
 5         return '啤酒';
 6     }
 7 };
 8 
 9 let dinner = {
10     getDrink(){
11         return '可乐';
12     }
13 };
14 
15 let food1 = Object.create(lunch);
16 console.log(food1.getDrink());                            //啤酒
17 console.log(Object.getPrototypeOf(food1) === lunch);    //true
18 
19 Object.setPrototypeOf(food1, dinner);
20 console.log(food1.getDrink());                            //可乐
21 console.log(Object.getPrototypeOf(food1) === dinner);    //true

 

12.__proto__

 1 'use strict';
 2 
 3 let lunch = {
 4     getDrink(){
 5         return '啤酒';
 6     }
 7 };
 8 
 9 let dinner = {
10     getDrink(){
11         return '可乐';
12     }
13 };
14 
15 //__proto__
16 let food2 = {
17     __proto__: lunch        //通过__proto__来指定food2的prototype
18 };
19 
20 console.log(food2.getDrink());
21 console.log(Object.getPrototypeOf(food2) === lunch);    //true
22 
23 food2.__proto__ = dinner;
24 console.log(food2.getDrink());
25 console.log(Object.getPrototypeOf(food2) === dinner);    //true

 

13.super

 1 'use strict';
 2 
 3 let lunch = {
 4     getDrink(){
 5         return '啤酒';
 6     }
 7 };
 8 
 9 let dinner = {
10     getDrink(){
11         return '可乐';
12     }
13 };
14 
15 //super
16 let food3 = {
17     __proto__: lunch,
18     getDrink(){
19         return super.getDrink() + '和汤';    //super.getDrink()是调用原型的getDrink方法
20     }
21 };
22 
23 console.log(food3.getDrink());

 

14.iterator迭代器

 每次迭代后都会返回一个对象{value:xx,done:true/false}，value表示返回的值，done表示当前还有没有东西可以迭代，没有返回true，否则返回false

 1 'use strict';
 2 
 3 function chef(foods){
 4     let i = 0;
 5 
 6     return {
 7         next(){
 8             let done = (i >= foods.length);
 9             let value = !done ? foods[i++] : undefined;
10 
11             return {
12                 value: value,
13                 done: done
14             }
15         }
16     }
17 }
18 
19 let meal = chef(['黄瓜', '鸡蛋']);
20 console.log(meal.next());        //Object {value: "黄瓜", done: false}
21 console.log(meal.next());        //Object {value: "鸡蛋", done: false}
22 console.log(meal.next());        //Object {value: undefined, done: true}

 

15.es6中的class

 1 'use strict';
 2 
 3 class Chef {
 4     constructor(food){        //创建一个Chef类实例时会自动执行constructor方法
 5         this.food = food;
 6     }
 7 
 8     cook(){
 9         console.log(this.food);
10     }
11 }
12 
13 let chef1 = new Chef('鸡蛋');
14 chef1.cook();

 

16.Set

 1 'use strict';
 2 
 3 //Set类似于数组
 4 let food = new Set('鸡蛋');
 5 console.log(food);
 6 
 7 food.add('菜');        //添加新的项
 8 food.add('豆');
 9 
10 console.log(food);
11 
12 console.log(food.size);            //food的长度
13 console.log(food.has('菜'));    //判断是否含有某一项
14 food.delete('豆');                //删除某一项
15 console.log(food);
16 
17 food.forEach(food => {            //批量对food中的项进行操作
18     console.log(food);
19 });
20 
21 food.clear();                    //清空food
22 console.log(food);

 

转载于:https://www.cnblogs.com/NickyLi/p/6687063.html