ES6 新特性
ES6 新特性
1.let 关键字
-
声明变量
let a; let b, c, d; let e = 100; let f = 521, g = "live", h = [];
-
变量不能重复声明
let star = "罗志祥"; let star = "小猪"; // 报错
-
块级作用域 全局, 函数, eval
if else while for{ var girl = "小红"; } console.log(girl); // 小红 // { // let girl = '小红'; // } // console.log(girl) // 报错
-
不存在变量提升
console.log(song); // undefined var song = "恋爱"; // console.log(sas) // 报错 // let sas = 'love'
-
不影响作用域链
{ let school = "尚硅谷"; function fn() { console.log(school); // 尚硅谷 } fn(); }
2.const 关键字
- 声明常量
const SCHOOL = "尚硅谷";
-
一定要赋初始值
const A; // 报错
-
一般常量使用大写(潜规则)
const a = 100; // 不报错
-
常量的值不能修改
SCHOOL = "ATGUIGU"; // 报错
-
块级作用域
{ const PLAYER = "UZI"; } // console.log(PLAYER); // 报错 PLAYER is not defined
-
对数组和对象的元素修改,不算做对常量的修改,不会报错
const TEAM = ["UZI", "MXLG", "Ming"]; TEAM.push("Mekio"); // 不报错 // TEAM = []; // 报错
3.变量的解构赋值
ES6 允许按照一定模式从数组和对象中提取值,对变量进行赋值。
这被称之为解构赋值
-
数组的解构
const F4 = ["小沈阳", "刘能", "赵四", "宋小宝"]; let [xiao, liu, zhao, song] = F4; console.log(xiao, liu, zhao, song);
-
对象的解构
const zhao = { name: "赵本山", age: "不详", xiaopin: function () { console.log("我可以演小品"); }, }; let { name, age, xiaopin } = zhao; console.log(name, age, xiaopin); // 单独解构 let { xiaopin } = zhao; console.log(xiaopin);
4.模板字符串
ES6 引入新的声明字符串的方式 ``
-
声明
let str = `我也是一个字符串`; console.log(str, typeof str); // String
-
内容中可以直接出现换行符
let str = `<ul> <li></li> <ul>`;
-
变量拼接
let lovest = "魏翔"; let out = `${lovest}是我心目中最搞笑的演员`; console.log(out);
5. 简化对象写法
ES6 允许在大括号里面直接写入变量和函数,作为对象的属性和方法。
这样的书写更简洁
let name = "尚硅谷";
let change = function () {
console.log("我们可以改变你");
};
const school = {
name,
change,
updata: function () {
console.log("没有简化的方法");
},
umprove() {
console.log("方法也可以简化");
},
};
console.log(school);
6.箭头函数
ES6 允许使用 箭头函数(=>) 定义函数
-
声明一个函数
let fn = function () {}; let fns = (a, b) => { return a + b; };
-
调用函数
let result = fns(1, 2); console.log(result); // 3
-
this 是静态的,
this 始终指向函数声明时所在作用域下的 this 的值
function getName() { console.log(this.name); } let getName2 = () => { console.log(this.name); }; // 设置 window 对象的 name 属性 window.name = "尚硅谷"; const school = { name: "ATGUIGU", }; // 直接调用 getName(); // 尚硅谷 getName2(); // 尚硅谷 // call 方法调用 getName.call(school); // ATGUIGU getName2.call(school); // 尚硅谷
-
不能作为构造函数
实例化对象let Person = (name, age) => { this.name = name; this.age = age; }; let me = new Person("小红", 30); // 报错 Person is not a constructor
-
不能使用 argument 保存实参
let fn = () => { console.log(argument); // 报错 argument is not defined }; fn(1, 2, 3);
-
箭头函数的简写
-
省略小括号
,当形参有且只有一个的时候let add = n => { return n + n; }; console.log(add(9));
-
省略花括号
,当代码体只有一条语句的时候,此时return
必须省略,而且语句的执行结果就是函数的返回值let pow = n => n * n; console.log(pow(9));
-
箭头函数
适合
与this 无关
的回调:定时器、数组的方法的回调
箭头函数不适合
与this 有关
的回调:事件回调、对象的方法
const obj = {
name: "尚硅谷",
getName: function () {
// this 指向 obj
console.log(this);
},
getThis: () => {
// this 指向 window
console.log(this);
},
};
7.参数默认值
ES6 允许给函数参数赋初始值
-
形参初始值 具有默认值的参数一般位置都靠后
function add(a, b, c = 0) { return a + b + c; } let result = add(1, 2); console.log(result); // 3
-
与解构赋值结合
function connect({ host, username, password, port = 5000 }) { console.log(host, username, password, port); // localhost root root 5000 } connect({ host: "localhost", username: "root", password: "root", });
8.rest 参数
ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments
-
ES5 获取实参的方式
function data() { console.log(arguments); // 对象 } data("白芷", "阿娇", "思慧");
-
rest 参数
function data(...args) { console.log(args); // 整合成数组 ['白芷', '阿娇', '思慧'] } data("白芷", "阿娇", "思慧");
-
rest 参数必须要放到参数最后
function fn(a, b, ...args) { console.log(a); // 1 console.log(b); // 2 console.log(args); // [3, 4, 5] } fn(1, 2, 3, 4, 5);
9.扩展运算符
...
扩展运算符能将 数组 转换为逗号分隔的 参数序列
// 声明一个数组
const tfBoys = ["易烊千玺", "王源", "王俊凯"];
// 声明一个函数
function chunwan() {
console.log(arguments)
}
chunwan(...tfBoys) 等同于
chunwan('易烊千玺', '王源', '王俊凯')
-
数组的合并
const kuaizi = ["王太利", "肖央"]; const fenghuang = ["曾毅", "玲花"]; // const zuixuanxiaopingguo = kuaizi.concat(fenghuang); const zuixuanxiaopingguo = [...kuaizi, ...fenghuang]; console.log(zuixuanxiaopingguo); // '王太利', '肖央', '曾毅', '玲花'
-
数组的克隆
浅拷贝
const sanzhihua = ["E", "G", "M"]; const sanyecao = [...sanzhihua]; console.log(sanyecao); // ["E", "G", "M"]
-
将伪数组转为真正的数组
const divs = document.querySelectorAll("div"); const divArr = [...divs]; console.log(divArr);
10.Symbol
ES6 引入的新的原始数据类型表示
独一无二的值
。
它是 js 的第七种
数据类型。
是一种类似于字符串的数据类型。
-
Symbol
创建得到的 Symbol 是唯一
的let s = Symbol(); console.log(s, typeof s); // Symbol() 'symbol' let s2 = Symbol("尚硅谷"); let s3 = Symbol("尚硅谷"); console.log(s2 === s3); //false
-
Sysbol.for
创建 得到的 Symbol 是一样
的let s4 = Symbol.for("尚硅谷"); let s5 = Symbol.for("尚硅谷"); console.log(s4 === s5); // true
-
不能与其他数据进行运算
let result = s + 100; // 报错 let result = s > 100; // 报错 let result = s + "100"; // 报错
-
七中基本数据类型
USONB
U
undefined
S
String Symbol
O
Object
N
Null Number
B
Boolean
特点:
-
- Symbol 的值是
唯一
的,用来解决命名冲突的问题
- Symbol 的值是
-
- Symbol 值不能与 其他数据进行运算
-
- Symbol 定义的对象属性不能使用
for...in
进行循环遍历,但是可以使用Reflect.ownKeys
来获取对象的所有键名
- Symbol 定义的对象属性不能使用
向对象中添加方法
-
第一种方式
let game = { name: "尚硅谷", up: function () {}, down: function () {}, }; // 声明一个对象 let methods = { up: Symbol(), down: Symbol(), }; // 向game中添加方法 game[methods.up] = function () { console.log("我可以改变形状"); }; game[methods.down] = function () { console.log("我可以快速下降"); }; console.log(game); // 不会覆盖原方法
-
第二种方式
let youxi = { name: "狼人杀", [Symbol("say")]: function () { console.log("我可以发言"); }, [Symbol("zibao")]: function () { console.log("我可以自爆"); }, }; console.log(youxi);
Symbol 的内置属性
-
Symbol.hasInstance
:当其他的对象使用 instanceof 运算符,判断是否为该对象的实例时,会调用这个方法class Person { static [Symbol.hasInstance](param) { console.log(param); console.log("我被用来检测属性了"); return false; } } let o = {}; console.log(o instanceof Person); // 我被用来检测属性了
-
对象的
Symbol.isConcatSpreadable
属性等于的是一个布尔值,表示该对象用于Arrary.prototype.concat()
时,是否可以展开const arr = [1, 2, 3]; const arr2 = [4, 5, 6]; arr2[Symbol.isConcatSpreadable] = false; console.log(arr.concat(arr2)); // [1, 2, 3, [4, 5, 6]]
11.迭代器 Symbol.iterator
工作原理:
- 创建一个指针对象,指向当前数据结构的起始位置。
- 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员。
- 接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员。
- 每调用 next 方法返回一个包含 value 和 done 属性的对象。
// 声明一个数组
const xiyou = ["唐僧", "孙悟空", "猪八戒", "沙僧"];
// 使用 for...of 遍历
for (let v of xiyou) {
console.log(v); // 值
}
// 使用 for...in 遍历
for (let v in xiyou) {
console.log(v); // 键名
}
let iterator = xiyou[Symbol.iterator]();
// 调用对象的next方法
console.log(iterator.next()); // value:唐僧 down:false
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next()); // value:undefined down:true
-
迭代器自定义遍历对象
const banji = { name: "终极一班", stus: ["xiaoming", "xiaoning", "xiaotian", "knight"], [Symbol.iterator]() { // 定义索引 let index = 0; const _this = this; return { next: function () { if (index < _this.stus.length) { const result = { value: _this.stus[index], done: false }; index++; return result; } else { return { value: undefined, done: true }; } }, }; }, }; // 遍历 banji,得到 banji.stus 中的值 for (v of banji) { console.log(v); }
12.生成器
生成器其实就是一个特殊的函数
异步编程 纯回调函数 node fs ajax mongodb
调用
function* gen() {
console.log(111);
}
let iterator = gen();
iterator.next(); // 必须通过next()调用
-
函数代码的分隔符 将程序分为四个代码块
function* gen() { console.log(111); yield "一直没有耳朵"; console.log(222); yield "一直没有尾巴"; console.log(333); yield "真奇怪"; console.log(444); } let iterator = gen(); iterator.next(); // 111 iterator.next(); // 222 iterator.next(); // 333 iterator.next(); // 444
-
遍历
function* gen() { yield "一直没有耳朵"; yield "一直没有尾巴"; yield "真奇怪"; } for (v of gen()) { console.log(v); // 一直没有耳朵 一直没有尾巴 真奇怪 }
-
next()
function* gen() { yield "一直没有耳朵"; yield "一直没有尾巴"; yield "真奇怪"; } let iterator = gen(); console.log(iterator.next()); // {value: '一直没有耳朵', done: false} console.log(iterator.next()); // {value: '一直没有尾巴', done: false} console.log(iterator.next()); // {value: '真奇怪', done: false} console.log(iterator.next()); // {value: undefined, done: true}
传递参数
function* gen(arg) {
console.log(arg); // AAA
let one = yield 111;
console.log(one); // BBB
let two = yield 222;
console.log(two); // CCC
let three = yield 333;
console.log(three); // DDD
}
// 执行获取迭代器对象
let iterator = gen("AAA");
console.log(iterator.next());
// next方法可以传入实参
console.log(iterator.next("BBB")); // 传入参数作为第一个 yield 的返回值
console.log(iterator.next("CCC")); // 传入参数作为第二个 yield 的返回值
console.log(iterator.next("DDD")); // 传入参数作为第三个 yield 的返回值
异步编程 文件操作 网络编程(ajax, request) 数据库操作
异步操作实例-1
-
1s 后控制台输出 111, 2s 后控制台输出 222, 3s 后控制台输出 333
function one() { setTimeout(() => { console.log(111); iterator.next(); }, 1000); } function two() { setTimeout(() => { console.log(222); iterator.next(); }, 1000); } function three() { setTimeout(() => { console.log(333); iterator.next(); }, 1000); } function* gen() { yield one(); yield two(); yield three(); } let iterator = gen(); iterator.next();
异步操作实例-2
-
模拟获取 用户数据 订单数据 商品数据
function getUsers() { setTimeout(() => { let data = "用户数据"; iterator.next(data); }, 1000); } function getOrders() { setTimeout(() => { let data = "订单数据"; iterator.next(data); }, 1000); } function getGoods() { setTimeout(() => { let data = "商品数据"; iterator.next(data); }, 1000); } function* gen() { let user = yield getUsers(); console.log(user); // 用户数据 let order = yield getOrders(); console.log(order); // 订单数据 let good = yield getGoods(); console.log(good); // 商品数据 } let iterator = gen(); iterator.next();
13.Promise
Promise 基本语法
// 实例化 Promise 对象
const p = new Promise(function (resolve, reject) {
setTimeout(() => {
let data = "用户数据";
// // 成功
// resolve(data);
// 失败
reject("获取失败");
}, 1000);
});
// 调用 Promise 对象的 then 方法
p.then(
function (value) {
console.log(value); // 用户数据
},
function (reason) {
console.log(reason); // 获取失败
}
);
使用 Promise 读取文件
// 引入 fs 模块
const fs = require("fs");
/* // 调用方法读取文件
fs.readFile('../resources/2.test.txt', (err, data) => {
if (err) throw err;
console.log(data.toString())
}) */
// 使用 Promise 读取文件
const p = new Promise(function (resolve, reject) {
fs.readFile("../resources/2.test.txt", (err, data) => {
if (err) reject(err);
resolve(data);
});
});
p.then(
function (value) {
console.log(value.toString());
},
function (reason) {
console.log(reason);
}
);
使用 Promise 封装 AJAX 请求
const p = new Promise(function (resolve, reject) {
// 1. 创建对象
const xhr = new XMLHttpRequest();
// 2. 初始化
xhr.open("GET", "http://localhost:3000/channels");
// 3. 发送
xhr.send();
// 4. 绑定事件,处理响应结果
xhr.onreadystatechange = function () {
// 判断
if (xhr.readyState === 4) {
// 判断响应状态码 200-299
if (xhr.status >= 200 && xhr.status < 300) {
// 成功
resolve(xhr.response);
} else {
reject(xhr.status);
}
}
};
});
p.then(
function (value) {
console.log(value);
},
function (reason) {
console.error(reason);
}
);
then 的返回值
// 创建 promise 对象
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("用户数据");
// reject("失败了");
}, 1000);
});
// 调用 then 方法 then 方法的返回结果是 Promise 对象,对象状态由回调函数的执行结果决定
// 1. 如果回调函数中返回的结果是 非Promise函类型的数据,状态为成功,返回值为对象的成功的值
const result = p.then(
(value) => {
console.log(value);
// 1. 非 Promise 类型的数据
// return 123;
// 2. 是 Promise 对象
/* return new Promise((resolve, reject) => {
resolve('Ok');
}) */
// 3. 抛出错误
// throw new Error('出错了');
throw "出错了";
},
(reason) => {
console.warn(reason);
}
);
// 链式调用
p.then((value) => {}).then((valie) => {});
console.log(result);
Promise 链式调用案例
// 引入fs模块
const fs = require("fs");
/* fs.readFile('../resources/悯农.txt', (err1, data1) => {
fs.readFile('../resources/插秧诗.txt', (err2, data2) => {
fs.readFile('../resources/为学.txt', (err3, data3) => {
let result = data1 + '\r\n' + data2 +'\r\n'+ data3;
console.log(result)
})
})
}) */
const p = new Promise(function (resolve, reject) {
fs.readFile("../resources/为学.txt", (err, data) => {
resolve(data);
});
});
p.then((value) => {
return new Promise(function (resolve, rejece) {
fs.readFile("../resources/插秧诗.txt", (err, data) => {
resolve([value, data]);
});
});
})
.then((value) => {
return new Promise(function (resolve, reject) {
fs.readFile("../resources/悯农.txt", (err, data) => {
value.push(data);
resolve(value);
});
});
})
.then((value) => {
console.log(value.join("\r\n"));
});
14.Set-集合
Set 基本使用
-
声明一个 set
let s = new Set(); // 赋初始值 自动去重 let s2 = new Set(["大事儿", "小事儿", "天下事儿", "天下事儿"]);
-
元素个数
console.log(s2.size); // 3
-
添加新元素
s2.add("喜事儿");
-
删除元素
s2.delete("大事儿");
-
检测
console.log(s2.has("小事儿")); // true console.log(s2.has("坏事儿")); // false
-
清空元素
s2.clear();
-
遍历元素
for (v of s2) { console.log(v); }
Set 综合实践
-
1.数组去重
let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]; let result = [...new Set(arr)]; console.log(result); // 1, 2, 3, 4, 5
-
2.交集
let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]; let arr2 = [4, 5, 6, 5, 6]; let result = [...new Set(arr)].filter((item) => { return new Set(arr2).has(item); }); console.log(result); // 4, 5
-
3.并集
let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]; let arr2 = [4, 5, 6, 5, 6]; let union = [...new Set([...arr, ...arr2])]; console.log(union);
-
4.差集
let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]; let arr2 = [4, 5, 6, 5, 6]; const diff = [...new Set(arr)].filter((item) => { return !new Set(arr2).has(item); }); console.log(diff);
15.Map - 键值对集合
类似于对象,也是键值对的集合,但是“键”的范围
不限于字符串
,各种类型的值(包括对象)都可以当做键。
-
声明 Map
let m = new Map();
-
添加元素
m.set("name", "尚硅谷"); // 值可以为方法 m.set("change", function () { console.log("我们可以改变你!"); }); let key = { school: "ATGUIGU", }; // 键可以为对象 m.set(key, ["北京", "上海", "深圳"]);
-
大小
console.log(m.size);
-
删除
m.delete("name");
-
获取
console.log(m.get("change")); console.log(m.get(key));
-
清空
m.clear();
-
遍历
for (let v of m) { console.log(v); }
16.class 类
class 基本语法
function Phone(brand, price) {
this.brand = brand;
this.price = price;
}
Phone.prototype.call = function () {
console.log("我可以打电话");
};
const Huawei = new Phone("华为", 3999);
Huawei.call();
console.log(Huawei);
class Shouji {
// 构造方法
constructor(brand, price) {
this.brand = brand;
this.price = price;
}
call() {
console.log("我可以打电话");
}
}
const onePlus = new Shouji("1+", 1999);
onePlus.call();
console.log(onePlus);
类的静态成员
-
ES5
function Phone() {} // 属于函数对象,不属于实例对象 称为静态成员 Phone.name = "手机"; Phone.change = function () { console.log("我可以改变世界"); }; // 实例对象可以访问,函数对象不能访问 Phone.prototype.size = "5.1inch"; let nokia = new Phone(); // 实例对象与函数对象属性不互通 console.log(nokia.name); // undefined nokia.change(); // nokia.change is not a function console.log(nokia.size); // 5.1inch
-
ES6
class Phone { // 静态属性 属于类 不属于实例对象 static name = "手机"; static change() { console.log("我可以改变世界"); } } let nokia = new Phone(); console.log(nokia.name); // undefined console.log(Phone.name); // 手机 nokia.change(); // nokia.change is not a function
类继承
-
ES5
// 手机 function Phone(brand, price) { this.brand = brand; this.price = price; } Phone.prototype.calls = function () { console.log("我可以改变世界"); }; // 智能手机 function SmartPhone(brand, phone, color, size) { // call() 调用父类构造方法 Phone.call(this, brand, phone); this.color = color; this.size = size; } // 设置子集构造函数的原型 SmartPhone.prototype = new Phone(); SmartPhone.prototype.constructor = SmartPhone; // 声明子类的方法 SmartPhone.prototype.photo = function () { console.log("我可以拍照"); }; SmartPhone.prototype.playGame = function () { console.log("我可以玩游戏"); }; const chuizi = new SmartPhone("锤子", 2499, "黑色", "5.5inch"); console.log(chuizi);
-
ES6
class Phone { constructor(brand, price) { this.brand = brand; this.price = price; } call() { console.log("我可以改变世界"); } } class SmartPhone extends Phone { constructor(brand, price, color, size) { // super 调用父类构造方法 super(brand, price); this.color = color; this.size = size; } game() { console.log("我可以打游戏"); } photo() { console.log("我可以拍照"); } // 覆盖父类方法 call() { console.log("我可以视频通话"); } } const huaWei = new SmartPhone("华为", 4999, "black", "5.5inch"); huaWei.call(); // 我可以视频通话 console.log(huaWei);
class 的 get 和 set
// get 和 set
class Phone {
get price() {
console.log("price被读取了");
}
set price(newValue) {
console.log("price被修改了");
}
}
// 实例化对象
const huaWei = new Phone();
console.log(huaWei.price);
huaWei.price = 3999;
17.数值扩展
-
Number.EPSILON
是 JavaScript 表示的最小精度
EPSILON 属性的值接近于 2.220446049250313e-16
function equal(a, b) { // 如果两个数的误差小于最小精度,则认为两数相等 if (Math.abs(a - b) < Number.EPSILON) { return true; } else { return false; } } console.log(0.1 + 0.2 === 0.3); // false console.log(equal(0.1 + 0.2, 0.3)); // true
-
二进制和八进制
let b = 0b1010; // 二进制 let o = 0o777; // 八进制 let d = 100; // 十进制 let x = 0xff; // 十六进制 console.log(x); // 255
-
Number.isFinite
检测一个数值是否为有限数console.log(Number.isFinite(100)); // true console.log(Number.isFinite(100 / 0)); // false console.log(Number.isFinite(Infinity)); // false
-
Number.isNaN
检测一个数值是否为 NaN(严格判断
是否全等)console.log(Number.isNaN(123)); // false // Number.isNaN 严格的判断传入的参数是否全等于NaN ('测试' === NaN) console.log(Number.isNaN("测试")); // false
-
Number.parseInt Number.parseFloat
字符串转整数console.log(Number.parseInt("123")); // 123 console.log(Number.parseInt("123abc")); // 123 console.log(Number.parseInt("123.12abc")); // 123 console.log(Number.parseInt("abc123.12abc")); // NaN console.log(Number.parseFloat("123.123")); // 123.123 console.log(Number.parseFloat("123.12asd3")); // 123.12
-
Number.isInteger
判断一个数是否为整数console.log(Number.isInteger(12)); // true console.log(Number.isInteger(12.12)); // false console.log(Number.isInteger("abc")); // false
-
Math.trunc
将数字的小数部分抹掉console.log(Math.trunc(123.123)); // 123
-
Math.sign
判断一个数是正数 负数 还是 0console.log(Math.sign(123)); // 1 console.log(Math.sign(-123)); // -1 console.log(Math.sign(0)); // 0
18.对象扩展
-
Object.is
判断两个值是否完全相等console.log(Object.is(120, 110)); // false console.log(Object.is(120, 120)); // true console.log(Object.is(NaN, NaN)); // true console.log(NaN === NaN); // false
-
Object.assign
对象的合并const config1 = { host: "localhost", port: 5000, name: "root", pass: "root", test: "test", }; const config2 = { host: "http://atguigu.com", port: "8080", name: "atguigu.com", pass: "atguigu", }; // config2 将 config1 中的内容覆盖 console.log(Object.assign(config1, config2));
-
Object.setPrototypeOf
设置原型Object.getPrototypeOf
const school = { name: "尚硅谷", }; const cities = { xiaoqu: ["北京", "上海", "深圳"], }; Object.setPrototypeOf(school, cities); console.log(Object.getPrototypeOf(school)); console.log(school);
18.模块化
优势
- 防止命名冲突
- 代码复用
- 高维护性
ES6 之前的模块化规范:
- CommonJS => NodeJS、Browserify
- AMD => requireJS
- CMD => seaJS
ES6 模块化语法
模块功能主要由两个命令构成:export
和 import
- export 命令用于规定模块的对外接口
- import 命令用于输入其他模块提供的功能
暴露方式
-
分别暴露
export const school = "尚硅谷"; export function teach() { console.log("我们可以交给你开发技能"); }
-
统一暴露
let school = "尚硅谷"; function teach() { console.log("我们可以帮助你找工作"); } export { school, teach };
-
默认暴露
export default { school: "尚硅谷", change: function () { console.log("我可以改变世界"); }, };
引入方式
-
在
<script>
中引入<script type="module"></script>
-
通用导入方式
// 引入 m1.js 模块内容 import * as m1 from "./src/m1.js"; console.log(m1); // 引入 m2.js 模块内容 import * as m2 from "./src/m2.js"; console.log(m2); // 引入 m3.js 模块内容 import * as m3 from "./src/m3.js"; console.log(m3);
-
解构赋值形式
import { school, teach } from "./src/m1.js"; console.log(school, teach); import { school as guigu, findJob } from "./src/m2.js"; console.log(guigu, findJob); import { default as m3 } from "./src/m3.js"; console.log(m3);
-
简便形式 针对
默认暴露
import m3 from "./src/m3.js"; console.log(m3);
-
-
使用入口文件引入
<script src="./src/app.js" type="module"></script>
/* 入口文件 */ // 模块引入 import * as m1 from "./m1.js"; import * as m2 from "./m2.js"; import * as m3 from "./m3.js"; console.log(m1); console.log(m2); console.log(m3);
ES6 转换为 ES5
-
初始化
npm init --yes
-
引入依赖
npm i babel-cli babel-preset-env browserify -D
i
:局部安装
-D
:开发依赖 -
转换
// 局部安装使用npx npx babel 源文件目录 -d 目标文件夹 --presets=babel-preset-env npx babel src/js -d dist/js --presets=babel-preset-env
--presets=babel-preset-env
:预设 -
打包
npx browserify 源文件 -o 目标文件 npx browserify 17_模块化/dist/js/app.js -o 17_模块化/dist/bundle.js