【亚洲必赢官网】ES标准入门,关于ES6常用语法

前者简洁并实用的工具类函数封装

2018/03/06 · JavaScript
· 函数

初稿出处: 火狼   

ES6语法跟babel:

亚洲必赢官网 1

前言

本文紧要从日期,数组,对象,axios,promise和字符判断那多少个方面讲工作中常用的片段函数进行了打包,确实可以在品种中直接引用,进步开发功效.

一、首先大家来解释一下什么是ES?

### 前言
*那两本书应该是时下ES6相关的比较好的了,网上有电子版本(文末有链接)。可是自己买了书看,哈哈。那两篇摘录笔记分为前后两有些,本文是上半有些(1-6章),摘录了两本书里部分相比较有效的知识点。*

EcmaScript 2015 (ES6) 已经冒出了无数年了,大家得以应用它的有的新特性。

1.日期

日子在后台管理种类或者用的不少的,一般是用作数据存贮和治本的一个维度,所以就会涉及到许多对日期的处理

ES的完备是ECMAScript。1996 11

### 目录

1.安装必须的函数参数

1.1 element-UI的日期格式化

亚洲必赢官网 2

DatePicker日期选拔器默许获取到的日子默许是Date对象,然则我们后台需要使用的是yyyy-MM-dd,所以必要大家开展转载

方法一:转化为dd-MM-yyyy HH:mm:ss

export const dateReurn1=(date1)=>{ date1.toLocaleString(“en-US”, {
hour12: false }).replace(/\b\d\b/g, ‘0$&’).replace(new
RegExp(‘/’,’gm’),’-‘) }

1
2
3
export const dateReurn1=(date1)=>{
    date1.toLocaleString("en-US", { hour12: false }).replace(/\b\d\b/g, ‘0$&’).replace(new RegExp(‘/’,’gm’),’-‘)
}

方法二:
从element-UI的2.x版本提供了value-format属性,可以直接设置拔取器重临的值
亚洲必赢官网 3

,JavaScript的创设者Netscape公司,决定将JavaScript提交给国际规范社团ECMA,希望那种语可以成为国际标准。

> #####1. 块级功用域绑定
> #####2. 字符串与正则表明式
> #####3. 函数的扩张
> #####4. 数组的增添
> #####5. 对象的恢弘
  #####6. 集合(Set、Map)
> 7 . Symbol和Symbol属性

> 8 . Javascript中的类

> 9 . Promise、Generator函数、Async函数

> 10 . 代理(Proxy)和反射(Reflection)API

> 11 . 修饰器

> 12 . Module

ES6 提供了
默许的参数值,可以让你在函数的参数中指定默认值当参数没有传递其值的时候。

1.2 获取当前的时间yyyy-MM-dd HH:mm:ss

没有满10就补0

