ES2015常用知识点

ES2015（又称ES6）部分

1 let/const以及块作用域；
2 循环语句

const arr=[1,2,3];
for(const item of arr){
     console.log(item);
}

const Zootopia=[
    {name:'Nick',gender:1,species:'Fox'},
    {name:'Judy',gender:0,species:'Bunny'}
];
for(const {name,species} of Zootopia){
    console.log(`hi,I am ${name},and I am a ${species}`);
}

3 箭头函数

//1  simple
const fn=foo=>`${foo} world`  //means return `foo +' world'` 

//2 arrow function as parameter
let array=['a','bc','def','ghij'];
array=array.filter(item=>item.length>=2);  //bc,def,ghij

//3 multi arguments
const fn=(foo,bar)=> {return foo+bar}

//4 no argument
const greet=()=>'hello world'

4 字符串模板

const str="hello world"
const num=1
const bool=true
const obj={foo:'bar'}
const arr=[1,2,3]

const str1=`String:${str}`
const str2=`Number:${num}`
const str3=`Boolean:${bool}`
const str4=`Object:${obj}`
const str5=`Array:${arr}`

// 可多行
const sql=`
select * from Users 
where FirstName='mike' 
limit 5;
`

5 对象字面量省略语法

//Syntax:{method(){...}}
const obj={
    //before
   foo:function(){
     return 'foo'
   },
   //after
  bar(){
    return 'bar'
   }
}

6 解构

function getState(){
   return {
      error:null,
      logined:true,
      user:{},
  }
}

const {error,logined,user}=getState()

const[foo,bar]=[1,2]
console.log(foo,bar)  //=>1  2

//Object
const {foo,bar}={foo:1}
console.log(foo,bar)   //=>1  undefined
//Array
const [a,b,c]=[1,2]
console.log(a,b,c)   //=>1   2   undefined

// 默认值
const {foo=1}={bar:1}
console.log(foo)   //=>1

const [a,b=2]=[1]
console.log(a,b)   //=>1   2

//嵌套解构
 //Object in Object
const  {a,b:{c}}={a:1,b:{c:2}}
console.log(a,c)   //=>1  2

//Array in Object
const  {d,e:[f]}={d:1,e:[2,3]}
console.log(d,f)  //=>1  2

//Object in Array
consot [g,{h}]=[1,{h:2}]
console.log(g,h)  //=>1  2

//Array in Array
const [i,[j]]=[1,[2,3]]
console.log(i,j)  //=>1   2

7 函数默认参数

function fn(arg='foo'){
  console.log(arg)
}
fn()  //=>foo
fn('bar')   //=>bar

8 数组展开

//Syntax:fn(...[arg1,arg2])
function sum(...numbers){
return numbers.reduce((a,b)=>a+b)
}
sum(...[1,2,3])  //=>6

9 Set和Map数据结构

const set=new Set([1,2,3,4])
set.forEach(item=>{
    console.log(item)
})
//=>1    2    3    4

set.forEach(item=>{
    console.log(item*this.foo)
},{foo:2})
//=>2    4    6    8

const map = new Map([['foo', 1 ], [ 'foo', 2 ]])
console.log(map.get('foo'))   //=> 2

10 类定义语法， 可带构造函数

class Animal {
    constructor(family, specie, hue) {
        this.family =family
        this.specie = specie
        this.hue = hue

    yell() {
      console.log(this.hue)
   }
}

11 Promise

new Promise((resolve,reject)=>{
    api.call('fetch-data',(err,data)=>{
        if(err) return reject(err)
        resolve(data)
    })
})

12 模块化导入

import name form 'module-name'
import * as name from 'module-name'
import {member} from 'module-name'
import {meber as alias} from 'module-name'

import * as lib from 'module'
lib.method1()
lib.method2()

// 同时引入default和其他模块
import {default ,utils} from 'module'  //Wrong

// 不引入接口，仅运行模块代码
import 'system-apply'

13 模块导出

//module.js
export const apiRoot='http://example.com/api'
export function method(){
    //...
}
export class foo{
    //...
}

//app.js
import {method,foo} from 'module.js'
//-----------------------------------------------
// 导出和导入默认模块
//client.js
export default class Client{
   //...
}
//app.js
import Client from 'client.js'

//-----------------------------------------------
// 暴露别的模块的所有接口
export * from 'module-1'

 

13 使用fetch代替ajax

Fetch与Ajax对比：
1 fetch采用Promise的异步方式；API更简洁，可部分消除回调地狱;
2 默认情况下Fetch不会reject错误的HTTP状态， 例如404；需手动包装；
3 Fetch默认情况下不带cookie；如需cookie，需自行开启credencials选项；

fetch('https://www.guanggao365.com/advertisement/searchAd', {
    method: 'post',
    mode: 'cors',//跨域
    credentials: 'same-origin',//默认不带cookie，如需cookie，则要开启此配置
    headers: {'someHeader': 'someValue'},
    body: JSON.stringify('thebodyContentJson')// 也可是k1=v1&k2=v2
}).then(res =>{
    res.json().then(obj => {
        console.log(obj)
    })
})