为什么要学习ES6？
- ES5语言的先天性不足。比如变量提升、内置对象的方法不灵活、模块化实现不完善…
- 为了后面vue、尤其是react框架做好了准备
- 目前大部分公司的项目都在使用es6
ES6新特性有哪些？
- let和const命令
- es6的模板字符串
- 增强的函数
- 扩展的字符串、对象、数组功能
- 结构赋值
- Symbol
- Map和Set
- 迭代器和生成器
- Promise对象
- async的用法
- 类class
- 模块化实现
1、let和const命令
<script type="text/javascript">
//1.let声明变量，没有变量提升
console.log(a);
let a=10;
//2.是一个块作用域
if(1==1){
var b=10;
}
//3.不能重复声明
let a=3;
let a=1;
console.lo(a);
//const声明常量，一旦被声明，无法修改
const max=30;
const max=40;
consolo.log(max);
const person={
name:'小花'
}
// person.name='alex';
// person={
// age:20
// }
// console.log(person);
//作用1：for循环是个经典例子
const arr=[];
for(var i=0;i<10;i++){
arr[i]=function(){
return i;
}
}
console.log(arr[5]());
//作用2：不会污染全局变量
let regExp=10;
console.log(RegExp);
console.log(window.RegExp);
//建议：在默认情况下用const,而只有在知道变量值需要被修改的情况使用Let
</script>
2、es6的模块化
<script>
//模板字符串：使用tab上面的反引号``,插入变量时使用${变量名}
const oBOX=document.querySelector('.box');
// oBOX.innerHTML="<ul><li><p id="+id+">"+name"</p></li></p>"
let id=1,
name='小马哥';
let htmlStr=`<ul>
<li>
<p id=${id}>${name}</p>
</li>
</ul>`;
oBOX.innerHTML=htmlStr;
</script>
3、增强的函数
<script>
//1.带参数默认值的函数
//es5的写法
/*function add(a,b){
a =a // 10;
b =b // 20;
return a+b;
}
console.log(add());
*/
function add(a=10,b=20){
return a+b;
}
console.log(add());
//2.默认的表达式也可以是一个函数
function add(a,b=getVal(5)){
return a+b;
}
return getVal(val){
return val+5;
}
console.log(add(10));
4、剩余的参数
<script>
//es5写法
/*function pick(obj){
let result=Object.create(null);
for(let i=1;i<arguments.length;i++){
result[arguments[i]]=obj[arguments[i]]
}
return result;
}
let book={
title:'es6的教程',
author:'小花',
year:2019
}
let bookDate pick(book,'author','year');
console.log(bookDate);
*/
//剩余参数:由三个点...和一个紧跟着的具名参数指定...keys
function pick(obj,...keys){
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 book={
title:'es6的教程',
author:'小花',
year:2019
}
let bookDate pick(book,'author','year');
console.log(bookDate);
</script>
5、扩展运算符、箭头函数
<script>
//4.扩展运算符
//剩余运算符：把多个独立的合并到同一个数组中
//扩展运算符：讲一个数组分割，并且是将各个项作为分离的参数传给函数
const maxNum=Math.max(20,30);
const.log(maxNum);
//处理数组中的最大值使用apply
const arr=[10,20,50,30,90,100,40];
//console.log(Math.max.apply(null,arr))；
//es6扩展运算符更方便
consle.log(Math.max(...arr));
//ES6的箭头函数
//使用=>来定义 function(){}等于与()=>{}
let add=function(a,b){
return a+b;
}
let add=(a,b)=>(a,b)=>{
return a+b;
}
console.log(add(10,20));
let add=(val1,val2)=>val1+val2;
console.log(add(10,20));
let fn=(function(){
return function(){
console.log('hello es6');
}
})
let fn=(()=>{
return()=>{
console.log('hello es6 2');
}
})
</script>
6、箭头函数this指向
<script>
/*
没有this绑定
es5中this指向：取决于调用该函数的上下文对象
let PageHandle={
id:123,
init:function(){
document.addEventListener('click',function(event){
console.log(this);
this.doSomeThings(event.type);
})
},
doSomeThings:function(type){
console.log(`事件类型：${type},当前id:${this.id}`);
}
}
PageHandle.init();*/
let PageHandle={
id:123,
init:function(){
//箭头函数没有this指向,箭头函数内部this值只能通过查找作用域链来确定
document.addEventListener('click',(event)=>{
console.log(this);
this.doSomeThings(event.type);
},false)
},
doSomeThings:function(type){
console.log(`事件类型：${type},当前id:${this.id}`);
}
}
PageHandle.init();
//使用箭头函数的注意事项1：使用箭头函数 函数内部没有arguments
let getVal=(a,b)=>{
console.log(arguments);
return a+b;
}
console.log(getVal(1,3));
//2.箭头函数不能使用new关键字来实例化对象
let Person=()=>{
};
function函数也是一个对象,但是箭头函数不是一个对象它其实就是一个语法糖
console.log(Person);
let p=new Person();
</script>
7、解构赋值
<script>
//解构赋值是对赋值运算符的一种扩展
//它针对数组和对象来进行操作
//优点：代码书写上简洁易读
let node={
type:'iden',
name:'foo'
}
//let type=node.type;
//let name=node.mode;
//完全解构
let{type.name}=node;
console.log(type,name);
let obj={
a:{
name:"张三"
},
b:[],
c:'hello world',
}
//不完全解构 可忽略
// let{a}=obj;
// console.log(a);
//剩余运算符
//let{a,...res}=obj;
//console.log(res);
//对数组解构
let arr=[1,2,3];
let[a,b]=arr;
console.log(a,b);
//可嵌套
let[a,[b]]=[1,[2],3];
</script>
8、扩展对象的功能
<script>
//es6直接写入变量和函数，作为对象的属性和方法
const name='小花',
age=20;
const person={
name,//等价于name:name
age,
SayName(){
console.log(this.name);
}
}
person.SayName();
function fn(x,y){
return(x,y);
}
console.log(fn(10,20));
let cart={
wheel:4,
set(newVal){
if(newVal<this.wheel){
throw new Error('轮子数太少了')
}
this.wheel=newVal;
},
get(){
return this.wheel;
}
}
cart.set(6);
console.log(cart.get())
const obj={};
obj,isShow=true;
const name='a';
obj[name+'bc']=123;
console.log(obj);
//对象的方法
//is() ===
//比较两个值是否严格相等
console.log(NaN === NaN);
console.log(Object.is(NaN,NaN);
//assign()
//对象的合并
//Object.assign(target,obj1,obj2,...)
let newObj=Object.assign({},{a:1},{b:2});
console.log(newObj);
</script>
9、Symbol类型
<script>
//原始数据类型Symbol,它表示是独一无二的值
//最大的用途：用来定义对象的私有变量
const name=Symbol('name');
const name2=Symbol('name');
console.log(name === name2);
let s1=Symbol('s1');
console.log(s1);
let obj={};
obj[s1]='小花';
//如果用Symbol定义的对象中的变量，取值时一定要用[变量名 ]
console.log(obj[s1]);
//console.log(obj.s1);
// for(let key in obj){
// console.log(key);
// }
// console.log(Object.key(obj));
let s=Object.getOwnPropertySymbols(obj);
console.log(s[0]);
//获取Symbol声明的属性名(作为对象的key)
let m=Reflect.ownKeys(obj);
console.log(m);
</script>
10、Set集合数据类型
<script>
//集合：表示无重复值的有序列表
let set=new Set();
console.log(set);
//添加元素
set.add(2);
set.add('4');
set.add('4');
set.add([1,2,3]);
//删除元素
set.delete(2);
//校验某个值是否在set中
console.log(set.has('4'));
console.log(set.size);
set.forEach((val,key));=>{
console.log(val);
console.log(key);
}
//将set转换成数组
let set2=new Set([1,2,3,3,4]);
//扩展运算符
let arr=[...set2]
console.log(set2);
//1.set中的对象的引用无法被释放
let set3=new Set(,obj={};
set3.add(obj);
//释放当前的资源
obj=null;
console.log(set3);
</script>
11、Map数据类型
<script>
//Map类型是键值对的有序列表，键和值是任意类型
let map=new Map();
map.set('name','张三');
map.set('age',20);
console.log(,ap.get('name'));
console.log(map);
map.has('name');//true
map.delete('name');
map.clear();
console.log(map);
let m=new Map
([['a',1]['c',2]
]);
</script>
12、数组的扩展方式一
<script>
//数组的方法 from() of()
//1.()将伪数组转换成真正的数组
function add(){
console.lo(arguments);
//es5转换
let arr=[].slice(.call(arguments));
console.log(arr);
//es6写法
let arr=Array.from(arguments);
console.log(arr);
}
add(1,2,3);
let lis=document.queryCommandIndeterm('li');
console.log(Array.from(lis));
//扩展运算符，将伪数组转换成真正的数组
console.log([...lis]);
//from()还可以接受第二个参数，用来对每个元素进行处理
Array.from(lis,ele=>ele.textContent);
console.log(liContents);
//2.of() 将任意的数据类型，转换成数组
console.log(Array.of(3,11,20,[1,2,3],id:1));
//3.copywithin() 数组内部将指定位置的元素复制到其他的位置，返回当前数组
//从3位置往后的所有数组，替换从0位置往后的三个数组
[1,2,3,8,9,10].copyWithin(0,3);//[8,9,10,8,9,10]
//4.find() fingIndex()
//find()找出第一个符合条件的数组成员
let num=[1,2,-10,-20,9,2].find((n=> n<0)
console.log(num);
//findIndex()找出第一个符合条件的数组成员的索引
let numIndex=[1,2,-10,-20,9,2].find(n=>n<0)
console.lo(numIndex);
})
</script>
13、数组的扩展方式二
<script>
//entries() keys() values()返回一个遍历器 可以使用for...of循环进行遍历
//console.log(['a','b'].keys())；
//keys()对键名遍历
//entries()对键值进行遍历
for(let index of['a','b'.keys()]){
console.log(index);
}
for(let ele of ['a','b'].values()){
console.log(ele);
}
for(let [index,ele] of['a','b'].entries()){
console.log(index,ele);
}
let letter=['a','b','c'];
let it=letter.entries();
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
//6.includes()返回一个布尔值，表示某个数值是否包含给定的值
console.log([1,2,3].includes(2));
console.log([1,2,3].includes('4'));
//之前 indexof()
console.log([1,2,3].indexOf('2'));
</script>
14、迭代器interator的用法
<script>
//Interator
//是一种新的遍历机制，两个核心
//1、迭代器是一个接口，能快捷的访问数据，通过Symbol.iterator来创建迭代器
//2.迭代器是用于遍历数据结构的指针(数据库的游标)
const item=['one','two','three'];
//1.创建新的迭代器
const ite=items[Symbol.iterator]();
console.log(ite.nex());
console.log(ite.next());
console.log(ite.next());
console.log(ite.next());
console.log(ite.next());
</script>
15、生成器Generator的用法
<script>
//genterator函数 可以通过yield关键字 将函数挂起，为了改变执行流提供了可能性，同时为了做异步编程提供了方法
//它普通函数的区别
//1.function后面 函数名之前有个*
//2.只能在函数内部使用yield表达式，让函数挂起
function* func(a){
console.log('one');
yield 2;
console.log('two');
yield 3;
}
//返回一个遍历器对象，可以调用next()
let fn=func();
console.log(fn.nex());
console.log(fn.nex());
console.log(fn.nex());
//总结：generator函数是分段执行的，yield语句是暂停执行，而next()是恢复执行
function* add(){
console.log('start');
let x=yield '2';
console.log('one:'+x);
let y=yield '3';
console.log('two:'+y);
return x+y;
}
const fn=add();
console.log(fn.nex());
//使用场景：为不具备interator接口提供了遍历操作
function* objectEntried(obj){
//获取对象的所有的key保存到数组[name,age]
const propKeys=Object.keys[obj];
for(const propkey of propKeys){
yield [propKeys,obj[propKeys]]
}
}
const obj={
name:'小花',
age:18
}
obj[Symbol.iterator]=objectEntries;
console.log(obj);
for(let [key,value] of objectEntried(obj)){
console.log(`${key},${value}`);
}
</script>
16、Generator的应用
<script>
//Generator 部署ajax操作，让异步代码同步化
//回调地狱
// $.ajax({
// url:'https://free-api.heweather.net/se/weather/now?location=beijing&key=4693ff5ea653469f8bb0c2963803976';
// method:'get',
// success(res){
// console.log(res);
// //继续发送请求
// $.ajax({
// url:'',
// method:'get',
// success(res1){
// //发送ajax
// }
// })
// }
// })
function* main(){
let res=yield request('https://free-api.heweather.net/se/weather/now?location=beijing&key=4693ff5ea653469f8bb0c2963803976'){
}
console.log(res);
//执行后面的操作
console.log('数据请求完成，可以继续操作')
}
const ite=main();
ite.next();
function request(url){
$.ajax({
url,
method:'get',
success(res){
ite.next(res);
}
})
}
//加载loading...页面
//数据加载完成...(异步操作)
//loading关闭掉
function* load(){
loadUI();
yield showData(){
hideUI();
}
let itload=load();
itload.next();
function LoadUI(){
console.log('加载loading...页面')
}
}
function loadUI(){
console.log('加载loading...页面');
}
function showData(){
setTimeout(()=>{
console.log('数据加载完成');
},1000);
}
function hideUI(){
console.log('隐藏loading...页面')
}
</script>
17、Promise的使用
<script>
//promise 相当于一个容器，保存着未来才会结束的时间（异步操作）的一个结果
//各种异步操作都可以用同样的方法进行处理axios
//特点：1、对象的状态不受外界影响 处理异步操作 三个状态 penging(进行) Resolved(成功) Rejected(失败)
//2.一旦状态改变，就不会再变，任何时候都可以得到这个结果
let pro=new Promise(function(Resolved,rejected){
//执行异步操作
let res={
code:201,
data:{
name:'小马哥'
},
error:'失败了'
}
setTimeout(()=>{
if(res.code===200){
resolved(res.data);
}else{
rejected(res.error);
}
},1000);
})
console.log(pro);
pro.then((val)=>{
console.log(val);
},(err)=>{
})
function timeOut(ms){
return new Promise((resolved,rejected)=>{
setTimeout(()=>{
resolved('hello promise success!!')
},ms);
})
}
timeOut(2000).then((val)=>{
console.log(val);
})
</script>
18、使用Promise封装Ajax
<script>
const getJSON=function(){
return new Promise((resolve,reject)=>{
const xhr=new XMLHttpRequest();
xhr.open('GET',url);
xhr.onreadystatechange=handler;
xhr.responseType='json';
xhr.setRequestHeader('Accent','application/json');
//发送
xhr.send();
function handler(){
console.log(this);
if(this.readyState===4){
if(this.status===200){
resolve(this.response);
}else{
reject(new Error(this.statusText))
}
}
}
})
}
getJSON('https://free-api.heweather.net/se/weather/now?location=beijing&key=4693ff5ea653469f8bb0c2963803976')
.then((data)=>{
console.log(data);
},(error)=>{
console.log(error);
});
//then()方法
//then()第一个参数是relove回调函数，第二个参数是可选的，是reject状态回调的函数
//then()返回一个新的promise实例，可以采用链式编程
</script>
19、Promise的其他方法
<script>
//resolve() reject() all() race() done() finally()
//resolve()能够将现有的任何对象转换成promise对象
//let p=promise.resolve('foo');
let p=new Promise(resolve=>resolve('foo'));
p.then((data)=>{
console.log(data);
})
//应用：一些游戏类的素材比较多、等待图片、flash、静待资源文件都加载完成，才进行页面的初始化
let Promise1=new Promise((resolve,reject)=>{});
let promise2=new Promise((resolve,reject)=>{});
let promise3=new Promise((resolve,reject)=>{});
let p4=promise.all([promise1,promise2,promise3])
p4.then(()=>{
//三个都成功 才成功
}).catch(err=>{
//如果有一个失败，则失败
})
//race()某个异步请求设置超时时间，并且在超时时间内执行相应的任务
//1.请求图片资源
function requestImg(imgSrc){
return new Promis((resolve,reject)=>{
const img=new Image();
img.onload=function(){
resolve(img);
}
img.src=imgSrc;
});
function timeout(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
reject('图片请求超时');
},3000);
})
}
Promise.race([requestImg('https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=1&spn=0&di=7214885350303334401&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2759886675%2C3050232684&os=4175619537%2C842558139&simid=4175794174%2C861041753&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fc%2F5799c819cd9ae.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Botg9aaa_z%26e3Bv54AzdH3Fowssrwrj6_kt2_8alm89_c_z%26e3Bip4s&gsm=&islist=&querylist=&dyTabStr=MCwxLDYsMyw0LDUsMiw3LDgsOQ%3D%3D')
console.log(data);
document.body.appendChild(data);
]).catch(err=>{
console.log(err);
});
server.listen(3000).then(()=>{
}).finally(server.stop());
}
</script>
20、async的用法
<script>
//Generator Promise async 1、解决回调地狱的问题 2、使得异步操作更加方便
//作用：使得异步操作更加方便
//基本操作 async它会返回一个Promise对象 then catch
//async是Generator的一个语法糖
async function f(){
return await 'hello world';
let data=await s.split('');
return data;
}
//如果async函数中有多个await 那么then函数会等待所有的await指令 运行完的结果
f().then(v=>{console.log(v)}).catch(e=console.log(e));
</script>
21、class类的用法
<script>
//es5造类
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayName=function(){
return this.name;
}
let p1=new Person('小花',22);
console.log(p1);
class Person{
//实例化的时候会立即被调用
constructor(name,age){
this.name=name;
this.age=age;
}
}
//通过Object.assign()方法一次性向类中添加多个方法
Object.assign(Person.prototype,{
sayName(){
return this.name
}
})
let p1=new Person('小花',22);
console.log(p1);
</script>
22、类的继承extend
<script>
//使用关键字 extends
class Animal{
constructor(name,age){
this.name=name;
this.age=age;
}
sayName(){
return this.name;
}
sayAge(){
return this.age;
}
}
class Dog extends Animal{
constructor(name,age,color){
super(name,age);
//Animal.call(this,name,age);
this.color=color;
}
//子类自己的方法
sayColor(){
return `${this.name}是${this.age}岁了，它的颜色是${this.color}`
}
//重写父类的方法
sayName(){
return this.name+supper.sayAge()+this.color;
}
}
let d1=new Dog('小王',22,'green');
console.log(d1.sayName());
console.log(d1.sayName());
</script>
23、module模块的使用
//CommonJs和AMD
//ES6 module
//es6模块功能主要有两个命令构成:export和import
//export用于规定模块的对外接口 import用于输入其他模块提供的功能
//一个模块就是一个独立的文件
export const name='张三';
export const age=18;
export function sayName(){
return 'my name is 小花';
}
export{
name,age,sayName
}
/*const obj={
foo:'foo'
}*/
class Person{
constructor(){
}
sayAge(){
console.log('16');
}
}
<script type="module">
//CommonJs鍜孉MD
//ES6 module
import Person,{name,age,sayName} from './module.js'
//import *as f from './module.js'
//console.log(Person);
const p=new Person();
p.sayAge();
//console.log(f.default);
//console.log(name,sayName());
</script>
🌈本篇博客的内容【ES6新特性的用法】已经结束。
🌈若对你有些许帮助，可以点赞、关注、评论支持下博主，你的支持将是我前进路上最大的动力。
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
