ES6特性以及代码demo

块级作用域let

if(true){

let fruit = ‘apple’;

}

consoloe.log(fruit);//会报错，因为let只在if{ }的作用域有效，也就是块级作用域

恒量const

const fruit = ‘apple’;//其实就是fruit这个变量已经指定了apple这个位置，二次赋值其实就是改变他的引用，所以会报错，

console.log(fruit);

const fruit = ‘lemo’;

console.log(fruit);//会报错，const定义的变量不能二次定义，而且const也是块级作用域，不会变量提升

const arr = [ ];

arr.push(‘apple’);

arr.push(‘lemo’);

arr = [ ];//会报错

解构数组

function breakfast(){

return [‘cake’,’coffee’,’apple’];

}

let [dessert,drink,fruit] = breakfast();//会将dessert = ‘cake’,drink = ‘coffee’,fruit = ‘apple’,这就是数组解构，会将对应下标的值赋值

console.log(dessert,drink,fruit);

解构对象

function breakfast(){

return  { dessert:’cake’,drink:’coffee’,fruit:’apple’ };

}

//解析对象主要也是用于赋值，对象之间的赋值

let { dessert1:dessert, drink1:drink, fruit1:fruit } = breakfast();

console.log(dessert, drink, fruit );

模板字符串

let dessert = ‘cake’, drink = ‘coffee’;

let breakfast = “今天的早餐是” + drink + “和” + cake;

console.log(breakfast);

//字符串模板使用变量要用${ 变量名 }来表示，常用语HTML的输出，这样` content `，content的内容的格式都不会变化

let breakfast_1 = `今天的早餐是${cake}和${coofee}`;

console.log(breakfast_1);

带标签的模板字符串

let dessert = ‘cake’,drink = ‘coffee’;

let breakfast = kitchen`今天的早餐是${ dessert }和${ drink }`;

function kitchen(strings,…values){//kitchen是标签，再以标签名做函数名，里面的内容就可以作为参数传递过来了

//console.log(strings);

//console.log(values);

//strings里存放的是breakfast里面的字符串，values存放的是变量，strings和values都是数组

let result = ‘’;

for(let i = 0;I < values.length;i++){

result += strings[i];

result += values[i];

}

result += strings[strings.length -1];

return result;//result返回的就是kitchen的那一段话

}

判断字符串里是否包含其他字符串

let str = “今天吃的是apple”;

str.startWith(‘今天’);//返回true，判断str是否是以今天开头

str.endsWith(‘le’);//true,判断str是否是以le结尾

str.includes(‘apple’);//true，判断str是否含有apple这个字符串

默认参数

function breakfast(dessert = “cake”,drink = “coffee”){//设置默认参数

return `${dessert} ${drink}`;

}

console.log( breakfast() );//cake coffee

展开操作符-Spread（…）

let fruits = [‘apple’,’lemo’], foods = [‘cake’,…fruits];

console.log(fruits);  //返回的是数组[‘apple’,’lemo’]

console.log(…fruits);  //返回的两个字符串apple 和 lemo

console.log(foods);  //[‘cake’,’apple’,’lemo’];

剩余操作符(还是…)

function breakfast(dessert,…foods){//多出来的参数都会放在foods里面

console.log(dessert,foods);

}

breakfast(‘cake’,lemo’,’coffee’);//打印的是cake,[‘lemo’,’coffee’]，因为lemo和coffee都放在了foods这个数组里

解构参数

function breakfast(dessert,drink,{location,restaurant} = { } ){//其实就是利用解构对象来做参数传递

console.log(dessert,drink,location,restaurant);

}

breakfast(‘cake’,’coffee’,{ location:”wuhan”,restaurant:”baijingyuan” } );

函数的名字-name属性

function foo1(){ }

let foo2 = function(){ }

let foo3 = function foo4(){ }

console.log(foo1.name,foo2.name,foo3.name);//foo1,foo2,foo4

箭头函数

// 函数名             参数              方法实现

let breakfast = (dessert) => { return dessert; };

翻译成普通函数：

var breakfast = function breakfast(dessert){

return dessert;

}

对象表达式

let dessert = ‘cake’ , drink = ‘coffee’;

//全写

let food = {

dessert:dessert,

drink:drink,

breakfast:function(){ }

}

//简写

let food = {

dessert,

drink,

breakfast(){ }

}

对比两个值是否相等Object.is(var1,var2)

把对象的值复制到另一个对象Object.assign()

let breakfast = { };

Object.assign( breakfast,{ dessert:’cake’,drink:’coffee’ } );

console.log(breakfast);//dessert:’cake’,drink:’coffee’

设置对象的prototype

//Object.getPrototypeOf()

