澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站web前端中一些ES6的小技巧,

2019-07-07 作者:澳门新萄京赌场网址   |   浏览(91)

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

2018/03/06 · JavaScript · 函数

原文出处: 火狼   

ES6语法跟babel:

澳门新萄京官方网站 1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lcr</title>

前言

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

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

### 前言
*这两本书应该是目前ES6相关的比较好的了,网上有电子版本(文末有链接)。不过我买了书看,哈哈。这两篇摘录笔记分为上下两部分,本文是上半部分(1-6章),摘录了两本书里一些比较有用的知识点。*

EcmaScript 2015 (ES6) 已经出现了很多年了,我们可以使用它的一些新特性。

1:引入的改变:
script标签的type属性的值是module(或者traceur),而不是text/javascript
<script type="module"> < /script>

1.日期

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

ES的全称是ECMAScript。1996 11

### 目录

1.设置必须的函数参数

2:let 块级变量
if(true){var a = 1; let b = 2; }
console.log(a);// ok
console.log(b);// 报错:ReferenceError: b is not defined

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(/bdb/g, '0$&').replace(new RegExp('/','gm'),'-') }

1
2
3
export const dateReurn1=(date1)=>{
    date1.toLocaleString("en-US", { hour12: false }).replace(/bdb/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 提供了 默认的参数值,可以让你在函数的参数中指定默认值当参数没有传递其值的时候。

3:const 命令
const 声明的是常量,一旦声明,值将是不可变的。
const PI = 3.1415;
//PI = 3; 报错:TypeError: Assignment to constant variable.
//const PI = 3.1; 报错:const 不可重复声明

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.

const 不能变量提升(必须先声明后使用)
if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}

2.数组

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

块级声明用于声明在指定块级作用域之外无法访问的变量。块级作用域存在于:1、函数内部;2、块中(字符'{'和'}'之间的区域)。Es6 中存在的两种变量声明就是Let和Const声明。

在这个例子中,我们对函数 add 的参数 a 和 b 设置了一个默认值,这个默认值为一个函数。当函数 add 被执行时,且参数 a 和 b 有一个没有传递值的时候,这个 required 函数就会执行,我们就会得到一个报错 Error: Missing parameter.

const 指向变量所在的地址,对变量进行属性设置是可行的(未改变变量地址),如果想完全不可变化(包括属性),那么可以使用冻结。
const C1 = {};
C1.a = 1;
console.log(C1.a); // 1
C1 = {}; // 报错 重新赋值,地址改变

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

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

值得摘录的有以下六点:

2.非常强力的"reduce"

//冻结对象,此时前面用不用const都是一个效果
const C2 = Object.freeze({});
C2.a = 1; //Error,对象不可扩展
console.log(C2.a);

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的方法

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

##### 1. 不能重复声明

Array 的方法 reduce 是一个有非常多用处的函数。 它一个非常具有代表性的作用是将一个数组转换成一个值。但是你可以用它来做更多的事。

4:String 新方法
4.1
includes(): 返回布尔值,表示是否找到了参数字符串。
startsWith(): 返回布尔值,表示参数字符串是否在源字符串的头部。
endsWith(): 返回布尔值,表示参数字符串是否在源字符串的尾部。
var str = "Hello world!";
str.startsWith("Hello") // true
str.endsWith("!") // true
str.includes("o") // true

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: 这些小技巧的的初始值都是一个数组或者一个对象而不是一个像字符串之类的简单的值

这三个方法都支持第二个参数,表示开始搜索的位置。
var str = "Hello world!";
str.startsWith("world", 6) // true
str.endsWith("Hello", 5) // true
str.includes("Hello", 6) // 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方法相同
        })
    }      

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

##### 2. Const常量声明必须进行初始化

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

4.2 repeat()原字符串重复
var str1 = "hello";
str1.repeat(2) // "hellohello"

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。但是这样的话你需要遍历这个数组两次!

4.3 String.raw() 原生的String对象:
let raw = String.raw`Not a newline: n`;
console.log(raw === 'Not a newline: \n'); // true

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]

4.4 模板字符串,要用``符号包括;模板字符串提供了3个有意思的特性。
4.4.1 模板字符中,支持字符串插值:
let first = 'hubwiz';
let last = '汇智网';
alert(`Hello ${first} ${last}!`);//Hello hubwiz 汇智网!

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 方法做到同时有让元素的值翻倍,然后过滤的。

4.4.2 模板字符串可以包含多行:
let multiLine = `
This is
a string
with multiple
lines`;
console.log(multiLine); //This is a string with multiple lines

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"

4.4.3 标签模板
var a = 5;
var b = 10;
tag`Hello ${ a b } world ${ a * b }`;

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的代码。在这里我添加一下这部分代码:

tag,它是一个函数。整个表达式的返回值,就是tag函数处理模板字符串后的返回值

4.axios

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

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

2.2.1 使用"reduce"代替"map"

tag函数所有参数的实际值如下。
第一个参数:['Hello ', ' world ']
第二个参数: 15
第三个参数:50

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]

tag函数实际上以下面的形式调用:tag(['Hello ', ' world '], 15, 50)

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"

7:Number 新方法:
Number.isFinite()用来检查一个数值是否非无穷(infinity)。
Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite("foo"); // false
Number.isFinite("15"); // false
Number.isFinite(true); // false

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]

Number.isNaN()用来检查一个值是否为NaN。
Number.isNaN(NaN); // true
Number.isNaN(15); // false
Number.isNaN("15"); // false
Number.isNaN(true); // false

5.promise

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

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

### 二、字符串与正则表达式
Es6加强了对Unicode的支持,并且扩展了字符串对象。正则表达式则增加了修饰符和属性。

2.3 使用"redece"来判断括号是否匹配

Number.isInteger()用来判断一个值是否为整数。3和3.0被视为同一个值。
Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false

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

8:Math 新方法
Math.trunc():去除一个数的小数部分,返回整数部分。对于空值和无法截取整数的值,返回NaN
Math.trunc(4.1) // 4
Math.trunc(-4.1) // -4
Math.trunc('ddd') // NaN

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 这个函数功能的强大。给你一串字符串,你想要知道这串字符串的括号是否是匹配的。

Math.sign():判断一个数到底是正数、负数、还是零。返回五种值:如下
Math.sign(-5) // -1
Math.sign(5) // 1
Math.sign(0) // 0
Math.sign(-0) // -0
Math.sign('hubwiz'); // NaN

6.文本框的判断

setTimeout(() => {

    var text = "

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站web前端中一些ES6的小技巧,

关键词: