ES6新特性之傻瓜式說明

ES6出來挺長一段時間了，但目前網上好像教程並很少也不詳細。我依然遵循傻瓜式教學模式，白話文說明JavaScript和ES6的一些區別，說明下ES6的一些新特性。本文適合新手學習，大神請勿見笑，在下在此班門弄斧了。本文估計要寫一段時間，晚上抽空便更新一段。

var和let的區別
var是函數做用域，let是代碼塊做用域

var a = 12;
if(true){
var a = 5;
console.log(a);
}
console.log(a);
兩次都輸出5，if模塊裏a被從新賦予值5；

let b = 12;
if(true){
let b = 5;
console.log(b);
}
console.log(b);
第一次輸出5，第二次輸出12，let是代碼塊做用域，代碼塊裏從新let，不會影響代碼塊外面的a；

 

let解決變量提高的問題

console.log(a); // undefined
console.log(b); // undefined

var a = 12;
let b = 3;

這裏其實會出現相似函數提高同樣的效果，也就是對於 js 引擎上面的代碼的執行順序實際上是先 var a，再 console.log(a)(因此會輸出undefined) ,而let不會出現函數提高的效果；

 

暫時性死區

var a = 123;
if(true){
a = 456;
let a = 5;
console.log(a);
}

儘管a是全局變量，可是在代碼塊裏let了a，這個代碼塊便造成封閉做用域，全局變量a也會失效，這時a = 456是在let a以前操做，這時的a是未定義的，因此a = 456這個操做會報錯，造成暫時性死區；

 

塊級做用域

{
let a = 5;
console.log(a);
{
console.log(a);
}
}
console.log(a);

第一第二行打印出5，第三行報錯，let是代碼塊做用域，內部聲明的函數皆不會影響到做用域的外部；

塊級做用域另外一個例子：
function f(){
console.log('out');
}
(function(){
if(true){
function f(){
console.log('in');
}
}
f();
}());

ES6環境下輸出爲out，if模塊下函數重定義只在塊級內生效，不會影響到塊級外；

 

const的用法

const a;
const a = 5;
let a = 5;

const給變量賦值後，值就不能改變，const定義賦值需同時進行，不可只定義不賦值；
const做用域和let相同，聲明的常量也不提高，也存在暫時性死區；

 

const obj = {
"name": "666"
};
Object.freeze(obj);
obj.name = 'hi';
console.log(obj);

const定義一個對象後，對象雖不能再定義，可是依然能夠改變對象中的屬性；
若是但願對象中的屬性也不可被更改，就用對象凍結方法Object.freeze();

 

跨模塊常量，讀取其餘js文件中的變量

同目錄下constants.js中的代碼爲：
export const A = 123;
export const B = 'abc';
export const C = '666';

引入constants.js
import * as constants from './constants';
console.log(constants.A); // 123
console.log(constants.B); // abc

import {A,B} from './constants';
console.log(A); // 123
console.log(B); // abc

 

解構賦值，一種特殊的複製方法

let [a,b,c] = [1,2,3];
console.log(a); // 1

let [a,[b,c],d] = [1,[3],5];
console.log(b); // 3

let [,,c] = ['isA','isB','isC'];
console.log(c); // isC

let [a] = 1; // 報錯，=號兩邊模式必須相同

let [a = 'a'] = []; // 設置默認值
console.log(a); // a

let [a,b = 'isB'] = ['a']; // b設置默認值
console.log(a); // a
console.log(b); // isB

let [a = 'aaa',b] = [undefined,'bbb'];
console.log(a); // aaa
console.log(b); // bbb

let { a } = { b: 'bbb', a: 'aaa' };
console.log(a); // aaa

let { a } = { b: "bbb", c: "ccc" };
console.log(a); // undefined

數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名；

let { b: a} = { c: 'ccc', b: 'bbb'};
console.log(a); // bbb

let obj = { first: 'hello', second: 'world'};
let { first: f, second: s } = obj;
console.log(f); // hello
console.log(s); // world

真正被賦值的是後者，而不是前者；

let obj = {
p: [
'hello',
{
y: 'world'
}
]
};
let { p: [ x, { y } ] } = obj;
console.log(x); // hello
console.log(y); // world

let x;
{ x } = { x: 'xxx' };
console.log(x); // 語法錯誤，{ x }會被理解成一個代碼塊

let x;
({ x } = { x: 'xxx' });
console.log(x); // xxx

