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);

最后编辑于：2019.01.14 00:15:29

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,732评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,496评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,264评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,807评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,806评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,675评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,029评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,683评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,704评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,666评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,773评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,413评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,016评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,204评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,083评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,503评论 2赞 343