欢迎访问我的博客,你的支持,是我最大的动力!

ES6语法

HTML 小马奔腾 70℃ 评论
目录:
[显示]

深入理解ES6

块级作用域绑定

var 声明,在函数作用域或全局作用域通过var声明的变量,不论在哪里声明,都会当成在当前作用域顶部声明的变量,默认值为 undefined
let 声明,块级声明,会将变量作用域限制在当前代码块{}中
const 声明,块级声明,const声明的是常量,必须进行初始化;不允许修改绑定,但允许修改值,如常量是对象时,对象中的值可以修改

全局块作用哉绑定
var用于全局作用域时,会同时创建一个新的全局对象window的同名属性,可能会覆盖已有属性,var ncz = "Hi"; console.log(window.ncz);
const let 不会创建全局对象window属性

最佳实践
默认使用const,只有在确实需要改变变量值时才使用let

字符串和正则表达式

let text = "a"
text.length  // 长度 1
/^.$/.test(test) // 正则测试 true
text.charAt(0)  text.charCodeAt(0)

正则表达式u修饰符
使用时不会将代理对视为两个字符了,会按预期的效果运行
/^.$/u.test(text)

text.match(/[\s\S]/gu)  返回数组,成员为每个字符,包括空字符

typeof xxx   返回类型

.trim() 可以修剪字符串前后的空格

模板字符串中可以使用占位符
模板字符串由反撇引起来,占位符 ${name}
模板字面量可以访问作用域中所有可访问的变量,也可以是表达式

${(count * price).toFixed(2)}  计算结果保留2位小数

模板标签
let msg = tagHello

函数

无论在函数定义中声明了多少形参,都可以传入任意数量的参数

为函数参数模拟默认值,不显示传值,形参的默认值是 undefined
timeout = timeout || 2000;
callback = callback || function() {};
更安全的方式
timeout = (typeof timeout !== "undefined") ? timeout : 2000;   避免当timeout传入0时,前一种方法会赋值为2000

