JS及ES6语法拾遗 JS及ES6语法拾遗

经典!!!!!! 阮一峰版本的ES6参考书

ES6 入门教程
推荐一个ES6转ES5的插件

cnpm install babel-cli -g cnpm install --save-dev babel-preset-es2015 babel-cli cnpm install babel-plugin-transform-regenerator --save-dev cnpm install regenerator-transform --save-dev

用法:
根目录建立文件: .babelrc
写入内容:

{ "presets":[ "es2015" ], "plugins":[] }

babel src/index.js-odist/index.js

我们可以简写这条命令
在package.json中在scripts中添加一条

"bulid":"babel src/index.js-odist/index.js"

此时运行可以

npm run bulid

此时,我们写的ES6会转化为ES5
小贴士:

弃用var,用let 和 const
判断是否是数字: Number.isFinite(变量),返回布尔
判断是否是NaN: Number.isNaN(变量),返回布尔
判断是否是整数: Number.isInteger(变量),返回布尔
最大安全整数 Number.MAX_SAFE_INTEGER
最小安全整数 Number.MIN_SAFE_INTEGER

第一部分总体一.废弃var,用let和const代替
为什么弃用var,因为var是全局声明, 没有块级作用域,看看下面的问题 i完全乱了

文章图片
image 以前,解决这个问题,只能用闭包

文章图片
image 在ES6以后,我们弃用var 改为let 就解决了作用域问题
定义变量 let
定义常量 const

定义时必须赋值,赋值后不可修改
如果定义的是对象,对象不能修改指向,但可以改变内部的属性
在let和const 可以选择时, 尽量选const

第二部分字符串相关一. includes startsWith endsWith字符串中包含某关键字

includes 字符串中包含某关键字
startsWith 字符串以xxx开头否?
endsWith 字符串以xxx结尾否?

str.includes(keywords)//返回true或者false str.startsWith(keywords)//返回true或者false str.endsWith(keywords)//返回true或者false

二. replace替换文本
字符串的replace方法除了能传入字符串,也可以传入正则

str='我是世界上最纯洁的人!纯洁到你想哭' str=str.replace(/纯洁/g,'邪恶')

三.padStart 填充字符串
a.padStart(最终长度,'填补用的字符')
【JS及ES6语法拾遗】我们想把 8 填充为 08

var a='8' a=a.padStart(2,'0')

四. 保留N位小数

value.toFixed(2)//返回字符串

五.支持换行的文本
用``包裹 (键盘上的~键)

` 这是个待办项这是个待办项 `

六. 字符串模板
必须与 ``符号一起用,${}

str=`正常字符串${变量}正常字符串 ${a+b}`

七. 字符串重复

let str="anny|".repeat(3)//anny|anny|anny|

八. 正则验证手机号正则:

function checkPhone(){ var phone = document.getElementById('phone').value; if(!(/^1[3456789]\d{9}$/.test(phone))){ alert("手机号码有误，请重填"); return false; } }

固话正则:

function checkTel(){ var tel = document.getElementById('tel').value; if(!/^($\d{3,4}$|\d{3,4}-|\s)?\d{7,14}$/.test(tel)){ alert('固定电话有误，请重填'); return false; } }

身份证正则

//身份证正则表达式(15位) isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/; //身份证正则表达式(18位) isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/; 身份证正则合并：(^\d{15}$)|(^\d{17}([0-9]|X)$)

邮箱正则

email.onchange = function(){ var email = this.value; var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/ if(reg.test(email)){ alert("邮箱格式正确"); }else{ alert("邮箱格式不正确"); } }

第三部分数组相关一. find方法
find接收一个方法作为参数,方法内部返回一个条件
符合该条件的元素会作为find的返回值
如果遍历结束还没有符合的,返回undefined

