zoukankan      html  css  js  c++  java
  • ES6(ECMAScript2015) 基础知识 浅析

    1.块级作用域(let

    {

            let fruit = “apple”;

    }

    console.log(fruit) 

    会报错,因为{ }大括号包含的区域为块级作用域,let在其中申明的变量只能在该块中生效

    2.恒量声明(const

        const fruit = "apple";

        fruit = "banana";

    console.log(fruit)  

    会报错,因为const声明的是恒量,不能被重新赋值,只能用方法改变,如const arr = [ ],可以使用arr.push()

    3.结构写法

    数组写法:

        function breakfast() {

            return ["cake", "tea", "apple"];

        }

        let [dessert, drink, fruit] = breakfast();

    console.log(dessert, drink, fruit) ------ cake tea apple

    对象写法:

        function breakfast() {

            return { dessert: "cake" , drink: "tea" , fruit: "apple"};

        }

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

    console.log(dessert, drink, fruit) ------ tea cake apple

    4.用法

    当做展开的用法:

        let fruits = ['apple', 'banana'],

            foods = ['cake', ...fruits];

            console.log(fruits) ------ ["apple", "banana"]

            console.log(...fruits) ------ apple banana

            console.log(foods) ------- ["cake", "apple", "banana"]

    函数参数数组包容:

        function breakfast(dessert, drink, ...foods) {

            console.log(dessert, drink, foods) ------ cake tea ["apple", "pear"]

        }

        breakfast("cake", "tea", "apple", "pear")

    5.字符模板

        let dessert="cake",drink="tea";

        let breakfast=`今天早餐是${dessert}${drink}!`使用反引号包裹

    console.log(breakfast) ------ 今天早餐是cake和tea!

    查看字符串以什么开头:

            console.log(breakfast.startsWith(‘今天’)) ------ true

    查看字符串以什么结尾:

            console.log(breakfast.endsWith(‘今天’)) ------ false

    查看字符串以是否包含什么:

            console.log(breakfast.includes(‘今天’)) ------ true

     

    标签字符串:kitchen是设置的任意标签名

    var dessert = "cake",drink = "tea";

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

        function kitchen(string, ...values) {

            console.log(string); ------ ["今天早餐是", "和", "!", raw: Array[3]]

            console.log(values); ------ ["cake", "tea"]

    }

    6.函数设置

    设置函数参数的默认值:

        function breakfast(drink = "tea", fruit = "apple") {

            return `${drink} ${fruit}`;

        }

        console.log(breakfast()) ------ tea apple

        console.log(breakfast("coffee", "banana")) ------ coffee banana

    结构对象:

        function breakfast(dessert, drink, {location,name}={}) { 设置默认值防止报错

            console.log(dessert, drink, location,name) ------ cake tea 兰州 董小姐

        }

    breakfast("cake", "tea", {location:"兰州",name:"董小姐"})

    name属性:

        let func=function breakfast() { }

    console.log(func.name) ------ breakfast

    Arrow Functions 箭头函数:

        let breakfast = (dessert, drink) => {

            console.log(dessert + drink) ------ caketea

            return dessert

        }

        console.log(breakfast('cake', 'tea')) ------ cake

        let lunch = (dessert, drink) => dessert

    console.log(lunch('cake', 'tea')) ------- cake

    创建对象属性中的函数

        let dessert = 'cake' , drink = 'tea';

        let food = {

            dessert,

            drink,

            breakfast() { }  类似于breakfast: function() { }

        }

        console.log(food) ------ Object {breakfast: () , dessert: "cake" , drink: "tea"}

    console.log(food.breakfast) ------ breakfast() {}

    迭代next()

        function* chef(foods) {  function后面加上*

            for (var i = 0; i < foods.length; i++) {

                yield foods[i];

            }

        }

        let dinner = chef(["egg" , "apple"])

        console.log(dinner.next()) ------ Object {value: "egg", done: false}

        console.log(dinner.next()) ------ Object {value: "apple", done: false}

        console.log(dinner.next()) ------ Object {value: undefined, done: true}

    7.对象设置

    设置具有空格的属性名:

    let food={};

    // food.hot drink="tea";   直接设置会报错

    food['hot drink']="tea";

    console.log(food) ------ Object {hot drink: "tea"}

    判断相等:

    console.log(+0 === -0) ------ true

        console.log(Object.is(+0, -0)) ------ false

        console.log(NaN === NaN) ------ false

    console.log(Object.is(NaN, NaN)) ------ true

    属性赋值:

        let breakfast = {}

        Object.assign(

            breakfast,

            {drink: 'beer'},

            {fruit: 'apple'},

            {fruit: 'pear'}  此处会替换上面设置的apple

        )

    console.log(breakfast) ------ Object {drink: "beer", fruit: "pear"}

    判断设置对象的prototype

        let breakfast = {

            getDrink() { return "beer" }

        }

        let lunch = {

            getDrink() { return "tea" }

        }

        let sunday = Object.create(breakfast);

        console.log(sunday.getDrink()); ------ beer

        console.log(Object.getPrototypeOf(sunday) === breakfast) ------ true

        Object.setPrototypeOf(Sunday , lunch);

        console.log(sunday.getDrink()); ------ tea

    console.log(Object.getPrototypeOf(sunday) === lunch) ------ true

    设置对象的__proro__

        let breakfast = {

            getDrink() { return "beer" }

        }

        let lunch = {

            getDrink() { return "tea" }

        }

        let sunday = { __proto__:breakfast }

        console.log(sunday.getDrink()); ------ beer

        console.log(Object.getPrototypeOf(sunday) === breakfast) ------ true

    sunday.__proto__=lunch;

        console.log(sunday.getDrink()); ------ tea

    console.log(Object.getPrototypeOf(sunday) === lunch) ------ true

        sunday = {

            __proto__: breakfast,

            getDrink() {

                return super.getDrink() + "tea";  super可以执行之前设置的方法

            }

        }

    console.log(sunday.getDrink()); ------ beertea

    8.class

    创建一个类:

        class chef {

            constructor(food) {

                this.food = food;

                this.dish = [];

            }

            set menu(dish) {

                this.dish.push(dish);

            }

            get menu() {

                return this.dish

            }

            cook() {

                console.log(this.food); ------ apple

            }

            static cook2(food) {  设置静态的方法

                console.log(food) ; ------ orange

            }

        }

        let dinner = new chef("apple")

        dinner.cook();

        console.log(dinner.menu = "banana"); ------ banana

        console.log(dinner.menu = "pear"); ------ pear

    console.log(dinner.menu); ------ [‘banana’ , ‘pear’]

    chef.cook2("orange") 调用静态方法

    类的继承:

        class Person {

            constructor(name, birthday) {

                this.name = name;

                this.birthday = birthday;

            }

            intro() {

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

            }

        }

        class Chef extends Person Chef通过extends继承Person的内容

            constructor(name, birthday) {

                super(name, birthday);   执行Person中的内容

            }

        }

        let dinner = new Chef('Tom', '1992-03-07');

    console.log(dinner.intro()); ------ Tom,1992-03-07

    9.创建一个Map

        let food = new Map();

        let fruit = {} , cook = function() {} , dessert = 'cake';

        food.set(fruit, 'apple');

        food.set(cook, 'fork');

        food.set(dessert, 'cake');

        console.log(food); ------ Map {Object {} => "apple", function => "fork", "cake" => "cake"}

        console.log(food.size); ------ 3

        console.log(food.get(fruit)); ------ apple

        food.delete(dessert);

        console.log(food.has(dessert)); ------ false

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

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

    })

    ------ [object Object]=apple

    ------ function () {}=fork

    food.clear();

    10.模块导入需要使用辅助工具,查阅相关文档

  • 相关阅读:
    【Python】使用hashlib进行MD5和sha1摘要计算
    【Python】torrentParser1.04 增加获得磁力链URI功能
    day30_Hibernate复习_02
    day30_Hibernate学习笔记_02
    day29_Hibernate复习_01
    day29_Hibernate学习笔记_01
    【重要】Spring在web.xml中的配置原理说明
    HTTP常见错误编号
    一级缓存和二级缓存的理解
    电商网站前台与后台系统架构
  • 原文地址:https://www.cnblogs.com/Tabb/p/6583227.html
Copyright © 2011-2022 走看看