- let 与 const,块级作用域,没有变量提升
什么是块级作用域呢,{} 中let声明的变量外界访问不到。
{
let a = 20 ;
}
console.log(a); //20
if (true){
let a = 10 ;
console.log(a); //10
}
console.log(a); //10
for (let i=0 i < 2 ; i++ ){
console.log(i); //0 与 1
}
console.log(i); //2
——————————————————————————————————————————
{
let a = 20 ;
console.log(a); //20
}
console.log(a); //报错“ is not definedat” 块级作用域
if (true){
let a = 10 ;
console.log(a); //10
}
console.log(a); //报错“ is not definedat” 块级作用域
for (let i=0 i < 2 ; i++ ){
console.log(i); //0 与 1
}
console.log(i); //报错“ is not definedat” 块级作用域
变量提升呢?
console.log(a) ; 打印 undefined 有变量提升
var a = 10 ;
console.log(a) ; 打印 报错“before initializationat”
let a = 10 ;
——————————————————————————————————————————
const呢?
有块级作用域,没有变量提升 , 值不可更改, const声明必须赋值。
const a = ; 报错 const声明必须赋值。
const b =10;
b =20; 报错 值不可更改
let 与 const 与var的区别图 如下:
2.解构赋值
ES6中允许从数组或对象中提取值,按照对应位置,对变量赋值,实现解构。
之前
let arr =[1,2,3];
arr[0]
arr[1]
arr[2]
(1)数组解构
let [a , b,c ] =arr;
console.log(a) // 1
console.log(a) // 2
console.log(a) // 3
注:解构不成功,变量值为undefined
(2)对象解构
方式一:
let obj = {name:"li",age:20};
let {name,age} =obj;
console.log(a) // li
console.log(a) // 20
方式二:
注:myName myAge 属于别名
let {name:myName,age:myAge } =obj; 注:对象值属于别名
console.log(myName) // li
console.log(myAge) // 20
3.箭头函数
为了简化函数的声明方式
箭头函数
let fn=()=>{}
特性:形参一个可以省略(),函数体只有一行代码可以省略{}与return ,不产生this,this上下文。
应用场景:当作回调函数使用
4.剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组.
方式1:
function fn (a , ...b){
console.log(a) //10
console.log(b) // [20,30 ] 将一个不定数量的参数表示为一个数组
}
fn(10,20,30);
方式2:
剩余参数和解构赋值配合使用
let arr = [1 ,2 ,3];
let [a,...b]=arr;
console.log(a) // 1
console.log(b) [2 ,3]
5.扩展运算符(展开语法)
扩展运算符可以将数组或对象转为用逗号分隔的参数序列
- Array的扩展方法
- 作用1:逗号分隔的参数序列
let arr=[1,2,3];
...arr
console.log( ...arr) // 1 ,2,3 将数组用逗号分隔的参数序列
- 作用2:合并新数组
let arr1=[1,2,3];
let arr2=[4,5,6];
let arr3=[...arr1,...arr1]; // [1,2,3,4,5,6]
arr1.push(arr2)也是同上一致
- 作用3:可以伪数组转为真数组
<ul>
<li>伪数组</li>
<li>伪数组</li>
<li>伪数组</li>
<li>伪数组</li>
</ul>
let lili= document.querySelectorAll('ul li'); 为数组
let arr = [ ...lili] ; // [li][li][li][li] 转为真数组
- 作用4:可以将对象转为数组
语法:Array.from(要转化的,回调函数)
let obj = {
"0": "1",
"1": "2",
length: 2
};
注:对象属性名:必须“索引” 加lengt ,其余属性名undefined不加lengt空数组
需求:让数组[0]与[1] * 2
let newArr = Array.from(obj,item =>item* 2 )
console.log(newArr); [2,4]
- 作用5:Array内置对象find(方法)
用于找出第一个符合条件的数组成员,如果没有找到返回undefined
语法:数组.find( (元素,下标)=>{ 条件 元素.id == 1; 条件不满足返回undefined } )
let arr =[{ id:1, name:"李" } ,{id:2 ,name:"陈" } ];
需求:查找数组对象中id对应的数据
let dd =arr.find( item=>{ item.d == 1 )
console.log(dd); { id:1, name:"李" }
- 作用6:Array内置对象findIndex(方法)
用于找出第一个符合条件的数组成员,如果没有找到返回-1
语法:数组.findIndex( (元素,下标)=>{ 条件 元素.id > 8; 条件不满足返回-1 } )
需求:查找数组最大值
let arr =[10, 20 ,30];
let dd =arr.findIndex( item=> item > 20 )
console.log(dd); 返回数组下标 0 。注:代表dd[2]大于20
作用7:Array内置对象includes(方法)
表示某个数组是否包含给定的值,返回布尔值
注:包含true,不包含false
let arr= [1,2,3];
需求:查找数组中值为2的,返回布尔值
arr. includes(2) // 包含返回true
arr. includes(4) // 不包含返回false
- String的扩展方法
ES6新增的创建字符串的方法,使用反引号定义.
- 作用8: 模板字符串
let name = `lixiao`;
注:${变量}代表解析这个变量
let moban = ` hi you ${name} ` ; hi you lixiao
- 作用9: String - startsWith()和endsWith() 方法
注:startsWith():查找 某个(world) 在头部,返回布尔值
注:endsWith() :查找 某个(hi) 在尾部,返回布尔值
let str ="world hi";
str.startsWith(world) " world"是在头部返回true
str.endsWith(hi) " hi"是在尾部返回true
- 作用10: String - repeat( 方法)
表示将原字符串重复n次 ,返回一个新字符串
let str =x ;
str.repeat(2) // xx
6.class类
注:super方法调用父类构造函数
注: extends关键字继承父类方法和属性,super()用于调用父类构造函数
7.Set永不重复数据类型
注:Set是构造函数
let arr =[1,2,2,4,3];
需求:去重
let newArr= new Set(arr); // [1,2,4,3] 去重了
- 添加数据: add("添加") 注:重复数据添加失败
- 判定: has("判定") 返回布尔值
- 清除: 要清除的.clear()