var user = [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' }, { id: 4, name: '赵六' } ]var result = user.find((item) => { return item.id==4 })console.log(result);

文章图片
image 二. findindex
和find类似,只不过返回的是index

var user = [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' }, { id: 4, name: '赵六' } ]var result =user.findIndex((item)=>{ return item.id==4 })console.log(result);

文章图片
image 三. 给数组指定位置删除元素

const arr=['a','b','c','d','e'] arr.splice(2,1) console.log(arr); //["a", "b", "d", "e"]

四. splice花式操作数组的元素

//splice 删除/插入/替换元素 arr.splice(2,1) //从2开始删除1个 arr.splice(2,0,'f') //从2之后插入元素 arr.splice(2,1,'f') //替换2之后的元素(从2删除1个元素,再添加一个元素)

五. filter过滤
filtter要求传入一个回调函数, 函数中必须返回一个布尔值,filtter会使用这个函数过滤数组
当返回true时,将数组添加到结果数组中, false时丢弃

let arr =[1,2,3,4,5,6] arr.filter(item =>{return item >3});

六. map 遍历处理
map 要求传入一个回调函数, map会使用这个函数遍历数组,并返回新的数组(如果有return)

let arr =[1,2,3,4,5,6] arr.map(item =>{return item *3});

文章图片
image 七. reduce 对数组中所有内容进行汇总
reduce 要求传入一个回调函数, 和一个初始化index
回调函数必须有两个参数:

preValue 上次遍历返回的值
item 此次的值

reduce 会使用这个函数遍历数组,并返回处理结果,并将结果传给下一次遍历,直至最后一项处理完成,返回preValue

let arr =[1,2,3,4,5,6] arr.reduce((preValue, item)=>{return preValue + item },0)

如上: preValue第一次遍历时为初始值0,第一次遍历中,它加了第一项的值,并把这个值传入了第二次遍历中,第二次遍历中的preValue=https://www.it610.com/article/1,再加上本次的item值2,得到preValue=3,再传入下一次遍历.遍历完成后,把最终的preValue返回

文章图片
八. json数组格式

let json1={ "0":'aaa', "1":'bbb', "2":'ccc', length:3 //必须有这一句 }let arr=Array.from(json1)//将json数组转为数组

九. 数组of构造方法

let arr=Array.of(1,2,3,4,1,2,'hola')

十 fill填充方法

arr.fill("abc",1,3)//从第一个到第三个替换成abc

十一. 花式for循环
普通用法:

for (let index = 0; index < array.length; index++) { const element = array[index]; }

in式用法: in传入的是index

for (let index in this.movies) { console.log(movie); }

of 式用法: of传入的是数组中的对象

for (let movie of this.movies) { console.log(movie); }

of 方法还可以

for (let [index,movie] of movies.entries()) { console.log(movie); }

第四部分类和对象相关一. 对象字面量增强写法
对象字面量写法:

把 const obj=newObject(key:value) 写成 const obj={key:value}

如何增强??

把键名和值名相同的键值对写成键把值是个方法,而且方法是匿名的键值对写成键(){}{ name:name, eat:function(){}} 增强写法:{ name,eat(){}}

二 .类的继承 //extends

类的声明: class Coder{ } 类的使用: let me=new Coder; 如果类中有两个方法,中间不要加, 号 class Coder { eat(food) { console.log(`eating ${food}`); } run() { console.log('running'); } } 类的参数//相当于用constructor来做构造方法 class Coder { constructor(a,b){ this.a=a; this.b=b; } add(){ console.log(this.a+this.b); } } let me=new Coder(1,2); me.add() 类的继承//extends classPerson{}classStudentextendsPerson{}

三. key值构建
当我们不知道key时也可以构建对象键值对

let key='age' let p1={ [key]:18 }

第五部分函数和方法一.箭头函数
我们可以把
function (){}简写成

(参数)=>{语句}//如果有1个参数,可以省略() item =>{语句}//如果语句只有一句,可以省略{} ,同时自动return item=> item*item

箭头函数this
箭头函数中的this引用的是最近作用域中的this
它会想外层作用域一层层的查找,直到在某一层找到this

文章图片
image 二. 值为同名方法的属性的简写
func1:function (){} 可以简写成 func1(){}
三. 可变参数(收集参数)
如果我们不知道会传入多少个参数,那么,我们可以使用收集参数来将传入的参数收集到一个数组中

function func1(...args){}

比如; 我们想传入一些数字,并求和,但不知道多少个,可以这样做:

function test(...nums) { let sum=0; nums.forEach(num => { sum +=num }); console.log(sum); } test(1,2,3,4,5,6)//21

这就是为什么我们写push时这样提示我们

文章图片
四. 收集参数同时有固定参数
当参数不确定时

function test(first,...agrs) {}

五. 抛出异常

function test(a) { if(a===0) throw Error("a is 0!!!!") return a }

六. 严谨模式

function test(a,b) { "use strict" //c=a+b; //错!必须声明c let c=a+b; return c }

严格模式主要有以下限制：

变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee以及arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface

第六部分模块化操作一. commonJS的导入导出
导入:

const{Menu,BrowserWindow}=require('electron')

等价于

const Menu=require('electron').Menu const BrowserWindow=require('electron').BrowserWindow

二. ES6的导入导出
导入:

导入:import{flag,sum,Person}from"./aaa.js" 全部导入 import*as bbb from"./aaa.js"//相当于取得了对象 bbb

如果在html中导入

type是module才行

导出: (暴露)

方式一:export{flag, sum} 方式二:exportvar num=1 导出方法:exportfunctionfunc1(){} 导出类:exportclassPerson{} 匿名导出: 只能有一个 exportdefaultfunction(){} 引用时自己给它起名字 import aad form "./aaa.js"//不用大括号了

第七部分解构赋值法一. 数组的结构赋值

let [a,b,c]=[1,2,3]

相当于

let a=1 let b=2 let c=3

解构赋值法可以有默认值

let [a,b='hola']=['haha']//a='haha'b='hola'

二. 对象的解构赋值法

let {name,age} = { name:"haha", age:18 }

注意:先赋值再解构必须在解构时加()

let name let age ({name,age}={name:'lili',age:18})

第八部分异步一. promise处理异步

new Promise((resolved,rejected)=>{ //里面写一个异步方法,并在里面写一个resolved()或者是rejected(); resolved(); //或者是rejected(); }).then(data=>{ //这里写resolved()的处理; }, error=>{ //这里写rejected()的处理; })

//传入一个函数,这个函数有两个参数:resolved,rejected,
//resolved,rejected又是函数
//当异步代码执行到 resolved()或者是rejected(); 时,就会跳转到then执行对应的函数

文章图片
当只有想处理resolved时,可以简写:

new Promise.resolved(默认就传入了data,你现在可以在这里处理data) .then(data=>{ //这里写resolved()的处理; })

promise可以使用链式调用,来摆脱回调地狱

文章图片

promise的all方法使用

如果需要执行多个异步,都拿到结果时才执行,可以使用 promise.all([请求1,请求2]) .then(results=>{})

results是结果组成的数组
二. async
如果,一个函数用async修饰,它return出来的就会是一个promise
例如:

async function test1() { return "test" } console.log(test1());

文章图片
三. await必须写在async中

async function test1() {//因为里面返回的本身就是个promise,所以不用async修饰也可以 return new Promise(resolve => { setTimeout(() => { resolve('hola')//异步执行后,调用resolve()改变异步状态 }, 3000); }) } async function test2() { const v = await test1(); //等待异步方法test1执行完成把值传给v console.log(v); } test2(); //执行时,会延时3秒打印 ho'la

如果不用aysnc/await, 像这样:

//!!!!!!错误的示例!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! function fun1(a,b){ return new Promise( function (resolve, reject) { setInterval(()=>{ if(a-b>0){ resolve(a-b) }else{ reject(null) } },3000) } ) }functionfun2(){ let c = fun1(5,2) console.log(c); }fun2()

则 fun2会立即执行,结果返回一个正在的Promise

文章图片
四. 如果只用Promise, 那异步过程只在Promise里, 如果想执行Promise后返回结果, 那就用 aysnc/await 调用Promise

function fun1(a,b){ return new Promise( function (resolve, reject) { setInterval(()=>{ if(a-b>0){ resolve(a-b) }else{ reject(null) } },3000) } ) }async functionfun2(){ let c = await fun1(5,2) console.log(c); }fun2()

第九部分 set set是不可重复列表

添加元素 set1.add(值)删除元素 set1.delete(值)删除全部 set1.clear()查找 set1.has(值)set中的值的个数 set1.size//注意是属性

可以放对象的set --WeakSet

let weakObj=new WeakSet() //必须用new let obj1={a:"hola"} weakObj.add(obj1)//必须用add添加

第十部分 Map数据结构 Map是一种类似于json的数据类型,但是性能必json好,也更灵活.key值可以是任意值,value也可以是任意值

let obj1={a:"hola"} let map1=new Map() map1.set("age",18) map1.set(obj1,"这也行???") console.log(map1);

文章图片

增 map1.set(键,值)删 map1.delete(键) 全删 map1.clear()取值 map1.get(键)//返回值查 map1.has(键)//返回布尔查map长度 map1.size//注意是属性

第十一部分 proxy代理预处理函数 Proxy(被预处理的对象,预处理钩子对象)

let obj1 = { a: "hola", add: function (value) { return value + 100 } }let pro1 = new Proxy(obj1, { get: function (target, key, property) { console.log("进入了get"); return target[key]; }, set(target, key, value, receiver) { console.log("进入了set"); return target[key]=value; } }) pro1.a = 'aaa'; console.log(pro1.a);