ECMAScript新功能介绍（es6 es2015）

时间：2021-10-11 15:37:22

1.变量的作用域

//1.作用域  变量的作用域  全局 函数  块 作用域
// let 声明 的变量只能在定义的那个块中。
{
    let fruit = '苹果';
    var apple = 'apple';
}
console.log(apple);
// console.log(fruit);
2.const.恒量 

//2 const.恒量  声明的是常量 不能被修改const  fruits = '苹果';console.log(fruits);//Identifier 'fruits' has already been declaredconst  fruits = '橘子';console.log(fruits);const fruitss = [];fruitss.push('苹果');fruitss.push('橘子');fruits = []//attempt to assign  to const variable
3.解构数组- Array  Destructuring 
//3.解构数组- Array  Destructuringfunction breakfast() {    return['cake','tea','apple'];}//可以把数组中的值，传递给对应的变量 cake tea applelet [dessert,drink,fruit] = breakfast();console.log(dessert,drink,fruit);

4.解构对象 -Object Destructuring

//解构对象 -Object Destructuringfunction breakfast() {    return{dessert:'cake',drink:'tea',fruit:'apple'};}//cake tea apple，解构对象 前面是 原来对象的属性，后面是接收的属性let {dessert:desserts,drink:drinks,fruit:fruits}     = breakfast();console.log(desserts,drinks,fruits);
5.模板字符串-Template Strings 
//模板字符串-Template Strings ,使用$符号let dessert = 'cake',drink = 'tea';let breakfast = `今天的早餐是${dessert}与${drink} !`;console.log(breakfast);//今天的早餐是cake与tea !

6.带标签的模板字符串 -Tagged Templates 

// 带标签的模板字符串 -Tagged Templateslet dessert = 'cake',drink = 'tea';let breakfast =  kitchen`今天的早餐是${dessert}与${drink} !`;function  kitchen(strings,...values) {    let result = '';    for(var i = 0;i<values.length;i++){        result += strings[i];        console.log(result);        result += values[i];        console.log(result);    }    result += strings[strings.length -1];    return result ;}// ecmascript.js:52 今天的早餐是// ecmascript.js:55 今天的早餐是cake// ecmascript.js:52 今天的早餐是cake与// ecmascript.js:55 今天的早餐是cake与tea// ecmascript.js:61 今天的早餐是cake与tea !console.log(breakfast);

7.判断字符串中是否包含其他字符串

//判断字符串中是否包含其他字符串let state = breakfast.startsWith("今天"); //开头是let state = breakfast.endsWith("今天"); //结尾是let state = breakfast.includes("今天"); //包含
8.参数默认值 -Default Parameter Value 

function breakfast ( dessert = 'cake',drink = 'tea'){    return `${dessert} ${drink}`;}console.log(breakfast('aaa','bbb'));

9.展开操作符... Spread 
//展开操作符... Spreadlet  fruits = ['fruits','banana'],foods =['cake',...fruits];console.log(foods);//['cake','fruits','banana'];
10.剩余操作符 ... Rest 

//剩余操作符 ... Restfunction breakfast ( dessert ,drink ,...foods){    console.log(dessert,drink,...foods);}breakfast('cake','orange juice','apple','pear')
11.解构参数 -Destructed Parameters 

//解构参数 -Destructed Parametersfunction breakfast( dessert,drink,{location,restaurant}={}) {    console.log(dessert,drink,location,restaurant);}breakfast('cake','orange juice',{location:'济南',restaurant:'董小姐'})
12函数的名字 - name属性 

//函数的名字 - name属性let breakfast = function superBreakfast (argument) {}console.log(breakfast.name);//superBreakfast
13.箭头函数 -Arrow Functions 

//箭头函数 -Arrow Functionslet breakfast = dessert => dessert; //breakfast ：函数名，dessert ：接收参数名字 ,=> ：返回值//相当于以下写法var breakfast = function breakfast(dessert) {    return dessert;}let breakfast = (dessert,drink) => { return dessert+drink;};var breakfast = function breakfast(dessert,drink) {    return dessert+drink;}
14.对象表达式 

//对象表达式let  dessert = 'cake',drink = 'tea';let food = {    dessert,    drink,    breakfast(){},};
15.对象属性名 

//对象属性名let food ={};let drink = 'hot  drink';food.dessert = 'cake';//如果属性包含空格 不能使用对象.属性，需要用方括号food['hot drink'] = 'tea';food[drink] = 'tea';//两种写法一样
16.对比两个值是否相等 -Object.is() 

