es6常用语法和特性
简介
首先，在学习之前推荐使用在线转码器 Traceur 来测试 Demo，避免 babel 下的繁琐配置，从而产生畏难情绪。
let 命令
在 ES6 之前，JS 只能使用 var 声明变量，或者省略 var，将变量作为全局变量，ES6 新增的 let 命令用法类似于 var，也是用于声明变量，不过它们具有以下区别：
1、let 命令声明的变量的作用域是块级作用域；var 命令声明的变量的作用域是函数级作用域，例如：
//ES6
{var a = 10;let b = 12;
}
console.log(a); //输出10
console.log(b); //输出undefined//转码后的 ES5
{var a = 10;var b$__0 = 12;
}
console.log(a);
console.log(b);可以看到，在块级作用域中用 let 声明的变量在编译后相当于被改成了其他变量，所以在外部是访问不到的。
2、let 命令不允许有重复声明的变量，并且变量只能在声明后使用，否则会报错，在块级作用域中，如果使用了 let 命令声明变量，那在声明之前称为这个变量的暂时性死区(temporal dead zone，简称 TDZ)，不受外部影响，不能被访问，例如：
//ES6
var a = 10;
{//TDZ 开始console.log(a); //报错let a; //TDZ结束console.log(a); //输出undefineda = 123;console.log(a); //输出123
}
在 ES6 标准中对 TDZ 有如下文字说明：
The variables are created when their containing Lexical Environment is instantiated but may not be accessed in any way until the variable’s LexicalBinding is evaluated.
意思是说由 let 声明的变量，当它们包含的词法环境 (Lexical Environment) 被实例化时会被创建，但只有在变量的词法绑定 (LexicalBinding) 已经被计算后，才能够被访问。
//转码后的 ES5
目前的编译器对 TDZ 并不会直接编译，因为 ES5 标准中原本就没有这种设计，所以看不到报错。
const 命令
const 命令用于声明一个只读的变量，必须在声明的时候初始化，初始化之后不得更改，除此之外，其他与 let 命令基本相同
解构赋值
1、数组的解构赋值：
//示例1
let [a,b,c] = [1,2,3];
console.log(a); //输出1
console.log(b); //输出2
console.log(c); //输出3//示例2，缺省的情况，如果右边缺省，那么左边对应缺省的变量值为 undefind；如果左边缺省，那么右边对应的值将被忽略
let [a,b,c,d] = [1,2,3];
console.log(a); //输出1
console.log(b); //输出2
console.log(c); //输出3
console.log(d); //输出undefinedlet [e,,g] = [4,5,6];
console.log(e); //输出4
console.log(g); //输出6//示例3，设置默认值，只有在右边对应的值严格为 undefined 时默认值才生效
let [a,b,c=4] = [1,2];
console.log(a); //输出1
console.log(b); //输出2
console.log(c); //输出4
2、对象的解构赋值
示例1
let {a,b} = {a:'aaa',b:'bbb'};
console.log(a); //输出aaa
console.log(b); //输出bbb
示例2，变量名与属性名不同
let {a:n1,b:n2} = {a:'aaa',b:'bbb'};
console.log(n1); //输出aaa
console.log(n2); //输出bbb
示例3，设置默认值，只有在右边对应的属性严格为 undefined 时才生效
let {a:n1,b:n2='ccc'} = {a:'aaa',b:undefined};
console.log(n1); //输出aaa
console.log(n2); //输出ccc
示例4，因为数组也是一个对象，所以也可以使用对象的方式解构赋值
let {0:first,1:second,2:third,length} = ['a','b','c'];
console.log(first); //输出a
console.log(second); //输出b
console.log(third); //输出c
console.log(length); //输出3
示例5，字符串在解构赋值时作为一个类数组的对象，每一个字符对应数组中的每个元素
let [a,b,c] = 'arg';
console.log(a); //输出a
console.log(b); //输出r
console.log(c); //输出grest 参数和扩展运算符
ES6 引入了 rest 参数，形式为 (...变量名)，其中 rest参数搭配的变量是一个数组，可以使用数组的一切操作，主要用于获取函数多余参数，例如：
function test(a,...b) {console.log(b); //输出[2,3]
}
test(1,2,3);
值得注意的是 rest 参数之后不能再有其他参数，否则会报错。
扩展运算符，形式为(...)，可以理解为 rest 参数的逆运算，用于将一个数组展开成用空格分隔的参数序列，例如：
let arr = [1,2,3];
console.log(arr); //输出[1,2,3]
console.log(...arr); //输出1 2 3
扩展运算符并不能用于展开对象中的属性，这是 ES7 提案，目前并不支持。
新的遍历方法 for...of
ES6 中新增了三个方法：entries()、keys() 和 values()，它们都返回一个遍历器对象，可以用 for...of 进行遍历，例如：
//数组的遍历
var arr = ['a','b','c'];
//entries() 用于对键值对进行遍历
for(let [i,e] of arr.entries()) {console.log(i + ',' + e);
}
//0,a
//1,b
//2,c//keys() 用于对键名进行遍历
for(let i of arr.keys()) {console.log(i);
}
//0
//1
//2//values() 用于对键值进行遍历
for(let e of arr.values()) {console.log(e);
}
//a
//b
//c
如果不使用 for...of 进行遍历，也可以手动调用 next() 方法进行遍历，例如：
var arr = ['a','b','c'];
var keyObj = arr.keys();
console.log(keyObj.next()); //输出0
console.log(keyObj.next()); //输出1
console.log(keyObj.next()); //输出2
//对象的遍历
同数组一样，不过是挂载在 Object 对象下，调用方式是使用 Object.entries(obj) 调用，返回一个遍历器对象
箭头函数
箭头函数的形式为：() => { }，前面的圆括号是参数列表，后面的大括号是函数体，箭头函数和普通函数有以下几点不同：
1、箭头函数的 this 对象是定义时所在的对象，不需要等到运行的时候再去确定
2、箭头函数不可以当作构造函数
3、箭头函数不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替
4、箭头函数没有自己的 this 对象，所以也不能使用 apply()，call()，bind()，改变 this的指向
//ES6
function fun() {let arrowFun = () => {console.log(this.a);}arrowFun();
}let obj = { a: 1 }
fun.apply(obj);
//转码后的ES5
function fun() {var $__1 = this;var arrowFun = function() {console.log($__1.a);};arrowFun();
}
var obj = {a: 1};
fun.apply(obj);
转载于:https://www.cnblogs.com/blog-cxj2017522/p/9400385.html
es6常用语法和特性相关推荐
- ES6常用新特性---笔记一
ES6的新特性 1.定义函数不一定需要function 2.创建类,constructor 3.模块,JavaScript支持了原生的module,将不同的代码分别写在不同的文件,最后只需export ...
- ES6一些新特性记录
ES6一些新特性记录 1.箭头操作符 箭头操作符左边是需要输入的参数,右边是返回值 比如运用到js回调函数中可以使书写更加方便 var array=[1,3,5]; //标准写法 array.fore ...
- ES6 的新特性总结
ES6 的新特性总结 关于声明变量 由 var 变成 let 和 const 区别: var声明的变量会挂载到window上,let和const声明的变量不会 var声明的变量存在变量提升,而let和 ...
- [ECMAScript] 你喜欢es6的哪些特性？
[ECMAScript] 你喜欢es6的哪些特性? 展开操作符 解构赋值 字符串插值 方法属性 find findIndex Includes Promise ESM 个人简介 我是歌谣,欢迎和大家一 ...
- python常用语法和示例_使用Python中的示例进行输入和输出操作
python常用语法和示例 A Program needs to interact with the user to accomplish the desired task; this is done ...
- python常用语法和示例_C语言切换案例教程，语法，示例和规则
python常用语法和示例 使用默认情况下的决策 (Decision making using switch-case-default) Many times in our daily lives, ...
- es5和es6的区别、以及es6的新特性
es5和es6的区别 系统库的引入 es5:ES5中的引用需要先使用require导入React包,成为对象,再去进行真正引用 es6:ES6里,可以使用import方法来直接实现系统库引用,不需要额 ...
- ES6的新特性----Vue学习必备基础知识
学习Vue之前,ES6的基础常识是必须要了解的,下面列举了几种最重要的特性,学会了这些,Vue的学习就易如反掌了. 1.变量声明const和let 在ES6之前,我们都是用var关键字声明变量.var ...
- ES6的新特性（8）——数组的扩展
数组的扩展 扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...
最新文章
- NOIP2013 华容道
- XINGNET交换机病毒防范
- ejb 2.1 jboss_JBoss AS7 JNDI和EJB 3.1命名更改
- imagick php 缩放,php使用imagick模块实现图片缩放、裁剪、压缩示例
- idea输入法候选区不跟随光标
- Android官方开发文档Training系列课程中文版：电池续航时间优化之监测电池电量及充电状态
- 【LeetCode】3月29日打卡-Day14-BFS
- 二本考北航计算机经历,我（来自二本学校）考上北航的一些经历
- python 化学模块_Python chemif包_程序模块 - PyPI - Python中文网
- net core 通过js打印集合（创建树）
- 用Mediator Pattern + Queue 解决 订单处理流程
- stdio.h 之 printf
- python处理实时获取的数据
- excel分离中英文
- 无法格式化sd卡怎么办 sd卡无法格式化怎么弄
- python代码表达失恋_罗建军失恋
- 六种人类天性基本倾向
- 深信服技术认证之容灾与备份（一）
- 小程序推送代码到远程库
- 珠心算测验(2014NOIP)