js高级05

js高级05：
ES6：
ES全称是ECMAScript，它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范
为什么要使用ES6？
变量提升特性增加了程序运行的不可预测性
语法过于松散，实现相同的功能，不同的人可能会写出不同的代码
1.变量let
1）ES6中新增的用于声明变量的关键字
2）let声明的变量只在所处的块级有效
3)注意：使用了他关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性
4)防止循环变量变成全局变量
2.使用let关键字声明的变量不存在变量提升
3.使用let关键字声明的变量暂时性死区，这个变量就会和这个区域进行绑定，当前这个区域中的变量和外部没有任何关系
4.经典面试题：
var arr=[];
for(var i=0;i<2;i++){
arr[i]=function(){
console.log(i);
}
}
arr0;//2
arr1;//2
经典面试题解析：变量i是全局的，函数执行时输出的都是全局作用域下的值
let arr=[];
for(let i=0;i<2;i++){
arr[i]=function(){
console.log(i);
}
}
arr0;//0
arr1;//1
每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的值。
5.const：声明常量，常量就是值（内存地址）不能变化的量
1）具有块级作用域
2）声明常量时必须赋初值
3）常量赋值后，值不能更改（对于复杂数据类型对应的值是可以更改的，地址是不可更改的）
6.使用let、const、var的区别:
var let const
函数及作用域 块级作用域 块级作用域
变量提升 不存在变量提升 不存在变量提升
值可更改 值可更改 值不可更改
7。解构赋值：
ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构
1）数组解构：
let [a,b,c]=[1,2,3];
如果解构不成功，变量的值为undefined
let [foo]=[];
let [bar,foo]=[1];
2)解构赋值，按照一定模式从数组中或对象中提取值，将提取出来的值赋值给另外的变量
对象解构：
按照一定的模式从数组或对象中提取值，将提取出来的值赋值给另外的变量
let person={name:‘zhangsan’,age:20};
let {name,age}=person;
console.log(name);//‘zhangsan’
console.log(age);//20
另一种写法
let {name:myName,age:myAge}=person;//myName、myAge属于别名
console.log(myName);//zhangsan
console.log(myAge);//20
8.箭头函数
（）=>{}
const fn=()=>{}
1）函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
const sum=(num1,num2)=>num1+num2;
2)箭头函数中若果形参只有一个，可以省略小括号
const fn=v=>v;
3)箭头函数不绑定关键词this，箭头函数中的this，指向的是函数定义位置的上下文this
const obj={name:‘张三’}
function fn(){
console.log(this);
return ()=>{
console.log(this);
}
}
const resFn=fn.call(obj);
resFn();
4)箭头函数面试题
var obj={
age:20,
say:()=>{
alert(this.age)
}
}
obj.say();
弹出的值是undefined，为什么？
指向window没有age属性，所以弹出undefined
9.剩余参数
const sum=(…args)=>{
let total=0;
args.forEach(item=>total+=item);
return total;
}
10.扩展运算符
1)将数组或者对象转换为用逗号分隔的参数序列
let ary=[1,2,3];
…ary//1,2,3
console.log(…ary);//1 2 3//相当于console.log(1，2，3);
2)可以用在合并数组上
let ary1=[1,2,3];
let ary2=[4,5,6];
//…ary1
//…ary2
let ary3=[…ary1,…ary2];
ary1.push(…ary2);
3)将伪数组可遍历对象转换为真正的数组
let oDivs=document.getElementsByTagName(‘div’);
oDivs=[…oDivs];
11.构造函数方法Array.from()
将类数组或可遍历对象转换为真正的数组
let arrayLike={
‘0’:‘a’,
‘1’:‘b’,
‘2’:‘c’,
length:3
};
let arr2=Array.from(arrayLike);//[‘a’,‘b’,‘c’]
方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
let arrayLike={
‘0’:‘1’,
‘1’:‘2’,
length:2
};
let newArray=Array.from(arrayLike，item=>item*2);//[2,4]
12.实例方法find()
用于找出第一个符合条件的数组成员，如果没有找到返回undefinedd
let ary=[{
id:1,
name:‘张三’
},{
id：2，
name：‘李四’
}];
let target=ary.find((item,index)=>item.id==2);
13.实例方法findIndex（）
用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1
let ary=[1,5,10,15];
let index=ary.findIndex((value,index)=>value>9);
console.log(index);//2
14.实例方法includes（）
表示数组是否包含给定的值
[1,2,3].includes(2)//true
[1,2,3].includes(4)//false
15.模板字符串
1)ES6新增的创建字符串的方式，使用反引号定义
let name=zhangsan;
2)模板字符串中可以解析变量：
let name=‘zhangsan’；
let sayHello=hello,my name is ${name};//hello,my name is zhangsan
3)模板字符串中可以换行
let result={
name:‘zhangsan’,
age:20,
sex:‘男’
}
let html=

${result.name} ${result.age} ${result.sex}

;
4)模板字符串中可以调用函数
const sayHello=function(){
return ‘哈哈哈哈，追不到我吧，我就是这么强大’
}；
let greet=${sayHello()} console.log(greet);//哈哈哈哈，追不到我吧，我就是这么强大
16.String的拓展方法
1)startsWith():表示参数字符串是否在源字符串的头部，返回布尔值
2)endsWith():表示参数字符串是否在源字符串的尾部，返回布尔值
let str=‘Hello World’;
str.startWith(‘Hello’)//true
str.endsWith(’!’);//true
17.字符串repeat方法
repeat方法表示将原字符串重复n次，返回一个新字符串
‘x’.repeat(3) //“xxx”
‘hello’.repeat(2) //“hellohello”
18.set数据结构
1)ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
const s1=new Set（）；
console.log(s1.size)
const s2=new Set([“a”,“b”]);
console.log(s2.size);
2)利用set数组去重
const s3=new Set([“a”,“a”,“b”,“b”]);
console.log(s3.size);
const ary=[…s3];
console.log(ary)
3)实例方法：
a.add(value)：添加某个值，返回set结构本身
b.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
c.has(value)：返回一个布尔值，表示该值是否为Set的成员
d.clear（）：清除所有成员，没有返回值
4）set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值
s.forEach(value=>console.log(value))