ES6的方式
function f(url, timeout =2000, callback = function() {} {...}

不定参数
func(a,...b)
b将会是一个参数数组

展开运算符
Math.max(...values)  其中values是一个数组

箭头函数
箭头函数中的this/super/argument由外围最近一层非箭头函数决定
函数内部的this值不可被改变
当箭头函数只有一个参数时,可以直接写参数名,不用写括号

扩展对象的功能性

当一个对象的属性与本地变量同名时,不必再写冒号与局部变量,简单只写属性即可

== 相等运算符
=== 全等运算符

Object.is() 与===相同,但+0和-0识别为不相等,NaN与NaN等价

解构 数据访问更便捷

let node = { type: "Identifier", name: "foo"}
let { type, name } = node
console.log(type)

解构赋值
({ type, name } = node)   注意小括号

默认值
let { type, name, value = true } = node

使用非同名变量名及提供默认值
let { type: localType, name: localName = "bar"  } = node

嵌套对象解构
let { loc: { start }} = node  冒号左边代表node.loc 右边的花括号表示需要深入一层,查找 start 属性
console.log(start.line)
使用非同名变量名
let { loc: { start: localStart }} = node
console.log(localStart .line)

数组解构
let colors = [ "red", "green", "blue" ]
let [ firstColor, secondColor ] = colors   注意是方括号
let [ , , thirdColor ] = colors
let [ firstColor, secondColor = "green" ] = colors
let [ firstColor, ...secondColor ] = colors  不定元素 secondColor也是一个数组

嵌套数组解构
let colors = [ "red", [ "green", "lightgreen" ], "blue" ]
let [ firstColor, [secondColor ] ] = colors

克隆数组
var colors = [ "red", "green", "blue" ]
var cloneColors = colors.concat()
另一种方法
let colors = [ "red", "green", "blue" ]
let [ ...cloneColors ] = colors

function setCookie(name, value, { secure, path, domain = "/", expires } = {}) { ... } 使用解构参数并提供了默认值

Symbol和Symbol属性

原始类型: 字符串、数字、布尔、null 、undefined、Sysbol

let firstName = Sysbol("first name")

Set和Map集合

let set = new Set()
set.add(5)
set.add("5")
console.log(set.size)
console.log(set.has(5))  检测集合中是否有某个值
set.delete(5)  删除元素
set.clear()   清空集合

let set = new Set([1, 2, 3, 4, 4])   set会自动去重

Set集合的forEach()方法 该方法回调函数有三个参数,前两个参数一样,均为值,第三个为set本身
let set = new Set([1, 2])
set.forEach(function(value, key, ownerSet) {
console.log(key + " " + value)
console.log(ownerSet === set)
})

将set集合转换为数组
let set = new Set([1, 2, 3, 4, 5])
array = [...set]

过滤重复值
function f(items) { return [...new Set(items)] }

Weak Set 弱引用集合
只存储对象弱引用,不能存原始值,若集合中弱引用是对象唯一引用,会被回收并释放相应内存
new WeakSet()  创建,只支持3个方法 add()  has()  delete()

=====

let map = new Map()
map.set("title","xxxxx")
map.set("year",2020)
map.get("title")
map.get("aa")  返回undefined
map.has(key) map.delete(key) map.clear() map.size()

forEach()方法 回调函数三个参数:值,值对应的键名,map集合本身

迭代器Iterator和生成器Generator

迭代器会有一个next()方法,获取的结果为返回的值和是否结束的标志位,当没有任何元素可迭代时,返回值为undefied,标识位为true
生成器是返回迭代器的函数,生成器 function后有一个* 函数体内有yield关键字

数组、set、map、字符串都是可迭代对象,其拥有默认的迭代器

let values = [1, 2, 3]
for (let num of values) {
console.log(num)
}

集合对象迭代器,内建
entries()  返回迭代器,值为键值对
values()  返回迭代器,值为集合的值
keys()  返回迭代器,值为集合中的键名

改进的数组功能

Array.of() 方法
创建一个包含所有参数的数组

Array.from() 方法
接受可迭代对象或类数组对象作为参数,返回一个数组
第二个可选参数,映射函数,可以控制转换方式

let numbers = [25, 30, 35, 40, 45]
numbers.find(n => n > 33)     // 35  条件为true时,就结束搜索了
numbers.findIndex(n => n > 33)     // 2

Promise与异步编程

事件模型
回调模式

Promise 承诺将在未来的某个时刻完成
let promise = readFile("example.txt")

生命周期:进行中pending -> 已处理settled 此时有两种情况:Fulfillled 成功完成/Rejected未能成功完成
所有promise都有then()方法,该方法有两个参数,第一个是fulfilled时要调用的函数,第二个是rejected时要调用的函数,两个参数都是可选的

catch()方法,相当于只有第二个参数的方法

then()方法和catch()方法可以多次调用,都会被执行

创建未完成的Promise
执行器接受两个参数 resolve()和reject()函数,示例:

创建已处理的Promise
1、使用Promise.resolve()

2、使用Promise.reject()

串联Promise
每次调用then()或catch()时实际上创建并返回了另一个Promise
可以链式调用then(),只有当前面的promise解决后,才会调用后面的then方法
务必在Promise链的末尾留一个拒绝处理程序,以确保能正确处理所有可能发生的错误
Promise链可以给下游传递数据

监听多个Promise
Promise.all() 方法,接受一个参数并返回一个Promise
参数是含有多个受监视Promise的可迭代对象,如数组,只有当可迭代对象中所有Promise都被解决后,返回的Promise才会被解决
当所有都成功时,才成功;当任意一个失败时,立即失败

Promise.race()方法,和all()方法处理方式不同,只要有一个已解决,返回的Promise就解决,是否成功取决于先解决的Promise的结果

代理Proxy和反射Reflection API

proxy可以控制默认行为
reflection则用于使用默认行为

用模块封装代码

仅导出和导入需要的绑定

export 导出
export { sum as add }
export default xxx     导出默认值
export { sum as default }

import 导入
import { identifier1, identifier2 } from "./example.js"
import * as example from "./example.js"       使用时  example.xxx
导入默认值
import sum from "./example.js"   没有花括号 sum这个名称可以随意命名  是导入本地使用的标识符
import sum, { color } from "./example.js"

export { sum } from "./example.js"
export { sum as add } from "./example.js"

 

转载请注明:轻风博客 » ES6语法

喜欢 (25)or分享 (0)