ES6

程序员文章站 2022-05-20 20:08:44

...

ES 6

参考文档：[https://es6.ruanyifeng.com]

let 和 const

var 的问题
- 可以重复声明，没有报错和警告
- 无法限制修改
- 没有块级作用域， { }
let 和 const
- 不能重复声明
- 都是块级作用域, { } 块内声明的，块外无效
- let 是变量，可以修改
- const 是常量，不能修改

块级作用域举例

原来用 var 的方式，结果弹出的都是 3

var aBtn = document.getElementsByTagName('input')
for (var i=0; i < aBtn.length; i++) {
	aBtn[i].onclick = function () {
		alert(i)
        }
}

或者将变量封装到函数里，限制作用域，但比较麻烦（闭包）

for (var i = 0; i < aBtn.length; i++) {
	(function (i) {
		aBtn[i].onclick = function () {
			alert(i)
        }
    })(i)
}

用 let 最简单，直接 var 改 let，解决作用域问题

for (let i = 0; i < aBtn.length; i++) {
	aBtn[i].onclick = function () {
		alert(i)
	}
}

函数-箭头函数

箭头函数，就是函数的简写
- 如果只有一个参数，() 可以省
- 如果只有一个return，{}可以省

// 普通函数
function name() {

}
// 箭头函数，去掉 function， 加上 =>
() => {

}

let show1 = function () {
    console.log('abc')
}

let show2 = () => {
    console.log('abc')
}

show1() // 调用函数
show2()

let show4 = function (a) {
    return a*2
}

let show5 = a => a * 2  //简洁

console.log(show4(10))
console.log(show5(10))

函数-参数

参数扩展／展开 ...args
- 收集剩余的参数，必须当到最后一个参数位置
- 展开数组，简写，效果和直接把数组的内容写在这儿一样
默认参数

function show(a, b, ...args) {
    console.log(a)
    console.log(b)
    console.log(args)
}
console.log(show(1, 2, 3, 4, 5))//a=1,b=2,args=[3,4,5]

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3)//[1,2,3,4,5,6]

function show2(a, b=5, c=8) {
    console.log(a, b, c)
}
show2(88, 12)

解构赋值

let [a, b, c] = [1, 2, 3]
console.log(a, b, c)

let {x, y, z} = {x: 1, y: 2, z: 3}
console.log(x, y, z)

let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8, 'str']
console.log(json, arr, num, str)

解构赋值
- 左右两个边结构必须一样
- 右边必须是个东西
- 声明和赋值赋值不能分开，必须在一句话里

数组API

map

映射一个对一个

let score = [18, 86, 88, 24]
let result = score.map(item => item >= 60 ? '及格' : '不及格')
console.log(result)

// 结果
[ '不及格', '及格', '及格', '不及格' ]

reduce

汇总一堆出来一个
用于比如，算个总数，算个平均

var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
    //tmp 上次结果，item当前数，index次数1开始
    console.log(tmp, item, index)
    return tmp + item
})
console.log(result)

var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
    if (index != arr.length - 1) { // 不是最后一次
        return tmp + item
    } else {
        return (tmp + item)/arr.length
    }
})
console.log(result)  // 平均值

filter

过滤器保留为true的

var arr = [12, 4, 8, 9]
var result = arr.filter(item => (item % 3 === 0) ? true : false)
console.log(result)
var result = arr.filter(item => item % 3 === 0)
console.log(result)

var arr = [
    { title: '苹果', price: 10 },
    { title: '西瓜', price: 20 },
]
var result = arr.filter(json => json.price >= 20)
console.log(result)

forEach

循环迭代

var arr = [12, 4, 8, 9]
var result = arr.forEach(item => console.log(item))
var result = arr.forEach((item, index)=>console.log(item, index))

find

是一个数组方法，接受一个函数作为参数,返回值为符合函数条件的遍历项

var arr = [1,2,3,4,5]
var a=arr.find(function (item){
    return item=3
})// => a = 3

findIndex

是一个数组方法，接受一个函数作为参数,返回值为符合函数条件的遍历项的下标

var arr = [1,2,3,4,5]
var a=arr.findIndex(function (item){
    return item=3
})// => a = 2

字符串

API

startsWith
endsWith

var url = 'http://qq.com'
console.log(url.startsWith('http'))
console.log(url.endsWith('com'))
// 都是 true

字符串模版

使用反引号，${变量}
支持换行

