代码拉取完成,页面将自动刷新
ES6知识点回顾
1.ES6
ES2015、ES02016、ES2017合集
《ECMAScript 2015 标准》
2.包管理器
安装完node.js后,自动安装完毕
全局依赖
npm install xxx --gaobal
npm i xxx -g
局部依赖
产品依赖 dependencies
npm install xxx --save
npm i xxx -S
开发依赖 devDependencies
npm install xxx --save-dev
npm i xxx -D
卸载依赖
npm uninstall xxx
初始化node.js项目
npm init -y
项目初始化完毕后,在项目的根目录创建了package.json文件,该文件中保存了项目的详细信息、项目的依赖信息
依赖安装完后,在项目的根目录下创建了node_modules文件夹,该文件夹中保存了所有依赖的源码
代码版本控制时,千万别把node_modules文件夹上传到远程仓库
yarn
安装全部依赖 yarn install
安装某个依赖
yarn add xxx 产品依赖
yarn add xxx --dev 开发依赖
安装全局依赖
yarn global add xxx
3.Babel
安装
cnpm i babel-cli babel-preset-latest -D
配置
项目根目录下创建.babelrc文件
{
"presets": "latest"
}
使用
babel 1-es6.js 转码并输出到控制台
babel 1-es6.js --out-file 1-es5.js 转码并输出到新的文件 简写:-o
babel src --out-dir dist 转码并输出到新的目录 简写:-d
4.模块化
AMD模块化规范
CommonJS模块化规范
导出
let a = 1;
let name = 'zhangsan'
module.exports = {
a,
name
}
导入
let { a, name } = require('./xxx.js')
ES6模块化规范
导出
let c = 3
let d = 4
export let a = 1;
export let b = 2;
export { c as C, d as D }
默认导出(一个模块有且只能有1个默认导出,默认导出与普通导出可以共存)
export default {}
导入
import { a, b, C, D } from './xxx.js' // 导入普通
import obj from './xxx.js' // 导入默认
import * as data from './xxx.js' // 同时导入默认和普通
Node.js 12.7版本后,兼容ES6模块化机制
package.json
{
"type": "commonjs", // CommonJS
"type": "module", // ES6
}
CommonJS 和 ES6模块化区别
CommonJS
运行时加载,代码运行时,模块间的依赖关系才被确认
对于基本数据类型加载,类似于复制,独立的拷贝,原始值发生修改,不会影响导出值
对于引用数据类型,浅复制(复制的引用地址),原始值发生修改后,导出值也会收到影响
一个模块如果被导入多次,之后在第一次导入是加载,之后的导入就从缓存中取值
require('./a.js')使用require命令加载某个模块,会执行内部的所有代码
ES6模块化
编译时加载,代码在编译阶段,就确定了模块间的依赖管理
ES6加载属于【动态只读引用】
基本数据类型,导入的只读,不允许修改值
引用数据类型,导入的是引用地址,可以通过引用地址改变其内部的属性或者值,不能修改引用地址的指向
ES6模块化机制,不允许重复导入
使用import导入某个模块时,会执行内部的代码
5.变量、常量声明
变量 let
常量 const
6.解构(模式匹配)
let [ a, b, c] = [1, 2, 3]
let [a, ...b] = [1, 2, 3] // b => [2,3]
let {name, age} = {name: 'zhangsan', age: 12}
let [a,b,c] = 'hello'
let {} = 'hello' 使用对象解构字符串,可以获取其原型对象上的属性和方法
let {valueOf} = 1 使用对象解构数字,可以获取其原型对象上的属性和方法
let {valueOf} = true 使用对象解构布尔值,可以获取其原型对象上的属性和方法
7.对象拓展
对象简写
Object.assign()
参数:obj1, obj2
把obj2复制给obj1(对象的深拷贝)
参数:obj1, obj2, obj3
把obj2, obj3合并后再复制给obj1
8.拓展运算符
在=左边:聚合的作用,返回值和外层包裹的标识符有关系
在=右边:剥离(展开)的作用,把对象或数组中每个属性或键值对单独剥离出来,放在新的作用域中
用在函数形参位置,叫rest参数,相当于在=左边的功能(聚合的作用)
9.数组
Array.from() 将可迭代的数据转成数组
10.函数
形参默认值
function(a,b, c = 100) 设置默认值的形参,应放在最后一位
传参
可以使用对象结构、数组解构
rest参数将未匹配的实参,聚合然后返回一个新的数组
箭头函数
极简形式:
arr.filter((item) => {
retrun item > 5
})
arr.filter(item => item > 5)
this指向:箭头函数没有自己的this,其this指向‘声明时’,外部作用域的this
11.迭代器
作用:
为实现了iteartor接口的数据提供一种统一的访问机制,for of 循环
让内部的值按照一定次序排列,通过调用.next方法,使指针向下移动,访问其内部的状态
供ES6中for of循环来消费
原生具备iterator接口的数据
数组、字符串、类数组对象、Map、Set
let iterator = [1,2,3][Symbol.iterator]()
12.Set/Map
Set类似于数组,内部不允许重复值的出现
应用:数组去重
Map类似于对象,key值不局限于字符串,可以是任意类型的值
13.class类
class Animal {
static attr1 = '静态属性'
constructor(name, age) {
this.name = name
this.age = age
}
sayName() {
console.log(this.name)
}
static staFun() {
// 静态方法内部的this指向当前类
console.log(this.attr1)
}
}
继承
class Dog extends Animal {
constructor(name, age, color) {
super(name, age)
this.color = color
}
}
// 子类的原型对象继承父类的原型对象
Dog.prototype.__proto__ = Animal.prototype
dog.__proto__.__proto__ = Animal.prototype
let dog = new Dog('二狗', 1, 'black')
dog.sayName()
// 子类继承父类
Dog.__proto__ = Animal
Dog.attr1
Dog.staFun()
14.Symbol
let sy1 = Symbol('one') // one是该symbol值的描述
let sy2 = Symbol.for('two') // two是该值在全局注册表中对应的key
let sy3 = Symbol.keyFor(sy2) // 返回sy2值在全局注册表中对应的key
在对象中使用symbol
let obj = {
[Symbol('name')]: 'zhangsan'
}
obj[Symbol('name')] == 'zhangsan' // true
消除魔术字符串
利用Symbol值的独一无二的特性,把代码中多次出行并且与代码行程强耦合关系的字符串或者数字替换掉
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。