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"

未写完，更新中......