let a = 12
let str1 = `asdf${a}`
console.log(str1)//asdf12

let title = '标题'
let content = '内容'
let str = `<div>
<h1>${title}</h1>
<p>${content}</p>
`
console.log(str)
//结果
<div>
<h1>标题</h1>
<p>内容</p>

面向对象

原来写法
- 类和构造函数一样
- 属性和方法分开写的

// 老版本
function User(name, pass) {
    this.name = name
    this.pass = pass
}

User.prototype.showName = function () {
    console.log(this.name)
}
User.prototype.showPass = function () {
    console.log(this.pass)
}

var u1 = new User('able', '1233')
u1.showName()
u1.showPass()

// 老版本继承
function VipUser(name, pass, level) {
    User.call(this, name, pass)
    this.level = level
}
VipUser.prototype = new User()
VipUser.prototype.constructor = VipUser
VipUser.prototype.showLevel = function () {
    console.log(this.level)
}

var v1 = new VipUser('blue', '1234', 3)
v1.showName()
v1.showLevel()

新版面向对象
- 有了 class 关键字、构造器
- class 里面直接加方法
- extends继承，super 超类==父类

class User {
    constructor(name, pass) {
        this.name = name
        this.pass = pass
    }

    showName() {
        console.log(this.name)
    }
    showPass() {
        console.log(this.pass)
    }
}

var u1 = new User('able2', '111')
u1.showName()
u1.showPass()

// 继承
class VipUser extends User {
    constructor(name, pass, level) {
        super(name, pass)
        this.level = level
    }
    showLevel(){
        console.log(this.level)
    }
}

v1 = new VipUser('blue', '123', 3)
v1.showLevel()

模块系统

导出（export）

//text.js
//变量
export let a=1;
//函数
export function show(){
    ......
}
//类
export calss Person{
    .......
}
//默认成员
export default

导入

import {a} from './test'			//引入a变量
import * as model from './test'     //引入所有成员
import model from './test'          //引入default成员
import {a,b as name} from './test'
//只引入，不使用
import 'xxx'
//异步引入
let p=import('./test')

webpack编译

promise

回调地狱

ES6

当执行多个异步函数，且希望异步函数结果按照顺序输出时，就会形成如图所示的回调地狱

promise含义

promise简单来说就是一个容器，容器中存放着一个异步任务
promise对象有三个状态pending（进行中）、resolved（已成功）和rejected（已失败）
状态改变只有两种可能：pending变为resolved，pending变为rejected，状态改变后就凝固了，不会再变了

promise基本用法

创造Promise实例

