ES6程式設計風格---學習阮一峰ES6入門 筆記
阿新 • • 發佈：2019-02-05
1. let取代var
優先使用const
2. 靜態字串使用單引號或反引號。動態字串使用反引號。
3.使用陣列成員對變數賦值時，優先使用解構賦值
const arr=[1,2,3,4]
const [first,second]=arr;
函式的引數如果是物件的成員，優先使用解構賦值
function getFullName(obj){
const{firstName,lastName}=obj;
}
或function getFullName({firstName,lastName}){
}
如果有多個返回值，優先使用物件的解構賦值，而不是陣列的解構賦值。這樣便於以後新增返回值以及更改返回值的順序。
function processInput(input){
return{left,right,top,bottom};
}
const{left,right}=processInput(input);
4.單行定義的物件，最後一個成員不以逗號結尾，多行定義的物件，最後一個成員以逗號結尾。
const a={k1:v1,k2:v2};
const a={
K1:V1,
K2:V2,
};
物件儘量靜態化，一旦定義，就不得隨意新增新的屬性。如果新增屬性不可避免，要是用Object.assign方法
const a={x:null};
a.x=3;
const a={};
Object.assign(a,{x:3});
如果物件的屬性名是動態的，可以在創造物件的時候，使用屬性表示式
const obj={
id:5,
name:'fghbjn',
[getKey('enabled')]:true;
};
物件的屬性和方法，儘量採用簡潔表達法。
var ref='some';
const atom={
ref,
value:1,
addValue(value){
return atom.value+value;
}
}
5.使用擴充套件運算子（...）拷貝陣列
const itemsCopy=[...items];
使用Array.from方法，將類似陣列的隨想轉為陣列。
const foo=document.querySelectorAll('.foo');
const nodes=Array.from(foo);
6.立即執行函式可以寫成箭頭函式的形式,簡單的、單行的、不會複用的函式，建議採用箭頭函式。如果函式體較為複雜，行數較多，還是應該採用傳統的函式寫法
(()=>{
console.log('welcome');
})();
需要使用函式表示式的場合，儘量用箭頭函式代替。而且綁定了this
[1,2,3].map(function(x){
return x*x;
});
[1,2,3].map(x=>x*x);
箭頭函式取代fUnction.prototype.bind,不應再用self/_this/that繫結this
const boundMethod=method.bind(this);
const boundMethod=(...params)=>method.apply(this,params);
所有的配置項都應該集中在一個物件，放在最後一個引數，布林值不可以直接作為引數
function divide(a,b,{option=false}={}){
}
不要在函式體內使用arguments變數，使用rest運算子(...)代替
function concatenateAll(...args)[
return args.join('');
}
使用預設值語法設定函式引數的預設值
function handleThings(opts={}){
}
7.只有模擬現實世界的實體物件時，才是用Object，如果只是需要key:value的資料結構，使用Map結構。Map有內建的遍歷機制。
let map = new Map(arr);
for (let key of map.keys()) {
console.log(key);
}
for (let value of map.values()) {
console.log(value);
}
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
8.用Class取代需要prototype的操作
class Queue{
constructor(contents=[]){
this._queue=[...contents];
}
pop(){
const value=this._queue[0];
this._queue.splice(0,1);
return value;
}
}
使用extends實現繼承，不會有破壞instanceof運算的危險
class PeekableQueue extends Queue{
peek(){
return this._queue[0];
}
}
9.模組
Module語法是Javascript模組的標準寫法，使用import取代require
如果模組只有一個輸出值，就使用export default，如果模組有多個輸出值，就不使用export default，export default與普通的export不要同時使用
import{func1,func2}from 'moudle1A';
使用export取代module.exports
import React from 'react';
class Breadcrumbs extends React.Component{
render(){
return <nav />;
}
};
export default Breadcrumbs;
不要在模組輸入中使用萬用字元
import myObject from './importModule';
如果模組預設輸出一個函式，函式名的首字母應該小寫。
function makeStyleGuide() {
}
export default makeStyleGuide;
如果模組預設輸出一個物件，物件名的首字母應該大寫。
export default StyleGuide;
優先使用const
2. 靜態字串使用單引號或反引號。動態字串使用反引號。
3.使用陣列成員對變數賦值時，優先使用解構賦值
const arr=[1,2,3,4]
const [first,second]=arr;
函式的引數如果是物件的成員，優先使用解構賦值
function getFullName(obj){
const{firstName,lastName}=obj;
}
或function getFullName({firstName,lastName}){
}
如果有多個返回值，優先使用物件的解構賦值，而不是陣列的解構賦值。這樣便於以後新增返回值以及更改返回值的順序。
function processInput(input){
return{left,right,top,bottom};
}
const{left,right}=processInput(input);
4.單行定義的物件，最後一個成員不以逗號結尾，多行定義的物件，最後一個成員以逗號結尾。
const a={k1:v1,k2:v2};
const a={
K1:V1,
K2:V2,
};
物件儘量靜態化，一旦定義，就不得隨意新增新的屬性。如果新增屬性不可避免，要是用Object.assign方法
const a={x:null};
a.x=3;
const a={};
Object.assign(a,{x:3});
如果物件的屬性名是動態的，可以在創造物件的時候，使用屬性表示式
const obj={
id:5,
name:'fghbjn',
[getKey('enabled')]:true;
};
物件的屬性和方法，儘量採用簡潔表達法。
var ref='some';
const atom={
ref,
value:1,
addValue(value){
return atom.value+value;
}
}
5.使用擴充套件運算子（...）拷貝陣列
const itemsCopy=[...items];
使用Array.from方法，將類似陣列的隨想轉為陣列。
const foo=document.querySelectorAll('.foo');
const nodes=Array.from(foo);
6.立即執行函式可以寫成箭頭函式的形式,簡單的、單行的、不會複用的函式，建議採用箭頭函式。如果函式體較為複雜，行數較多，還是應該採用傳統的函式寫法
(()=>{
console.log('welcome');
})();
需要使用函式表示式的場合，儘量用箭頭函式代替。而且綁定了this
[1,2,3].map(function(x){
return x*x;
});
[1,2,3].map(x=>x*x);
箭頭函式取代fUnction.prototype.bind,不應再用self/_this/that繫結this
const boundMethod=method.bind(this);
const boundMethod=(...params)=>method.apply(this,params);
所有的配置項都應該集中在一個物件，放在最後一個引數，布林值不可以直接作為引數
function divide(a,b,{option=false}={}){
}
不要在函式體內使用arguments變數，使用rest運算子(...)代替
function concatenateAll(...args)[
return args.join('');
}
使用預設值語法設定函式引數的預設值
function handleThings(opts={}){
}
7.只有模擬現實世界的實體物件時，才是用Object，如果只是需要key:value的資料結構，使用Map結構。Map有內建的遍歷機制。
let map = new Map(arr);
for (let key of map.keys()) {
console.log(key);
}
for (let value of map.values()) {
console.log(value);
}
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
8.用Class取代需要prototype的操作
class Queue{
constructor(contents=[]){
this._queue=[...contents];
}
pop(){
const value=this._queue[0];
this._queue.splice(0,1);
return value;
}
}
使用extends實現繼承，不會有破壞instanceof運算的危險
class PeekableQueue extends Queue{
peek(){
return this._queue[0];
}
}
9.模組
Module語法是Javascript模組的標準寫法，使用import取代require
如果模組只有一個輸出值，就使用export default，如果模組有多個輸出值，就不使用export default，export default與普通的export不要同時使用
import{func1,func2}from 'moudle1A';
使用export取代module.exports
import React from 'react';
class Breadcrumbs extends React.Component{
render(){
return <nav />;
}
};
export default Breadcrumbs;
不要在模組輸入中使用萬用字元
import myObject from './importModule';
如果模組預設輸出一個函式，函式名的首字母應該小寫。
function makeStyleGuide() {
}
export default makeStyleGuide;
如果模組預設輸出一個物件，物件名的首字母應該大寫。
export default StyleGuide;