01.let和const侣颂。02.解構(gòu)賦值。03.數(shù)據(jù)集合-set迹辐。04.數(shù)據(jù)集合map蝶防。05.Symbol。

01.let和const明吩。

1.let注意事項(xiàng)间学。

• 1.作用域只局限于當(dāng)前代碼塊
• 2.使用let申明的變量作用域不會(huì)被提升
• 3.在相同的作用域下不能申明相同的變量
• 4.for循環(huán)體現(xiàn)let的父子作用域

2.const使用注意。

• 1-只在當(dāng)前的代碼塊中有效
• 2-作用域不會(huì)被提升
• 3-不能重復(fù)申明
• 4-申明的常量必須賦值

// let 和 const 聲明 變量和常量  var
// 01-作用域只局限于當(dāng)前代碼塊
   {
        var str = '張三';
        console.log(str);//張三
        let str1 = '李四';
        console.log(str1);//李四
    }
    console.log('++++++' + str);//++++++張三
    console.log('-----' + str1);//錯(cuò)誤

   // 02-使用let申明的變量作用域不會(huì)被提升
    {
        console.log(str1); // undefined
        var str1 = '張三';

        var str1;
        console.log(str1); // undefined
        str1 = '張三';
    }

    {
        console.log(str);//錯(cuò)誤
        let str = '李四';
    }

   // 03-在相同的作用域下不能申明相同的變量
    {
        var str1 = '張三';
        var str1 = '李四';
        console.log(str1);

        let str2 = '王五';
        let str2 = '趙六';
        console.log(str2);
    }

   // 04-for循環(huán)體現(xiàn)let的父子作用域
   var btns = document.querySelectorAll('button');
    for(var i=0; i<btns.length; i++){
        btns[i].onclick = function () {
            alert('點(diǎn)擊了第' + i + '個(gè)按鈕');
        }
    }

    var btns = document.querySelectorAll('button');
    for(var i=0; i<btns.length; i++){
        (function (i) {
            btns[i].onclick = function () {
                alert('點(diǎn)擊了第' + (i+1) + '個(gè)按鈕');
            }
        })(i);
    }

    let btns = document.querySelectorAll('button');
    for(let i=0; i<btns.length; i++){
        btns[i].onclick = function () {
            alert('點(diǎn)擊了第' + (i+1) + '個(gè)按鈕');
        }
    }

    for(let i=0; i<5; i++){
        let i = 20;
        console.log(i);
    }

// 01-只在當(dāng)前的代碼塊中有效 02-作用域不會(huì)被提升03-不能重復(fù)申明
    {
        const a = 'zhangsan';
        //const a = 'lisi';
        console.log(a);
    }
     console.log(a);

    // 04-申明的常量必須賦值
    {
        const name;
        name = 'zhangsan';
        console.log(name);
    }
    {
        const name = 'zhangsan';
        name = 'lisi';
        console.log(name);
    }

    const obj = {name: '張三'};
    console.log(obj);
    obj.name = '李四';
    console.log(obj);

02.解構(gòu)賦值印荔。

ES6允許按照一定模式從數(shù)組和對(duì)象中提取值低葫，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)（Destructuring）

• 1.基本用法
• 2.對(duì)象的解構(gòu)賦值
• 3.數(shù)組的解構(gòu)賦值
• 4.基本類(lèi)型的解構(gòu)賦值

//1. 基本用法
     // let name = '張三', age = 18, sex = '男';
     let [name, age, sex] =['李四', 20, '女'];
     name = 'hhh';
     console.log(name);
     console.log(age);
     console.log(sex);

// 2-對(duì)象的解構(gòu)賦值
        let {name, age, sex} = {name: '張三', age: 55, sex: '男'};
        console.log(name);
        console.log(age);
        console.log(sex);
   
     let {name, age, friends, pet} = {name: '張三', age: 55, friends: ['lulu', '王五'], pet: {name: '土豆', age:5}};
     console.log(name);
     console.log(age);
     console.log(friends);
     console.log(pet);

        let {name:str} = {name:'張三'};
        console.log(name);
        console.log(str);

