Menu

有关ES6常用语法,前端简洁并实用的工具类函数封装



5.promise

promise是一种封装未来值的易于复用的异步任务管理机制,主要解决地狱回调和控制异步的顺序

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

2.数组

id: id

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])
        }
        }
    }

console.log(s) // 15

6.2 只能为数字或字母

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

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

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
  })
}

const obj = {

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

2018/03/06 · JavaScript
· 函数

原文出处: 火狼   

let a = `1234

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)
        })
    }

}

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

因为存在输入多个编号,以英文逗号分隔的情况
定义一个正则:let reg=/^[0-9a-zA-Z,]*$/g

}

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(s(44))//44;

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
    }
  })
}

a

3.对象

}

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 结束循环和函数.

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

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
  }
})

})

1.日期

日期在后台管理系统还是用的很多的,一般是作为数据存贮和管理的一个维度,所以就会涉及到很多对日期的处理

//ES6

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;
        }
    }

render() {

前言

本文主要从日期,数组,对象,axios,promise和字符判断这几个方面讲工作中常用的一些函数进行了封装,确实可以在项目中直接引用,提高开发效率.

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

6.文本框的判断

}

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
  })
}

// ES6

4.axios

//ES5的写法

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(()=>{//错误执行这个
 
    })
})
}

一、首先我们来解释一下什么是ES?

结束

很开心你还能看到这里,这些类可能你现在用不到,但可以先收藏着.
大家可以一起交流,下次项目开发直接拿过去用,现在3月项目比较赶,这个真的可以提高开发效率哦!祝大家新年快乐哒.

1 赞 收藏
评论

美高梅开户 1

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

2.2数组去重set方法

1.常见利用循环和indexOf(ES5的数组方法,可以返回值在数组中第一次出现的位置)这里就不再详写,这里介绍一种利用ES6的set实现去重.

2.set是新怎数据结构,似于数组,但它的一大特性就是所有元素都是唯一的.

3.set常见操作
大家可以参照下面这个:新增数据结构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的方法

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

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]
})
}

//56

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位’)
     }
}

const a = (id) => ({

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

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

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方法相同
        })
    }      

}

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属性来改变数据的

//箭头函数给数组排序

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

//箭头函数和普通函数的区别是:

//1234

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

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

let a = ‘123\n456’

// 5、不能使用new

console.log(a) // 50

}

})

id: 1,

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

class Parent extends React.Component {

id

//在我们REACT里面经常用到props传值,那么肯定用到解构这玩意儿

}

console.log(a) // 50

test()

let a = 1, b = 9;

function add(…ary) {

}

//
1、箭头函数没有this,函数内部的this来自于父级最近的非箭头函数,并且不能改变this的指向。

console.log(b)// hello world;

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

//箭头函数还可以输出对象,在react的action中就推荐这种写法。

}

四、字符串操作

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

type: “TYPE”,

ES的全称是ECMAScript。1996 11

二、什么是ES6?为什么这么火?

// let和const都是只在自己模块作用域内有效{}内

return {

//ES6的写法

// num = 6很显然是默认参数;若传值则用传递的参数否则就用6;

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

//字符串改版之使用模板字面量反撇号“。在实际开发中,这是经常都要用到的方法。

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

,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语能够成为国际标准。

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

56`;

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

console.log(’22’);

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

Object.is(NaN, NaN) //true

//
**相同点:**const和let都是在当前块内有效,执行到块外会被销毁,也不存在变量提升(TDZ),不能重复声明。

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

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

}

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

printId: function () {

setTimeout(() => {

//箭头函数

printId() {

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

三、ES6以及ES7+增加了哪些新特性?有哪些好用的语法?实例:

//展开运算符的作用是解构数组,然后将每个数组元素作为函数参数。

const obj = {

const {a} = obj;

// 6、没有原型

// 3、箭头函数没有arguments

function test() {

}//ES5写法

let a = ‘我是字符串’;

//ES5字符串换行

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

console.log(a)

console.log(this.id)

// const和let的异同点

}

}

function b(num = 6, callback) {

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

return

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

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

// 123

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

// ES6

//有意思的字符串操作(目前没发现有啥用)

// 456

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

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

function a(id) {

}, 0)

//检测是否在头部

if (true) {

console.log(ary)

let a = 1

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

我们之前声明一个变量需要var,为什么要增加let、const;再去声明变量呢?//关于var、let、const关键字特性和使用方法;

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

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

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

console.log(a);//1

// ES6新特性检测是否包含(如果想看在字符串的位数还是使用indexOf());

id: 1,

//检测是否在最后

//对象拼接

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

}, 0)

//属性初始值简写法

let t = ‘abcdefg’;

};

console.log(a)

//ES5

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

// ES5

setTimeout(() => {

};

// 7、不支持重复的命名参数。

{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);

Object.assign(fang, sz)

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

let b = `${a} world`

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

//新增Object.assign()

ES6语法跟babel:

//对象简写法

console.log(a)

2009年开始ECMAScript
5.1版本发布后,其实就开始定制6.0版本了。因为这个版本引入的语法功能太多,且制定过程当中,还有很多组织和个断提交新功能。事情很快就变得清楚,可能在个版本包括所有将要引的功能。常规的做法是先发布6.0版,过段时间再发6.1版,然后是6.2版、6.3版等等;

console.log(this.id)

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

callback(num * num)

const arr = [5, 10]

//将var改成let之后

}

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

//展开运算符(…)

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

const obj = {

ECMAScript 6.0(以下简称ES6)是JavaScript语的下代标准,已经在2015
6正式发布。它的标,是使得JavaScript语可以来编写复杂的型应程序,成为企业级开发语。

let a = ‘hello’

五、es6函数

//不定参数使用…

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

const s = a => a;

}

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

// 2、箭头函数没有super

let a = Math.max(…arr)

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

七、解构

const id = 5

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

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图