export default const obtainDate=()=>{ let date = new Date(); let year
= date.getFullYear(); let month = date.getMonth() + 1; let
day=date.getDate(); let hours=date.getHours(); let
minu=date.getMinutes(); let second=date.getSeconds(); //判断是还是不是满10 let
arr=[month,day,hours,minu,second]; arr.forEach(item=>{ item

1
2
3
4
5
6
7
8
9
10
11
12
export default const obtainDate=()=>{
let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day=date.getDate();
      let hours=date.getHours();
      let minu=date.getMinutes();
      let second=date.getSeconds();
      //判断是否满10
      let arr=[month,day,hours,minu,second];
      arr.forEach(item=>{
        item

二、什么是ES6?为啥如此火?

### 一、块级作用域绑定

const required = () => {throw new Error(‘Missing parameter’)}; //The
below function will trow an error if either “a” or “b” is missing. const
add = (a = required(), b = required()) => a + b; add(1, 2) //3 add(1)
// Error: Missing parameter.

2.数组

ECMAScript 6.0(以下简称ES6)是JavaScript语的下代业内,已经在2015
6正式公布。它的标,是驱动JavaScript语可以来编排复杂的型应程序,成为集团级开发语。

块级注明用于声明在指定块级功效域之外不可以访问的变量。块级成效域存在于:1、函数内部;2、块中(字符'{‘和’}’之间的区域)。Es6
中设有的二种变量申明就是Let和Const申明。

在那些例子中,大家对函数 add 的参数 a 和 b 设置了一个默许值,那个默许值为一个函数。当函数 add 被实施时,且参数 a 和 b 有一个不曾传递值的时候,那些 required 函数就会实施,大家就会赢得一个报错 Error:
Missing parameter.

2.1 检测是还是不是是数组

export default const judgeArr=(arr)=>{ if(Array.isArray(arr)){ return
true; } }

1
2
3
4
5
export default const judgeArr=(arr)=>{
        if(Array.isArray(arr)){
            return true;
        }
    }

二零零六年开班ECMAScript
5.1版本发表后,其实就起来定制6.0本子了。因为那些版本引入的语法功效太多,且制定进度当中,还有很多公司和个断提交新作用。事情很快就变得驾驭,可能在个本子包涵富有将要引的成效。常规的做法是头阵布6.0版,过段时间再发6.1版,然后是6.2版、6.3版等等;

值得摘录的有以下六点:

2.越发强力的”reduce”

2.2数组去重set方法

1.科普利用循环和indexOf(ES5的数组方法,可以再次回到值在数组中首先次面世的地点)那里就不再详写,那里介绍一种拔取ES6的set完成去重.

2.set是新怎数据结构,似于数组,但它的一大特征就是兼具因素都是唯一的.

3.set大规模操作
【亚洲必赢官网】ES标准入门,关于ES6常用语法。咱们可以参考上边那个:增产数据结构Set的用法

4.set去重代码

export const changeReArr=(arr)=>{ return Array.from(new
Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转车成set数据,利用array
from将set转化成数组类型 } 或者 export const changeReArr=(arr)=>{
return […new
Set([1,2,2,3,5,4,5])]//利用…增添运算符将set中的值遍历出来重新定义一个数组,…是应用for…of遍历的
}

1
2
3
4
5
6
7
8
export const changeReArr=(arr)=>{
    return Array.from(new Set([1,2,2,3,5,4,5]))//利用set将[1,2,2,3,5,4,5]转化成set数据,利用array from将set转化成数组类型
}
 
或者
export const changeReArr=(arr)=>{
    return […new Set([1,2,2,3,5,4,5])]//利用…扩展运算符将set中的值遍历出来重新定义一个数组,…是利用for…of遍历的
}

Array.from可以把带有lenght属性类似数组的靶子转换为数组,也可以把字符串等可以遍历的对象转换为数组,它接受2个参数,转换对象与回调函数,…和Array.from都是ES6的措施

三、ES6以及ES7+伸张了什么样新特性?有啥好用的语法?实例:

##### 1. 不可以再度表明

Array 的措施 reduce 是一个有越发多用处的函数。
它一个分外富有代表性的功能是将一个数组转换成一个值。可是你能够用它来做更加多的事。

2.3 纯数组排序

常见有冒泡和拔取,这里自己写一下应用sort排序

export const orderArr=(arr)=>{ arr.sort((a,b)=>{ return a-b
//将arr升序排列,如若是倒序return -(a-b) }) }

1
2
3
4
5
export const orderArr=(arr)=>{
        arr.sort((a,b)=>{
            return a-b //将arr升序排列,如果是倒序return -(a-b)
        })
    }

大家事先宣称一个变量必要var,为啥要增添let、const;再去表明变量呢?//关于var、let、const关键字特性和选取方式;

    var count = 9; 
    //抛出语法错误
    let count = 7;

? Tip:
那几个小技巧的的起首值都是一个数组或者一个目标而不是一个像字符串之类的简单的值

2.4 数组对象排序

export const orderArr=(arr)=>{ arr.sort((a,b)=>{ let value1 =
a[property]; let value2 = b[property]; return value1 –
value2;//sort方法接收一个函数作为参数,那里嵌套一层函数用
//来接收目的属性名,其余部分代码与正常使用sort方法相同 }) }

1
2
3
4
5
6
7
8
export const orderArr=(arr)=>{
        arr.sort((a,b)=>{
            let value1 = a[property];
            let value2 = b[property];
            return value1 – value2;//sort方法接收一个函数作为参数,这里嵌套一层函数用
            //来接收对象属性名,其他部分代码与正常使用sort方法相同
        })
    }      

// let和const都是只在融洽模块效能域内有效{}内

##### 2. Const常量扬言必须开展开端化

2.1 使用reduce做到同时有map和filter的功效

2.5 数组的”短路运算”every和some

数组短路运算这些名字是自己要好加的,因为一般有那样一种必要,一个数组里面某个或者全部满足条件,就回来true

事态一:全体满意 export const allTrueArr=(arrs)=>{ return
arr.every((arr)=>{ return
arr>20;//倘诺数组的每一项都知足则赶回true,尽管有一项不满意再次来到false,终止遍历
}) } 情形二:有一个满意 export default const OneTrueArr=(arrs)=>{
return arr.some((arr)=>{ return
arr>20;//即使数组有一项知足则赶回true,终止遍历,每一项都不满意则赶回false
}) }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
情况一:全部满足
 
    export const allTrueArr=(arrs)=>{
          return arr.every((arr)=>{
             return arr>20;//如果数组的每一项都满足则返回true,如果有一项不满足返回false,终止遍历
          })  
    }
 
情况二:有一个满足
export default const OneTrueArr=(arrs)=>{
      return arr.some((arr)=>{
         return arr>20;//如果数组有一项满足则返回true,终止遍历,每一项都不满足则返回false
      })  
}

上述三种情景就和||和&&的短路运算很相似,所以我就起了一个名字叫短路运算,当然三种状态都足以通过遍历去看清每一项然后用break和return
false 截至循环和函数.

function test() {

    const age = 8;
    //语法错误:常量未初始化
    const name;

若是有那样的一个场景,你有一个list,里面有一对item,
你需要立异那些item,
更新完事后您必要动用filter来过滤掉你不需要的item。可是那样的话你须求遍历这些数组三回!

3.对象

if (true) {

##### 3. 特殊的For循环
For循环设置循环变量的那有些是一个父作用域,而循环体内部是一个单身的子功用域。

const numbers = [10, 20, 30, 40]; const doubledOver50 =
numbers.reduce((finalList, num) => {      num = num * 2; //double
each number (i.e. map)      //filter number > 50   if (num > 50) {
    finalList.push(num);   }   return finalList; }, []);
doubledOver50; // [60, 80]

3.1 对象遍历

export const traverseObj=(obj)=>{ for(let variable in obj){
//For…in遍历对象包含所有继续的习性,所以只要
//只是想采纳对象自我的属性必要做一个断定
if(obj.hasOwnProperty(variable)){ console.log(variable,obj[variable])
} } }

1
2
3
4
5
6
7
8
9
export const traverseObj=(obj)=>{
        for(let variable in obj){
        //For…in遍历对象包括所有继承的属性,所以如果
         //只是想使用对象本身的属性需要做一个判断
        if(obj.hasOwnProperty(variable)){
            console.log(variable,obj[variable])
        }
        }
    }

let a = 1

    for(let i = 0;i< 3;i++){
        let i = ‘can not change’;
        console.log(i);//输出’can not change’
    }

在这些事例里面,大家想要让数组里面的值翻倍,然后大家只想要里面大于 50 的元素。注意一下大家是怎么样行使 reduce 方法成功同时有让要素的值翻倍,然后过滤的。

3.2 对象的数量属性

1.对象属性分类:数据属性和访问器属性;

2.数目属性:包蕴数据值的职位,可读写,包括多个特点包涵五个特性:

configurable:表示是或不是通过delete删除属性从而再一次定义属性,能仍旧不能修改属性的特点,或是不是把性能修改为访问器属性,默许为true
enumerable:表示能或不能通过for-in循环再次回到属性 writable:表示是还是不是修改属性的值
value:包涵该属性的数据值。默许为undefined

1
2
3
4
configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true
enumerable:表示能否通过for-in循环返回属性
writable:表示能否修改属性的值
value:包含该属性的数据值。默认为undefined

3.改动数据属性的默许特性,利用Object.defineProperty()

export const modifyObjAttr=()=>{ let person={name:’张三’,age:30};
Object.defineProperty(person,’name’,{ writable:false, value:’李四’,
configurable:false,//设置false就不可能对该属性修改 enumerable:false }) }

1
2
3
4
5
6
7
8
9
export const modifyObjAttr=()=>{
  let person={name:’张三’,age:30};
  Object.defineProperty(person,’name’,{
    writable:false,
    value:’李四’,
    configurable:false,//设置false就不能对该属性修改
    enumerable:false
  })
}

console.log(a)

##### 4. 临时性死区
在区块中设有let和const命令,则那么些区块对这几个命令表明的变量从一开端就形成封闭的功能域。只要在宣称从前就利用这么些变量,就会报错。

2.2 使用”reduce”代替”map”和”filter”

3.3 对象的走访器属性

1.拜访器属性的三个特点:

configurable:表示是还是不是通过delete删除属性从而再一次定义属性,能依旧不能修改属性的特点,或是或不是把性能修改为访问器属性,默许为false
enumerable:表示能不能通过for-in循环重返属性,默认为false
Get:在读取属性时调用的函数,默认值为undefined
Set:在写入属性时调用的函数,默许值为undefined

1
2
3
4
5
6
7
configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为false
 
enumerable:表示能否通过for-in循环返回属性,默认为false
 
Get:在读取属性时调用的函数,默认值为undefined
 
Set:在写入属性时调用的函数,默认值为undefined

2.定义:
做客器属性只好通过要透过Object.defineProperty()那么些格局来定义

export const defineObjAccess=()=>{ let personAccess={
_name:’张三’,//_表示是里面属性,只好通过对象的艺术修改 editor:1 }
Object.defineProperty(personAccess,’name’,{ get:function(){ return
this._name; }, set:function(newName){ if(newName!==this._name){
this._name=newName; this.editor++; } }
//假如只定义了get方法则改目的只可以读 }) }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export const defineObjAccess=()=>{
let personAccess={
    _name:’张三’,//_表示是内部属性,只能通过对象的方法修改
    editor:1
  }
  Object.defineProperty(personAccess,’name’,{
    get:function(){
      return this._name;
    },
    set:function(newName){
      if(newName!==this._name){
        this._name=newName;
        this.editor++;
      }
    }
    //如果只定义了get方法则改对象只能读
  })
}

vue中最基本的响应式原理的大旨就是经过defineProperty来恐吓数据的getters和setter属性来改变多少的

}

    情况一:
    var tmp = 123;
    if(true){
        tmp = ‘abc’;//ReferenceError
        let tmp;
    }
    
    情况二:
    function test(x = y,y = 2){
        return [x,y];
    }
    
    test();//报错

在原文中尚无体现那部分代码,只说了注意2.1的代码。在此间我添加一下那有些代码:

4.axios

console.log(a) //a is not defined;

    情况三:
    let x = x;//ReferenceError: x is not defined

2.2.1 使用”reduce”代替”map”

4.1 axios的get方法

export const getAjax= function (getUrl,getAjaxData) { return
axios.get(getUrl, { params: { ‘getAjaxDataObj1’:
getAjaxData.obj1,//obj1为getAjaxData的一个性能 ‘getAjaxDataObj2’:
getAjaxData.obj2 } }) }

1
2
3
4
5
6
7
8
export const getAjax= function (getUrl,getAjaxData) {
  return axios.get(getUrl, {
    params: {
      ‘getAjaxDataObj1’: getAjaxData.obj1,//obj1为getAjaxData的一个属性
      ‘getAjaxDataObj2’: getAjaxData.obj2
    }
  })
}

}

##### 5. Const表明对象,对象属性可变

function map(arr, exec) {     var res = arr.reduce((res, item, index)
=> {         var newItem = exec(item, index)        
res.push(newItem)         return res     }, [])     return res } [1,
2, 3].map((item) => item * 2) // [2, 4, 6] map([1, 2, 3], item
=> item * 2) // [2, 4, 6]

4.2 axios的post方法

export const postAjax= function (getUrl,postAjaxData) { return
axios.post(postUrl, { ‘postAjaxDataObj1’:
postAjaxData.obj1,//obj1为postAjaxData的一个特性 ‘postAjaxDataObj2’:
postAjaxData.obj2 }) }

1
2
3
4
5
6
export const postAjax= function (getUrl,postAjaxData) {
  return axios.post(postUrl, {
      ‘postAjaxDataObj1’: postAjaxData.obj1,//obj1为postAjaxData的一个属性
      ‘postAjaxDataObj2’: postAjaxData.obj2
  })
}

test()

##### 6. 彻底冻结函数

2.2.2 使用”reduce”代替”filter”

4.3 axios的拦截器

一言九鼎分为请求和响应二种拦截器,请求拦截一般就是安顿相应的伸手头信息(适用与大规模请求方法,就算ajax的get方法没有请求头,不过axios里面举办啦封装),响应一般就是对reponse进行拦阻处理,若是回到结果为[]可以转化为0

1.伸手拦截:将近期都市音信放入请求头中

axios.interceptors.request.use(config => { config.headers.cityCode =
window.sessionStorage.cityCode //jsCookie.get(‘cityCode’) return config
},

1
2
3
4
axios.interceptors.request.use(config => {
  config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get(‘cityCode’)
  return config
},

2.响应拦截:处理reponse的结果

axios.interceptors.response.use((response) =>{ let data =
response.data if(response.request.responseType ===
‘arraybuffer’&&!data.length){ reponse.date=0 } })

1
2
3
4
5
6
axios.interceptors.response.use((response) =>{
  let data = response.data
  if(response.request.responseType === ‘arraybuffer’&&!data.length){
    reponse.date=0
  }
})

// const和let的异同点

    constantize(obj) {//彻底冻结函数
        Object.freeze(obj);
        Object.keys(obj).forEach((key, i) => {
            if (typeof obj[key] === ‘object’) {
                constantize(obj[key]);
            }
        })
        obj.name = 777;//TypeError: Cannot add property name, object is
not extensible
        return obj;
    }

function filter(arr, exec) {     var res = arr.reduce((res, item, index)
=> {         if (exec(item, index)) {             res.push(item)    
    }         return res     }, [])     return res } [1, 2,
3].filter((item, index) => index < 2) // [1, 2] filter([1, 2,
3], (item, index) => index < 2) // [1, 2]

5.promise

promise是一种封装将来值的简单复用的异步职务管理机制,紧要解决地狱回调和决定异步的种种

//
**相同点:**const和let都是在当前块内有效,执行到块外会被销毁,也不设有变量进步(TDZ),不可以再度声明。

### 二、字符串与正则表明式
Es6增进了对Unicode的支持,并且伸张了字符串对象。正则表明式则增添了修饰符和特性。

2.3 使用”redece”来判断括号是或不是合作

5.1 应用措施一

export const promiseDemo=()=>{ new Promise((resolve,reject)=>{
resolve(()=>{ let a=1; return ++a; }).then((data)=>{
console.log(data)//data值为++a的值 }).catch(()=>{//错误执行那么些 }) })
}

1
2
3
4
5
6
7
8
9
10
11
12
export const promiseDemo=()=>{
new Promise((resolve,reject)=>{
    resolve(()=>{
        let a=1;
        return ++a;
    }).then((data)=>{
        console.log(data)//data值为++a的值
    }).catch(()=>{//错误执行这个
 
    })
})
}

// **不同点:**const不可能再赋值,let申明的变量可以重新赋值。

值得摘录的有以下几点:

亚洲必赢官网 4

5.2 应用措施二

export const promiseDemo=()=>{
Promise.resolve([1,2,3]).then((data)=>{//直接起头化一个Promise并履行resolve方法
console.log(data)//data值为[1,2,3] }) }

1
2
3
4
5
export const promiseDemo=()=>{
Promise.resolve([1,2,3]).then((data)=>{//直接初始化一个Promise并执行resolve方法
    console.log(data)//data值为[1,2,3]
})
}

for (var i = 0; i < 5; i++) {

##### 1. codePointAt()与String.fromCodePoint()方法
一心帮助UTF-16,接受编码单元的职位而非字符地方作为参数,重返与字符串中加以地方对应的码位,即一个整数值:

那也是个例证来证实 reduce 那一个函数作用的精锐。给你一串字符串,你想要知道那串字符串的括号是或不是是匹配的。

6.文本框的判定

setTimeout(() => {

    var text = “𠮷a”;

健康的做法是利用栈来匹配,不过此间我们利用 reduce 就足以做到,大家只须求一个变量 counter ,这么些变量的开端值是
0 , 当境遇 ( 的时候,counter ++ 当遇到 ) 的时候, counter — 。
假使括号是协作的,那么这么些 counter 最后的值是0

6.1 全体为数字

方法一(最简单):

export const judgeNum1=(num1)=>{ if(typeof num1==number){ return
true; }else{ return false; } }

1
2
3
4
5
6
7
export const judgeNum1=(num1)=>{
    if(typeof num1==number){
        return true;
    }else{
        return false;
    }
}

方法二:isNaN

export const judgeNum1=(num1)=>{ if(!isNaN(num1)){ return true;
}else{ return false; } }

1
2
3
4
5
6
7
export const judgeNum1=(num1)=>{
    if(!isNaN(num1)){
        return true;
    }else{
        return false;
    }
}

注:当num1为[](空数组)、“”(空字符串)和null会在进度中改换为数字类型的0,所以也会回到false,从而判断为数字,所以可以将用typeof将以上特殊景况剔除.

方法三:正则

export const judgeNum1=(num1)=>{ let reg=/^[0-9]*$/
if(!reg.test(num1)){ console.log(‘num1是0-9’) } }

1
2
3
4
5
6
export const judgeNum1=(num1)=>{
  let reg=/^[0-9]*$/
  if(!reg.test(num1)){
    console.log(‘num1是0-9’)
  }
}

console.log(i) //5, 5, 5, 5, 5

    console.log(text.charCodeAt(0));  //55362
    console.log(text.codePointAt(0)); //134017

//Returns 0 if balanced. const isParensBalanced = (str) => {   return
str.split(”).reduce((counter, char) => {     if(counter < 0) {
//matched “)” before “(”       return counter;     } else if(char ===
‘(‘) {       return ++counter;     } else if(char === ‘)’) {      
return –counter;     }  else { //matched some other char       return
counter;     }        }, 0); //<– starting value of the counter }
isParensBalanced(‘(())’) // 0 <– balanced
isParensBalanced(‘(asdfds)’) //0 <– balanced isParensBalanced(‘(()’)
// 1 <– not balanced isParensBalanced(‘)(‘) // -1 <– not
balanced

6.2 只可以为数字或字母

其一用正则判断
概念一个正则:let reg=/^[0-9a-zA-Z]*$/g

}, 0)

    判断一个字符是2个字节仍旧4个字节组成:
    function is32Bit(c){
        return c.codePointAt(0) > 0xFFFF;
    }

2.4 计算数组中元素出现的次数(将数组转为对象)

6.3 只好为数字,字母和英文逗号

因为存在输入多个号码,以英文逗号分隔的状态
概念一个正则:let reg=/^[0-9a-zA-Z,]*$/g

}

    is32Bit(“𠮷”); // true
    is32Bit(“a”); // false

一经你想计算数组中元素出现的次数或者想把数组转为对象,那么您能够运用 reduce 来成功。

6.4 判断输入的位数不当先16位

直白选拔字符串新加的length属性来判定

export const judgeNum1=(num1)=>{ if(num1.length>16){
console.log(‘num1超过16位’) } }

1
2
3
4
5
export const judgeNum1=(num1)=>{
      if(num1.length>16){
        console.log(‘num1超过16位’)
     }
}

console.log(i) //5 i跳出循环体污染外部函数

    console.log(String.fromCodePoint(134071)); // “𠮷”

var cars = [‘BMW’,’Benz’, ‘Benz’, ‘Tesla’, ‘BMW’, ‘Toyota’]; var
carsObj = cars.reduce(function (obj, name) {     obj[name] =
obj[name] ? ++obj[name] : 1;   return obj; }, {}); carsObj; // =>
{ BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

结束

很快意你还可以收看那里,这一个类可能你现在用不到,但足以先收藏着.
世家可以共同调换,下次项目开销一向拿过去用,现在1八月项目相比较赶,那些实在可以增进支付功效哦!祝大家新年欢腾哒.

1 赞 收藏
评论

亚洲必赢官网 5

//将var改成let之后

##### 2. normalize()方法
Es6为字符串添加了一个诺玛lize()方法,它可以提供Unicode的规格形式,接受一个参数,指明应用哪个种类Unicode标准化格局(NFC,NFD,NFKC,NFKD)。只要求牢记,在自查自纠字符串此前,一定要先把它们标准改成同一种格局:

小编提议前往MDN学习,查看更多例子MDN

for (let i = 0; i < 5; i++) {

    let normalized = values.map((text) => {
        return text.normalize();
    })

//
我也去看了一眼MDN,发现reduce真是个黑科学技术,promise串行那些利用卓殊秒啊。

setTimeout(() => {

    console.log(this[normalize](‘\u01D1’) ===
this[normalize](‘\u004F\u030C’)) // true

3.对象解构

console.log(i) // 0,1,2,3,4

##### 3. includes()、startsWith()、endsWith()、repeat()方法

3.1 移除不想要的特性

}, 0)

    let tempArray = [1, “4”, “uu”, 5];
    let tempStr = “test123uuunit582”;

突发性你想要移除对象中的一些不须求的习性,这么些目标可能是带有了一点敏感的音信或者只是因为那几个目的太大了。大家得以选拔解构来取代去遍历那几个属性。

console.log(’22’);

    console.log(tempArray.includes(5)); //true
    console.log(tempStr.includes(“test123”, 1));
//从第三个职位举行匹配

let {_internal, tooBig, …cleanObject} = {el1: ‘1’,
_internal:”secret”, tooBig:{}, el2: ‘2’, el3: ‘3’};
console.log(cleanObject); // {el1: ‘1’, el2: ‘2’, el3: ‘3’}

}

    console.log(tempStr.startsWith(“test”)); //true
    console.log(tempStr.startsWith(“test123”, 0));
//从首个义务展开匹配

在这一个例子中,我们想要移除 _internal 和 tooBig 那五个特性,我们可以将他们分配给变量 _internal 和 tooBig 中,剩下的性质存放在 cleanObject 中,这就是大家想要的。

console.log(i)//i is not defined i无法污染外部函数

    console.log(tempStr.endsWith(“12”,6)); //从第七个地点进行匹配
    console.log(tempStr.repeat(3));    //test123uuunit582test123uuunit582test123uuunit582

3.2 在函数参数中运用嵌套对象解构

四、字符串操作

##### 4. 模板字符串
天地专用语言(DSL),能够转移、查询并操作其余语言里的始末,且可以免受注入攻击(XSS、SQL等)。

var car = {   model: ‘bmw 2018’,   engine: {     v6: true,     turbo:
true,     vin: 12345   } } const modelAndVIN = ({model, engine: {vin}})
=> {   console.log(`model: ${model} vin: ${vin}`); }
modelAndVIN(car); // => model: bmw 2018  vin: 12345

let t = ‘abcdefg’;

> A、去掉模板字符串中的换行

在那么些事例中 engine 是一个嵌套在 car 里面的目的,假若大家只须求 engine 里面的性质 vin我们可以如此做。

if (t.indexOf(‘abc’) > -1) {

        $(‘#list’).html(`
          <ul>
              <li>first</li>
              <li>second</li>
          </ul>
        `.trim());

3.3 合并对象

console.log(‘yes有abc哦😯’);

> B、引用模板字符串本身

ES6 新增了一个扩充运算符,… 使用多个点来表示,它平日用来解构数组的值,
不过它也足以用在对象中。

}//ES5写法

        //写法一
        let str = ‘return ‘ + ‘`ni hao ${name}`’;
        let func = new Function(‘name’,str);
        let data = func(‘uct’);
        //写法二
        let str2 = ‘(name) => `ni hao ${name}`’;
        let func2 = eval.call(null,str2);
        let data2 = func2(‘uct’);
    
        console.log(data + ‘  ‘ + data2);

在那几个例子中,大家在一个新的目的中利用增加运算符,前面一个目的的属性值会把前边一个对象的属性值覆盖。

// ES6新特征检测是或不是含有(倘诺想看在字符串的位数照旧选取indexOf());

> C、标签模板

第一个对象中的属性 b 和 c 的值把第四个目标中性能 b 与 c 的值覆盖掉了

if (t.includes(‘abc’)) {

        alert`123`;
        //等同于
        alert(123);
        var a = 1,b = 2;
        tag`Hello ${a + b} world ${a * b}`;
        //等同于
        tag([‘Hello ‘,’ world ,
”],1,2);//首个参数是数组,存放模板中没有变量替换的一部分,后续参数是变量。

let object1 = { a:1, b:2,c:3 } let object2 = { b:30, c:40, d:50} let
merged = {…object1, …object2} //spread and re-add into merged
console.log(merged) // {a:1, b:30, c:40, d:50}

console.log(‘yes有abc哦😯’);

> D、String.raw()转义模板字符串

4.Sets

}

        String.raw`Hi\n${3+4}`;//”Hi\\n5″

4.1 使用set来对数组去重

//检测是不是在头顶

[关于new Function][newFunction]

在ES6方可很方便的使用Set来对数组去重,因为Set表示的是一个会聚,一个元素会在集合里面出现过四遍。

if (t.startsWith(‘abc’)) {

[关于eval][eval]

let arr = [1, 1, 2, 2, 3, 3]; let deduped = […new Set(arr)] //
[1, 2, 3]

console.log(‘头部有abc哦😯’);

[newFunction]:

[eval]:

4.2 使用Array的方法

}

##### 5.U修饰符与Y修饰符
U修饰符,即为“Unicode方式”,用来正确处理大于\uFFFF的Unicode字符。Y修饰符,叫作“粘连”(Sticky)修饰符,它的后三次匹配都从上几遍匹配成功的下一个职位上马。

能够通过(…)增添运算符将 Set 转换成 Array 那样大家就可以在 Set 使用所有 Array 的主意了。

//检测是或不是在最后

> A、点(.)字符匹配(匹配除换行符外的富有字符)

本条例子展现了什么在 Set 中运用 filter 方法

if (t.endsWith(‘fg’)) {

        var s = “𠮷”;
        /^.$/.test(s); // false
        /^.$/u.test(s); // true
    
> B、重临字符串长度的函数

let mySet = new Set([1,2, 3, 4, 5]); var filtered =
[…mySet].filter((x) => x > 3) // [4, 5]

console.log(‘尾部有fg哦😯’);

        function codePointLength(){
            var result = text.match(/[\s\S]/gu);
            return result ? result.length : 0;
        }

5.数组的解构

}

> C、y修饰符隐含了底部匹配的申明(^)

5.1 交换2个值

//有意思的字符串操作(近年来没觉察有何用)

        const REGEX = /a/y;
        REGEX.lastIndex = 2;
        REGEX.exec(“xaya”); // null
        REGEX.lastIndex = 3;
        const match = REGEX.exec(“xaya”);
        match.index; // 3
    

let param1 = 1; let param2 = 2; //swap and assign param1 & param2 each
others values [param1, param2] = [param2, param1];
console.log(param1) // 2 console.log(param2) // 1

console.log(‘哈’.repeat(4))//哈哈哈哈;原版输出了4遍。。。

        
### 三、函数的扩展

5.2 函数重返八个值

//字符串改版之使用模板字面量反撇号“。在事实上开发中,那是隔三差五都要用到的办法。

值得摘录的有以下几点:

async function getFullPost(){   return await Promise.all([    
fetch(‘/post’),     fetch(‘/comments’)   ]); } // const [post,
comments] = getFullPost(); const [post, comments] = await
getFullPost(); //
注释掉的那一行是作者写的,然则自己跑不通,我以为getFullPost是个Promise,所以需要加await。

let a = ‘我是字符串’;

    
##### 1.函数参数的默许值

大家利用 async\await 来赢得2个接口的多少 /post 和 /comments ,
函数再次来到的是一个数组,所以能够使用解构来取得那七个接口的重返值。

let b = `那也是一个字符串哦`;

> A、参数变量默许注明

作者原文章的内容就到此处,可是自己想补充一下map。

//ES5字符串换行

        function test(x = 1){
            let x = 2;//error
        }

6. Map

let a = ‘123\n456’

> B、惰性求值
        let x = 10;
        function testLazy(p = x + 1){
            console.log(p);
        }
    
        testLazy(); // 11
        let x = 12;
        testLazy(); // 13

在目标中的 key 只可以是 string 无法接受一个 Object 当作 key 会被活动转换成字符串,例子如下:

console.log(a)

> C、非底部设置默许值,参数不可省略

const data = {}; const element = document.getElementById(‘myDiv’);
data[element] = ‘metadata’; data[‘[object HTMLDivElement]’] //
“metadata”

// 123

        function f(x = 1,y){
            return [x,y];
        }
        f(,1); //报错

从而对于键值对的多少解构,map 比 Object 更加方便。

// 456

> D、默许参数的暂时死区TDZ

亚洲必赢官网 6

// ES6

        function add(first = second,second){
            return first + second;
        }

​6.1 在map中使用对象当作key

let a = `1234

        console.log(add(1,1));    // 2
        console.log(add(undefined,1));  // 抛出荒谬
        //当初次调用add()时,绑定first和second被添加到一个直属于函数参数的暂时死区

const M = new Map() let o = {p: ‘Hello World’} M.set(o, ‘hello world’)
M.get(o) // hello world let O = {p: ‘Hello World’} M.get(O) // undefined

56`;

        //表示调用add(1,1) 时的Javascript 代码
        let first = 1;
        let second = 2;
        //表示调用add(undefined,1) 时的Javascript 代码
        let first = second;
        let second = 1; //所以抛出错误;

注意: O != o 所以那么些 M.get(O) 是 undefined

console.log(a)

        
##### 2.默许参数表达式
第一解析函数表明时不会调用getValue()方法,唯有当调用add()函数且不传播第四个参数时才会调用:

6.2 WeakMap的作用

//1234

        constructor() {
            this.value = 5;
        }

在平凡的map中,假诺一个 object 被当作 key 引用了,当除了map以外,其余的变量都丢掉对那么些 object 的引用,那map照旧会堵住垃圾回收机制去回收那一个 object 那就会导致内存泄漏。所以就有了WeakMap。

//56

        getValue(){
            return this.value ++;
        }
    
        add(first,second = this.getValue()){
            console.log(‘plus: ‘, first + second );
        }
        …
        Es6Function.add(1,1); // plus:  2
        Es6Function.add(1);    // plus:  6
        Es6Function.add(1);    // plus:  7
            

字面意思,WeakMap里面的key是弱引用,并且
WeakMap中只可以以 Object 当作 key 因为别的的你都得以用 Map搞啊~~那么
WeakMap的多少个小技巧。

//不再拼接字符串${}来搞定

##### 3.
只要函数参数使用了默许值、解构赋值或者扩张运算符,那么函数内部就不可能严谨情势

6.2.1 使用DOM节点作为键名

let a = ‘hello’

        const doSomething = (a,b = a,…c) => { //error
            ‘use strict’;
            //code 
        }

let myElement = document.getElementById(‘logo’); let myWeakmap = new
WeakMap(); myWeakmap.set(myElement, {timesClicked: 0});
myElement.addEventListener(‘click’, function() {   let logoData =
myWeakmap.get(myElement);   logoData.timesClicked++; }, false);

let b = `${a} world`

##### 4. 不定参数限制使用

上述例子来自 Ruanyifeng

console.log(b)// hello world;

> 每个函数最四只可以声美素佳儿(Friso)(Beingmate)个不安参数,而且必然要放在所有参数的末段。

咱俩用WeakMap来存DOM节点的某些状态,当这么些DOM节点被删除时,myElement失去了引用,满世界都失去了引用,WeakMap里面所存的动静就会流失,所以不会存在内存泄漏的问题。

五、es6函数

        function any(a,…b,last){} //报错

6.2.2 使用WeakMap来布局私有属性

function b(num = 6, callback) {

> 不定参数无法用于对象字面量Setter中

咱俩都知情,在JS中落到实处实例的私家属性是相比较困难的,有个措施是使用闭包,然则闭包有个问题,实例被强引用,不可能被垃圾回收机制处理。如下代码:

// num = 6很扎眼是默许参数;若传值则用传递的参数否则就用6;

        let object = {

var Person = (function() {     var privateData = {},         privateId =
0;     function Person(name) {         Object.defineProperty(this,
“_id”, { value: privateId++ });         privateData[this._id] = {  
          name: name         };     }     Person.prototype.getName =
function() {         return privateData[this._id].name;     };    
return Person; }());

callback(num * num)

            //语法错误,不得以在Setter中应用不定参数
            set name(…value){}
        }

privateData对各样实例都是强引用,所以垃圾回收机制是处理不了的。

}

> 取数组最大值

我们可以用weakMap很好的化解那几个题目。

b(10, data => { console.log(data) })

        let values = [25,34,11,99];
    
        console.log(Math.max(…values)); // 99

var privateData = new WeakMap(); var Person = (function() {     function
Person(name) {         privateData.set(this, { name: name });     }    
Person.prototype.getName = function() {         return
privateData.get(this).name;     };     return Person; }());

//不定参数使用…

##### 5. 箭头函数

如上代码weakMap不会对实例造成强引用,也就是说,垃圾回收机制是唯恐把这一个实例回收掉的,假若没有其余人对这几个实例保持着引用,是会被回收的,也就不会造成内存败露了。

function add(…ary) {

>
A、箭头函数中的This值取决于该函数外部非箭头函数的this值,且不可能通过call()、apply()或bind()方法来改变this值

console.log(ary)

        thisScope(){
            setTimeout(()=>{
                console.log(‘id: ‘,this.id);
            },100);
        }
        …
        var id = 55;
          Es6Function.thisScope.call({id:100}); // id : 100

}

>
B、函数体内不可民使用Arguments对象,该对象在函数体内不设有,可以用Rest参数(…)代替

let a = 1, b = 9;

        testArguments(){
            setTimeout(() => {
                console.log(‘args: ‘,arguments)
            }, 100);
        }
        …
        Es6Function.testArguments(1,2,5,6); // args:  Arguments(4) [1,
2, 5, 6, callee: (…), Symbol(Symbol.iterator): ƒ]

add(a, b);//(2) [1, 9]

##### 6. 尾调用优化

//展开运算符(…)

>
尾调用就是指某个函数的尾声一步是调用另一个函数,只在严谨情势下打开。

//展开运算符的功力是解构数组,然后将各种数组元素作为函数参数。

        “use strict”;

//有了拓展运算符,大家操作数组的时候,就可以不再使用apply来指定上下文环境了。

        function doSomething(){
            //优化后,登时回到结果
            return doSomethingElse();
        }
        
        function doSomething2(){
            //不可能优化,无再次来到
            doSomethingElse();
        }

//ES5的写法

> 非严峻方式下促成尾递归优化,用“循环” 替换 “递归”

let arr = [10, 20, 50, 40, 30]

        function sum(x,y){
            if(y > 0){
                return sum( x + 1,y – 1);
            } else {
                return x;
            }
    
        }
        sum(1,1000000);// Uncaught RangeError: Maximum call stack size
exceeded(…)

let a = Math.max.apply(null, arr)

        //用蹦床函数可以将递归执行转为循环执行
        function trampoline(f){
            while(f && f instanceof Function){
                f = f();
            }
            return f;
        }

console.log(a) // 50

        //再次回到一个函数,然后实施该函数,而不是在函数里调用函数,幸免递归,消除调用栈过大题材

//ES6的写法

### 四、数组的恢弘

let arr = [10, 20, 50, 40, 30]

值得摘录的有以下几点:

let a = Math.max(…arr)

##### 1. 扩小运算符(…)

console.log(a) // 50

扩充运算符背后调用的是遍历器接口(Symbol.iterator),要是一个目的没有安插该接口就不能变换

//箭头函数

> 替代数组的 Apply方法 

const arr = [5, 10]

        //Es5 的写法

const s = arr.reduce((sum, item) => sum+ item)

        function f(x,y,z){}

console.log(s) // 15

        var args = [1,2,3];

//箭头函数和一般函数的分别是:

        f.apply(null,args);

//
1、箭头函数没有this,函数内部的this来自于父级近年来的非箭头函数,并且不可以改变this的针对性。

        //Es6 的写法

// 2、箭头函数没有super

        function f(x,y,z){}

// 3、箭头函数没有arguments

        var args = [1,2,3];

// 4、箭头函数没有new.target绑定。

        f(…args);

// 5、不可能应用new

> 合并数组

// 6、没有原型

        Es5 合并数组

// 7、不协理再度的命名参数。

        var arr1 = [1,2];
        var arr2 = [3,4];
        var arr3 = [5];

const s = a => a;

        arr1.concat(arr2,arr3);

console.log(s(44))//44;

        Es6 合并数组

//箭头函数还是可以输出对象,在react的action中就引进那种写法。

        […arr1,…arr2,…arr3];

const action = (type, a) => ({

> 可以辨识 32 位的 Unicode 字符的取字符串长度的办法

type: “TYPE”,

        function length(str){
            return […str].length;
        }
    
        length(‘x\uD83D\uDE80y’); // 3

a

##### 3.
Array.from()方法,用于将类似数组对象和可遍历对象(包罗Set和Map结构)转为真正的数组
Array.from()方法除了帮助遍历器接口转换外,还协助类数组对象(类数组对象的真相就是有Length属性)

})

        Array.from({length:3});
        // [undefined,undefined,undefined] 

//箭头函数给数组排序

> 映射转换,Array.from()的第三个参数用来遍历类数组对象并重临

const arr = [1, 333, 2, 444, 0, 99]

        translate() {
            return Array.from(arguments, (value) => value + 1);
        }

const s = arr.sort((a, b) => a – b)

        console.log(NewArray.translate(1,2,3)); // [2,3,4]

console.log(s) // (6) [0, 1, 2, 99, 333,444]

##### 4. 为所有数组添加新的章程

//属性先导值简写法

> Array.of(),为了弥补数组构造函数Array()的不足

//ES5

        Array.of(3,11,8); // [3,11,8]
        Array.of(undefined); // [undefined] , 通过Vue 突显到页面则为
[null]
        Array(3); // [,,]

function a(id) {

>
copyWithin(),把数组内部指定地点成员复制到其他地点(会覆盖任何成员)

return {

        //将3号位复制到0号位
        [1,2,3,4,5].copyWithin(0,3,4); //[ 4, 2, 3, 4, 5 ]
        // -2相当于3号位,-1相当于4号位
        [1,2,3,4,5].copyWithin(0,-2,-1); //[ 4, 2, 3, 4, 5 ]
        
>
find(),重临符合条件的第二个(可能有三个)成员,假设没有就再次来到undefined

id: id

        testFind(){ // 返回 3
            return [1,2,3,4,5].find((value,index,arr)=>{
                return value > 2;
            })
        }

};

> findIndex(),重返第四个符合条件的成员的岗位,要是没有就回来 -1

};

        testFindIndex(){ // 返回 -1
            return [1,2,3,4,5].findIndex((value,index,arr)=>{
                return value > 6;
            })
        }

//ES6

> fill(),填充一个数组,接受第二第四个参数(先导地点和得了地方)

const a = (id) => ({

        testFill(){
            console.log([‘a’,’b’,’c’].fill(8,1,2)); // [“a”, 8,
“c”]
            return new Array(3).fill(8); //[ 8, 8, 8 ]
        }

id

>
includes(),再次回到一个布尔值,表示某个数组是还是不是包涵给定的值,它与indexOf
比起来尤其直观,并且可以判断NaN的事态

})

        testIncludes(){
            return [1,2,NaN].includes(NaN); // true
        }

//对象简写法

> entries(),keys(),values()方法,它们都回来一个遍历器对象

// ES5

        testEntries(){
            for(let [key,value] of [‘a’,’b’,’c’].entries()){
                console.log(key,value); // 0 “a”  1 “b”  2 “c”
            }
            let letter = [‘a’,’b’,’c’];
            //手动调用遍历器对象的Next方法举办遍历
            let entries = letter.entries();
            console.log(entries.next().value); //[0, “a”]
            console.log(entries.next().value); //[1, “b”]
            console.log(entries.next().value); //[2, “c”]
        }

const obj = {

### 五、对象的恢宏
ECMAScript6 中,为了使一些职责更易达成,在全局Object
对象上引入了一部分新措施

id: 1,

值得摘录的有以下几点:

printId: function () {

##### 1. 可统计属性名

console.log(this.id)

        let suffix = ” name”;

}

        var person = {
            [“first” + suffix]: “尼古拉斯”, // Es5
版本,那里的称谓是不可以计算的
            [“last” + suffix]: “Zakas”,
        }

}

        console.log(person[“first name”]); // “Nicholas”
        console.log(person[“last name”]);    // “Zakas”

// ES6

##### 2. Object.is(),弥补全等(===)运算符的奇特情况判断不均等

const obj = {

        testObjectIs(){
            console.log(+0 == -0);             // true
            console.log(+0 === -0);         // true
            console.log(Object.is(+0 , -0)); // false
            console.log(NaN == NaN);         // false
            console.log(NaN === NaN);         // false
            console.log(Object.is(NaN , NaN)); // true
        }

id: 1,

##### 3.
Object.assign(),只会复制对象自我可枚举属性,忽略enumerable为false的习性

printId() {

        
> 多少个目的复制具有同名属性,排位靠后的源对象会覆盖排位靠前的

console.log(this.id)

        testObjectAssign(){
            let receiver = {};
            Object.assign(receiver,{
                type:’girl’,
                name:’superman’,
            },{
                type:’boy’,
            })
            return receiver.type + ” : ” + receiver.name; // boy :
superman
        }

}

> 对象浅复制(源对象某个属性是目的,只复制那几个目的的引用)

}

        let target = { a: { b: ‘c’, d: ‘e’ } };
        let source = { a: { b: ‘hello’ } }
        console.log(Object.assign(target, source)); // {a:
{b:’hello’}}
        // a属性被完整覆盖掉,不会获取 {a : {b:’hello’,d:’e’}} 的结果

//属性名可以流传变量。而不是字符串了

##### 3. Object.values()

const id = 5

> 只回去对象自我可遍历属性

const obj = {

        testObjectValues() { // p 的性质描述对象的 enumerable 默认是
false
            var obj = Object.create({}, { p: { value: 42 } });
            return Object.values(obj); // []
        }

[`my-${id}`]: id

> Object.values 会过滤属性名为Symbol值的特性

}

        console.log(Object.values({ [Symbol()]: 123, any: ‘abc’ }));
// [‘abc’]

console.log(obj[‘my-5’]) // 5

##### 3. Object.entries()

六、ES6新增Object.is()方法新相比

> 转换对象为真正的Map结构

Object.is(NaN, NaN) //true

        testObjectEntries(){
            let obj = { a: ‘bar’, b: 23 };
            let map = new Map(Object.entries(obj));
            console.log(map.get(‘a’)); // bar
        }

Object.is(-0, +0) //false

### 六、集合(Set、Map)
Es6
中的Set和Map主旨绪想跟Java中的Set和Map类似,Set集合成员是绝无仅有的,没有再次,Set本身是构造函数用来生成Set数据结构;Map类型是一种存储着无数键值对的不变列表,它的键名的判断是由此Object.is()方法来落到实处的(Set也是通过这一个法子来判定三个值是还是不是同样),所以
5 和字符串”5″会被判定为三种档次。

Object.is(5, ‘5’) //false

值得摘录的有以下几点:

Object.is(‘4’, ‘5’) //false

##### 1. Set

//新增Object.assign()

>
添英镑素用add()方法,删除用delete()方法,判断存在用has(),清空用clear()

//对象拼接

        testSet() {
            let set = new Set();
            set.add(5);
            set.add(‘5’);
            console.log(set.has(5)); // true
            set.delete(5);
            console.log(set.has(5)); // false
            console.log(set.size); // 1
            set.clear();
            console.log(set.has(‘5’)); // false
            console.log(set.size); // 0
         }

var fang = { ‘name’: ‘sb’ };

> 数组去重

var sz = { ‘c’: { ‘www’: 111 } }

        testArrayUniq(){
            let set = new Set([1,2,3,3,3,3,4,4,4,4,5]);
            let arr = […set];
            console.log(arr); //[ 1, 2, 3, 4, 5 ]
            return arr; //[ 1, 2, 3, 4, 5 ]
          }

Object.assign(fang, sz)

> 改变原先的Set结构

// {name: “sb”, c: {…}}c: {www:111}www: 111__proto__: Objectname:
“sb”__proto__: Object

        changeSet(){
             let set = new Set([1, 2, 3]);
             //方法二
             set = new Set([…set].map((val) => val * 2));
        
             //方法二
             set = new Set(Array.from(set, val => val * 2)); 
             return set; // [ 4, 8, 12 ]
        }

七、解构

##### 2. Map
Map结构提供了“值-值”对应,而Object结构提供了“字符串-值”对应,Map结构是一种尤其周详的Hash结构已毕

let obj = { a: 1, b: [111, 222] };

>
设置值set(),获取值get(),判断存在has(),删除delete(),清空用clear(),很多次对同样个键赋值,前边覆盖前边

const {a} = obj;

        testMap(){
              const m = new Map();
              const o = {p:’hello uct’};
        
              m.set(o,’content’);
              m.set(o,’new content’)
              console.log(m.get(o)); // new content
              console.log(m.has(o)); // true
              m.delete(o);
              console.log(m.has(o)); // false
          }

console.log(a);//1

> Map 和 对象相互转换

//在大家REACT里面平时用到props传值,那么自然用到解构这玩意儿

        //Map转为对象
        strMapToObj(strMap){//Map to Object 
            let obj = Object.create(null);
            for(let [k,v] of strMap){
                obj[k] = v;
            }
            return obj;
        }
        //对象转为Map
        objToStrMap(obj){// Object to Map
            let strMap = new Map();
            for(let k of Object.keys(obj)){
                strMap.set(k,obj[k]);
            }
            return strMap;
        }

class Parent extends React.Component {

##### 3. WeakMap
WeakMap只接受对象作为键名(Null除外)

render() {

> WeakMap 应用的突出气象就是以DOM节点作为键名的气象

const {a = 3, b = 3} = this.props

        const listener = new WeakMap();

return

        listener.set(element1,handler1);
        listener.set(element2,handler2);

{a}-{b}

}

}

ReactDOM.render(

,

document.getElementById(‘root’)

);

//在浏览器渲染1-2,默许值是3-3,不过因为传递了新的props进来,执行明白构赋值之后a和b更新了。

//对象再深也就是了

var obj = {

a: {

b: {

c: {

d: ‘藏得够深了’

}

}

}

}

var {a: {b: {c}}} = obj

console.log(c.d)

// VM739: 11藏得够深了

// undefined

//解构数组

let arr = [1, 2, 3]

//解构前2个元素

const [a, b] = arr

console.log(a, b) //1 2

//解构中间的要素

const [, b,] = arr

console.log(b) // 2

//更进一步询问数组解构

let a = ‘我是老A’;

let ary = [1, 2, 3];

[a] = ary;

console.log(a);//1重新赋值了。

//使用解构变换数组

let a = 11, b = 22;

[a, b] = [b, a];

console.log(a, b)//22 11居然变换了

//嵌套数组解构

let ary = [1, [1, 2, 3], 4];

let [a, [, b]] = ary;

console.log(a, b)//1,2

//不定元素解构多个点代表了富有因素

ary = [1, 2, 3, 4];

let […a] = ary;

console.log(a);//[1,2,3,4];

let obj = {

a: { id: 1 }, b: [22, 11]

}

const {a: {id}, b: […ary]} = obj;

console.log(id, ary);

//解构参数

function ajax(url, options) {

const {timeout = 0, jsonp = true} = options;

}

ajax(‘baidu.com’, { timeout: 1000, jsonp:false });//’baidu.com’
1000,false;

八、Map Set我们都号称集合

let set = new Set();

set.add(‘haha’);

set.add(Symbol(‘huhu’));

console.log(set);

set.has(‘huhu’)//false;

set.has(‘haha’)//true;

// set循环

for (let [value, key] of set) {

console.log(value, key)

}

set.forEach((value, key) => {

console.log(value, key)

})

// set来完毕数组去重。。。

const ary = [1, 1, 1, 3, 3, 3, 44, 55, 0,’3′, ‘3’]

let sets = new Set(ary);

console.log(sets);

// Set(6) {1, 3, 44, 55, 0, …}

let set = new Set();

set.add(1); set.add(2);

set.add(‘1’); set.add(‘2’);

console.log(Array.from(set))

//(4) [1, 2, “1”, “2”]

//经典数组去重方法

const arr = [1, 1, ‘haha’, ‘haha’, null,null]

let set = new Set(arr);

console.log(Array.from(set)) // [1, ‘haha’,null]

console.log([…set]) // [1, ‘haha’, null]

let map = new Map();

map.set(‘name’, ‘房帅中’);

map.set(‘id’, ‘130*******’);

map

// Map(2) {“name” => “房帅中”,”id” => “130***1992****” }

// size

// :

// (…)

// __proto__

// :

// Map

// [[Entries]]

// :

// Array(2)

// 0

// :

// { “name” => “房帅中” }

// 1

// :

// { “id” =>”130*******” }

// length :

// 2

// es5构造函数写法

function Person(name) {

this.name = name;

}

Person.prototype.sayName = function () {

return this.name;

}

let p1 = new Person();

console.log(p1.sayName());

//而es6引入了class类学过java的应当了解表明类的章程‘

class Person {

constructor(name) {

this.name = name//私有总体性

}

sayName() {

return this.name;

}

}

let p2 = new Person(‘房小帅啊’);

console.log(p2.sayName());//房小帅啊

//类注脚和函数声明的分别和特色

// 1、函数讲明可以被进步,类阐明无法升官。

// 2、类表明中的代码自动强行运行在严谨情势下。

//
3、类中的所有办法都是不可胜数的,而自定义类型中,可以透过Object.defineProperty()手工指定见惯司空属性。

// 4、每个类都有一个[[construct]]的方法。

// 5、只可以利用new来调用类的构造函数。

// 6、不能在类中修改类名。

//类申明格局

//声明式

class B {

constructor() { }

}

//匿名表明式

let A = class {

constructor() { }

}

//命名表明式,B可以在外表使用,而B1只可以在里边使用

let B = class B1 {

constructor() { }

}

九、创新数组的办法

亚洲必赢官网 ,Array.of();
Array.from();//Array.of()是创设一个新数组,而Array.from()是将类数组转换成数组

const a = new Array(2);

const b = new Array(’44’);

console.log(a, b)// [empty×2]length:

2__proto__: Array(0) [“44”]那般造成a的始末不正确;

//正确行使Array.of(2)

let cc = Array.of(2);

console.log(cc) //=> [2];

// Array.from()用法酱类数组转为数组

function test(a, b) {

let arr = Array.from(arguments)

console.log(arr)

}

test(1, 2) //[1, 2]

// Array.from(a,b)传入八个参数,第三个参数作为第三个参数的转换

function test(a, b) {

let arr = Array.from(arguments, value => value + 2)

console.log(arr)

}

test(1, 2) //[3, 4]

// Array.from还足以设置第多少个参数,指定this。

function test() {

return Array.from(new Set(…arguments))

}

const s = test([1, “2”, 3, 3,”2″])

console.log(s) // [1,”2″,3]

//给数组添加新格局

find(), findIndex(), fill(), copyWithin();

// find()方法

//找到符合条件的并赶回。

const arr = [1, 2, 3, 4, 5, ‘4’];

arr.find(n => typeof n === ‘string’)

//找到符合条件的index并赶回

const arr = [1, “2”, 3, 3,”2″]

console.log(arr.findIndex(n => typeof n=== “string”));//1

// fill()用新因素交替掉数组内的元素,可以指定替换下标范围

arr.fill(value, start, end);

const arr = [1, 2, 3]

console.log(arr.fill(4)) // [4, 4, 4]不指定开端和竣事,全体轮换

const arr1 = [1, 2, 3]

console.log(arr1.fill(4, 1)) // [1, 4,
4]点名开始地方,从初始地点总体互换

const arr2 = [1, 2, 3]

console.log(arr2.fill(4, 0, 2)) // [4, 4,

3]点名开头和终结地点,替换当前界定的因素

//
copyWithin()选用数组的某个下标,从该地点上马复制数组元素,默许从0早先复制,也得以指定要复制的要素范围。

arr2.copyWithin(target, start, end);

arr2.copyWithin(3, 1);

// Promise生命周期

//进行中pending完成fulfilled拒绝rejected;

//
promise被称作异步结果的占位符,他无法一向回到异步函数的实践结果,须求使用then()当获得格外回调的时候使用catch();

new Promise(function (resolve, reject) {

setTimeout(() => {

resolve(5), 0

})

}).then(v => console.log(v));

//使用模块封装代码

//数据模块

const obj = { a: 1 }

//函数模块

const sum = (a, b) => {

return a + b;

}

//类模块

class My extends React.Components {

}

//模块导出

export const obj = { a: 1 }

//函数模块

export const sum = (a, b) => {

return a + b;

}

//类模块导出

export class MyClass extendsReact.Components {

// …

}

//模块引用

import { obj, my } from ‘./**.js’;

// obj.a使用

//全体模块导入

import * as all from ‘./**.js’;

//all.obj,all.sun使用

//默许模块

function sum(a, b) {

return a + b;

}

export default sum;

//导入import sum from’./**.js’;

// react中import React from

‘react’; Vue中import sum from ‘./**.js’

//修改模块导入导出名

// 1.导出时候修改

function sum(a, b) {

return a + b

}

export { sum as add }

import { add } from ‘./xx.js’

add(1, 2);

//导入时修改

function sum(a, b) {

return a + b

}

export default sum;

import { sum as add } from ‘./xx.js’

add(1, 2);

//无绑定导入

let a = 1; const PI = ‘3.1415’;

//导入的时候

import ‘./**.js’;

console.log(a, PI);

        element1.addEventListener(‘click’,listener.get(element1),false);
        element2.addEventListener(‘click’,listener.get(element2),false);

        //一旦DOM对象消失,与它绑定的监听函数也会自行消失

> 安顿私有属性

        const _counter = new WeakMap();
        const _action = new WeakMap();
        
        class Countdown {
            constructor(counter, action) {
                _counter.set(this, counter);//weakmap的私家属性
                _action.set(this, action);  //weakmap的个人属性
            }
            dec() {
                let counter = _counter.get(this);
                if (counter < 1) return;
                counter–;
                console.log(counter);
                _counter.set(this, counter);
                if (counter === 0) {
                    _action.get(this)();
                }
            }
        }
        
        export default Countdown;

### 结语
*自然认为没有要求写这几个笔记,可是,看和写真的是一遍事。书中的例子大都是抽象化的,也就是为了让我们看起来直观,去掉了上下文,有些还有错。自己出手写的话(运用实例),映像会丰硕深入,在真正开销环境中会想到去用它。笔记的下篇已经在写了,相对上篇,我更期望下篇,NSL…*

### 参考链接

[ECMAScript 6 入门]()

[UNDERSTANDING ES6
英文原版]()

网站地图xml地图