ES6语法
一.let和const
-
是一个块作用域
//for循环经典(let,const) for (let i = 0; i < 10; i++) { setTimeout(function(){ console.log(i) },1000) } -
没有变量提升
//（let,const） console.log(a); let a=10; *//Uncaught ReferenceError: Cannot access 'a' before initialization* -
不能重复声明
let x = 1; let x= 2; console.log(x); //const同理 -
不会污染全局变量
let length = 10; const length= 20; console.log(window.length) //0两者区别：const 声明常量，一旦被声明，无法被修改
const a = 20; console.log(a); a=30;//报错 console.log(a);注：在开发过程建议：默认情况下用const,如果变量值需要被修改一定使用let
二.模板字符串
<body>
<div class="box">
<!--<ul>
<li>
<p id = "2">腾讯新闻</p>
</li>
</ul>-->
</div>
</body>
<script type="text/javascript">
const box = document.querySelector(".box");
let id = 1;
let title = "腾讯新闻";
let str = "";
// str = "<ul><li><p id="+id+">"+title+"</p></li></ul>";
str = `
<ul>
<li>
<p id = "${id}">${title}</p>
</li>
</ul>
`;
box.innerHTML = str;
</script>
三.函数
-
带参数默认值的函数
-
默认的表达式也可以是一个函数
function add(a,b=getVal(2)){ return a+b; } function getVal(val){ return val+5; } console.log(add(10)) //17 console.log(add(10,2)) //12 -
剩余参数（有三个点… 和紧跟着的参数指定 …keys）
-
ES5写法
function ziliao(obj){ let result = Object.create(null); console.log(arguments); for (let i=1;i<arguments.length;i++) { console.log(arguments[i]); result[arguments[i]]= obj[arguments[i]] } return result; } let person = { name:"张三", age:18, sex:"男" } let personData = ziliao(person,'name','age','sex'); personData.name = "李四" console.log(personData); console.log(person); -
ES6写法
function ziliao(obj,...keys){ //...keys解决了arguments的问题 console.log(keys) let result = Object.create(null); for(let i=0;i<keys.length;i++){ result[keys[i]] = obj[keys[i]]; } return result; } let person = { name:"张三", age:18, sex:"男" } let personData = ziliao(person,'name','age','sex'); console.log(personData); // 再来个简单的案例 function add2(...args){ console.log(args); //['a', 'b', 'c'] console.log(arguments); //Arguments(3) ['a', 'b', 'c', callee: (...), Symbol(Symbol.iterator): ƒ] } add2("a","b","c");
4.扩展运算符
剩余运算符… 把多个独立的参数合并到一个数组中
…扩展运算符: 将一个数组分割，并将各个项目作为分离的参数传给函数
const MaxNum = Math.max(50,20); console.log(MaxNum);es5处理数组中的最大值 ,使用apply
const arr = [1,2,4,7,100,40]; const maxNum = Math.max(arr); //NAN const maxNum = Math.max.apply(null,arr); //100 console.log(maxNum);5.箭头函数
-
let add= (a,b)=>{
return a+b
}
// 简写
let add = (a,b)=> (a+b);
console.log( add(1,2)) //3
//一个参数
var add = (a)=> (a%2);
console.log(add(3)) //1
var student = (id)=>{
return {
name:"张三",
age:10,
id:id
}
};
console.log(student(3)) //{name: '张三', age: 10, id: 3}
//简单写法,一定要加();
let getObj = (id)=>({id:id,name:"张三"})
console.log(getObj(2)
四.this
在es6的箭头函数中没有this绑定，es5中一般指向的是当前的对象
let Person = {
id:1,
name:"张三",
init:function(){
// this问题
// document.addEventListener("click",function(e){
// this.say(e.type)
// console.log(this);
// }.bind(this))
// es5可以使用bind解决,false为了防止冒泡
// 使用e6怎么处理()
document.addEventListener("click",(e)=>{
console.log(e)
this.say(e.type)
})
},
say:function(type){
console.log(`事件类型:${type},在点谁:${this.name}`)
}
}
Person.init();
五.箭头函数注意
使用箭头函数注意事项:
-
函数内部没有arguments,因为没有作用域连了,一直会指向Window
let getVal1 = function(a, b) { console.log(arguments); return a + b; } console.log(getVal1(3, 5)) //8 let getVal = (a, b) => { console.log(arguments); //arguments is not defined return a + b; } console.log(getVal(1, 2)) //3 -
箭头函数不能使用new关键字实例化对象
var Person = function(name, age) { this.name = name; this.age = age; this.say = function() { console.log(`你好我是${this.name}`) } } var xiaoming = new Person("小明", 18) xiaoming.say() let Person=()=>{ console.log("你好") } console.log(Person) -
箭头函数没有构造器，因此不可以使用new关键字来实例化对象，function是一个对象但是箭头函数不是对象，他其实就是一个表达式。
六.解构赋值
let person = {
name:"张三",
age:10,
sex:"男"
}
let {name,age} = person;
console.log(name,age); //张三 10
数组解构：
let arr1 = [2,[5,6,7],8];
let [a,[b,d],c] = arr1;
console.log(d,c) //6,8
默认值
let {a,b=30}={a:20,b:50} //20 50
let {a,b=30}={a:20} //20 30
console.log(a,b)
也可以使用剩余运算符(把剩余的属性全部放在res对象中)
let Person ={
p1:{
name:"张三"
},
p2:[1,2,3],
p3:"hello world"
}
let {p1,...res} = Person;
console.log(p1,res);
七.对象的扩展功能
-
ES6
直接写入变量和函数,作为对象的属性和方法
let name = "张三"; let age=18; const Person = { name, age, say(){ console.log(this.name); } } Person.say() -
ES5
var Person = { name:"张三", age:18, say:function(){ console.log(this.name); } } Person.say()
八.取值器
const Student = {
num:10,
set(newNum){
if(newNum>this.num){
this.num = newNum;
}else{
throw new Error("班级人数太少，不开办") //抛出异常
}
},
get(){
return `在班人数${this.num}`;
}
}
Student.set(5) //Uncaught Error: 班级人数太少，不开办
Student.set(35) //在班人数35
console.log(Student.get());
九.把对象的属性名设置为变量
ES6 可以把对象的属性名设置为变量
let name = "name123";
let age = "年龄";
const Student = {
[name]:"张三",
[age]:18
}
console.log(Student); //name123: "张三" 年龄: 18
十.is方法
is比较，相当于===
let obj1 = {
name:"张三"
}
let obj2 = {
name:"李四"
}
let obj3 = {
age:10,
}
let flag = Object.is(obj1,obj2) //返回false
//let flag = Object.is(NaN,NaN) //返回true
console.log(flag);
console.log(NaN===NaN);//特殊，返回false
assign()方法，主要是浅拷贝，用于对象的合并把两个对象的合并到target对象中
//Object.assign(target,obj1,obj2)
let newObj = {};
Object.assign(newObj,obj2,obj3);
// newObj.name = "狗蛋";
console.log(obj2) //{name: '李四'}
console.log(newObj) //{name: '李四', age: 10}
十一.symbol
symbol是es6新增的基本（原始）数据类型，表示独一无二的属性
如果使用Symbol定义的对象中的属性,必须使用[变量名]来取值
let name = Symbol("name");
const phone = Symbol("phone");
const Person = {
age:10,
name:"张三",
[name]:'狗蛋',
[phone]:"18220050305"
}
// Person.name = "张三";
// Person[name] = "狗蛋";
console.log(Person[name]); //狗蛋
console.log(Personname); //张三
遍历对象时，Symbol类型的属性不能出来，因此不常用
for (const key in Person) {
console.log(key,Person[key]); //age 10 name 张三
}
获取symbol类型的值，通过**Object.getOwnPropertySymbols()**方法
let keys = Object.getOwnPropertySymbols(Person)
console.log(keys); //[Symbol(name), Symbol(phone)]
for (let i = 0;i< keys.length; i++){
console.log( Person[keys[i]]); //狗蛋 18220050305
}
十二.Map集合
Map类型是键值对的有序列表,键和值是任意类型
let map = new Map();
map.set("name","张三");
map.set("age",10);
let map2 = new Map([
["name","jk"],
["age",10]
])
console.log(map);
console.log(map2);
console.log(map.size); //2
console.log(map.get("age")); //10
map.delete("name") //删除name
console.log(map.has("name")); //false
map.clear() //清空集合
console.log(map); //Map(0) {size: 0}
遍历集合：
//foreach()
map.forEach((item,key)=>{
console.log(key,item); // name 张三 ;age 10
})
//forof
for (const item of map) {
// console.log(item);
console.log(item[0]+":"+item[1]); //name 张三 ;age 10
}
十三.集合set
集合：表示无重复数值的有序列表
let set = new Set();
set.add("张三");
set.add(666);
set.add("狗蛋");
set.add("狗蛋");
set.add("狗蛋");
set.add("狗蛋");
console.log(set); //Set(3) {'张三', 666, '狗蛋'}
set集合中，值就是键,键就是值，因此一般不用forEach遍历。
set.forEach((v,k)=>{
console.log(k,v);
})
for (const v of set) {
console.log(v);
}
//扩展运算符遍历
var arr = [...set];
console.log(arr);
set中对象的引用无法被释放
let set2 = new Set();
let obj = {
"name":"张三"
}
let obj2 = {
"age":"10"
}
set2.add(obj);
set2.add(666);
// 释放对象
obj = null;
console.log(set2.has(obj)); //返回false
console.log(set2); //obj没有被释放
怎样才能释放？在定义的时候不能用Set(),使用弱引用WeakSet()
let set3 = new WeakSet();
set3.add(obj);
set3.add(obj2)；
//释放对象
obj=null;
console.log(set3) //obj对象被释放
**注：**weakset()
-
不能传入非对象类型的参数；
-
不可迭代；
-
没有forEach()的许多方法；
-
没有size属性
WeakSet了解一下,主要记住set的属性和方法
十四.数组
1. from()
from()：将伪数组转化为真正的数组。
function add(){
// arguments就是一个伪数组
console.log(arguments); //Arguments(3) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// es5的转化
//let arr = [].slice.call(arguments);
//console.log(arr) //(5) [1, 2, 3, 4, 5]
// es6写法
let arr = Array.from(arguments);
onsole.log(arr)
}
add(1,2,3,4,5)
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
let lis = document.getElementsByTagName("li");
let lis2 = Array.from(lis)
console.log(lis instanceof Array); //返回false
console.log(lis2 instanceof Array); //返回true
console.log([...lis]); //(5) [li, li, li, li, li]
// from()还可接受第二个参数,用来对每个元素进行处理
let liContent = Array.from(lis,item=>item.innerText);
//相当于 let liContent = Array.from(lis,function(item){
// return item.innerText
// });
let liContents = Array.from(lis,item=>(item.innerText=666));
//相当于 let liContents = Array.from(lis,function(item){
// return item.innerText = 666;
// })
console.log(liContent); //['01', '02', '03', '04', '05']
console.log(liContents); //[666, 666, 666, 666, 666]
2. of()
of()：将数组合并。
let arr = Array.of(1,2,3,[7,8,9],{name:"张三"});
console.log(arr);
3. copywithin()
copywithin():用于从数组的指定位置拷贝元素到数组的另一个指定位置中，截取替换。
//从3位置开始，5位置结束(不包括5)，替换从4位置所有的值
let arrs = [1,2,3,4,5,6,7,8]
let arr = arrs.copyWithin(4,3,5);
console.log(arr); //1234 45 78
4. find()
find()查找元素, 返回通过测试（函数内判断）的数组的第一个元素的值。
let x = [4,6,8,2,3].find(n=>{
if(n>5){
console.log(n); //6,8
}
})
let y = [4,6,8,2,3].find(n=>n>5)
console.log(y); //6
findIndex()查找索引;
let x = [4,1,8,2,3].findIndex(n=>n>5)
console.log(x); //2
// 查找已知字符索引
var arr = [3,4,5,8,2];
console.log(arr.indexOf(5)); //1
5. keys() ,values() ,entries()
keys()对键名的遍历；
values()对值的遍历；
entries()对键值对的遍历，返回一个遍历器；
可用for····of循环进行遍历
let arr = [3,5,7,9];
console.log(arr.keys()); //Array Iterator {}
//遍历键
for (const index of arr.keys()) {
console.log(index);
}
//遍历值
for (const index of arr.values()) {
console.log(index);
}
//遍历键值
for (const [k,v] of arr.entries()) {
console.log(k,v);
}
console.log(it.next().value); //[0, 3]
console.log(it.next().value); //[1, 5]
console.log(it.next().value); //[2, 7]
console.log(it.next()); //value: (2) [3, 9] ;done: false
console.log(it.next()); //value: undefined, done: true
6.includes()
includes()返回一个布尔值，表示一个数组是否包含给定的值
console.log([1,2,3].includes(2)) //true
console.log([1,2,3].includes("2")) //false
console.log([1,2,3].includes(4)) //false
// //和之前的方法indexOf()有点像
console.log([1,2,3].indexOf(2))//返回索引1
console.log([1,2,3].indexOf(4))//返回-1
7. 迭代器
迭代器,就是刚才看到的遍历器
Interator(迭代器)是一种新的遍历机制:两个核心
-
迭代器是一个接口,能快捷的访问数据,通过Symbol.iterator来创建迭代器 , 通过迭代器的next()方法来获取迭代之后的结果。
-
迭代器是用于遍历数据结构的指针(数据库的游标)
//使用迭代 const items = ['a','b','c']; console.log(items) //创建新的迭代器 const it = items[Symbol.iterator]() console.log(it.next())//{value: 'a', done: false} console.log(it.next())//done如果为false表示遍历继续，如果为true表示遍历完成 console.log(it.next()) console.log(it.next())
数组去重：
function removeDuplicates(arr){
let set = new Set();
for(let i = 0; i < arr.length; i++){
set.add(arr[i]);
}
let newArr = [...set]
return newArr;
}
console.log(removeDuplicates([2,2,2,5,4,4,7,7,9]));
十五.生成器
1.generator函数
它可以通过yield关键字将函数挂起(让函数停留在当前的位置)，为改变执行流提供了可能，同时为了做异步编程提供了可能。
它和普通函数的区别：
(1) function后面 ，函数名之前有一个*
(2) 只能在函数内部使用yield表达式，让函数挂起
function* fun(){
console.log(111);
yield "张三";
console.log(2222);
yield "哈哈";
console.log(33333);
}
let it = fun();
//调用的时候返回一个类似迭代器对象,可以调用next()方法
//generator函数分段执行的，yield是暂停执行，然而next()是恢复执行。
console.log(it.next()); //输出{value: '张三', done: false}
console.log(it.next()); //输出{value: '哈哈', done: false}
console.log(it.next()); //{value: undefined, done: true}
生成器案例：
//x不是yield "张三"的返回值，他是next()调用 恢复当前yiled()执行传入的实参
function* add(){
console.log(1111);
let x = yield "张三";
console.log(x);
let y = yield "啊哈哈";
console.log(x+y);
}
let it = add();
console.log(it.next());
console.log(it.next(10));
console.log(it.next(20));
let obj = {
name:"张三",
age:10
}
//generator函数
function* objectEntries(obj){
//获取对象所有的key保存到数组[name,age]
const propkeys = Object.keys(obj);
//迭代器一旦生成我们就可以利用for of进行遍历了
// for(let [key,val] of objectEntries(obj)){
// console.log(key,val)
// }
for(const propkey of propkeys){
yield [propkey,obj[propkey]];
}
}
let it = objectEntries(obj)
console.log(it.next()); //输出{value: Array(2), done: false} ;['name', '张三']
console.log(it.next());//输出{value: Array(2), done: false}; ['age', 10]
console.log(it.next());//{value: undefined, done: true}
2.生成器的应用
生成器的作用：部署ajax操作，可以让异步代码同步化
应用：生成器+ajax调用接口，获取数据
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 搞个生成器，主函数
function* main(){
let res = yield getHot("http://120.48.109.174:8081/area/hot");
yield getHouse("http://120.48.109.174:8081/houses",res)
}
let it = main();
it.next()
function getHot(urls){
$.ajax({
type: "get",
url: urls,
success: function (res) {
console.log(res);
it.next(res)
}
});
}
function getHouse(urls,res){
$.ajax({
type: "get",
url: urls,
data: {
"cityId":res.body[0].value
},
success: function (res) {
it.next();
console.log(res);
}
});
}
小案例： 加载Loading…页面，数据加载完成(异步操作)
function* load(){
// 异步代码同步化
loadUI();
yield showData();
hideUI();
}
let itLoad = load();
itLoad.next();
function loadUI(){
console.log("加载loading...页面");
}
function showData(){
setTimeout(()=>{
console.log("数据加载完成");
itLoad.next();
},2000);
}
function hideUI(){
console.log("隐藏loading...页面");
}
十六.promise
异步编程的解决方案：
Promise （承诺）相当于一个容器，保存着未来才会结束的事件（异步操作）的一个结果，各种异步操作都可以使用同样的方法处理 调用接口库中axios就是使用Promise实现的。
该方案的特点：
- 对象的状态不受外界影响，处理异步操作 三个状态，Pending(进行) ，Resolved(成功) ， **Rejected(**失败)。
- 一旦状态发生改变，就不会在变，任何时候都可以得到这个结果。
let pm = new Promise((resolve,reject)=>{
//执行异步操作
let res = {
code:200,
data:{
name:"张三",
age:18
},
error:"获取失败"
}
if(res.code == 200){
resolve(res.data)
}else{
reject(res.error)
}
})
pm.then(res=>{
console.log(res); //输出{name: '张三', age: 18}
})
1.promise应用
-
简单封装
// 简单封装,控制时间 function timeOut(ms){ return new Promise((resolved,rejected)=>{ setTimeout(()=>{ resolved("成功") },ms) }) } timeOut(2000).then((val)=>{ console.log(val) }) -
封装ajax
const getJson=(url)=>{ return new Promise((resolved,rejected)=>{ const xhr = new XMLHttpRequest(); xhr.open("GET",url) xhr.onreadystatechange = handler; xhr.responseType = "json"; xhr.setRequestHeader("Accept","application/json"); xhr.send() function handler(){ // console.log(this); if(this.readyState == 4){ if(this.status == 200) { resolved(this.response) }else{ // rejected(new Error(this.statusText)) rejected(new Error("数据为空")) } } } }) } getJson("http://120.48.109.174:8081/area/hot").then((res)=>{ console.log(res); },(error)=>{ console.log(error) });
2.promise对象的其他方法
(1) then()
then()方法的第一个参数是resolve回调函数(成功返回的数据)，reject是第二个参数(可选，失败的状态)。
then()返回一个新的promise实例，可以采用链式编程（类似于jQ方法），resolve() 、reject()、all()、race()、finally()
(2) resolve()
resolve()可以把任何对象转化为promise对象
let pm = Promise.resolve("嘿嘿");
console.log(pm); //Promise
pm.then(res=>{
console.log(res); //嘿嘿
})
let pm = new Promise((resolve,reject)=>{
console.log(666);
})
pm.then((res)=>{
console.log(res);
})
(3) reject()
reject() 和 resolve() 相似
let pm = Promise.reject("失败了")
pm.then(err=>{
console.log(err);
})
(4) all()
all() 可能在做一些游戏类加载资源使用一步操作
// 看一下伪代码，脑补一下场景
let promise1 = new Promise((resolve,reject)=>{ })//比如加载图片
let promise2 = new Promise((resolve,reject)=>{ })//比如加载静态资源
let promise3 = new Promise((resolve,reject)=>{ })//比如加载flash的
let p4 = Promise.all([promise1,promise2,promise3]);
p4.then(()=>{
//三个都成功 才成功
}).catch(err=>{
//如果有一个失败就失败了
})
//举例
let pm = new Promise((resolve,reject)=>{
if(true){
resolve(666)
}else{
reject("失败")
}
})
pm.then((res)=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
/* 简写 */
// pm.then((res)=>{
// console.log(res);
// },(err)=>{
// console.log(err);
// })
(5) race()
race() 表示某个异步请求设置超时时间，并且在超时后执行相应的操作
实例：请求图片资源
function requestImg(imgSrc){
return new Promise((resolve,reject)=>{
const img = new Image();
img.onload = function(){
resolve(img)
}
img.src = imgSrc;
})
}
function timeout(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
// reject("图片请求失败")
reject(new Error("图片请求失败"))
},3000)
})
}
Promise.race([requestImg('http://www.zhangli6.top/assets/img/service-3.png'),timeout()]).then(res=>{
console.log(res);
document.body.appendChild(res);
}).catch(err=>{
console.log(err)
})
(6) done() 、finally()
done() finally()在最后面写,目前用的比较少，服务端会用到
十七.async
异步操作 :
1.promise
2.generator写法比较复杂，难以阅读，又出现了的async
3.async异步操作更简便
async的作用：让异步更加简单，让生活更加美好。
基本操作：async 它会返回一个promise对象， 哈哈 又可以使用then() 、catch()了。
成功演示：
async function fn(){
return await "哈哈"
}
let pm = fn()
console.log(pm); //Promise {<pending>}
pm.then(res=>{
console.log(res); // 哈哈
}).catch(err=>{
console.log(err);
})
async function fn(){
let s = await 'hello world';
let data = await s.split(" ");
return data;
}
// 如果async函数中有多个await ,那么then函数会等待所有的await指令运行完成，才开始执行。
let pm = fn();
pm.then(res=>{
console.log(res) // ['hello', 'world']
}).catch(e=>{
console.log(e)
})
出错演示：
async function fn2() {
throw new Error("出错了")
}
var pm = fn2();
pm.then(v => console.log(v)).catch(e => console.log(e));
// async function fn2(){
// // throw new Error("出错了")
// await Promise.reject("出错了");
// await Promise.resolve("hello");
// }
// fn2().then(v=>console.log(v)).catch(e=>console.log(e));
用 try catch 处理一下：
async function fn2(){
try {
await Promise.reject("出错了");
// console.log(666);
} catch (error) {
console.log(error); //出错了
}
return await Promise.resolve("hello");
}
fn2().then(v=>console.log(v)).catch(e=>console.log(e)); //hello
十八.class类
构造函数(ES5)：
function Student(name,age){
this.name = name;
this.age = age;
}
Student.prototype.song = function(){
console.log(`你好我是${this.name},我会唱歌`);
}
var xiaoming = new Student("小明",10);
console.log(xiaoming);
xiaoming.song()
类，相当于构造函数(ES6)
class Student {
constructor(name,age,grade) {
this.name = name;
this.age = age;
this.grade = grade;
}
song(){
console.log((`你好，我是${this.name},我会唱歌`));
}
say(){
console.log(`你好我是${this.name},今年${this.age}岁,上${this.grade}年级`);
}
}
let liming = new Student("李明",18,"六")
liming.song();
liming.say();
也可以通过**Object.assign()**方法，一次性向类中添加多个方法
class Person {
constructor(name,age){
this.name = name;
this.age = age;
}
}
Object.assign(Person.prototype,{
sayName(){
return this.name;
},
sayAge(){
return this.age
}
})
let p1 = new Person("张三",10);
console.log(p1.sayName()) //张三
console.log(p1.sayAge()); //10
十九.继承
// 写一个超级类（父类）
class Person {
constructor(name,sex){
this.name = name;
this.sex = sex;
}
sayName(){
console.log("你好我是"+this.name);
}
}
//子类(跟父类有公共属性，就可以继承)
// class Student {
// constructor(name,sex,age,xuehao){
// this.name = name;
// this.sex = sex;
// this.age = age;
// this.xuehao = xuehao;
// }
// }
class Student extends Person {
constructor(name,sex,age,xuehao){
super(name,sex);
this.age = age;
this.xuehao = xuehao;
}
study(){
console.log("我喜欢学习");
}
}
let xiaoming = new Student("小明","男",10,"1111111")
let goudan = new Person("狗蛋","男");
console.log(xiaoming);//Student {name: '小明', sex: '男', age: 10, xuehao: '1111111'}
console.log(goudan);//Person {name: '狗蛋', sex: '男'}
goudan.sayName();//你好我是狗蛋
xiaoming.sayName();//你好我是小明
xiaoming.study();//我是小明,我的年龄为10,学号为1111111
二十.模块引入
Es6引入了模块化的概念，通过export导出模块，通过import导入模块。
导出模块
导出的方式：
1、export 变量会默认添加到导出的整个对象中，成为对象的属性
2、export {变量1，变量2}会默认被解析成变量序列并添加到导出的整个对象中，成为对象的属性
3、export default 默认导出，将会被默认导入接收到
//变量
const name = "张三";
const age = 10;
//对象
const Person = {
name:"小明",
age:10,
grame:"哈哈"
}
//class类
class SuperMan {
constructor(name,age,type){
this.name = name;
this.age = age;
this.type = type;
}
skill(){
console.log("我是"+this.type);
}
}
export {name,age,Person,SuperMan}
导入模块
导入的方式：
1、import {变量1 as 重命名，变量2}对象解构去匹配导出的整个对象中的相同的变量名，没有匹配到为undefined，可以重命名
2、import 变量,默认导入，可以接收到默认导出
3、import * as 变量名,全部导入，可以接收到文件中的所有导出，包括默认导出。
Es6的导入要先在script标签中设置模块引入方式
<script type="module">
import {name,age,Person,SuperMan} from "./modules/data.js"
// console.log(Person.grame);
let jiangziya = new SuperMan("姜子牙",88,"法师");
jiangziya.skill();
</script>
93
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