// 3-數(shù)組的解構(gòu)賦值
     //let [name, age, sex] =['李四', 20, '女'];
     let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]];
     console.log(arr1, arr2, arr3, arr4, arr5);

     let [arr1] = [];
     console.log(arr1);

     let [a, , ,c] = [1, 2, 3];
     console.log(a);
     console.log(c);

//4-基本類(lèi)型的解構(gòu)賦值
    let [a, b, c, d, e] = '我是中國(guó)人';
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
    console.log(e);

03.數(shù)據(jù)集合-set

• 一個(gè)屬性size
• 四個(gè)方法add仍律，delete氮采，has，clear
• keys values(鍵值對(duì)一樣)

 // 1. 創(chuàng)建一個(gè)集合
    let set = new Set(['張三', '李四', '王五', '張三', '李四']);
    console.log(set);//Set(3) {"張三", "李四", "王五"}

 // 02-一個(gè)屬性
     console.log(set.size);//3

// 03-四個(gè)方法
    // add
     console.log(set.add('劉德華').add('旋之華'));//Set(5) {"張三", "李四", "王五", "劉德華", "旋之華"}
     console.log(set);//Set(5) {"張三", "李四", "王五", "劉德華", "旋之華"}

// delete
    console.log(set.delete('張三'));//true
    console.log(set.delete('李四'));//true
    console.log(set);//Set(3) {"王五", "劉德華", "旋之華"}


 // has
    console.log(set.has('王五'));//true
    console.log(set.has('張三1'));//false

// clear
    console.log(set.clear()); // undefined
    console.log(set);//Set(0) {}

// keys values
    console.log(set.keys());//SetIterator {}
    console.log(set.values());//SetIterator {}

04.數(shù)據(jù)集合map

1.特點(diǎn)

• 1-類(lèi)似于對(duì)象染苛，本質(zhì)上是鍵值對(duì)的集合鹊漠。
• 2-“鍵”不局限于字符串主到，各種類(lèi)型的值（包括對(duì)象）都可以當(dāng)做鍵。
• 3-對(duì)象“字符串-值”躯概，Map“值-值”是一種更加完善的Hash結(jié)構(gòu)實(shí)現(xiàn)登钥。

2.屬性和方法

• 常用屬性：size
• 方法：set和get，delete娶靡，has牧牢，clear，keys() values() entries()

   {
        let obj1 = {a: 1}, obj2 = {b: 2}, obj = {};
        obj.name = '張三';
        obj[obj1] = '天空';
        obj[obj2] = '大海';
        console.log(obj);

        console.log(obj.toString());
        console.log(obj1.toString());
        console.log(obj2.toString());
        console.log(obj1.toString() === obj2.toString());
    }

    // 1. 創(chuàng)建一個(gè)Map
   let obj1 = {a: 1}, obj2 = {b: 2};
    const  map = new Map([
        ['name', '張三'],
        ['age', 18],
        ['sex', '男'],
        [obj1, '今天天氣很好'],
        [obj2, '適合敲代碼'],
        [[1,2], 'hhh']
    ]);
   console.log(map);
   console.log(map.size);

   // set和get
    map.set('friends', ['趙六', '力氣']).set(['dog'], '小花');
   console.log(map);
   console.log(map.get('name'));
   console.log(map.get(obj1));

   // delete
     map.delete(obj1);
   console.log(map.delete('xxxx'));
   console.log(map);

   // has
   console.log(map.has(obj1));
   console.log(map.has(obj2));

   // clear
   map.clear();
   console.log(map);

   // keys() values() entries()
   console.log(map.keys());
   console.log(map.values());
   console.log(map.entries());

    // 遍歷
    map.forEach(function (value, index) {
        console.log(index + ':' + value);
    })

    // 注意事項(xiàng)
    map.set({}, '呵呵呵呵呵');
    map.set({}, '哈哈哈哈');
   console.log(map);
   console.log({} === {});

