JS：ES6~ES11基础语法(二)

一、扩展运算符

定义: ... 扩展运算符能将数组转换为逗号分隔的参数序列

javascript 复制代码

const tsboys = ["ysqx", "wy", "wjk"]

function chunwan() {
    console.log(arguments)
}

// 扩展运算符能将数组转换为逗号分隔的参数序列
chunwan(...tfboys) // "ysqx", "wy", "wjk"

二、Symbol基本使用

定义: ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是Jsy语言的第七种数据类型,是一种类似于字符串的数据类型

特点:

Symbol的值是唯一的,用来解决命名冲突的问题
Symbol值不能与其它数据进行运算
Symbol定义的对象属性不能使用for..in循环遍历,但是可以使用Reflect.ownKeys来获取对象的所有键名

javascript 复制代码

// 创建Symbol变量
let s = Symbol()
let s2 = Symbol("s2")
// Symbol.for创建
let s3 = Symbol.for("s3")

三、迭代器

定义: 迭代器是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作

特点:

ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费
原生具备iterator接口的数据(可用for...of遍历), 例如: Array、Arguments、Set、Map、String、TypedArray、NodeList
工作原理:

a、创建一个指针对象,指向当前数据结构的起始位置

b、第一次调用对象的next方法,指针自动指向数据结构的第一个成员

c、接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员

注意: 需要自定义遍历数据的时候,要想到迭代器

四、生成器

定义: ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同

语法结构:

复制代码

function* gen() {
  yield 'aaa';
  yield 'bbb';
}

五、Promise

定义: Promise是ES6引入的异步编程的新解决方案.语法上Promise是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果

Promise构造函数: Promise(excutor) {}
Promise.prototype.then方法

a、如果回调函数中返回的结果是非promise类型的属性,状态为成功,返回值为对象的成功回调

b、如果返回结果是promise类型,状态则根据返回结果的状态一致,返回结果为promise的then方法返回的值

c、抛出错误

Promise.prototype.catch方法

六、集合介绍与API

(1)、Set

定义: ES6提供了新的数据结构Set.它类似于数组,但成员的值都是唯一的,集合实现了iterator接口,所以可以使用扩展运算符和for..of进行遍历

集合的属性和方法:

size: 返回集合的元素个数
add: 增加一个新元素,返回当前集合
delete: 删除元素,返回boolean值
has: 检测集合中是否包含某个元素,返回boolean值
clear: 清空集合,返回undefined

(2) Map

定义: ES6提供了Map数据结构.它类似于对象,也是键值对的集合.但是'键'的范围不限于字符串,各种类型的值(包括对象)都可以当作键.Map也实现了iterator接口,所以可以使用扩展运算符和for...of进行遍历

Map的属性和方法:

size: 返回Map元素的个数
set: 增加一个新元素,返回当前Map
get: 返回键名对象的键值
has: 检测Map中是否包含某个元素,返回boolean值
clear: 清空集合,返回undefined

七、Class类

定义: ES6提供了更接近传统语言的写法,引入了Class这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面对对象编程的语法而已.

知识点:

class声明类
constructor定义构造函数初始化
extends继承父类
super调用父级构造方法
static定义静态方法和属性
子类对父类方法可以重写

八、数值扩展

Number.EPSILON 是Js表示的最小精度

EPSILON 属性的值最接近于2.2204460492501310808472633361816E-16

二进制和八进制
Number.isFinite:() 检测一个数值是否为有限数
Number.isNaN(): 检测一个数是否为NaN
Number.parseInt()、Number.parseFloat(): 字符串转整数
Number.isInteger(): 判断一个数是否为整数
Math.trunc(): 将数字小数部分抹掉
Math.sign(): 判断一个数到底是正数、负数还是零

九、对象方法扩展

Object.is(): 判断两个值是否完全相等
Object.assign(): 对象的合并
Object.setPrototypeOf(): 设置原型对象( 不建议使用 )

Object.getPrototypeOf(): 获取原型对象

十、模板化

定义: 模块化是指将一个大的程序文件,拆分成许多较小的文件,然后将小文件组合起来

模块化的优势:

防止命名冲突
代码复用
高维护性

模块化规范产品(ES6之前的模块化规范)

CommonJS => NodeJs、Browserify
AMD => requireJS
CMD => seaJS

ES6模块化语法:

模块功能主要由两个命令构成: export和import

export命令用于规定模块的对外接口
import命令用于输入其它模块提供的功能

babel对ES6模块化代码转换(es6及以上转换为es5)

操作步骤:

安装工具: babel-cli、babel-preset-env、browserify(webpack)
编译转换命令: npx babel xxx(js文件目录) -d xxx(js文件输出目录) --presets=babel-preset-env
打包命令: npx browserify xxx.js(入口js文件位置) -o xxx.js(打包后文件位置)