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)

    })

})

巴特西

ES2015常用知识点

最新文章

热门文章