• 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);

    重命名导出与导入

    导出与导入默认

  • 相关阅读:
    MVC+EF 理解和实现仓储模式和工作单元模式 MVC+EF 理解和实现仓储
    ANDROID中BROADCASTRECEIVER的两种注册方式(静态和动态)详解
    企业微信通讯录组件一个机制
    linq查询DataTable中的某列去重数据
    C# 判断文件流类型
    js中使用settimeout的问题
    一个做流程的开源库
    javascript判断两个日期是否相等
    开发小贴士
    zepto.js与jquery.js
  • 原文地址:https://www.cnblogs.com/171220-barney/p/8551917.html
Copyright © 2020-2023  润新知