JerryQu 的小站
注意：本站不再支持你所使用的浏览器！
请换用以下浏览器访问本站：
感谢你的配合~Web前端（96）
JavaScript-ES6（6）
我写的最后一种方案就是用到了ES6的解构赋值语法
[a, b] = [b, a]
下面我来详细说明一下什么是解构赋值
按照一定模式，从数组和对象中提取，对变量进行赋值，称为解构
通过解构我们可以让赋值更优雅便捷
var a = 1,
var [a, b, c] = [1, 2, 3];
当然不仅仅是var，let和const也可以
let arr = [1, 2, 3]
const [a, b, c] =
实质上这个语法就是一种模式匹配
如果等号两边模式相同
左边变量就会被赋予相应值
所以下面的形式也可以正常赋值
var [a, [b, [c, d]]] = [1, [2, [3, 4]]];
console.log(a, b, c, d);
不过我们完全没有必要写这么复杂
解构赋值还可以和“…”配合使用
如果“…”在等号左边
那么就会把剩余的值合并为一个数组
这个操作符只能写在最后一个变量前面
var [left, ...right] = [1, 2, 3, 4, 5];
console.log(left, right);
如果“…”在等号右边
就是把数组展开再赋值
var arr = [2, 3, 4];
var [a, b, c, d] = [1, ...arr];
console.log(a, b, c, d);
（“…”叫做展开操作符，以后我还会细讲）
解构失败与不完全解构
如果没有在匹配中没有对应值，那么它的值就是undefined
也就是解构失败
等号右边少值
var [a, b, c] = [1, 2];
console.log(a, b, c);//1 2 undefined
与它相对的就是不完全解构
等号左边少值
var [a, b] = [1, 2, 3];
console.log(a, b);
如果等号右边不是数组（不是可遍历解构）
比如说这些情况是不能赋值解构的
var [foo] = 1/true/NaN/undefined/null/{};
下面的情况也是不可以的
var [a, [b]] = [1, 2];
它可以拆成var a = 1;和var [b] = 2;
第二个同样不能解构赋值所以会报错
可以使用下面这种语法实现默认的赋值
var [foo = 1] = [];
console.log(foo);
只有当右侧的值严格等于undefined才会使用默认赋值
var [foo = 1] = [null];
console.log(foo); //null
由于 null ！== undefined
所以这里foo被赋予null
惰性赋值说的是默认赋值的机制
只有在需要使用默认值的时候
才会去求值
function foo(){
alert(' ');
return 123;
var [a = foo()] = [1];
console.log(a);
var [a = foo()] = [];
console.log(a);
解构赋值首先会看右边有没有与之对应的值
没有的话从左向右解析
var [a = 1, b = a] = []
console.log(a, b)
这段代码就相当于
var a = 1;
var [a = b, b = 1] = [];
console.log(a, b); //undefined 1
如果这里var 换成let就不一样了
let [a = b, b = 1] = [];
console.log(a, b);
这段代码可以看成
let b = 1;
由于let声明没有变量提升
所以此时b还未声明就会报错
可以看看这道题
var [x1 = 1, y1 = x1] = [];
var [x2 = 1, y2 = x2] = [2];
var [x3 = 1, y3 = x3] = [1,2];
var [x4 = y4, y4 = 1] = [];
console.log(x1,y1);//1 1
console.log(x2,y2);//2 2
console.log(x3,y3);//1 2
console.log(x4,y4);//undefined 1
同理如果上面的第四行的var换成let会报错
上面我们通过数组的形式了解了解构赋值
其实解构赋值不仅仅可以用数组
对象也可以
它们类似的地方就不再赘述了
对象的解构赋值是按照属性名（键）决定的
如果没有找到对应的属性，那就赋予undefined
var {foo, bar, foobar} = {
console.log(foo, bar, foobar);//1 2 undefined
对于已经声明过的变量要注意
{a} = {a: 1};
浏览器会报错
因为js引擎把它理解成了代码块
而内部的代码它不认识
解决办法就是加上括号
这样浏览器就可以知道这是一个表达式
({a} = {a: 1});
但是如果我们想要声明的变量与属性名不同怎么办呢
我们可以使用另一种模式
var {foo: a, bar: b, foobar: c = 100} = {
console.log(a, b, c)
这相当于声明了a和b变量
同样可以使用默认赋值
字符串解构赋值
var [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e);
字符串被转化为基本包装对象（类数组对象）
所以可以实现
var {length : len} = 'hello';
console.log(len);
同理这个类数组对象中有length属性
基本值解构赋值
如果等号右边是数字或者布尔值
也同样会转化为包装对象
let {toString: a} = 123;
let {toString: b} = true;
console.log( a === Number.prototype.toString);
console.log( b === Boolean.prototype.toString);
但注意null和undefined没有封装对象
下面的代码会报错
let {toString: x } = undefined;
let {toString: y } = null;
函数参数的结构赋值
function add([x, y])
console.log(add([1, 2]));
函数参数表面上是一个数组
但在传入参数时，数组参数就被结构成变量 x 和 y
相当于var [x, y] = [1, 2]
function foo({x = 0, y = 0} = {}){
console.log([x, y]);
foo({x: 1,y: 2});
foo({x: 1});
function bar({x, y} = {x: 0, y: 0}){
console.log([x, y]);
bar({x: 1,y: 2});
bar({x: 1});
解构赋值的应用
除了交换变量以外
解构赋值还有很多用途
函数多值返回
function demo(){
return [1, 2, 3];
var [a, b, c] = demo();
函数定义参数
function demo({a, b, c}){
demo({a: 1, b: 2, c: 3});
提取JSON数据
var jsonData= {
status: 'OK',
data: [123, 456]
let {id, status, data:number} = jsonD
解构语法可以快速从数组或对象中提取变量
可以用一个表达式读取整个结构
这种语法可以看成是一种语法糖，受Python语言启发
可以提高我们的编程效率
（语法糖就是这种语法是否存在对语言本身没有影响，只是方便我们开发）
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：107656次
积分：2459
积分：2459
排名：第13834名
原创：93篇
评论：100条
欢迎来到某科学的网络日志---------------------------------------------
&&&&不断重复着造轮子的过程，虽然明知道不会超越前辈，但还是要坚持去做 :)
&&&&虽然wo不能保证理解的知识都完全正确，但wo保证所有di文章都是我用心总结的，学习技术嘛，就是不断纠正、不断否定自己的过程， 技术应该是包容的。分享给大家，如果发现问题，还请大家能够交流指正，谢谢各位同学啦 ( ? Д ` )
---------------------------------------------
& & & 邮箱: paysontsung@ & & & QQ:
︱.陌ㄣ落｀ & & & Twitter: @PayenSTsung & & & 微博: 尐轩_Payson
---------------------------------------------
文章：13篇
阅读：10851
文章：17篇
阅读：18991
文章：15篇
阅读：17269
(2)(2)(5)(10)(18)(12)(37)(11)在线课堂 - 汇智网本文基于/ ，同时参考了大量博客资料，具体见文末引用。
ES6（ 6）是即将到来的新版本JavaScript语言的标准，代号harmony(和谐之意，显然没有跟上我国的步伐，我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中，预计会在14年12月份放出正式敲定的版本。但大部分标准已经就绪，且各浏览器对ES6的支持也正在实现中。要查看ES6的支持情况请。
目前想要运行ES6代码的话，可以用/将代码转译。访问traceur-compiler 在线版本时实编辑ES6代码并查看转换后的结果，代码运行结果会在console显示。
另外，关于Google Traceur，业界大神利用前者写了个Chrome插件，安装后也可以进行ES6的测试。
当然，并不是所有ES6新特性都被实现了，所以上面的方法可以测试大部分，有一些还是无法测试的。
虽然ES6都还没真正发布，但已经有用了，各种关于ES789的提议已经开始了，这你敢信。潮流不是我等大众所能追赶的。
潮流虽然太快，但我们不停下学习的步伐，就不会被潮流丢下的，下面来领略下ES6中新特性，一堵新生代JS的风采。
箭头操作符
如果你会C#或者Java，你肯定知道lambda表达式，ES6中新增的箭头操作符=&便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=&outputs。
我们知道在JS中回调是经常的事，而一般回调又以匿名函数的形式出现，每次都需要写一个function，甚是繁琐。当引入箭头操作符后可以方便地写回调了。请看下面的例子。
var array = [1, 2, 3];
//传统写法
array.forEach(function(v, i, a) {
console.log(v);
array.forEach(v = & console.log(v));
大家可以打开文章开头提到的traceur在线代码转译页面输入代码来查看效果。
ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。
下面代码展示了类在ES6中的使用。再次啰嗦一句，你可以将代码贴到自己查看运行结果。
//类的定义
class Animal {
//ES6中新型构造器
constructor(name) {
this.name = name;
//实例方法
sayName() {
console.log('My name is '+this.name);
//类的继承
class Programmer extends Animal {
constructor(name) {
//直接调用父类构造器进行初始化
super(name);
program() {
console.log("I'm coding...");
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//输出 &My name is dummy&
wayou.sayName();//输出 &My name is wayou&
wayou.program();//输出 &I'm coding...&
增强的对象字面量
对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候能够做的事情更多了。具体表现在：
可以在对象字面量里面定义原型
定义方法可以不用function关键字
直接调用父类方法
这样一来，对象字面量与前面提到的类概念更加吻合，在编写面向对象的JavaScript时更加轻松方便了。
//通过对象字面量创建对象
var human = {
breathe() {
console.log('breathing...');
var worker = {
__proto__: human, //设置此对象的原型为human,相当于继承human
company: 'freelancer',
console.log('working...');
human.breathe();//输出 &breathing...&
//调用继承来的breathe方法
worker.breathe();//输出 &breathing...&
字符串模板
字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。如果你使用过像C#等后端强类型语言的话，对此功能应该不会陌生。
//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);
自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。
var [x,y]=getVal(),//函数返回值的解构
[name,,age]=['wayou','male','secrect'];//数组解构
function getVal() {
return [ 1, 2 ];
console.log('x:'+x+', y:'+y);//输出：x:1, y:2
console.log('name:'+name+', age:'+age);//输出： name:wayou, age:secrect
参数默认值，不定参数，拓展参数
默认参数值
现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。
function sayHello(name){
//传统的指定默认参数的方式
var name=name||'dude';
console.log('Hello '+name);
//运用ES6的默认参数
function sayHello2(name='dude'){
console.log(`Hello ${name}`);
sayHello();//输出：Hello dude
sayHello('Wayou');//输出：Hello Wayou
sayHello2();//输出：Hello dude
sayHello2('Wayou');//输出：Hello Wayou
不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖，在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中，&x代表了所有传入add函数的参数。
//将所有参数相加的函数
function add(...x){
return x.reduce((m,n)=&m+n);
//传递任意个数的参数
console.log(add(1,2,3));//输出：6
console.log(add(1,2,3,4,5));//输出：15
拓展参数则是另一种形式的语法糖，它允许传递数组或者类数组直接做为函数的参数而不用通过apply。
var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖，人二和人三
function sayHello(people1,people2,people3){
console.log(`Hello ${people1},${people2},${people3}`);
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello(...people);//输出：Hello Wayou,John,Sherlock
//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法
sayHello.apply(null,people);//输出：Hello Wayou,John,Sherlock
let与const 关键字
可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。const则很直观，用来定义常量，即无法被更改值的变量。
for (let i=0;i&2;i++)console.log(i);//输出: 0,1
console.log(i);//输出：undefined,严格模式下会报错
for of 值遍历
我们都知道for in 循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。
var someArray = [ "a", "b", "c" ];
for (v of someArray) {
console.log(v);//输出 a,b,c
注意，此功能google traceur并未实现，所以无法模拟调试,下面有些功能也是如此
iterator, generator
这一部分的内容有点生涩，详情可以参见。以下是些基本概念。
iterator:它是这么一个对象，拥有一个next方法，这个方法返回一个对象{done,value}，这个对象包含两个属性，一个布尔类型的done和包含任意值的value
iterable: 这是这么一个对象，拥有一个obj[@@iterator]方法，这个方法返回一个iterator
generator: 它是一种特殊的iterator。反的next方法可以接收一个参数并且返回值取决与它的构造函数（generator function）。generator同时拥有一个throw方法
generator 函数: 即generator的构造函数。此函数内可以使用yield关键字。在yield出现的地方可以通过generator的next或throw方法向外界传递值。generator 函数是通过function*来声明的
yield 关键字：它可以暂停函数的执行，随后可以再进进入函数继续执行
在ES6标准中，JavaScript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS和AMD模式。
将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。下面的例子来自:
// point.js
module "point" {
export class Point {
constructor (x, y) {
public x = x;
public y = y;
// myapp.js
//声明引用的模块
module point from "/point.js";
//这里可以看出，尽管声明了引用的模块，还是可以通过指定需要的部分进行导入
import Point from "point";
var origin = new Point(0, 0);
console.log(origin);
Map，Set 和 WeakMap，WeakSet
这些是新加的集合类型，提供了更加方便的获取属性值的方法，不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时，在进行属性值添加与获取时有专门的get，set 方法。
下方代码来自
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;
有时候我们会把对象作为一个对象的键用来存放属性值，普通集合类型比如简单对象会阻止垃圾回收器对这些作为属性键存在的对象的回收，有造成内存泄漏的危险。而WeakMap,WeakSet则更加安全些，这些作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉，具体还看下面的例子。
正文代码来自
// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined
// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//因为添加到ws的这个临时对象没有其他变量引用它，所以ws不会保存它的值，也就是说这次添加其实没有意思
Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。
以下例子借用自。
//定义被侦听的目标对象
var engineer = { name: 'Joe Sixpack', salary: 50 };
//定义处理程序
var interceptor = {
set: function (receiver, property, value) {
console.log(property, 'is changed to', value);
receiver[property] = value;
//创建代理以进行侦听
engineer = Proxy(engineer, interceptor);
//做一些改动来触发代理
engineer.salary = 60;//控制台输出：salary is changed to 60
上面代码我已加了注释，这里进一步解释。对于处理程序，是在被侦听的对象身上发生了相应事件之后，处理程序里面的方法就会被调用，上面例子中我们设置了set的处理函数，表明，如果我们侦听的对象的属性被更改，也就是被set了，那这个处理程序就会被调用，同时通过参数能够得知是哪个属性被更改，更改为了什么值。
我们知道对象其实是键值对的集合，而键通常来说是字符串。而现在除了字符串外，我们还可以用symbol这种值来做为对象的键。Symbol是一种基本类型，像数字，字符串还有布尔一样，它不是一个对象。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性，外部无法直接访问由symbol做为键的属性值。
以下例子来自
(function() {
// 创建symbol
var key = Symbol("key");
function MyClass(privateData) {
this[key] = privateData;
MyClass.prototype = {
doStuff: function() {
... this[key] ...
var c = new MyClass("hello")
c["key"] === undefined//无法访问该属性，因为是私有的
Math，Number，String，Object 的新API
对Math,Number,String还有Object等添加了许多新的API。下面代码同样来自es6features，对这些新API进行了简单展示。
Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"
Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x =& x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"
Object.assign(Point, { origin: new Point(0,0) })
Promises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的 对象。当你发起一个异步请求，并绑定了.when(), .done()等事件处理程序时，其实就是在应用promise模式。
//创建promise
var promise = new Promise(function(resolve, reject) {
// 进行一些异步或耗时操作
if ( /*如果成功 */ ) {
resolve("Stuff worked!");
reject(Error("It broke"));
//绑定处理程序
promise.then(function(result) {
//promise成功的话会执行这里
console.log(result); // "Stuff worked!"
}, function(err) {
//promise失败会执行这里
console.log(err); // Error: "It broke"
总结就是一句话，前后端差异越来越小了。
Google traceur online compiler
array destruction
enhanced object literal
parameters
let keyword
for of iterator
the Iterator protocol
generators
ES6 Iterators, Generators, and Iterables
promise /en/tutorials/es6/promises/
8 cool features in ES6
（此文章错误较多）
阅读(...) 评论()
恭喜妳发现本彩蛋， happy coding
\(^___________^)/}