ES6-11（第一部分）
ECMA
- ECMA是一个组织
- ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言
- Ecma国际指定了很多标准，ECMA-262只是其中之一
- TC39定期开会维护ECMA-262
ES6
-
let:
let是 ES6 中引入的一种新的变量声明方式，用于声明块级作用域的变量。它与之前 JavaScript 中的var关键字有着重要的区别。let和var的区别-
作用域:
var声明的变量具有函数级作用域，这意味着它们可以在函数内部的任何地方访问，即使是在声明之前。let声明的变量具有块级作用域，这意味着它们只能在声明所在的代码块（{}之间）内访问。
-
重复声明:
var允许在同一个作用域内重复声明同一个变量，后面的声明会覆盖前面的声明。let不允许在同一个作用域内重复声明同一个变量，这会抛出一个SyntaxError。
-
提升:
var声明的变量会进行提升，这意味着可以在声明之前访问它们，但访问的值是undefined。let声明的变量不会进行提升，在声明之前访问它们会导致ReferenceError。
使用
let的优势- 避免意外的变量覆盖：
let阻止了在同一作用域内重复声明变量，从而避免了意外的变量覆盖。 - 更清晰的代码逻辑：
let的块级作用域使得代码逻辑更清晰，更容易理解变量的作用范围。 - 减少全局变量的使用：
let的使用鼓励使用局部变量，从而减少了对全局变量的依赖，使代码更易于维护。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>let</title> </head> <body><script>//声明变量let a;let b,c,d;let e=100;let f=521,g='iloveyou',h=[];//1.变量不能重复声明// let star='star';// let star='xx';//2.块级作用域 全局，函数，eval//if else while for// {// let name='john'; //用var可以// }// console.log(name);//3.不存在变量提升 就是在下面声明的变量上面可以知道它的存在不会报错，用var才可以// console.log(song);// let song='恋爱达人'//4.不影响作用域链 就是在函数中没有声明这个变量，就会向上一级作用域找，找到就可以正常运行{let school='学校';function fn(){console.log(school);}fn();}</script> </body> </html>let实践案例
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- CSS --><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><style>.item{width: 100px;height: 80px;border: 2px solid green;float: left;}</style> </head><body><div class="container"><h2 class="page-header">点击切换颜色</h2><div class="item"></div><div class="item"></div><div class="item"></div></div><script>//获取div元素对象let items=document.getElementsByClassName('item');// //遍历并绑定事件 用ar声明i变量// for(var i=0;i<items.length;i++){// items[i].οnclick=function(){// //修改当前元素的背景颜色// // this.style.background='pink';// items[i].style.background='pink';//var声明i时不可用，因为先遍历items数组，后点击，i为3，不存在i为3的元素，所以不可用// }// }// console.log(window.i);//i为3，因为var声明变量，所以是全局的，在外面也能读取到//遍历并绑定事件 用let声明i变量for(let i=0;i<items.length;i++){items[i].onclick=function(){//修改当前元素的背景颜色// this.style.background='pink';items[i].style.background='pink';//let声明i时可用，因为是局部块级变量，所以i在函数中没有声明的时候会向上一级作用域找，就找到了对应的i}}</script> </body></html> -
-
const:值不能修改的量称常量
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>const 定义常量</title> </head> <body><script>//声明常量const SCHOOL='学校';//1.一定要赋初始值// const A;//2.一般常量使用大写（潜规则）// const a=100;//3.常量的值不能修改// SCHOOL='school';//4.块级作用域// {// const PLAYER='Hoshi';// }// console.log(PLAYER);//5.对于数组和对象的元素修改，不算做对常量的修改，不会报错，因为常量指向的地址没有修改// const TEAM=['hoshi','woozi','jww','jun'];// TEAM.push('scoups');// TEAM=100;//会报错</script> </body> </html>结构赋值：ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这称为结构赋值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量的解构赋值</title> </head> <body><script>//ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这称为结构赋值//1.数组的解构// const F4=['xiao','liu','zhao','song'];// let [xiao,liu,zhao,song]=F4;// console.log(xiao);// console.log(liu);// console.log(zhao);// console.log(song);//2.对象的解构const zhao={name:'zhaobenshan',age:'none',xiaopin:function(){console.log('i can play');}};// let {name,age,xiaopin}=zhao;// console.log(name);// console.log(age);// console.log(xiaopin);// xiaopin();let {xiaopin}=zhao;xiaopin();</script> </body> </html> -
模板字符串：``
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模板字符串</title> </head> <body><script>//ES6引入新的声明字符串的方式 `` '' ""//1.声明// let str=`我是一个字符串`;// console.log(str,typeof str);//我是一个字符串 string//2.内容中可以直接出现换行符 ``let str=`<ul><li>hoshi</li><li>woozi</li><li>jun</li></ul>`;//3.变量拼接let lovest='hoshi';let out=`${lovest}woozi`;console.log(out);</script> </body> </html> -
简化对象写法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简化对象写法</title> </head> <body><script>//ES6允许再打括号里面直接写入变量和函数，作为对象的属性和方法//这样书写更加简洁let name='hoshi';let change=function(){console.log('change you');}const school={name,//等同于name:namechange,//等同于change:change// improve:function(){// console.log('improve you');// }improve(){//可以简写成这样console.log('improve you');}}console.log(school);</script> </body> </html> -
箭头函数
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>箭头函数</title> </head> <body><script>//ES6允许使用箭头 => 定义函数//声明一个函数// let fn=function(){// }// let fn=(a,b)=>{// return a+b;// }// //调用函数// let result=fn(1,2);// console.log(result);//1.this是静态的.this始终指向函数声明时所在的作用域下的this的值function getName(){console.log(this.name);}let getName2=()=>{console.log(this.name);}//设置window对象的name属性window.name='hoshi';const school={name:'woozi'}//直接调用// getName();//hoshi// getName2();//hoshi//call方法调用// getName.call(school);//woozi// getName2.call(school);//hoshi//2.不能作为构造实例化对象// let Person=(name,age)=>{// this.name=name;// this.age=age;// }// let me=new Person('xiao',30);// console.log(me);//会报错//3.不能使用arguments变量// let fn=()=>{// console.log(arguments);// }// fn(1,2,3);//4.箭头函数的简写//1)省略小括号，当形参有且只有一个的时候// let add=n=>{// return n+n;// }// console.log(add(9));//2)省略花括号，当代码体只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值let pow=n=> n*n;console.log(pow(8));</script> </body> </html>箭头函数实践：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>箭头函数实践</title><style>div{width: 200px;height: 200px;background-color: #58a;}</style> </head> <body><div id="ad"></div><script>//需求-1 点击div 2s后颜色变为粉色//获取元素let ad=document.getElementById('ad');//绑定事件ad.addEventListener('click',function(){//第一中方法：保存this的值// let _this=this;//定时器// setTimeout(function(){// //修改背景颜色 this// // console.log(this);//指的window// _this.style.background='pink';// },2000);//定时器setTimeout(()=>{//修改背景颜色 this// console.log(this);//指的是事件源adthis.style.background='pink';},2000);})//需求-2 从数组中返回偶数的元素const arr=[1,6,9,10,100,25];//原方法：使用函数// const result=arr.filter(function(item){// if(item%2===0){// return true;// }else{// return false;// }// });// console.log(result);// const result=arr.filter(item=>{// if(item%2===0){// return true;// }else{// return false;// }// })const result=arr.filter(item=>item%2===0);console.log(result);//箭头函数适合与this无关的回调比如定时器，数组的方法回调//箭头函数不适合与this有关的回调，比如dom事件回调，对象的方法// 比如：// {// name:'hoshi',// getName:function(){// this.name;//这个this指向这个花括号对象// }// }// {// name:'woozi',// getName:()=>{// this.name;//这个this指向外层作用域的this值// }// }</script> </body> </html> -
参数默认值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>参数默认值</title> </head> <body><script>//ES6允许给函数参数赋值初始值//1.形参初始值 具有默认值的参数，一般位置要靠后（潜规则）// function add(a,b,c=10){// return a+b+c;// }// let result=add(1,2);// console.log(result);//2.与解构赋值结合 可以设置默认值function connect({host="127.0.0.1",username,password,port}){console.log(host);console.log(username);console.log(password);console.log(port);}connect({host:'localhost',username:'root',password:'root',port:3306})</script> </body> </html> -
rest参数
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rest参数</title> </head> <body><script>//ES6引入rest参数，用于获取函数的实参，用来代替arguments//ES5获取实参的方式// function date(){// console.log(arguments);//获得的是一个对象// }// date('hoshi','woozi','jun');//rest参数// function date(...args){// console.log(args);//获取到的是数组，可以使用filter some every map方法// }// date('hoshi','woozi','jun');//rest参数必须放到参数最后function fn(a,b,...args){console.log(a);//单独输出console.log(b);//单独输出console.log(args);//数组输出}fn(1,2,3,4,5,6);</script> </body> </html> -
spread扩展运算符：…
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>扩展运算符</title> </head> <body><script>// ...扩展运算符能将数组转换为逗号分隔的参数序列//声明一个数组...const hippop=['jww','vernon','scoups','jmk'];//用...转换为 'jww','vernon','scoups','jmk'//声明一个函数function chunwan(){console.log(arguments);}//chunwan(hippop);//只有一个参数chunwan(...hippop);//等同于chunwan('jww','vernon','scoups','jmk')有四个参数</script> </body> </html>扩展运算符应用：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>扩展运算符应用</title> </head> <body><div></div><div></div><div></div><script>//1.数组的合并 // const couple=['jun','jww'];// const partner=['jmk','jww'];// // const sum=couple.concat(partner);// const sum=[...couple,...partner];// ["jun", "jww", "jmk", "jww"]// console.log(sum);//2.数组的克隆// const couple=['jun','jww'];// const partner=[...couple];// ["jun", "jww"] 浅拷贝// console.log(partner);//3.将为数组转为真正的数组// const divs=document.querySelectorAll('div');// const divArr=[...divs];// console.log(divArr);//也可以转为arguments</script> </body> </html> -
Symbol基本使用
ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol特点：
1）Symbol的值是唯一的，用来解决命名冲突的问题
2）Symbol值不能与其他数据进行计算
3）Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>symbol</title> </head> <body><script>//创建Symbollet s=Symbol();// console.log(s,typeof s);let s2=Symbol('hoshi');let s3=Symbol('hoshi');console.log(s2===s3);//false//Symbol.for创建let s4=Symbol.for('woozi');let s5=Symbol.for('woozi');console.log(s4===s5);//不能与其他数据进行运算// let result=s+100;// let result=s>100;// let result=s+s;//USONB u so nb// u undefined// s string Symbol// o object// n null number// b boolean </script> </body> </html>Symbol创建对象属性：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Symbol 创建对象属性</title> </head> <body><script>//向对象中添加方法up downlet game={}//声明一个对象// let methods={// up:Symbol(),// down:Symbol()// };// game[methods.up]=function(){//向game中添加up方法// console.log('i can change the type');// }// game[methods.down]=function(){//向game中添加down方法// console.log('i can quick down');// }// console.log(game);//利用 Symbol 的唯一性，将 say 和 zibao 方法隐藏在对象中，避免了与其他属性名冲突，并增强了代码的安全性。let youxi={name:'狼人杀',[Symbol('say')]:function(){console.log('i can say');},[Symbol('zibao')]:function(){console.log('i can zibao');}}console.log(youxi);</script> </body> </html>Symbol的内置属性：
除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。
-
Symbol.hasInstance：当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法。
-
Symbol.isConcatSpreadable：对象的Symbol.isConcatSpreadable属性等于的是一个布尔值，表示该对象用于Arrayprototype.cancat()时，是否可以展开。
-
Symbol.unscopables：该对象制定了使用with关键字时，哪些属性会被with环境排除。
-
Symbol.match：当执行str.match(myObject)时，如果该属性存在，会调用它，返回该方法的返回值。
-
Symbol.replace：当该对象被str.replace(myObject)方法调用时，会返回该方法的返回值。
-
Symbol.search：当该对象被str.search(myObject)方法调用时，会返回该方法的返回值。
-
Symbol.split：当该对象被str.split(myObject)方法调用时，会返回该方法的返回值。
-
Symbol.iterator：对象进行for…of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器。
-
Symbol.toPrimtive：该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始数据类型值。
-
Symbol.toStringTag：在该对象上面调用toString方法时，返回该方法的返回值。
-
Symbol.species：创建衍生对象时，会使用该属性。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Symbol内置属性</title> </head> <body><script>//Symbol.hasInstance// class Person{// static [Symbol.hasInstance](param){//instanceof前面的那个值传作参数// console.log(param);// console.log('我被用来检测类型了');// return false;// }// }// let o={};// console.log(o instanceof Person);//Symbol.isConcatSpreadableconst arr=[1,2,3];const arr2=[4,5,6];arr2[Symbol.isConcatSpreadable]=false;console.log(arr.concat(arr2));//arr2会以数组形式加入到arr中，arr的长度为4// Array(4)// 0: 1// 1: 2// 2: 3// 3: (3) [4, 5, 6, Symbol(Symbol.isConcatSpreadable): false]// length: 4</script> </body> </html> -
-
迭代器：迭代器（Iterator）是一种接口（其实就是对象的一个属性，属性名为Symbol.Iterator），为各种不同的数据结构提供统一的访问机制。任何数据解构只要部署Iterator接口，就可以完成遍历操作。
1）ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费
2）原生具备Iterator接口的数据（可用for of遍历）
a）Array
b）Arguments
c）Set
d）Map
e）String
f）TypedArray
g）NodeList
3）工作原理
a）创建一个指针对象，指向当前数据解构的起始位置
b）第一次调用对象的next方法，指针自动指向数据结构的第一个成员
c）接下来不断调用next方法，指针一直向后移动，直到指向最后一个成员
d）每调用next方法返回一个包含value和done属性的对象
注：需要自定义遍历数据的时候，要想到迭代器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>迭代器</title> </head> <body><script>//声明一个数组const xiyou=['tangseng','swk','zbj','ss'];//使用for...of遍历数组// for(let v of xiyou){// console.log(v);//键值 即tangseng...// }// //使用for...in遍历// for(let v in xiyou){// console.log(v);//键名 0 1 2 3// }// console.log(xiyou);let iterator=xiyou[Symbol.iterator]();//调用对象的next方法console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());</script> </body> </html>迭代器自定义遍历对象：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义遍历数据</title> </head> <body><script>//声明一个对象const banji={name:"终极版",stus:['hoshi','woozi','2gg','shua'],[Symbol.iterator](){//索引变量let index=0;//保存thislet _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};}}};}}//遍历这个对象for(let v of banji){console.log(v);}</script> </body> </html> -
生成器函数：生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生成器</title> </head> <body><script>//生成器其实就是一种特殊的函数//异步编程 纯回调函数 node fs ajax mongodb//yield函数代码分隔符function * gen(){// console.log("111");yield 'hoshi';// console.log("222");yield 'woozi';// console.log("333");yield 'jun';// console.log("444");}let iterator=gen();// console.log(iterator);//是一个迭代器对象// iterator.next();//执行函数 111// iterator.next();//执行函数 222// iterator.next();//执行函数 333// iterator.next();//执行函数 444console.log(iterator.next());//执行函数 对象{value:'',done:false}console.log(iterator.next());//执行函数 console.log(iterator.next());//执行函数console.log(iterator.next());//执行函数//遍历for(let v of gen()){console.log(v);//111 hoshi...}</script> </body> </html>生成器函数参数：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生成器函数参数</title> </head> <body><script>function * gen(args){console.log(args);//AAAlet one=yield 111;console.log(one);//BBBlet two=yield 222;console.log(two);//CCClet three=yield 333;console.log(three);//DDD}//执行获取迭代器对象let iterator=gen('AAA');console.log(iterator.next());//next方法可以传入实参console.log(iterator.next('BBB'));console.log(iterator.next('CCC'));console.log(iterator.next('DDD'));</script> </body> </html>生成器函数实例-1：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生成器函数实例-1</title> </head> <body><script>//异步编程 文件操作 网络操作（ajax，request）数据库操作//1s后控制台输出 111 2s后输出222 3s后输出333//回调地狱// setTimeout(()=>{// console.log(111);// setTimeout(()=>{// console.log(222);// setTimeout(()=>{// console.log(333);// },3000);// },2000);// },1000);function one(){setTimeout(()=>{console.log(111);iterator.next();},1000)}function two(){setTimeout(()=>{console.log(222);iterator.next();},2000)}function three(){setTimeout(()=>{console.log(333);iterator.next();},3000)}function * gen(){yield one();yield two();yield three();}let iterator=gen();iterator.next();</script> </body> </html>生成器函数实例-2：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生成器函数</title> </head> <body><script>//模拟获取 用户数据 订单数据 商品数据function getUsers(){setTimeout(()=>{let data='用户数据';//调用next方法，并且将数据传入iterator.next(data);},1000);}function getOrders(){setTimeout(()=>{let data='订单数据';//调用next方法，并且将数据传入iterator.next(data);},1000);}function getGoods(){setTimeout(()=>{let data='商品数据';//调用next方法，并且将数据传入iterator.next(data);},1000);}function * gen(){let users=yield getUsers();console.log(users);let orders=yield getOrders();console.log(orders);let goods=yield getGoods();console.log(goods);}//调用生成器函数let iterator=gen();iterator.next();</script> </body> </html>
 和 RAG 的区别、优势和劣势)
)