字符串的解構賦值
let [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屬性的解構賦值
let { length: len } = 'hello word';
console.log(len); // 10

其餘屬性的解構賦值
let { toString: s } = 123;
console.log(isNaN(s)); // true

let { a, b } = { a: null, b: undefined };
console.log(a); // null
console.log(b); // undefined

函數參數解構賦值
function add([x,y]){
return x + y;
}
console.log( add([1,2]) ); // 3

function move({ x = 0, y = 0} = {}){
return { x, y };
}
console.log( move() ); // { x: 0, y: 0 }
console.log( move({ x: 5, y: 9}) ); // { x: 5, y: 9 }
console.log( move({ y:6 }) ); // { x: 0, y: 6 }
console.log( move({}) ); // { x: 0, y: 0 }

變換x，y值
let x = 3, y = 5;
[ x, y ] = [ y, x ];
console.log(x); // 5
console.log(y); // 3

解構賦值取函數返回的數組
function example(){
return [1, 2, 3];
}
let [a, b, c] = example();
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

解構賦值取函數返回的對象
function example(){
return {
a: 'aaa',
b: 'bbb',
c: 'ccc'
}
}
var { a, b, c } = example();
console.log(a); // aaa
console.log(b); // bbb
console.log(c); // ccc

其餘應用
function f([x, y, z]){...}
f([1, 2, 3]);

function f({x, y, z}){...}
f({y: 1, x: 2, z: 3});

解構賦值提取json數據
var jsonData = {
id: 1002,
status: "ok",
data: [
{
age: 23,
name: "quuek"
},
{
age: 20,
name: "huuk"
},
{
age: 18,
name: "asut"
}
]
}
let { id, status, data: list } = jsonData;
console.log(id); // 1002
console.log(status); // ok
console.log(list); // [{ age: 23, name: "quuek"}, ...]

 

集合遍歷
let map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for(let[key, val] of map){
console.log(key + ' is ' + val); // first is hello second is world
}

獲取鍵名
for (let [key] of map) {
// ...
}

// 獲取鍵值
for (let [,value] of map) {
// ...
}

 

字符串遍歷器
let str = 'a1b2c3d4e5';
for(let item of str){
console.log(item); // a,1,b,2,c,3 ...
}

 

includes(), startsWith(), endsWith()的使用方法
let str = 'this is a string of test';

let includes = str.includes('es');
let startsWith = str.startsWith('t');
let endsWith = str.endsWith('t');

console.log(includes);
console.log(startsWith);
console.log(endsWith);

let includes2 = str.includes('es', 6);
let startsWith2 = str.startsWith('t', 3);
let endsWith2 = str.endsWith('t', 7);

console.log(includes2);
console.log(startsWith2);
console.log(endsWith2);

使用第二個參數n時，endsWith的行爲與其餘兩個方法有所不一樣。它針對前n個字符，而其餘兩個方法針對從第n個位置直到字符串結束。

 

repeat(n) 將原字符串重複n次
let newab = 'ab'.repeat(3);
console.log(newab); // ababab

 

傳統的JavaScript語言，輸出模板一般是這樣寫的。

$("#result").append(
"There are <b>" + basket.count + "</b> " +
"items in your basket, " +
"<em>" + basket.onSale +
"</em> are on sale!"
);

上面這種寫法至關繁瑣不方便，ES6引入了模板字符串解決這個問題。
let count = 5, onSale = 'qw';
document.getElementById('result').innerHTML = (`
<p>There are <b>${count}</b> items</p>
<div class="second-line">in your basket, <em>${onSale}</em></div>
are on sale!
`);

普通字符串
`In JavaScript '\n' is a line-feed.`

多行字符串
`In JavaScript this is
not legal.`

console.log(`string text line 1
string text line 2`);

字符串中嵌入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
上面代碼中的字符串，都是用反引號表示。若是在模板字符串中須要使用反引號，則前面要用反斜槓轉義。

var greeting = `\`Yo\` World!`;
若是使用模板字符串表示多行字符串，全部的空格和縮進都會被保留在輸出之中。

$("#warning").html(`
<h1>Watch out!</h1>
<p>Unauthorized hockeying can result in penalties
of up to ${maxPenalty} minutes.</p>
`);
模板字符串中嵌入變量，須要將變量名寫在${}之中。

function authorize(user, action) {
if (!user.hasPrivilege(action)) {
throw new Error(
// 傳統寫法爲
// 'User '
// + user.name
// + ' is not authorized to do '
// + action
// + '.'
`User ${user.name} is not authorized to do ${action}.`);
}
}
大括號內部能夠放入任意的JavaScript表達式，能夠進行運算，以及引用對象屬性。

var x = 1;
var y = 2;

`${x} + ${y} = ${x + y}`
"1 + 2 = 3"

未寫完，更新中......