es6笔记
ES6新标准
1、数据类型var let const
var
- 函数作用域，如果声名在函数之外，就会是一个全局变量，
可以重复声名，赋值。
let
- 块级作用域，在同一个作用域里面无法重复声名
const
- 块级作用域，值无法被直接赋值
- 常量本身无法被改变，但是其值可以被改变
三者之间一个明显区别
- 在全局作用域下面有一个for循环，定义一个循环变量i,如果使用
var来定义，那么，这个i就是一个全局变量，i因为它不在函数中。如果使用let
来定义，i在for循环结束之后会销毁，在for循环之外也无法访问到这个i了。 - 如果直接声名let和const变量在全局作用域里，它会是一个全局变量，只要声名在大括号{ }里，他就是一个局部变量
- let同样也会提前声名，但是会有临时死区，未付值之前使用会报错
2、箭头函数
箭头函数特性
- 箭头函数没有自己的this属性，是继承其父作用域的this
- 其this属性是函数定义时就被指定
function Person(name,age,sex){
this.name=name,
this.age=age,
this.sex=sex,
this.hobbies=["girl","leg","stocking"],
this.printHobbies=function(){
//输出爱好
this.hobbies.map(function(hobbie){ //map函数里面的函数是一个独立运行的函数，在该函数作用域内的this指向的是window
console.log(`${this.name} love ${hobbie}`); //因为this指向的是window，所以名字无法正常输出
})
}
}
let chen=new Person();
使用箭头函数解决以上问题
function Person(name,age,sex){
this.name=name,
this.age=age,
this.sex=sex,
this.hobbies=["girl","leg","stocking"],
this.printHobbies=function(){
//输出爱好
this.hobbies.map((hobbie) => {
console.log(`${this.name} love ${hobbie}`);
})
}
}
let chen=new Person();
不适合用箭头函数的场景
- 该函数作为构造函数，或作为一个方法绑定到对象
function Person(name,age,sex){
this.name=name,
this.age=age,
this.sex=sex
}
//给Person的原型对象里添加一个方法
Person.prototype.sayHello=function()
{
consol.log(`${this.name} say Hello`);
}
//使用箭头函数添加（错误添加方法）
Person.prototype.sayHello=() => {
//箭头函数不会绑定this到Person,此时的this是延用最外层的window
consol.log(`${this.name} say Hello`);
}
//实例化一个对象时，里面的this无法绑定到新生成的对象
const chen=new Person("","","");
//person里面的this不会绑定到chen
箭头函数的this不会执行绑定，只会继承其父作用域
当一个函数单独运行时，没有被绑定，不是作为对象的方法，其this属性指向window或者Globle,在严格模式下是undefined
箭头函数总结:
当这个函数独立运行，但需要沿用其父作用域的this时，建议使用箭头函数
当这个函数需要通过绑定对象来沿用父对象的this，不适合使用箭头函数
当这个函数里需要获取参数对象arguments时不建议使用箭头函数，因为箭头函数中不包含这个对象
3、模板字符串
- 使用反引号定义一个模板字符串
const str=`
<div class="great">
<p>模板字符串</p>
</div>`.trim(); //.trim()去除模板字符串两边的空格
//还可以在其中增加变量
const str1="模板字符串";
const str2=`
<div class="great">
<p>${str1}</p>
</div>`
一个例子：
const peate={
name:"peate",
date:"2019-4-23",
todos:[
{name:"go to walk",conpleted:false},
{name:"make a handjob",conpleted:false}
]
}
//将其计划以无序列表形式打印
const plan=`
<ul>
${peate.todos.map(todo =>`<li>${todo.name}</li>`).join("")} //转换数组为字符串，将逗号转换为空
</ul>
`
console.log(plan);
标签模板字符串
let st="你好";
let st1="peatechen"
function temp1(strings, ...values) //参数1：被变量分隔的字符串 参数2：各变量
{
let high=values.map(value => `${value}`);
console.log(strings);
let result="";
strings.forEach(function(string,i){
result+= `${string}${high[i] || ''}`
console.log(result);
});
return result; //可对原字符串进行操作
}
let st3=temp1`${st} 呦呦呦 嘿嘿嘿${st1} 结束`;
let st4=`${st} 呦呦呦 嘿嘿嘿${st1} 结束`;
console.log(st3===st4); //拼串后结果相等
//过滤用户不合法输入
let st7=`<div class="temp" onload="alert('av')"> ${st1} </div>` //假如这个字符串是用户输入的内容，里面有一个onload事件
let st8=DOMPurify.sanitize(st7); //过滤不规范输入
4、字符串操作
- .startsWith("str",index)
let id="4211231996";
console,log(id.startsWith("1996",6))
- .endsWith("str",index)
let id="4211231996";
console.log(id.endsWith("1996",10));
- .includes()
let id="4211231996";
console.log(id.includes("1996",10)); //10以后有没有
- .repeat()
let id="4211231996";
console.log(id.repeat("1996",10)); //重复10次
5、对象(数组)解构
- 如果我们要获取对象中的多个属性，之前的做法是：
const PeateChen={name:"Peate",sex:"man",age:"18"};
//获取对象中的值
let name=PeateChen.name;
let sex=PeateChen.sex;
...... //非常繁琐
可以看到及其繁琐，这时就可以使用对象解构：
const PeateChen={name:"Peate",sex:"man",age:"18"};
let {name,age}=PeateChen; //大括号内变量名称需要与对象属性名相同
console,log(name,age); //输出结果：Peate 18
数组解构相同
const PeateChen=["Peate","man","18"];
let [value1, ,value3]=PeateChen;
console.log(value1,value3); //输出值：Peate 18
- 如果我们在解构里面定义了一个对象里面没有的属性，可以给他一个值：
const PeateChen={name:"Peate",sex:"man",age:"18"};
let {name,age,sex="wman",hobbite="girl"}=PeateChen; //大括号内包含了对象里没有的属性
console,log(name,age,sex,hobbite); //Peate 18 man girl
//可以初始给他一个值，通过传入对象，去覆盖初始值
6、for of循环
- forEach方法循环无法终止跳过循环
- for....in循环会去除循环对象可枚举属性，不适合遍历数组
- for....of循环只会遍历值，适合遍历数组
let names=["peate","chen","ayoung"];
for(let value of names)
{
console.log(value);
}
//可以发现，没有获取到索引值
//如果要获取索引的话可以这样操作：
for(let [i,value] of names.entries()){
console.log(i,value);
}
7、数组的其他方法Arry.from()和Arry.of(),将类数组转换成数组
通过document.querySelectorAll()得到的并不是一个数组，
而是一个类数组对象，所以他不能使用数组的方法
- 将类数组对象转换为数组
const vs =document.querySelectorAll("")
const v_array=Array.from(vs);
console.log(v_array);
- Array.of()
输入参数，返回数组
return Array.of(1,2); //返回[1,2]
8、ES6数组新方法
- 查找数组元素find
let names=["peate","chen","ayoung"];
let biuty=names.find((name,i)=>{
if(i==2)
return true;
});
//biuty结果为ayoung
- 查找数组元素索引findIdex
let names=["peate","chen","ayoung"];
let biuty=names.findIndex((name,i)=>{
if(name=="ayoung")
return true;
});
//biuty结果为2
- some()如果数组某一个元素满足条件则返回true
let names=["peate","chen","ayoung"];
let biuty=names.some(name => name=="ayoung");
console.log(biuty); //true
- every()如果数组每一个元素满足条件则返回true
let names=["peate","chen","ayoung"];
let biuty=names.every(name => name!="");
console.log(biuty); //true
9、扩展运算符（超好用）
可以将可遍历对象扩展到一个数组中
- 拼接数组
let array=["peate","chen","ayoung"];
let others=["fa","mi","ly"];
//将第二个数组拼接到第一个中
array=[...array,...others];
console.log(array);
//结果：["peate", "chen", "ayoung", "fa", "mi", "ly"]
- 运用场景
将获取到的DOM对象类数组转换为数组
let lis=document.querySelectorAll(".Menu>div a");
//采用扩展运算符得到真正的数组
let lis=[...document.querySelectorAll("ul>li")];
//这时就可以调用数组方法处理它
console.log(lis.map(value => lalue.innerHTML));
可将字符转转换为数组
const str="Hello";
const arr=[...str];
使用扩展运算符传参
const str=[1997,2015,1320];
funct(...str); //分别传入str中的值
10、promies 异步处理
通常用于调用API、JSON数据、ajax结果的一种反馈、承诺
-
Promies作用
官方推荐使用axios这个Promies库，为了加深理解，编写自己的promies -
Promies用法:
const P=new Promies(function(resolve,reject){
//异步处理（API、JSON数据、ajax请求）
{
resolve(数据) //请求成功
}
{
reject(erro) //请求失败
}
});
P.then(function(数据){
//成功后操作
},function(erro){
//失败后操作
})
//输入id找到你年龄
function getDetail(Id){
return new Promise((reslove,reject) =>{
let owner=owners.find(value=>value.id===Id);
if(owner){
reslove(owner.name);
}else{
reject(Error("No found"));
}
}).then(data=>{
getAge(data);
},erro=>{
console.log(erro);
});
}
- Promies.all用法
Promies.all([Promies对象1,Promies对象2.....])
.then(function(results){
let [data1,data2]=results; //所有数据组成的数组，解构到data中
//操作
},function(){
//失败
})
.catch(erro=>{
consol.error(erro);
})
- Promies.race用法
与Promies.all用法相同，不过其是否执行成功操作，由第一个promies决定
11、symbol类型
- 生成一个symbol类型变量
const peate=Symbol("peate"); //生成唯一标识
const person={
[Symbol("chen")]:{name:"chen",age:"15"},
[Symbol("chen")]:{name:"chen",age:"20"},
[Symbol("ayoung")]:{name:"ayoung",age:"20"}
}
- Symbol类型无法用常规方式遍历，遍历和获取方式如下
const sym=Object.getOwnPropertySymbols(person); //得到三个person
const sym_value=Object.getOwnPropertySymbols(person).map(value=>person[value]);
//得到三个属性的值
12、模块化
13、类Class
- 语法
class Persons{
constructor(name,age,sex) {
this.name=name;
this.age=age;
this.sex=sex;
}
sayHello(){
console.log(`Hello my name is ${this.name}`);
}
static Hello(){
console.log("Nice to meet you"); //静态方法，由Persons调用
}
}
let chen6=new Persons("peate",25,"男"); //实例化
chen6.sayHello();
Persons.Hello();
- 类的继承
class Persons{
constructor(name,age,sex) {
this.name=name;
this.age=age;
this.sex=sex;
}
sayHello(){
console.log(`Hello my name is ${this.name}`);
}
static Hello(){
console.log("Nice to meet you"); //静态方法，由Persons调用
}
}
// 继承自基类Persons
class Chen6 extends Persons {
constructor(name,age,sex,girlfrend) {
super(name,age,sex);
this.girlfrend=girlfrend;
}
mygirl(){
console.log(`my girlfrend is ${this.girlfrend}`);
}
}
let peateChen=new Chen6("peateChen",18,"男","ayoung");
peateChen.sayHello();
peateChen.mygirl();
14、生成器函数
- 语法
function* functionName(){
yield 'result1'; //函数本次执行的返回值
yield 'result2'; //第二次执行的返回值
。。。
}
//调用
functionName.next();//
- 应用场景:ajax工作流
15、对象扩展
- Object.assign(target,source1,source2..)将原对象属性赋值到目标对象
let obj={na:"af"};
let obj1={sex:"nan"};
let obj2={};
Object.assign(obj2,obj,obj1);
Set、Map、WeakSet、WeakMap
- Set 可以理解为一个类似数组的容器，但是与数组不同的是 Set里面的元素不可以有重复，且不可以通过索引来取值。
/* 创建 */
let set = new Set();
/* 添加元素 */
set.add("123");
/* 删除元素 */
set.delete("123");
/* 获取长度 */
set.size();
/* 另一种创建方式 */
let set = new Set([1,2,3,4]);
- 利用Set给数组去重
let arr = [1,1,2,2,3,3];
let set = new Set(arr);
arr = [...set];
- Map 一个存放键值对的容器，特别的是该键值对的 Key 和对象不同，Key 可以是对象、数组、数字等
let map = new Map();
map.set("s",0);
let obj = {name:"jj"};
map.set(obj,1);
map.get(obj) // 返回 1
