【JavaScript】1.ECMAScript6新特性

最新推荐文章于 2024-11-30 11:07:18 发布

Anabel Chen

最新推荐文章于 2024-11-30 11:07:18 发布

阅读量582

点赞数

CC 4.0 BY-SA版权

分类专栏：【JavaScript】文章标签： ECMAScript6

本文链接：https://blog.youkuaiyun.com/benben513624/article/details/70596637

【JavaScript】专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了ES6中新增的特性，包括块级作用域、常量定义、解构赋值、字符模板、函数参数默认值、扩展运算符、对象简写及属性设置、迭代器与生成器、类定义、集合操作、模块定义等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.ES6引入块级作用域，用let定义的变量，在块以外不能访问

<script>
    if(true){
        let fruit="苹果";
    }
    console.log(fruit);
    </script>

2.const定义恒量，不能再重新赋值，否则就会报错

    <script>
//    const fruit="苹果";
//    const fruit="香蕉";
//    console.log(fruit);
      const fruit=['苹果','香蕉'];
      const fruit=[];
      console.log(fruit);
    </script>

3.结构

（1）数组，把breakfast函数返回的数组值，一一对应的赋值到let定义的数组变量上

    <script>
    function breakfast(){
        return ['蛋糕','牛奶','苹果'];
    }
    let [desert,drink,fruit]=breakfast();
    console.log(desert);
    console.log(drink);
    console.log(fruit);
    </script>

（2）对象，把breakfast函数返回的对象值，一一对应的赋值到let定义的对象变量上

    <script>
    function breakfast(){
        return {desert:'蛋糕',drink:'牛奶',fruit:'苹果'};
    }
    let {desert:desert,drink:drink,fruit:fruit}=breakfast();
    console.log(desert);
    console.log(drink);
    console.log(fruit);
    </script>

4.字符模板，变量用${}，整个字符串用反引号（``）

    <script>
   let desert='蛋糕',
           drink='牛奶';
   let breakfast=`今天的早餐是${desert}与${drink}!`;
    console.log(breakfast);
    </script>

5.打印输出字符串

    <script>
   let desert='蛋糕',
           drink='牛奶';
   let breakfast=kitchen`今天的早餐是\n${desert}与${drink}!`;
   function kitchen(strings,...values){
       console.log(strings);
       console.log(values);
       let result='';
       for(var i=0;i<values.length;i++){
           result+=strings[i];
           result+=values[i];
       }
       result+=strings[strings.length-1];
       return result;
   }
   console.log(breakfast);
    </script>

6.判断字符串的一些方法，startsWith()字符串以什么开始，endsWith()字符串以什么结尾，includes()字符串里包含什么

    <script>
   let desert='蛋糕',
           drink='牛奶';
   let breakfast=`今天的早餐是\n${desert}与${drink}!`;

   console.log(breakfast.startsWith('今天'));
   console.log(breakfast.endsWith('!'));
   console.log(breakfast.includes('牛奶'));
   console.log(breakfast.includes('苹果'));
    </script>

7.函数

（1）为函数参数设置默认值，如果函数在调用的过程中，没有传入参数，或者是没有给参数设置值，就输出参数默认值。

    <script>
   function breakfast(desert='蛋糕',drink='牛奶'){
       return `${desert}${drink}`;
   }
   console.log(breakfast());
   console.log(breakfast('甜甜圈','可乐'));    
    </script>

（2）...操作符，可以理解为展开数组变量

    <script>
   let fruit=['苹果','香蕉'];
   let foods=['蛋糕',...fruit];
   console.log(fruit);
   console.log(...fruit);
   console.log(foods);
    </script>

（3）函数支持更多的参数传入，也会用到...操作符，如下代码的意思就是函数除了可以传入desert,drink两个参数以外，其余要传的参数都会放到foods里面

    <script>
   function breakfast(desert,drink,...foods){
       console.log(desert,drink,...foods);
   }
   breakfast('蛋糕','果汁','苹果','香蕉');
    </script>

（4）函数参数为结构对象，对象可以为空

    <script>
   function breakfast(desert,drink,{location,restaurant}={}){
       console.log(desert,drink,location,restaurant);
   }
   breakfast('蛋糕','果汁',{location:'张江',restaurant:'光头烧烤'});
    </script>

（5）函数的name属性，如果是表达式声明，函数的name就为变量名，如果函数声明后面有函数名，就显示该函数名，因为优先级比较高

    <script>
   let  breakfast=function(){
        return 0;
   }
   console.log(breakfast.name);
    </script>

    <script>
   let  breakfast=function superBreakfast(){
        return 0;
   }
   console.log(breakfast.name);
    </script>

（6）箭头函数，箭头左边是函数参数，箭头右边是返回值

    <script>
   let breakfast=(desert,drink) => {
            return desert+drink;
        };
    </script>

8.对象

（1）对象定义

    <script>
   let desert='蛋糕',
           drink='果汁';
        let food={
            desert,
            drink,
            breakfast(){

            }
        }
   console.log(food);
    </script>

