Vue基础-ES6常用语法补充

01.let和const。02.解构赋值。03.数据集合-set。04.数据集合map。05.Symbol。

01.let和const。

---

1.let注意事项。

• 1.作用域只局限于当前代码块
• 2.使用let申明的变量作用域不会被提升
• 3.在相同的作用域下不能申明相同的变量
• 4.for循环体现let的父子作用域

2.const使用注意。

• 1-只在当前的代码块中有效
• 2-作用域不会被提升
• 3-不能重复申明
• 4-申明的常量必须赋值

// let 和 const 声明 变量和常量  var
// 01-作用域只局限于当前代码块
   {
        var str = '张三';
        console.log(str);//张三
        let str1 = '李四';
        console.log(str1);//李四
    }
    console.log('++++++' + str);//++++++张三
    console.log('-----' + str1);//错误

   // 02-使用let申明的变量作用域不会被提升
    {
        console.log(str1); // undefined
        var str1 = '张三';

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

    {
        console.log(str);//错误
        let str = '李四';
    }

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

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

   // 04-for循环体现let的父子作用域
   var btns = document.querySelectorAll('button');
    for(var i=0; i<btns.length; i++){
        btns[i].onclick = function () {
            alert('点击了第' + i + '个按钮');
        }
    }

    var btns = document.querySelectorAll('button');
    for(var i=0; i<btns.length; i++){
        (function (i) {
            btns[i].onclick = function () {
                alert('点击了第' + (i+1) + '个按钮');
            }
        })(i);
    }

    let btns = document.querySelectorAll('button');
    for(let i=0; i<btns.length; i++){
        btns[i].onclick = function () {
            alert('点击了第' + (i+1) + '个按钮');
        }
    }

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

---

// 01-只在当前的代码块中有效 02-作用域不会被提升03-不能重复申明
    {
        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.解构赋值。

---

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）

• 1.基本用法
• 2.对象的解构赋值
• 3.数组的解构赋值
• 4.基本类型的解构赋值

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

// 2-对象的解构赋值
        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-数组的解构赋值
     //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-基本类型的解构赋值
    let [a, b, c, d, e] = '我是中国人';
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
    console.log(e);

03.数据集合-set

---

• 一个属性size
• 四个方法add，delete，has，clear
• keys values(键值对一样)

 // 1. 创建一个集合
    let set = new Set(['张三', '李四', '王五', '张三', '李四']);
    console.log(set);//Set(3) {"张三", "李四", "王五"}

 // 02-一个属性
     console.log(set.size);//3

// 03-四个方法
    // 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.数据集合map

---

1.特点

• 1-类似于对象，本质上是键值对的集合。
• 2-“键”不局限于字符串，各种类型的值（包括对象）都可以当做键。
• 3-对象“字符串-值”，Map“值-值”是一种更加完善的Hash结构实现。

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. 创建一个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);
    })

    // 注意事项
    map.set({}, '呵呵呵呵呵');
    map.set({}, '哈哈哈哈');
   console.log(map);
   console.log({} === {});

05.Symbol

---

对象的属性名可以有两种类型

• 字符串
• Symbol类型---独一无二，不会与其他属性名产生冲突。

场景

• ES5的对象属性名都是字符串，容易造成属性名冲突。
• ES6引入新的原始数据类型Symbol，表示独一无二的值。

// 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. 对象的属性名
    const obj = {};
    //obj.name = '张三';
    //obj.name = '李四';
    obj[Symbol('name')] = '张三';
    obj[Symbol('name')] = '李四';
    console.log(obj);

06.class

新增加的一个语法糖，作用在于让对象原型的写法更加清晰\更像面向对象的编程方式。
构造函数的另一种写法。

绚丽小球练习 super canvas

 // 1. 构造函数
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype = {
        constructor: Person,
        print(){
            console.log('我叫' + this.name + ',今年' + this.age + '岁');
        }
    };

    // 2. 通过class面向对象
    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.内置对象扩展

模板字符串$ 反引号``
数组的扩展 Array.from Array.of
延展操作符 ...用于数据的传递

08.函数扩展

• 1. 形参设置默认值

/*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. 参数形式 延展操作符

… 操作符（也被叫做延展操作符 － spread operator）已经被 ES6 数组 支持。它允许传递数组或者类数组直接做为函数的参数而不用通过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. 箭头函数

    // () => {}
    //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);