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  -o  dist/index.js

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

"bulid":"babel src/index.js  -o  dist/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(最终长度,'填补用的字符')

我们想把 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=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=  new  Object(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
class  Person{}  class  Student  extends  Person{  }

三. 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} 
方式二:  export  var num=1 导出方法:  export  function  func1(){} 
导出类:  export  class  Person{} 
匿名导出: 只能有一个 export  default  function  (){} 引用时自己给它起名字 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)
    }
  )
}

function  fun2(){
  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 function  fun2(){
  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);