es6新增

77 阅读3分钟

let:用来定义变量的关键字

特点:
1.要求变量必须先定义后使用,不能声明提升
    a = 666;
    console.log(a);
    let a;
2.不能重复定义变量
    let a;
    let a;
3.块级作用域(变量在该作用域中不会丢失)
    var oLis = document.getElementsByTagName("li");  
    for(var i=0; i<oLis.length; i++){
        oLis[i].index = i;
        oLis[i].onclick = function(){
            console.log(this.index);
        }
    }
    for(let i=0; i<oLis.length; i++){
        oLis[i].onclick = function(){
            console.log(i);
        }
    }
4.暂时性死区(当内部变量与外部变量同名时,内部变量屏蔽外部变量)
     let a = 123;
    {
        let a = 456;
        console.log(a);
    }  
    console.log(a);

const:定义只读变量的关键字(创建有名的常量)

特点:
1.const修饰的变量为只读变量
    const a = 123;
    console.log(a);
    a = 666;写就报错   
2.const修饰的变量必须初始化(赋初值)
    const a;
    a = 123; 
     
3.不能声明提升,必须先定义后使用
4.不能重复定义
5.块级作用域
6.暂时性死区
​
面试题:var,let,const的异同?
    1.都是用来定义变量的关键字
    2.var具备声明提升
    3.let,const必须先定义后使用,不具备声明提升,不能重复定义变量
               块级作用域,暂时性死区
    4.const修饰的变量为只读变量,且必须初始化

this和bind

this:函数体内的内置对象,作用域只能在函数体内使用
1.与事件体连用:代表触发该事件的元素本身
    var oInput = document.querySelector("input");
    oInput.onclick = function(){
        // console.log(oInput.value);
        console.log(this.value);
    }
2.与普通方法连用(除了事件体和构造方法),调用该方法的对象本身
    function fun(){
        console.log(this);
    }
    window.fun();
    let json = {
        a:1,
        fun:function(){
            console.log(this);
        }
    }
    json.fun();
​
----------------------------------------------------
bind:函数对象的一个方法,作用就是用来改变该函数的this指向,主要修饰匿名函数的this
bind(被修改的this指向)
    var oDiv = document.querySelector("div");
    document.onclick = function(){
        this.style.display = "none";
    }.bind(oDiv);
    var fun = function(){
    }
    fun.bind() == function(){}.bind()

json和字符串的相互转换

字符串->json对象
注意事项:使用以下转换方法的json对象和字符串,key必须用双引号引起来
    var str = '{"name":"老王","age":18}';
    var json = JSON.parse(str);
    console.log(json);
​
json对象->字符串
    var json = {"name":"老王","age":18};
    var str = JSON.stringify(json);
    console.log(str);

for...in和for...of

通常用来遍历json对象,因为遍历的是下标
for(let 索引 in json对象){}
    let json = {
    "name":"老王",
    "age":8
    }  
    for(let index in json){
        console.log(json[index]);
    }
    let arr = [6,4,7,8,3];
    for(let index in arr){
        console.log(index);
    }
针对于没有下标的容器,进行遍历
for(let 元素数值 of 容器){}
    let arr = [6,4,7,8,3];   
    for(let item of arr){
        console.log(item);
    }

字符串扩展方法

判断字符串是否包含在另一个字符串中
在ES5 中使用的是 indexOf() 方法,在ES6中可以使用includes()、
startsWith()、endsWith()三个方法。
    str.includes(参数): 返回布尔值,表示是否找到了参数字符串。
    str.startsWith(参数):返回布尔值,参数是否在源字符串的头部。
    str.endsWith(参数): 返回布尔值,参数是否在源字符串的尾部。
        let str = "hello zheng zhou";
        console.log(str.includes("zheng "));
        console.log(str.startsWith("he222"));
        console.log(str.endsWith("ou"));
​
-----------------------------------------------
打印中文的问题
unicode
中文解析默认是utf-16
    0~65535
    0000 0000 0000 0000~1111 1111 1111 1111   
    let str = "老王";
    console.log(str.charAt(0));
    let str1 = "𡱖";
    console.log(str1.charAt(0));
​
    超过65535的汉字,中文和编码的读取方式
    //中文
    console.log('\u{21c56}');
​
    打印该汉字对应的编码
    console.log(str1.codePointAt(0));

箭头函数

箭头函数:匿名函数的一种写法
    let fun = function(){
        console.log("郑州加油");
    }  
    let fun = ()=>{
        console.log("heiheihei");
    }
    fun();
    document.onclick = ()=>{//事件绑定用箭头函数很少
        console.log("hahaha");
    }
特点:
1.如果只有一个参数,可以省略圆括号
    let fun = a => {
        console.log(a + 5);
    }
    fun(10);
2.如果函数体只有一条语句,则可以省略花括号
    let fun = a => console.log(a + 10);
    fun(40);
3.如果函数体只有一条语句,则自带return
    let fun = a => a * 2;   
    console.log(fun(20));

解构赋值

1.解析结构进行赋值
    let x,y,z;
    x = 1;
    y = 2;
    z = 3;    
a.数组
    let [x,y,z] = [1,2,3];
    console.log(x,y,z);
b.json对象
    let {name,age} = {
        "name":"老王",
        "age":8
    }
    console.log(name,age);
去掉json的前缀
    let json = {"name":"laowang","age":8};
    let {name,age} = json;
    console.log(name,age);
2.交换两个变量的值 
    let [a,b] = [1,2];
    let t;
    t = a;
    a = b;
    b = t;
​
    [a,b] = [b,a];
    console.log(a,b);

Set集合

set:集合,没有下标,自动去重
    let set = new Set(数组);
        add(参数) 向集合中添加一个元素
        delete(值) 删除集合中某个数
        has(值) 判断集合中是否含有某个值
        clear() 清空集合
    let set = new Set([1,"heihei",1,2,2,3,4,4,5,5,1,"heihei"]);
    set.add(7);
    set.add(7);    
    set.delete("heihei");
    console.log(set.has(22));
    set.clear();
    for(let item of set){
        console.log(item);
    }
    console.log(set);
​
-----------------------------------------
数组去重
    let arr = [1,"heihei",1,2,2,3,4,4,5,5,1,"heihei"];
    let set = new Set(arr);
通过Array.from(集合):将集合转化为数组
    arr = Array.from(set);
    console.log(arr);
//------------------------------
// 双色球
​
function doubleColorBall(){
    let redArr = [];
    let blueX = 0;
    let set = new Set();
    
    while(true){
        set.add(rand(1,33));
        if(set.size == 6){
            break;
        }
        // redArr.push(rand(1,33));
        // if(redArr.length == 6){
        //     break;
        // }
    }
​
    blueX = rand(1,16)
​
    console.log(set,blueX);
}
​
doubleColorBall();