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=<div> <span>${result.name}</span> <span>${result.age}</span> <span>${result.sex}</span> </div>
;
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))
js高级05
最新推荐文章于 2024-03-08 23:01:16 发布