（2）用[]给对象添加带空格的属性，因为存在非法字符所以不能用对象名+“.”的形式

    <script>
        let foods={};
        foods.desert='蛋糕';
        foods['hot drink']='咖啡';
   console.log(foods);</script>

（3）一般情况下判断两个值是不是相等，用的是“==”或“===”，判断是不是同一个物体就要用到Object.is()方法

    <script>
   console.log(NaN===NaN);
   console.log(Object.is(NaN,NaN));
    </script>

（4）把一个对象的属性值赋给另外一个对象，用Object.assign();第一个参数是要赋值的目标对象，第二个参数是要赋的值，可以传多个值，如果有重复的就会被重写

    <script>
   let breakfast={};
        Object.assign(
                breakfast,
                {drink:'牛奶'},
                {drink:'咖啡'},
                {fruit:'苹果'}
        );
   console.log(breakfast);
    </script>

（5）Object.setPrototypeOf()设置原型

    <script>
   let breakfast={
        getDrink(){
            return '牛奶';
        }
   };
   let dinner={
       getDrink(){
           return '咖啡';
       }
   };
   let sunday=Object.create(breakfast)
   console.log(sunday.getDrink());
   console.log(Object.getPrototypeOf(sunday)===breakfast);

   Object.setPrototypeOf(sunday,dinner);
   console.log(sunday.getDrink());
   console.log(Object.getPrototypeOf(sunday)===dinner);
    </script>

（6）--proto-- 可以直接在对象里面设置

    <script>
   let breakfast={
        getDrink(){
            return '牛奶';
        }
   };
   let dinner={
       getDrink(){
           return '咖啡';
       }
   };
   let sunday= {
       __proto__: breakfast
   }
   console.log(sunday.getDrink());
   console.log(Object.getPrototypeOf(sunday)===breakfast);
    </script>

（7）super：调用父类方法

    <script>
   let breakfast={
        getDrink(){
            return '牛奶';
        }
   };
   let dinner={
       getDrink(){
           return '咖啡';
       }
   };
   let sunday= {
       __proto__: breakfast,
       getDrink(){
           return super.getDrink()+"+"+'茶';
       }
   }
   console.log(sunday.getDrink());
   console.log(Object.getPrototypeOf(sunday)===breakfast);
    </script>

（8）Iterators迭代器

（9）generators生成器

    <script>
    function* chef(){
        yield '苹果';
        yield '鸡蛋';
    }
        let wanghao=chef();
    console.log(wanghao.next());
    console.log(wanghao.next());
    console.log(wanghao.next());
    </script>

    <script>
    function* chef(foods){
        for(var i=0;i<foods.length;i++){
            yield foods[i];
        }
    }
        let wanghao=chef(['蛋糕','鸡蛋','西红柿']);
    console.log(wanghao.next());
    console.log(wanghao.next());
    console.log(wanghao.next());
    console.log(wanghao.next());
    </script>

（10）class定义类

    <script>
   class Chef{
       constructor(food){
           this.food=food;
       }
       cook(){
           return this.food;
       }
   }
   let wanghao=new Chef('西红柿');
    console.log(wanghao.cook());
    </script>

（11）get set方法

    <script>
   class Chef{
       constructor(food){
           this.food=food;
           this.dish=[];
       }
       get menu(){
           return this.dish;
       }
       set menu(dish){
           this.dish.push(dish);
       }
       cook(){
           return this.food;
       }
   }
   let wanghao=new Chef('西红柿');
    console.log(wanghao.menu='炸虾球');
    console.log(wanghao.menu='披萨');
   console.log(wanghao.menu);
    </script>

（12）static：在类里面添加静态方法

    <script>
   class Chef{
       static cook(food){
           return food;
       }
   }
   console.log(Chef.cook('西红柿'));
    </script>

（13）extend继承

    <script>
    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 chef=new Chef('wanghao','2016');
   console.log(chef.intro());
    </script>

9.集合

（1）set，set不允许有重复的项

   <script>
    let deserts=new Set();
    deserts.add('甜甜圈');
    deserts.add('甜甜圈');
    deserts.add('冰激凌');
    deserts.add('糖果');
    console.log(deserts);
    console.log(deserts.has('冰激凌'));
    deserts.delete('冰激凌');
    console.log(deserts);
    deserts.forEach(deserts=>{
        console.log(deserts);
    });
    deserts.clear();
    console.log(deserts);
    </script>

（2）Map，存储键值对值

    <script>
    let food=new Map();
    let fruit={};
    let cook=function(){};
    let desert='甜点';
    food.set(fruit,'柠檬');
    food.set(cook,'刀叉');
    food.set(desert,'甜甜圈');

    console.log(food);
    console.log(food.size);
    console.log(food.get(fruit));
    console.log(food.get(cook));
    food.delete(desert);
    console.log(food);
    food.forEach((value,key)=>{
        console.log(`${key}=${value}`);
    });
    food.clear();
    console.log(food);