ES6新特性学习笔记

新引入let命令

相对于之前的var命令 let的作用域更加清晰，他的作用域只在自己的代码块范围内，并且不可以重复定义变量名相同的变量

const常量

const data = 10；

const list = 【10，20，30】；

常量不可以修改赋值，但是数组常量可以修改数组元素 ，不能整体修改数组。

字符串嵌入

let name = "geddy"

let mystr1 = `你好，${name} ！`   //此处不是单引号，是反单引号，数字1前面的按键

分解嵌入式字符串

    let name = "geddy"
    function tagged(formats,...args){

        console.log(formats);

        console.log(args)

    }

    tagged`你好，${name} ！再见`

输出结果

['你好，','！再见']

[‘geddy’]

symbol新类型

解构赋值

    //解构赋值
    let [a,b,c] = [10,20,30]
    console.log(a,b,c);//Lesson1.html:29 10 20 30

    let [x,y,...other] = [1,2,3,4,5,6,7]
    console.log(x,y,other)//Lesson1.html:32 1 2 (5) [3, 4, 5, 6, 7]

    let {name,age} = {name:'geddy',age:30}
    console.log(name,age);
    //函数赋值
    function  func1(){
        return[10,20]
    }
    let [num1,num2] = func1()
    console.log(num1+"/"+num2)//Lesson1.html:41 10/20
    //函数参数名指定
    function func2({x=1,y=2}){
        return x+y;
    }
    console.log(func2({}))//3
    console.log(func2({x:10}))//12
    console.log(func2({x:10,y:20}))//30

数组循环

    //数组循环（for...of）
    let list = [10,20,30];
    Array.prototype.Len = function(){}//给数组添加一个扩展函数
    for (let val of list){
        console.log(val);//10，20，30
    }
    for (let val in list){
        console.log(val);//0，1，2，LEN
    }
    /*
    * for...of只关心数组的里面的值
    * for...in会输出数组里面值的index和所有其他属性值及函数
    * */

函数的默认值

    function sayHello(name="lfj"){
        console.log(`hello ${name}`);//嵌入字符串
    }
    sayHello();//hello lfj
    sayHello("Geddy")//hello Geddy

    function add(a=1,b=a){
        return(a+b)
    }
    console.log(add())//2
    console.log(add(10))//20
    console.log(add(10,22))//32
    //必须指定参数
    function  required(){
        throw  new Error("参数未指定");
    }
    function sayBye(name=required()){
        console.log(`${name} bye`)
    }
    // sayBye();//抛出异常
    sayBye("Geddy");

可变长参数

    // 可变长参数
    //定义函数时，可以将参数指定为可变数组
    function sum(...args){
        let result = 0
        args.forEach(value => {
            result+=value;
        })
        return result;
    }
    console.log(sum(1,2,3))
    console.log(sum(1,2,3,4,5,6,7,8,9,10))

箭头函数

    //箭头函数
    //通过箭头函数简化代码
    let list = [10,20,30]
    //es5
    let newList = list.map(function (value,index){
        return value*value
    })
    console.log(newList)//100,400,900
    //es6写法
    newList = list.map((value,index)=>{
        return value*value;
    })
    console.log(newList)//100,400,900

    //es6简化写法
    newList = list.map(value => {
        return value*value
    })
    console.log(newList)//100,400,900

基本对象定义

    //基本对象定义
    //js基本对象定义
    let title = "ES6从入门到学会";
    let price = 25;
    let publish = "ABC"

    let book = {
        title,price,publish,
        toString(){
            console.log(`《${title}》 is ${price}元 ${publish}出版社出版`)
        }
    }
    book['lang']="简体中文"//添加属性
    console.log(book)//{title: "ES6从入门到学会", price: 25, publish: "ABC", lang: "简体中文", toString: ƒ}
    console.log(book.toString())//《ES6从入门到学会》 is 25元 ABC出版社出版

