前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6基础语法知识

ES6基础语法知识

作者头像
别盯着我的名字看
发布2022-06-09 11:15:15
2310
发布2022-06-09 11:15:15
举报
文章被收录于专栏:前端专栏前端专栏

为了更方便的学习es6,需要引用babel <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

1.解构赋值
代码语言:javascript
复制
function breakfast() {
    return ['蛋糕','奶茶','苹果'];
}
let [des,drink,fruit] = breakfast();
console.log(des,drink,fruit);//返回的是 蛋糕 奶茶 苹果   
2.解构对象
代码语言:javascript
复制
function breakfast1() {
    return {desser:'蛋糕',tea:'奶茶',fruit:'苹果'};
}
let {desser=desser,tea=tea,fruit=fruit} = breakfast1();
console.log(desser,tea,fruit);//返回的是 蛋糕 奶茶 苹果   
3.模板字符串
代码语言:javascript
复制
let dessert = '包子',
    drink = '豆浆';

let breakfast = `今天的早餐是${dessert}和${drink}`;
console.log(breakfast);   
4.带标签的模板字符串Tagged Templates
代码语言:javascript
复制
    let dessert = '包子',
        drink = '豆浆';

    let breakfast = kitchen`今天的早餐是 \n
        ${dessert}和${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)
5.判断字符串是否包含其他字符串
代码语言:javascript
复制
    let dessert = '包子',
        drink = '豆浆';
    let breakfast = `今天的早餐是 \n
            ${dessert}和${drink}!`;

    console.log( breakfast.startsWith("今天") );  //是否以什么开头
    console.log( breakfast.endsWith("!") );       //是否以什么结束
    console.log( breakfast.includes("早餐") );    //是否包含什么
6.默认参数 - Default Parameter Values
代码语言:javascript
复制
    function breakfast(dessert = 'cake',drink = 'tea') {
        return `${dessert}和${drink}`
    }
    console.log(breakfast())//返回的是  cake和tea
    console.log(breakfast('bread','milk')) //返回的是bread和milk
7.展开操作符-Spread …点点点
代码语言:javascript
复制
    let fruits = ['apple','banana'],
        foods = ['cake',...fruits];
    console.log(fruits)     //返回["apple", "banana"]
    console.log(...fruits)  //返回apple banana
    console.log(foods)      //返回["cake", "apple", "banana"]
    console.log(...foods)   //返回cake apple banana
8.剩余符号操作符Rest …
代码语言:javascript
复制
    function breakfast(dessert,drink,...foods) {
        console.log(dessert,drink,foods);
    }
    breakfast('cake','tea','apple','banana') //返回的是 cake tea ["apple", "banana"]

    function breakfast2(dessert,drink,...foods) {
        console.log(dessert,drink,...foods);
    }
    breakfast2('cake','tea','apple','banana') //返回的是 cake tea apple banana
9.解构参数 - Destructured Parameters
代码语言:javascript
复制
    function breakfast(dessert,drink,{location,restaurant} = {}) {
        console.log(dessert,drink,location,restaurant);
    }
    breakfast('cake','milk',{location:'青岛',restaurant:'罗先生'})
10.函数的名字-name属性
代码语言:javascript
复制
    let breakfast1 = function () {}
    console.log(breakfast1.name) //返回的是breakfast1
    let breakfast2 = function superMilk() { }
    console.log(breakfast2.name) //返回的是superMilk
11.箭头函数-Arrow Fuctions
代码语言:javascript
复制
    const breakfast1 = dessert => dessert;
//    翻译成es5:
//    function breakfast1(dessert) {
//        return dessert;
//    }

    let breakfast2 = (dessert,drink) => {
        return dessert + drink
    };
//    翻译成es5:
//    function breakfast2(dessert, drink) {
//        return dessert + drink;
//    }
12.对象表达式
代码语言:javascript
复制
    let dessert = 'cake',drink = 'tea';
    let food = {
        dessert,
        drink,
        breakfast(){}
    }
    console.log(food)
13.对象属性名,向里面添加数据用 . 和[’’]
代码语言:javascript
复制
    let food ={};

    food.dessert = 'cake';
    food['hot drink']= 'tea';
    console.log(food)
14.对比两个值是否相等-Object.is()
代码语言:javascript
复制
    Object.is(+0,-0); //判断正零和负零是否相等
15.把对象的值复制到另一个对象里 - Object.assign()
代码语言:javascript
复制
    let breakfast = {};
    let food = {drink:'tea',dessert:'cake'};
    Object.assign(
        breakfast,
        food
    );
    console.log(breakfast) //返回{drink:'tea',dessert:'cake'}
16.设置对象的 prototype - Object.setPrototypeOf() 可以创建对象后再改变对象
代码语言:javascript
复制
    let breakfast = {
        getDrink(){
            return 'tea';
        }
    };
    let dinner = {
        getDrink(){
            return 'milk'
        }
    };
    let sunday = Object.create(breakfast);
    console.log(sunday.getDrink());  //返回 tea
    console.log(Object.getPrototypeOf(sunday) === breakfast); //返回 true
17.proto 前后两个下划线
代码语言:javascript
复制
    let breakfast = {
        getDrink(){
            return 'tea';
        }
    };
    let dinner = {
        getDrink(){
            return 'milk'
        }
    };

    let sunday  = {
        __proto__: breakfast
    }
    console.log(sunday.getDrink()); //返回tea

    sunday.__proto__ = dinner;
    console.log(sunday.getDrink()); //返回milk
18.super
代码语言:javascript
复制
    let breakfast = {
        getDrink(){
            return 'tea';
        }
    };
    let dinner = {
        getDrink(){
            return 'milk';
        }
    };

    let sunday  = {
        __proto__: breakfast,
        getDrink(){
            return super.getDrink() + 'water'
        }
    };
    console.log(sunday.getDrink())
19.迭代器 - Iterators 轮流交换的意思
代码语言:javascript
复制
    function chef(foods) {
        let i = 0;
        return {
            next(){
                let done = (i< foods.length);
                console.log(i)
                let value = done ? foods[i++] : undefined;

                return{
                    value: value,
                    done: done
                }
            }
        }
    }

    let thunder = chef(['apple','ege']);
    console.log(thunder.next()) //返回{value: "apple", done: true}
    console.log(thunder.next()) //返回{value: "ege", done: true}
    console.log(thunder.next()) //返回{value: undefined, done: false}
20.生成器 - Generators
代码语言:javascript
复制
    function* chef() {
        yield 'apple';
        yield 'ega';
    }
    let thunder = chef();
    console.log(thunder.next());
    console.log(thunder.next());
21.Class - 类
代码语言:javascript
复制
    class Chef {
        constructor(food){
            this.food = food;
        }

        cook(){
            console.log(this)
            console.log(this.food); //返回的是 apple
        }
    }
    let thunder = new Chef('apple');
    thunder.cook()
22.get 得到 与 set 集
代码语言:javascript
复制
    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 thunder = new Chef();
    console.log(thunder.menu = "apple") //返回apple
    console.log(thunder.menu = "tea")   //返回tea
    console.log(thunder.menu)           //返回["apple", "tea"]
23.静态方法-staitc
代码语言:javascript
复制
    class 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); //返回的是  banana
        }
    }

    Chef.cook('banana');
24.继承-extends
代码语言:javascript
复制
    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 thunder = new Chef('thunder','1996-03-19');
    console.log(thunder.intro());
25.set 一堆东西的集合

null

26.Map

null

27.Module 模块

null

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-5-7,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.解构赋值
  • 2.解构对象
  • 3.模板字符串
  • 4.带标签的模板字符串Tagged Templates
  • 5.判断字符串是否包含其他字符串
  • 6.默认参数 - Default Parameter Values
  • 7.展开操作符-Spread …点点点
  • 8.剩余符号操作符Rest …
  • 9.解构参数 - Destructured Parameters
  • 10.函数的名字-name属性
  • 11.箭头函数-Arrow Fuctions
  • 12.对象表达式
  • 13.对象属性名,向里面添加数据用 . 和[’’]
  • 14.对比两个值是否相等-Object.is()
  • 15.把对象的值复制到另一个对象里 - Object.assign()
  • 16.设置对象的 prototype - Object.setPrototypeOf() 可以创建对象后再改变对象
  • 17.proto 前后两个下划线
  • 18.super
  • 19.迭代器 - Iterators 轮流交换的意思
  • 20.生成器 - Generators
  • 21.Class - 类
  • 22.get 得到 与 set 集
  • 23.静态方法-staitc
  • 24.继承-extends
  • 25.set 一堆东西的集合
  • 26.Map
  • 27.Module 模块
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档