初识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);