//Objeect.setPrototypeOf()

let breakfast={

getDrink(){

return ‘coffee’;

}

};

let dinner = {

getDrink(){

return ‘beer’;

}

};

let drink = Object.create(breakfast);

drink.getDrink();//coffee

console.log( Object.getPrototypeOf(drink) === breakfast);//true

Object.setPrototypeOf(drink,dinner);

drink.getDrink();//beer

console.log(Object.getPrototyprOf(drink) === dinner);//true

__proto__

let breakfast={

getDrink(){

return ‘coffee’;

}

};

let dinner = {

getDrink(){

return ‘beer’;

}

};

let drink ={

__proto__:breakfast,

}

drink.getDrink();//coffee

console.log( Object.getPrototypeOf(drink) === breakfast);//true

drink.__proto__ = dinner;

drink.getDrink();//beer

console.log(Object.getPrototyprOf(drink) === dinner);//true

super

let breakfast={

getDrink(){

return ‘coffee’;

}

};

let dinner = {

getDrink(){

return ‘beer’;

}

};

let drink = {

__proto__:breakfast,

getDrink(){

return super.getDrink() + ‘,milk’;

}

}

drink.getDrink();//coffee,milk

迭代器

生成器Generators

function* chef(){

yield ‘apple’; //yield就是需要迭代的变量

yield ‘lemo’;

}

function* foods(foodArr){

for(let i = 0;I < foodArr.length;i++){

yield foodArr[i];

}

}

let wanghao = chef();

console.log(wanghao.next());//apple

console.log(wanghao.next() );//lemo

console.log(wanghao.next() );//undefined

class

class Chef {

constructor(food){

//当使用new去生成一个对象的时候会自动调用该方法

//我们也可以使用该方法对这个类进一些初始化

this.food = food;

}//注意此处没有逗号

cook(){

console.log(this.food);

}

}

let wanghao = new Chef(‘apple’);

wanghao.cook();

get与set

class Chef {

constructor(food){

this.food = food;

this.dish = [ ];

}

get menu(){

return this.dish;

}

set menu(dish){

this.dish.push(dish);

}

cook(){

console.log(this.food);

}

}

let wanghao = new Chef();

wanghao.menu = ‘apple’;

wanghao.menu = ‘lemo’;//会自动调用set方法

console.log(wanghao.menu);//会自动调用get方法

静态方法static

//不需要实例化类就可以使用的方法

class Chef {

constructor(food){

this.food = food;

this.dish = [ ];

}

get menu(){

return this.dish;

}

set menu(dish){

this.dish.push(dish);

}

cook(){

console.log(this.food);

}

static cook(food){

console.log(food);

}

}

Chef.cook(‘apple’);//不需要class的实例化对象，直接用类名就可以调用static方法

继承extends

class Person {

constructor(name,birthday){

this.name = name;

this.birthday = birthday;

}

intro(){

return `${ this.name },${ this.birthday }`;

}

}

class Chef extends Person {

constructor(name,birthday){

super (name,birthday);

}

}

let wanghao = new Chef(‘王浩’,’1995-07-11’) );

wanghao.intro();//王浩，1995-07-11

Set

let dessert = new Set(‘apple’,’lemo’);//此时dessert = { ‘apple’,’’lemo’ }

dessert.add(‘ice’);//此时dessert = {'apple’,’lemo’,’ice’ }

dessert.add(‘ice’);//Set里面的元素不允许有重复的，所以此时的dessert = { ‘apple’,’lemo’,’ice’}

console.log(dessert.size);// 3,size是deseert的长度

console.log(dessert.has(‘apple’);//true，has(str)是判断是否有这个元素

console.log(dessert.delete(‘apple’);//delete(str)是删除元素str这个元素

dessert.forEach(dessert => {

console.log(dessert);

});//forEach()是循环里面的元素

dessert.clear();//清空里面的元素

Map

let food = new Map();

let fruit = { }.cook =function(){ },dessert = ‘甜点’;

food.set(fruit,’lemo’);// Map{ Object {} => ‘lemo’

food.set(dessert,’pie’);//‘甜点’ = ‘pie’

food.size;//2

food.get(fruit);//lemo

food.delete(dessert);

food.has(dessert);//false

food.forEach((value,key) =>{

console.log(`${ value },${ key}`);

});

food.clear();

Moudle(模块)

// Person.js

let name = ‘王浩’,year = 24;

export { name, year as old };//重命名year为old

//Chef.js

import { name,old as age } from ‘./Person.js’;//文件所在的相对路径，重命名old为age

//或者 import * as person from ‘./Person.js’;peroson.js里面所有的导出都会放chef对象中

console.log(name,age);

重命名导出与导入

导出与导入默认