初识ES6
一般用严格模式来写ES6代码
1.let
1)在es6中用let来声明一个变量(有别于var) 通过let方式声明的变量是不进行预解释的
2)在let方式中是不能重复定义同一个变量的,如果重复声明则会报错:该变量已经被声明. 函数相同也算错,在函数里面私有变量和形参名字相同也会报错
3)虽然不进行预解释但是代码执行之前也会先把变量过滤一遍,一旦不合法(有重复声明等等)后面的代码就不执行了.在{ }私有变量中的let变量 是自带闭包机制的,不同作用域下的let互不影响
4)var方式和let一起定义的相同变量也会报错
2.块级作用域
用大括号括起来的是私有作用域,也叫块级作用域
var a=10;
if(a){
console.log(a);=>10
}
console.log(a);=>10
以上是在var情况 下面是let情况
let a=10;
if(a){
let a=1;
console.log(a)=>1
}
console.log(a)=>10
也就是说在大括号中{},不论是if判断还for循环,里面只要有let变量就会形成私有作用域
在代码执行前let虽不进行预解释,但也会进行过滤,尤其是在{ }私有变量中的let变量 是自带闭包机制的,不同作用域下的let互不影响
3.const
1)通过const定义的变量叫做"静态变量" , 其值不能修改,且不能只定义不赋值,也就是说定义时必须赋值否则报错
2)在同一级作用域同样也是不能重复定义的
4.数组赋值
1) 数组解构赋值
let [a,b,c]=[0,1,2];
console.log(a,b,c)=>0,1,2;
var ary=[1,2,3,4,5,6,7]
let [a,b,c]=ary
console.log(a,b,c)=>1,2,3
var ary=[1,2]
let [a,b,c]=ary
console.log(a,b,c)=>1,2,undefined
2).嵌套赋值
let [x,y,[s],[[f]]]=[1,2,[3],[[4]]]
console.log(x,y,s,f)=>1,2,3,4
必须壹壹对应
3).省略赋值
var ary=[1,2,3,4,5];
let [a,,,b]=ary;
console,log(a,b)=>1,4
4).不定参数
let [a,...b]=[1,2,3,4,5];
console.log(a,b)=>1,2345;
let [,,x,,...y]=[1,2,3,4,5,6,7,8,9];
console.log(x,y)=>3,56789
5.对象赋值
1) 对象的结构赋值
let obj={
n1:"p1",
n2:"p2"
}
常规获取值写法↓
let n1=obj["n1"];
let n2=obj["n2"];
对象结构赋值↓
let {n1:x1,n2:x2}=obj
2) 对象数组嵌套
var obj={a1:[1,2,3],a2:"123"};
let {a2,a1:[x,y]}=obj;
console.log(a2,x,y);=>"123" 1 2;
var obj1={s:{n:"1"},n:[1,"2",3,"4"],m:[[1]]};
let {m:[a1],s:{n},n:[,...a3]}=obj1;
console.log(a1)=>[1]
console.log(n)=>"1"
console.log(a3)=>"2",3,"4"
3) 空对象 null 和 undefined问题
let {a,b}={};=>let={}
console.log(a,b)=>undefined
let {n,m}=null;=>报错
let {x,y,z}={x:"1",undefined,z:1};
对象中不能为空所以赋值一个undefined
console.log(x,y,z)=>1,undefined,"1"
如果赋的值是其他类型数据,会转成一个对象(所属的类)
let {x,y,z}=1;
let {x,y,z}="123";
let {x,y,length}=[1,2,3];
console.log(x,y,length);
var ary=[1,2,3];
console.dir(String);
var str=new String("123");
console.dir(str);
console.dir("123");
let {x,__proto__,length}=str;
4) 默认值
let [x="1",y="2",z]=[,2,3];
let [x="1",y="2",z]
console.log(x,y,z)
let {x1:x="x",y="y",z="z"}={x1:"rx",z:"zx"}
6.函数问题
1) 默认参数
2) for-of
3) 扩展运算
扩展运算符可以在传参时使用,而且可以在任何位置使用
...[ ]
因为他是把数组直接转为非数组
console.log(1,2,3,...[4,5],6);=>1 2 3 4 5 6
var num=[1,2,3,4,5,6,7]
function fn1(x,y){
let sum =x+y;
console.log(sum);
}
fn1(...num);
相当于fn1(1,2,3,4,5,6)
可以代替apply使用
var ary=[1,2,3,4];
Math.Max.apply(null,ary)
↓↓↓扩展运算方式
let max=Math.max(...[1,2,3,4]);
console.log(max);
4) 箭头函数
是匿名函数的一种简写方式
let a=8;
let fn function (a){
return a
}
↓↓↓箭头函数写法(单行情况)
let 变量=(参数)=>return出的内容
let fn=a=>a;
console.log(fn(a));=>8
多个参数情况
let fn0=(a,b)=>a+b;
console.log(fn0(1,2));
函数中有其他代码的情况
let fn1=(a,b,c)=>{
let s=a+b+c;
return s;
}
fn1(5)=>NaN
5) 箭头函数的应用
数组中的方法处理数据
let ary=[1,3,5];
ary=ary.map(function(item,index){
这是之前的写法
})
也可以用箭头函数来写
让数组每一项+1
ary=ary.map(item=>item+1);
console.log(ary) -->2,4,6
sort排序
ary.sort((a,b)=>b-a);
console.log(ary) 6,4,2
定时器(不传参)
window.setTimeout(()=>{console.log(1)},1000);
let ary1=[0,2,4];
ary.findIndex(function(it=>it===2);
console.log(index); ->1
let str="1,2,3,4,5";
str=str.replace(/(\d),?/g,(a,b)=>++b);
console.log(str)
6) this问题
在严格模式下 自执行函数this同样是window,普通函数执行前面没有"."this就是undefined;
执行前记得加window ->window.fn( ) ;
定时器中this也是window
let a=1;
let obj={
a:'a',
fn1:()=>{
let a="aa";
console.log(this.a);
return a
},
fn2:function () {
window.setTimeout(()=>{
console.log(this)
},1000)
},
fn3:{
a:"a3",
fn:()=>this.a
}
};
let fn1=obj.fn1;
obj.fn1();
fn1();
在箭头函数中的this默认就是window,
特殊情况:当箭头函数作为参数的时候,并且在一个对象的某个属性值中,this就是这个对象
let box=document.getElementById('box');
box.fn=()=>{
console.log(this)-->window
}
box.onclick=box.fn
7.高阶函数
let fun=(a)=>{
return(b)=>{
return(c)=>{
return a+b+c
}
}
}
console.log(fun(1)(2)(3)); -->6
简写方法↓
let fn=a=>b=>c=>a+b+c;
console.log(fn(1)(2)(3))-->6
扩展
Symbol
let box=document.getElementById("box");
box.index=0;
let obj={
a:"a",
b:"b"
}
obj.a;
obj["a"]
box["index"]=1;
let str1="index";
let str2="index";
console.log(str1===str2);
box[s]
let str1=Symbol("index");
字符串
1) 方法
inCludes()
inCludes()判断字符串中雅马哈该字符 有就是true 没有就是false
和indexOf一样都可以传两个参数 第二个参数表示从指定索引开始查找 默认是零
startsWith(),判断是不是以某个字符作为开头
endsWith(),判断是不是以某个字符作为结尾
repeat(n)将字符串重复n次返回,原字符串不变
返回重复后的字符串
2) 模板字符串
1.有特殊意义的 ` $ {}
如果想输出特殊意义的字符 就用\转译
var str=``;
2.插入变量
let a='123';
let str0='123${a}';
console.log(str0);
3.换行
4.插入表达式
function fn(x,y){
return x+y
}
let str2=`1+2=${fn(1,2)}`
let str2=`likai is a ${true?"boy":"girl"}`;
5.自动类型转换
let str3=`${[1,2]}`;
let str3=`${{A:A}}`;
console.log(str3);