05.Symbol

對(duì)象的屬性名可以有兩種類(lèi)型

• 字符串
• Symbol類(lèi)型---獨(dú)一無(wú)二姿锭，不會(huì)與其他屬性名產(chǎn)生沖突塔鳍。

場(chǎng)景

• ES5的對(duì)象屬性名都是字符串，容易造成屬性名沖突呻此。
• ES6引入新的原始數(shù)據(jù)類(lèi)型Symbol轮纫，表示獨(dú)一無(wú)二的值。

// 1. 定義
    let str1 = Symbol();
    let str2 = Symbol();
    console.log(str1 === str2);
    console.log(typeof str1);
    console.log(typeof str2);

    // 2.描述
    let str3 = Symbol('name');
    let str4 = Symbol('name');
    console.log(str3);
    console.log(str4);
    console.log(str3 === str4);

   // 3. 對(duì)象的屬性名
    const obj = {};
    //obj.name = '張三';
    //obj.name = '李四';
    obj[Symbol('name')] = '張三';
    obj[Symbol('name')] = '李四';
    console.log(obj);

06.class

新增加的一個(gè)語(yǔ)法糖焚鲜，作用在于讓對(duì)象原型的寫(xiě)法更加清晰\更像面向?qū)ο蟮木幊谭绞健?br> 構(gòu)造函數(shù)的另一種寫(xiě)法掌唾。

絢麗小球練習(xí) super canvas

 // 1. 構(gòu)造函數(shù)
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype = {
        constructor: Person,
        print(){
            console.log('我叫' + this.name + ',今年' + this.age + '歲');
        }
    };

    // 2. 通過(guò)class面向?qū)ο?    class Person{
        constructor(name, age){
            this.name = name;
            this.age = age;
        }
        print(){
            console.log('我叫' + this.name + ',今年' + this.age + '歲');
        }
    }
    let person = new Person('張三', 19);
    console.log(person);
    person.print();

07.內(nèi)置對(duì)象擴(kuò)展

模板字符串$ 反引號(hào)``
數(shù)組的擴(kuò)展 Array.from Array.of
延展操作符 ...用于數(shù)據(jù)的傳遞

08.函數(shù)擴(kuò)展

• 1. 形參設(shè)置默認(rèn)值

/*function sum(num1, num2) {
        num1 = num1 || 10;
        num2 = num2 || 10;
        console.log(num1 + num2);
    }*/
    function sum(num1 = 20, num2 = 10) {
        console.log(num1 + num2);
    }
     sum(10, 30);
     sum();

• 2. 參數(shù)形式 延展操作符

… 操作符（也被叫做延展操作符 － spread operator）已經(jīng)被 ES6 數(shù)組 支持。它允許傳遞數(shù)組或者類(lèi)數(shù)組直接做為函數(shù)的參數(shù)而不用通過(guò)apply忿磅。
　　延展操作符一般用于屬性的批量賦值上糯彬。

/*function sum() {
        let result = 0;
        for(let value of arguments){
            result += value;
        }
        return result;
    }*/
    function sum(name, sex, ...nums) {
        let result = 0;
        console.log(name);
        console.log(sex);
        for(let value of nums){
            result += value;
        }
        return result;
    }
    console.log(sum(10, 20, 30, 50));
    console.log(sum('張勝男', '男', 10, 20, 30, 50));

• 3. 箭頭函數(shù)

    // () => {}
    //function test() { }
    let sum = (num1, num2)=>{ return num1 + num2;};
     console.log(sum(100, 300));
    let nameArr = ['張三', '李四', '王五'];
    nameArr.forEach((value, index)=>{
        console.log(index + ':' + value);
    });

修正this的指向

    function demo() {
        setTimeout(function () {
            console.log(this);
        }, 500);
        setTimeout(()=>{
            console.log(this);
        }, 1000);
    }
    let obj = {};
    demo.call(obj);