ES6编程风格---学习阮一峰ES6入门 笔记

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;