类定义Class

    //类定义Class
    //ES6的类定义
    class Player{
        constructor(name,sex) {
            this.name = name;
            this.sex = sex;
        }
        show(){//普通方法 实例变量可调用
            console.log(`${this.name} 的性别是 ${this.sex}`)
        }
        static info(){//静态方法，类可调用
            console.log("这是这个人的详细信息")
        }
    }
    let player = new Player("Geddy","男")
    console.log(player.name,player.sex)//Geddy 男
    player.show()//Geddy 的性别是 男
    Player.info()//这是这个人的详细信息

setter/getter的定义

    // setter/getter的定义
    //在类中定义getter/setter方法
    class Player{
        constructor(name,sex) {
            this.name = name;
            this.sex = sex;
        }
        get age(){
            return this._age;
        }
        set age(val){
            this._age = val;
        }
    }
    let player = new Player("geddy","男")
    player.age = 28;
    console.log(player)//Player{name: "geddy", sex: "男", _age: 28}
    console.log(player.age)//28

类继承

    //类继承
    // ES6面向对象的编程之类继承
    class Car{
        constructor(brand) {
            this.brand = brand
        }
        show(){
            console.log(`这台车的品牌是${this.brand}`)
        }
    }

    class Lexus extends Car{
        constructor(brand,lineup) {
            super(brand);
            this.lineup = lineup;
        }
        getPrice(){
            switch (this.lineup){
                case "RX":
                    return 60;
                case "NX":
                    return 40;
                default:
                    throw new Error("位置车型")
            }
        }
    }
    let car = new Lexus("Lexus","RX");
    car.show();
    console.log(`价格是${car.getPrice()}万`)

循环我的对象

    //循环我的对象
    //可迭代的对象、迭代的方法
    let list = [10,20,30]
    let myStr = "你好啊";
    let myMap = new Map();
    myMap.set('js','javascript')
    myMap.set('pl','perl')
    myMap.set('py','python')
    for (let val of list){
        console.log(val)
    }
    for (let val of myStr){
        console.log(val)
    }
    for (let val of myMap){
        console.log(val)
    }
    for (let [key,value] of myMap){
        console.log(key,value)
    }
    let it = myMap.values()//.value方法会返回对象内所有的值
    let tmp
    while (tmp=it.next()){//.next方法是取出对象内的下一个值
        if (tmp.done) break;//.next方法调用下一个值为空时  会返回.done 这是直接结束循环
        console.log(tmp.value,tmp.data)//输出对象内对应的值和是否done
        console.log(tmp)
        /*
        * {value: "javascript", done: false}
            Lesson1.html:232 perl undefined
            Lesson1.html:233 {value: "perl", done: false}
            Lesson1.html:232 python undefined
            Lesson1.html:233 {value: "python", done: false}
        * */
    }

可迭代对象

    //可迭代对象
    //制作一个可迭代对象 Symbol.iterator
    class Player{
        constructor(list) {
            this.list = list
        }
        //迭代器 固定格式
        [Symbol.iterator](){
            let current = 0
            let that = this
            return{
                next(){
                    return current<that.list.length?{value:that.list[current++],done:false}:{done:true}
                }
            }
        }
    }
    let player = new Player(["curry","harden","lebron"])
    for (let val of player){
        console.log(val);
    }

简单迭代生成器

    //简单迭代生成器
    //function*{}：迭代生成器、yueld：迭代返回
    function * myGenerator(){
        yield '1'
        yield '2'
        yield '3'
        yield '4'
        yield '5'
    }
    for (let val of myGenerator()){
        console.log(val)
    }

    function * conutdown(begin){
        while (begin>0){
            yield begin--
        }
    }
    for (let val of conutdown(5)){
        console.log(val)
    }

简单的迭代类

    //简单的迭代类
    //建立一个简单的迭代类（yield）
    class MyList{
        constructor(list) {
            this.list = list;
            this[Symbol.iterator]=function *(){
                let  current = 0
                let that = this
                while (current<that.list.length){
                    yield that.list[current++];
                }
            }
        }
    }
    let mylist = new MyList([100,200,300,400,500,600])
    for (let val of mylist){
        console.log(val)
    }