Sublime Es6教程2 基本語法

let, const, foreach,for of

class, extends, super

arrow functions, template string,

destructuring, default,

rest arguments

以上是我們需要掌握的常用的es新特性，乙個乙個的玩，不要怕

玩一門新技術，最先玩的是**，對，跟我讀，是變數

js 最大的坑是變數作用域，如果乙個人夠吊，他可以寫出一堆變數作用域炸彈，讓人不知不覺之間就看不懂**了，恩對，這樣的程式設計師就是不可替代的程式設計師，替換了，**就**了，那麼言歸正傳。

2.1.1 let

我們來看乙個老生常談的話題，es5裡面js變數作用域的坑：

function funa()
console.log(i);//不好意思，我從for迴圈裡面出來了，我木有被乾掉
}

我們再來看一下es6的玩法

function funb()
console.log(i);//undefined;我被限制在了作用域裡面，無法動彈
}

坑1：重複定義，var 兩個一樣的變數沒事，後面的會覆蓋前面的，而let同乙個變數名字就掛了

function func()
console.log(i);//undefined;我被限制在了作用域裡面，無法動彈
}

function fund()

2.1.2 const

舉個栗子先

const a = 0;
a = 2; //uncaught typeerror: assignment to constant variable.

當然和let一樣，它也不能兩次定義同乙個變數

const a = 0;
const a; //uncaught typeerror: assignment to constant variable.

哈哈，此刻的我忽然腦洞大開，如果讓let和const都宣告乙個變數，會怎麼樣尼。

let a;
a = 2;
const a = 3;//identifier 'a' has already been declare  
const a ; //missing initializer in const declaration
const a = 2 ; //uncaught typeerror: assignment to constant variable.

自己感受下哈

var words = "this is a world";
var arr = words.split(" ");
//es5: for each
for(var i=0; iconsole.log(n));

也有人說，用for in也可以迴圈，無論是老的es5還是新的es6，for in不建議用來遍歷陣列，因為遍歷出來的結果可能會異常，比如遍歷乙個你認為是陣列但是卻不是陣列的元素，就可能大批量的undefined，以後用for of即可。

解構是個非常好玩的東西，你有個物件，有不同的key和value，那麼就可以是用解構，快速的對應相應的結果，同樣，解構也常用於陣列。

[a, b] = [1, 2]
[a, b, ...rest] = [1, 2, 3, 4, 5]
=  =   //es7

= 作為獨立語法是非法的，左側的會被當成塊結構而不是乙個物件。

然而( = )的形式是允許的，其等價於var = 。

也許你還看不懂上面寫的是個啥，沒問題，我也看不懂，那麼我們來一起看看這玩意是咩

2.3.1 解構陣列

var arr = ["one", "two", "three"];
// 沒有解構賦值
var one   = arr[0];
var two   = arr[1];
var three = arr[2];
// 解構賦值
var [one, two, three] = foo;

如上可以清晰的感覺到，一行**就完成了以前三行**的賦值，並且，我可以清晰的在自己的大腦以及別人的大腦中留下印象：原來one就是arr[0],...,但是這又有何用呢，我難道有一百個陣列元素，我就弄一百個解構體來接嗎？

你說的很對，沒有必要，這個例子只是告訴你，神馬是解構，下面我們來玩點es5玩不了的，而es6又特別特別方便的。

2.3.1.1 交換陣列變數

var a = 1;
var b = 3;
console.log([a,b]);//[1, 3]
[a, b] = [b, a];
console.log([a,b]);//[3, 1]
[a, b] = [b, a+b];
console.log([a,b]);//[1, 4]
/*	//交換
a = a^b ;
b = a^b ; 
a = a^b ;
console.log(a,b);
*/

就這樣，陣列內的元素，悄無聲息的，發生了互換/計算，比你冒泡、置換快多了，也比a = a^b ; b = a ^ b ; a = b ;這種交換方便閱讀。

2.3.1.2 返回多個值

以前想返回多個值，我們得製作乙個物件，然後返回出去，或者製造乙個陣列，返回上去。來看下新玩法

function fun() 
//es5我們還得用變數來接，然後再迴圈處理
var arr = fun();
p5(arr);//1，2，3
a = arr[0];
b = arr[1];
p5(a,b);
//es6我們可以直接接住，並且兌到指定的單個變數中
var [c,d,e] = fun();
p6(c,d,e);
var [f,,g,h] = fun();//解構可以空著~
p6(f,g,h);//1,3,undefined
var arr2 = fun();//es5的語法依然沒問題
p6(arr2);//1，2，3
var [,,] = fun();//神馬也不解構，也沒問題的

當然，這些只是最最基礎的部分，下面我們來搞點複雜的巢狀，這才有意思。

//解構全部
var [a1,[a2,a3],a4] = [1,[2,3],4];
p6([a1,[a2,a3],a4]);//[1,[2,3],4];
//故意不解構全部 [a2]
var [a1,[a2],a4] = [1,[2,3],4];
p6([a1,[a2],a4]);//[1,[2],4];
//弄個陣列來接收陣列
var [a1,a2,a4] = [1,[2,3],4];
p6([a1,a2,a4]);//[1,[2,3],4]; a2 = [2,3]
//不定引數 ...
var [a1,,a4] = [1,[2,3],4];
p6([a1,,a4]);//[1, undefined × 1, 4]
var [a1,...a4] = [1,[2,3],4];
p6([a1,a4]);//[1, [[2,3],4]

結論：當解構時，訪問空陣列或越界訪問陣列時，對其解構與對其索引的行為一致，最終得到的結果都是：undefined。

2.3.1.3 應用於迭代器

function* fibs() 
}var [first, second, third, fourth, fifth, sixth] = fibs();
console.log(sixth);

2.3.2 解構物件

物件的解構，和陣列不同，因為陣列是有解構的前後順序的，而物件就是一堆kv而已，木有啥順序，解構更舒服

var obj = ;
var (k,v) = obj;
var  = obj; //這種的k1直接就是obj[k]
p6(k); // key
p6(v); //value
p6(k1); // key

同樣的，也可以解構巢狀的物件，只不過巢狀的時候，如果key與obj的key變數想通，是不會被賦值的，這點需要注意

var obj = 
};var 
} = obj;
// p6(data); undefined
p6(a);//1
p6(b);//2

2.3.3 解構map

var map = new map();
map.set('a','hello');
map.set('b','world');
for(let[k,v] of map)
for(let[k] of map )

2.3.4 解構字串

const [a,b] = 'hello';
//a:h
//b:e

2.3.5 解構模組

const  = require('slider');//接收載入模組的指定方法

@落雨

2016-04-04

Sublime Es6教程2 基本語法

譯 Chipmunk 教程2 基本概念

Unity3D 學習教程 6 基本操作

Linux教程 2 Linux的基本指令

Sublime Es6教程2 基本語法

譯 Chipmunk 教程2 基本概念

Unity3D 學習教程 6 基本操作

Linux教程 2 Linux的基本指令

相關推薦