//对比两个值是否相等 -Object.is();+0 == -0; //true+0 === -0;//trueNaN == NaN;//falseObject.is(NaN,NaN);//trueObject.is(+0,-0);//false
17.把对象的值复制到另一个对象中 Object.assign() 
//把对象的值复制到另一个对象中 Object.assign();let breakfast = {};Object.assign(breakfast,{drink:'peer'});//breakfast 里面的东西 就是{drink:'peer'}
18.设置对象的prototype -Object.setPrototypeOf() 

设置对象的prototype -Object.setPrototypeOf();let breakfast = {getDrink(){    return 'tea';}};let dinner = {    getDrink(){        return 'peer';    }};let  sunday = Object.create(breakfast);console.log(sunday.getDrink());//teaconsole.log(Object.getPrototypeOf(sunday) === breakfast); //trueObject.setPrototypeOf(sunday,dinner);console.log(sunday.getDrink());//peerconsole.log(Object.getPrototypeOf(sunday) === dinner); //true

19._proto_ 

let sunday = {    __proto__:breakfast};console.log(sunday.getDrink());//teaconsole.log(Object.getPrototypeOf(sunday) === breakfast); //truesunday.__proto__ = dinner;console.log(sunday.getDrink());//peerconsole.log(Object.getPrototypeOf(sunday) === dinner); //true
20.super 

let sunday = {__proto__:breakfast,getDrink(){    return super.getDrink()+'milk';}};


21.迭代器 Iterators  next 返回 value

function chef(foods) {    let i = 0;    return{        next(){            let done = (i>= foods.length);            let value = !done ? foods[i++]:undefined;          return{              value:value,              done: done          }        }    }}let wanghao = chef(['tomato','egg']);console.log(wanghao.next());//tomato  done falseconsole.log(wanghao.next());//egg  done falseconsole.log(wanghao.next());//value :undefined  done :true
22.生成器Generators 

function* chef(){    yield 'tomato';    yield 'egg';}let wanghao = chef();console.log(wanghao.next());//tomato  done falseconsole.log(wanghao.next());//egg  done falseconsole.log(wanghao.next());//value :undefined  done :truelet chef = function* chef(foods){   for(var i =0;i<foods.length;i++){       yield foods[i];   }}
23.class 类 创建对象 

//class 类 创建对象class Chef{    constructor(food){       this.food = food;    }    cook(){        console.log(this.food);    }}let wanghao = new Chef();wanghao.cook();

24.set 与 get 

set 与 getclass Chef{    constructor(food){        this.food = food;        this.dish =[];    }    get menu(){                return this.dish;    }    set menu(dish){        this.dish.push(dish)    }    static  cook(food){        console.log(food);    }}let wanghao = new Chef();wanghao.menu = 'shrimp';//setwanghao.menu = 'cake';//setwanghao.menu;//get wanghao.cook();
25.静态方法 static直接调用 

Chef.cook('tomato');
26 继承 extends 

//继承 extendsclass 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('wanghao','1984-01-01');wanghao.intro();
27.集合 Set 类似Array  set 中不能有重复的内容,添加重复的东西加不进去 

//集合 Set 类似Array  set 中不能有重复的内容,添加重复的东西加不进去let desserts = new Set('cake tea');console.log(desserts);desserts.add();//添加   desserts.size//判断sizedesserts.has('')//是否有某些元素desserts.delete('')//删除元素 desserts.forEach( dessert =>{    console.log(dessert);    }    );//遍历元素desserts.clear();//清空Set
28.Map 

//Maplet food = new Map();//创建 Maplet fruit = {},cook = function () {},dessert = '甜点';food.set(fruit,'apple');food.set(cook,'fork');food.set(dessert,'cake');food.set();//大小food.get(fruit);//applefood.get(cook);//forkfood.delete(fruit)//删除元素food.has(fruit);food.forEach((vaule,key)=>{    console.log(`${key} = ${value}`)})food.clear();//清空Map
29.Module 模块
//创建模块 导出模块 导入模块
// 重命名导出与导入的东西
// 默认导出的东西 

import {fruit,dessert,supper as dinner} from './chef';//导入全部import * as chef from './chef';//chef 是自己命的一个名console.log(fruit,dessert);console.log(chef.fruit,chef.dessert);dinner(fruit,dessert);//模块默认导出export default function dinner(fruit,dessert) {    console.log(`今天的晚餐是：${fruit} 与${dessert}`);}//导入import  chef from './chef';chef('apple','Hamburger');

export let fruit = 'apple';export let dessert = 'cake';export {fruit,dessert}//导出模块function dinner(fruit,dessert) {    console.log(`今天的晚餐是：${fruit} 与${dessert}`);}export {fruit,dessert,dinner as supper};

标签：

相关文章