ES6新增语法
let 和 const
let
//let定义的变量不能重名
let a = 19;
let a ="张三";
console.log(a);//Uncaught SyntaxError: Identifier 'a' has already been declared
//let没有变量提升也就是预解析必须先定义才能使用
console.log(name);//Uncaught ReferenceError: name is not defined
let name = "张三";
//let拥有块儿级作用域(也就是一个大括号{} 像if语句 for循环 switch语句 但是不包括对象的大括号)
if(1)
{
let a = 20;
}
console.log(a);//报错 Uncaught ReferenceError: a is not defined
//let 存在暂时性死区(TDZ)
//暂时性死区: let在一个块儿级作用域中声明一个变量,let就会绑定这一块儿区域,不受外界的影响
var a = 10;
{
console.log(a);//报错 Uncaught ReferenceError: a is not defined
let a = 20;
}
const
1.const用来定义常量,一般常量要大写
2.常量一旦被定义就不能被修改了
3.使用const声明常量的同时还要赋初始值 const PI = 3.1415926 否则会报错
const PI = 3.1415926;
PI = 3.14;
console.log(PI);//报错 Assignment to constant variable.
附加: const 其实const有时候也是可以被修改的 对于一些引用数据类型像数组或者对象还是会被修改的
const arr = [12,34,56,67,90];
arr[2] = 30;
console.log(arr);//[12, 34, 30, 67, 90]
//可见使用const 定义的引用数据类型也是会被修改的
解构赋值
数组解构
//完全解构 值与变量一一对应
let [a,b,c] = [12,34,56];
console.log(a,b,c);//12 34 56
//不完全解构 变量多于值
let [a,b] = [12,34,56];
console.log(a,b);//12 34
//解构失败 变量多于值
let [a,b,c] = [12,34];
console.log(a,b,c);//12 34 undefined
//解构默认值
let [a=0,b=5,c=10] = [10,20];
console.log(a,b,c);//10 20 10 当变量严格等于undefined时默认值生效
//缺省 会一一对应赋值
let [,b] = [20,30];
console.log(b)//30
对象解构
//由于对象不像数组一样是无序的所以对象在解构赋值的时候点特殊
//1.情况 要求定义的变量与对象的属性名一样
let {name,age} = {"name":"张三","age":20};
console.log(name,age);//张三 20
//情况2: 可以通过":"来给对象更改变量名
let {name:n,age:a} = {"name":"李四","age":24};
console.log(n,a);//李四 24
//情况3: 只要变量名与键名一一对象就行不一定顺序要按照对象的排列方式
let {age,name} = {"name":"李四","age":24};
console.log(age,name);//24 "李四"
//情况4 ...a用来接收剩余的属性值
let {name,...a} = {"name":"张三","age":23,"gender":"男"};
console.log(name,a);//张三 {age: 23, gender: "男"}
//复杂情况下
let obj = {
"name":"张三",
"age":23,
"hobby":{
"listfirst":"唱歌",
"listsecond":"跳舞"
}
}
let {hobby:{listfirst,listsecond}} = obj;
console.log(listfirst,listsecond);//唱歌 跳舞
reset 和 spread
reset 用来将参数存放到一个数组中
//reset
//语法: ...参数名 用于接收剩余参数并以数组的形式去接收
function number(...a)
{
return a;
}
let arr = number(10,23,34,50);
console.log(arr);// [10, 23, 34, 50]
//需要注意的是 ...参数是永远接收剩余参数的所以不能反到最前面,否则会报错
function number(...a,20)
{
return a;
}
let arr = number(10,23,34,50);
console.log(arr);//报错 Rest parameter must be last formal parameter
//正确写法
function number(b,...a)
{
return a;
}
let arr = number(10,23,34,50);
console.log(arr);//[23, 34, 50]
//所以我们也可以用它来代替arguments(箭头函数支持arguments但是支持reset模式)
spread
//1.相当于是reset的逆运算 将数组元素一个一个展开
//spread 将arr拆开
let arr = [12,34,56,67];
console.log(...arr);//12 34 56 67
//复制---数组(相当于浅拷贝)
let arr = [12,34,56,67];
let arr2 = [...arr];
console.log(arr2);//[12, 34, 56, 67]
//为什么说是浅拷贝
let arr = [12,34,56,67,[20,40]];
let arr2 = [...arr];
console.log(arr2);//[12, 34, 56, 67,[20,15]]
arr2[4][1] = 15;
console.log(arr);//[12, 34, 56, 67,[20,15]]
//复制---对象(相当于浅拷贝)
let obj = {
"name":"张三",
"age":24,
"hobby":"打球"
}
let obj2 = {...obj};
console.log(obj2);//{name: "张三", age: 24, hobby: "打球"}
//合并数组
let arr1 = [12,24,56];
let arr2 = [67,89,80];
let arr3 = [...arr1,...arr2];
console.log(arr3);//[12, 24, 56, 67, 89, 80]
箭头函数()=>{}
箭头函数特点: 减少函数代码量,回调函数用的频率比较高
//普通函数
function fuc(a) {
return a
}
console.log(fuc(20));//20
//箭头函数
let c = (b)=>{
return b;
}
console.log(c(10));//10
//箭头函数特性1.传参
//1如果传送多个参数同普通函数一样将其用逗号隔开
let func = (a,b,c)=>{
return a+b+c;
}
console.log(func(10,20,30));//60
//2.如果传送的参数只有一个小括号可以省略不写
let func = a =>{return a;};
console.log(func(30));//30
//3.如果传送的参数不确定可以使用...arg,但是不能使用arguments因为箭头函数不支持arguments
let func = (...arg)=>{return arg}
console.log(func(10,20,50,60));// [10, 20, 50, 60]
//参数默认值
let func = (a=10)=>{return a};
console.log(func());//10
//如果函数只有一条语句并且还是return语句 那就可以将花括号和return 省略
let func = (a,b)=> a + b;
console.log(func(10,20));//30
//箭头函数不可以做构造函数
let func = (a)=>{console.log(a);}
let fc = new func(10);
console.log(fc);//func is not a constructor
//箭头函数中的this比较特殊 它指向上一层环境的指向,一个{}表示一个环境对象的花括号除外
let func = ()=>{
console.log(this);//window
}
func();
function func2()
{
return {
"func3":()=>{
console.log(this);
}
}
}
let obj = func2();
obj.func3();//window
function func4(i)
{
if(i==1)
{
return {
name:"张三",
skill:function()
{
return ()=>
{
console.log(this);
}
}
}
}
}
let obj = func4(1);
let b = obj.skill();
b();
iterator迭代器
介绍: 我们知道数组迭代可以使用every,some,filter,map,foreach,但是有类似数组结构也想使用这样的方法是不可以的,所以es6提出的iterator迭代器供多种数据结构使用,array,string,dom元素集合set和map集合,等等伪数组,但是对象不可以使用。
介绍2:iterator是一种接口机制,为不同数据结构提供统一的访问,为不同的数据机构提供不同接口
let str = "1234567890";
let arr = [];
for(let key of str)
{
arr.push(Number(key)+1);
}
console.log(arr);//[2, 3, 4, 5, 6, 7, 8, 9, 10, 1]
//获取元素集合
let Oli = document.getElementsByTagName("li"];
let arr = [];
for(let key of Oli)
{
arr.push(key);
}console.log(arr);//[li, li, li, li, li]
find和findIndex()
//返回数组中第一个满足条件的数据,如果没找到返回undefined
let arr = [12,34,56,78,20];
let result = arr.find((value)=>{
return value > 30;
});
console.log(result);//34
//返回数组中第一个满足条件的数据的下标,找不到返回-1
let result2 = arr.findIndex((value)=>{
return value > 30;
});
console.log(result2);//1
includes()和startsWith()、endsWith()
//includes(参数1(必选),参数2(非必选,从下标多少开始))
let arr = [1,2,3,4,5,6];
console.log(arr.includes(2));//true;
console.log(arr.includes(7));//false
console.log(arr.includes(3,4));//false
//判断字符串头部有没有参数字符串,返回一个布尔值
//startsWith(str,[position])position表示指定位置
let str = "123.jpg";
console.log(str.startsWith("123",0));//true
console.log(str.endsWith("jpg"));//true
set和map
特点:类似数组,成员值唯一(可以对数组进行去重)
语法:let set = new Set(数组||伪数组)
常见方法:
size: 获取集合的长度
add(值) 1.在set集合中添加成员返回一个新的集合 特点:会修改原来的集合 2.向集合中添加两个NaN,结果集合中只出现了一个,原因是es6中NaN == NaN;
delete(值) 在set集合中删除成员,返回是否删除成功
has(值):判断集合中是否有这个元素存在
clear()清空集合
let set = new Set([12,20,30,35]);
set.add(10);//添加到了尾部
console.log(set);//set(5){12,20,30,35,10}
console.log(set.size)//5
console.log(set.delete(12))//true
console.log(set)//set(4){20,30.10}
console.log(set.has(30));//true
//set去重的特性
let arr = [12,34,56,12,12];
let arr2 = new Set(arr);
console.log(arr2);//set(3){12,34,56}