let和const

let和const是es6新增的两个变量声明关键字,与var的不同点在于:

(1)let和const都是块级作用域,在{}内有效,这点在for循环中非常有用,只在循环体内有效。var为函数作用域。

(2)使用let和const声明的变量,不存在变量提升,必须先声明再使用。使用var声明的变量可以先使用再定义。

(3)不可重复声明。一旦用var,let或者const声明过的变量,再次用let或者const声明时会报错,函数的参数名如果用let或者const在函数体内声明同名的参数时,也会报错。

const特殊要点:

(1)const顾名思义常量,但这个常量与高级语言的常量有所不同,这里的常量指的是在定义就确定其值,并且这个值只读,不可以修改;高级语言的常量更狭隘一点;

(2)使用const声明的变量,一旦声明需要立即初始化,只声明的变量无法用const,const a; 编译会报错;并且一旦初始化,就不能改变。

(3)const用于定义一个复合型对象或者数组时,只是对对象或者数组本身不可赋值,但依然可以为对象添加属性或者为数组push元素。

解构赋值

解构是按照一定的模式,从数组和对象中提取值,对变量进行赋值,解构表达式的左侧是一般[]或者{}。当解构表达式的左侧是[]时,右侧也必须是对应的具有可遍历属性的对象,因此可以是[],map或者string;当解构表达式的左侧为{}时,javascript解析器会先将右侧的值转换为对象,然后从转换的对象获取对应的属性值。总之,解构一个很重要的原则就是“模式匹配”,根据左侧是[]或者{},对右侧进行转换,如果转换后,两侧模式匹配,则进行解构赋值,否则报错。

同时,解构时允许设置默认值,但这里的执行顺序是:先解构,如果解构得到的值为非undefined,则变量值=解构的值,默认赋值表达式不执行;只有当解构得到的值严格等于undefined时,才会执行默认赋值表达式,否则默认赋值表达式是不执行的。

1.数组解构

数组的解构是按照变量的顺序进行赋值的,因此变量的值与数组的顺序息息相关,不同的顺序,解构得到的值也不同。

2.对象解构

对象解构与数组解构不同,对象解构与元素的顺序无关,对象解构的主要依据是对象的属性,对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

3.函数参数解构

函数参数解构其实是数组解构或者对象解构的一种应用,在es6中可以为函数参数指定默认值,这点和解构一起使用,对于参数赋值非常实用。函数参数的解构同样要求模式匹配,函数定义时的参数的数据类型和调用时传入的参数类型保持一致。

另外:对于已经声明的变量进行解构赋值时,要非常小心。下面的示例中,首先用let对变量进行了声明,由于let和const声明的变量不能重复声明,在通过解构表达式赋值时,javascript解析器会将行首的{}解析为代码块,报语法错误。因此在行首加(),将其强制转化为表达式执行。

4.字符串的解构赋值

字符串也可以进行解构赋值,因为字符串可以转化为一个具有类似数组的对象。

5.数字和布尔值的解构赋值

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象。由于undefinednull无法转为对象,所以对它们进行解构赋值,都会报错。

参考文献:http://es6.ruanyifeng.com/#docs/let

     http://es6.ruanyifeng.com/#docs/destructuring

ES6 学习笔记(一)let,const和解构赋值的更多相关文章

  1. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  2. ES6 学习笔记(二)解构赋值

    一.数组的解构赋值 1.基本用法 ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,该操作即为解构 如: let [a,b,c]=[1,2,3]; console.log(a,b,c) ...

  3. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  4. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

  5. ES6学习笔记(let,const,变量的解构赋值)

    1.let: ; i < 3; i++) { let i = 'abc'; console.log(i); } // abc // abc // abc 不存在变量提升,它所声明的变量一定要在声 ...

  6. es6学习笔记--let和const

    今天学习了es6中的let和const命令,借此整理一下笔记. let : let 和 var 的声明方式一样,但有 var 比不上的优点.下面用 var 和 let 的例子来加深对 let 的理解. ...

  7. ES6学习笔记(2)----变量的解构和赋值

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 变量的解构和赋值 本质上:只要模式匹配,左边的变量就能被赋予右边对应的值 原则: 解构赋值的规则 ...

  8. ES6学习 第二章 变量的解构赋值

    前言 该篇笔记是第二篇 变量的解构赋值. 这一章原文链接: 变量的解构赋值 解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构 ...

  9. ES6学习笔记(一):变量赋值和基本数据类型

    let和const let和const不存在变量提升 变量一定要在声明后使用,否则报错. var a = []; for (var i = 0; i < 10; i++) { a[i] = fu ...

随机推荐

  1. 制作 OpenStack Linux 镜像 - 每天5分钟玩转 OpenStack(151)

    这是 OpenStack 实施经验分享系列的第 1 篇. OpenStack 的 instance 是通过 Glance 镜像部署的,所以准备镜像是必须要做的工作.本节介绍 Linux 镜像的制作方法 ...

  2. Xamarin+Prism开发详解八:自动化测试之NUnit实践

    自动化测试很重要!很重要!以前多是手动测试,没有写过测试用例.这样的结果就是发现bug改了之后关联的其他功能又要从新测一遍.这样既浪费时间与成本,而且很无聊.之所以选择NUnit是公司需要,现在.ne ...

  3. js加载XML文件

    // XML文件 <?xml version="1.0" encoding="gb2312"?> <root> <father n ...

  4. 一个Python小白5个小时爬虫经历 【续】

    前言 昨天实现了python简单的数据采集之后本来还挺高兴的,结果发现在.NET读取txt文件后反序列化总是报错.具体错误原因好像是从txt读取数据之后会自动加一个隐藏的字符串,没错,肉眼看不见,就导 ...

  5. devexpress显示缓冲滚动条与实现类似QQ消息推送效果

    1.一般在项目中处理大数据,或者查询大量数据时,耗时会很长,这个时候缓冲条是必不可少的.这里展示一个devexpress不错的缓冲条,如图所示: 使用到了控件splashScreenManager,运 ...

  6. TJOI2015 day2解题报告

    TJOI2015终于写完啦~~~ T1:[TJOI2015]旅游 描述:(BZ没题面只能口述了..)一个人在一棵树上走,每次从a->b会进行一次贸易(也就是在这条路径上买入物品然后在后面卖出)然 ...

  7. erlang erl文件编译的三种脚本

    方案1:命令行 #!/bin/sh #file name: erl.sh #author: stars #time:2015.06.05 #eg: ./erl.sh hello.erl start 2 ...

  8. XHTML表格

    1.基本格式: <table> <tr> <th>A</th><th>B</th><th>C</th>& ...

  9. Angular2 路由问题修复 、求解

    Angular2 提供了比angular1 更为强大的路由功能,但是在具体使用路由过程中,可是出现了很多路由不按照预想的方式执行的问题.为了说明今天的问题,我特地新建了一个测试工程.欢迎交流. 首先介 ...

  10. 从项目经理的角度看.net的MVC中Razor语法真的很垃圾.

    我们知道,Razor语法中我们可以直接使用@if(){}等代码段,这使得.net程序员在写模版时更容易了. 对比如下: 语法名称 Razor 语法 Web Forms 等效语法 代码块(服务端) @{ ...