var p1 = new Promise(function (resolve, reject) {
  fs.readFile('./data/a.txt', 'utf8', function (err, data) {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
})
var p2 = new Promise(function (resolve, reject) {
  fs.readFile('./data/a.txt', 'utf8', function (err, data) {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
})

then方法指定回调函数

p1
	.then(function(data){
    	console.log(data)
    	return p2
	},function(err){
      	console.log(err)
  	})
      .then(function(data){
      	console.log(data)
  	})
//then方法可传入两个参数
//第一个参数 promise实例对象异步函数调用成功时的resolve(data)
//第二个参数 promise实例对象异步函数调用失败时的reject(err)
//第一个参数函数 返回值为一个promise对象时，下一个then方法将执行该对象

jQuery中的promise

$.get([地址1])
  .then(function (res) {
    console.log(res)
    return $.get([地址2])
  })
  .then(function (res) {
    console.log(res)
  })

Mongoose所有API都支持promise

Student.findOne({name:'zs'})
    .then(function(data){
    	console.log(data)
    	return new Student({name:'ls'}).save()
	})
    .then(function(ret){
    
	})

Promise.all(promiseArray)方法

将多个Promise对象实例包装，生成并返回一个新的Promise实例
promise数组中所有的promise实例都变为resolve的时候，该方法才会返回
并将所有结果传递results数组中
promise数组中任何一个promise为reject的话，则整个Promise.all调用会立即终止，并返回一个reject的新的promise对象

var p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    console.log(results);  // [1, 2, 3]
});

Promise.race([p1, p2, p3])
- Promse.race就是赛跑的意思
- 哪个结果获得的快，就返回那个结果
- 不管结果本身是成功状态还是失败状态

generator生成器函数

generator 生成器函数
- 普通函数，一路到底
- generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权
- yield 有放弃、退让、退位的意思
- 需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步
- generator函数前面加一个 * 两边可以有空格，或靠近函数或function
- 背后实际生成多个小函数，实现走走停停

function show() {
    console.log('a')
    console.log('b')
}
show() // 普通函数

function *show2() {
    console.log('1')
    yield
    console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最后了，没有结果

generator-yield

yield
- 既可传参，又可以返回
- 第一个next()传参无效，只用来启动
如果函数前漏掉 *
- 就是普通函数
- 如果有yield会报错， ReferenceError: yield is not defined
- yield 只能在Generator函数内部使用

function * show() {
    console.log('1')
    var a = yield
    console.log('2')
    console.log(a)
}
// yield 传参
var gen = show()
gen.next() // 1
gen.next() // 2 和 undefined 因为没有传参，yield没有返回值
var gen = show()
gen.next(10) // 1 第一次执行到yield，但没有执行赋值
gen.next(20) // 2 和 20

function* show2() {
    console.log('1')
    yield 10
    console.log('2')
}
// yield 返回
var gen = show2()
var res1 = gen.next()
console.log(res1) // { value: 10, done: false }
var res2 = gen.next()
console.log(res2)
// { value: undefined, done: true } 最后的value需要return返回

generator-实例

Promise 适合一次读一组
generator 适合逻辑性的

// 带逻辑-generator
runner(function * () {
    let userData = yield $.ajax({url: 'getUserData'})

    if (userData.type == 'VIP') {
        let items = yield $.ajax({url: 'getVIPItems'})
    } else {
        let items = yield $.ajax({url: 'getItems'})
    }
})

// yield 实例，用同步方式写异步
server.use(function * () {
    let data = yield db.query(`select * from user_table`)
    this.body = data
})

ES7 预览

数组
- arr.includes() 数组是否包含某个东西
- 数组的 arr.keys(), arr,entries()
- for … in 遍历数组下标 key
- for … of 遍历数组值 value, 不能用于json

let arr = ['a', 'b', 'c']
console.log(arr.includes(1))

for (let i in arr) {
    console.log(i) // 循环的时下标 key
}

for (let i of arr) {
    console.log(i) // 循环的是值 value
}
for (let i of arr.keys()) {
    console.log('>'+i)
}
for (let [key, value] of arr.entries()) {
    console.log('>' + key + value)
}

let json = { a: 12, b: 5, c: 7 }
for (let i in json) {
    console.log(i)
}

字符串
- padStart()/padEnd() 指定宽度，不够就补空格或指定字符

console.log('=' + 'abcd'.padStart(6, '0') + '=')
console.log('=' + 'abcd'.padEnd(6, '0') + '=')
=00abcd=
=abcd00=

容忍度
- [1, 2, 3,] 老版数组最后不能有逗号，新的可以有
- 函数参数最后多的逗号也可以

async await

和 generator yield 类似
generator 不可以写成箭头函数， async 可以

router.post('/register', async (req, res)=> {
  var body = req.body
  try {
    if (await User.findOne({ email: body.email })) {
      return res.status(200).json({
        err_code: 1,
        message: '邮箱已存在'
      })
    }

    if (await User.findOne({ nickname: body.nickname })) {
      return res.status(200).json({
        err_code: 2,
        message: '昵称已存在'
      })
    }

   // 对密码进行 md5 重复加密
    body.password = md5(md5(body.password))

   // 创建用户，执行注册
    await new User(body).save()

    res.status(200).json({
      err_code: 0,
      message: 'OK'
    })
  } catch (err) {
    res.status(500).json({
      err_code: 500,
      message: err.message
    })
  }
})

ES6

ES 6

let 和 const

函数-箭头函数

函数-参数

解构赋值

数组API

map

reduce

filter

forEach

find

findIndex

字符串

API

字符串模版

面向对象

模块系统

promise

回调地狱

promise含义

promise基本用法

jQuery中的promise

Mongoose所有API都支持promise

Promise.all(promiseArray)方法

generator生成器函数

generator-yield

generator-实例

ES7 预览

async await

使用webpack4编译并压缩ES6代码的方法示例

关于ES6新特性最常用的知识点汇总

ES6 系列之 Generator 的自动执行的方法示例

ES6入门教程之Class和Module详解

WebStorm ES6 语法设置和babel的使用介绍

ES6字符串模板，剩余参数，默认参数功能与用法示例

ES6中箭头函数的定义与调用方式详解

ES6高级1：异步promise/async/await

es6 symbol的实现方法示例

ES6参数默认值