es6学习笔记整理(一)变量声明、解构赋值

一、 let const

let
1、除了es5的全局作用域和函数作用域外,es6出现块级作用域{}。
2、let声明的变量只在自己的块级作用域里有效,在外面使用报错(es6 强制开启严格模式“use strict”),和var不同。
3、let变量重复声明会报错。

const
1、 常量,数值和字符串不能直接修改,但是是对象的时候可以修改对象,因为只是存储的指针,指针不变,对象内容可以修改。
2、也有块级作用域的概念。
3、必须有初始值,否则会报错。

二、解构赋值

概念: 左右解构一一对应,进行赋值
分类:数组解构赋值、对象解构赋值、字符串结构赋值、布尔值解构赋值、函数参数解构赋值、数值结构赋值
1、*数组解构赋值:
基本使用:

{
        let a,b,rest;
        [a,b] = [1,2];
        console.log(a);//1
        console.log(b);//2
    }

    {
        let a,b,rest;
        [a,b,...rest] = [1,2,3,4,5,6];
        console.log(a);//1
        console.log(b);//2
        console.log(rest);//3,4,5,6 数组中的三个点的作用是将剩余的值都付给rest数组
    }

    {
        //基本使用
        let a,b,c,rest;
        [a,b,c=3] = [1,2];
        console.log(a,b,c);//1,2,3
//        [a,b,c] = [1,2];//没有一一对应的情况下,c为undefined,只声明了,没有赋值
//        console.log(a,b,c);

    }

    {
        //怎么用,什么场景下使用
        //关于变量的交换
        let a=1;
        let b=2;
        [a,b]=[b,a];
        console.log(a,b);//2,1
        /*如果不用es6的结构赋值,变量交换就需要用到一个中间变量*/

    }

    {
        function f() {
            return [1,2];
        }
        let a,b;
        [a,b]=f();
        console.log(a,b);//1,2
        /*如果不用es6的结构赋值,需要使用两个变量去接收函数的返回值*/
    }

    {
        function f(){
            return [1,2,3,4,5];
        }
        let a,b,c;
        [a,,,b]=f();//1,4
//        [a,...b] = f();//1,[2,3,4,5]

        /*当数组返回值不确定的情况下,
        只关心第一个返回值,其余返回值不是很重要或者需要使用的时候去遍历*/
//        [a,,...b] = f();//可以上面的方法混合使用1,[3,4,5]
        console.log(a,b);
        /*选择性的接受某几个变量,只关心自己想要的值*/
    }

2、*对象解构赋值:

    {
        //对象解构
        let a,b;
        ({a,b} = {a:1, b:2})
        console.log(a);//1
        console.log(b);//2
    }

    /*对象解构赋值*/
    {
        let o={p:42,q:true};
        let {p,q}=o;
        /*
        * 根据key,value的方式去配的*/
        console.log(p,q);//42,true
    }

    {
        let {a=10,b=5}={a:3};//默认值
        console.log(a,b);//3,10
    }

    //场景一
    {
        let metaData = {
            title: 'abc',
            test: [{
                title: 'test',
                desc: 'description'
            }]
        };
        let {title:esTitle,test:[{title:cnTitle}]} = metaData;
        console.log(esTitle, cnTitle);//abc, test
    }

//混合使用
let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    },
    range: [0, 3]
};
let {
    loc: { start },
    range: [ startIndex ]
} = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0

3、字符串解构赋值:

const [a, b, c, d, e] = 'hello';
console.log(a);//"h"
console.log(b);//"e"
console.log(c);//"l"
console.log(d);//"l"
console.log(e);//"o"

//类似数组的对象都有一个`length`属性,因此还可以对这个属性解构赋值
const {length} = 'hello';
console.log(length);//5

4、数值和布尔值解构赋值:
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象

let {toString:s1} = 123;
console.log(s1 === Number.prototype.toString);//true
let {toString:s2} = true;
console.log(s2 === Boolean.prototype.toString);//true

5、函数参数解构赋值:
解构可以用在函数参数的传递过程中,这种使用方式更特别。当定义一个接受大量可选参数的JS函数时,通常会创建一个可选对象,将额外的参数定义为这个对象的属性

// options 上的属性表示附加参数
function setCookie(name, value, options) {
    options = options || {};
    let secure = options.secure,
        path = options.path,
        domain = options.domain,
        expires = options.expires;
        // 设置 cookie 的代码
}
// 第三个参数映射到 options
setCookie("type", "js", {
    secure: true,
    expires: 60000
});

感谢:小火柴的蓝色理想

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,149评论 0 13
  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,781评论 0 1
  • 《ECMAScript6 入门》阮一峰 读书笔记 let和constlet声明的变量仅在块级作用域内有效,var声...
    亲爱的孟良阅读 720评论 1 2
  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,534评论 0 8
  • 眼里还在读着诗篇 灵魂已被你束缚 思绪还在半醒间 昨夜的梦魇在今天继续上演 努力想让自己清醒一点 ...
    刘寒霜阅读 402评论 20 11