day14 ES6

1. let语法

(1) let是什么?

let用来申明变量,它的用法相似于var,然而所申明的变量,只在let命令所在的代码块内无效,相似于C,C++,JAVA局部变量的概念。

(2) 根本用法

1)块级作用域

{    var a = 10;    let b = 123;}console.log(a);console.log(b);//Uncaught ReferenceError: b is not defined

下面代码在代码块之中,别离用let和var申明了两个变量。而后在代码块之外调用这两个变量,后果let申明的变量无奈被打印,var申明的变量返回了正确的值。

这表明,let申明的变量只在它所在的代码块无效

for(var i=0; i<10; i++){    document.write(i);//0123456789}document.write(i);//10
for(let i=0; i<10; i++){    document.write(i);//0123456789}document.write(i);// 看不到,i is not defined 

下面代码中,计数器i只在for循环体内无效,在循环体外援用就会报错。

2)暂时性死区

在被let润饰的同名变量下,依据就近准则,外部变量屏蔽内部变量。

上面代码在有两个同名变量a,然而却因为{}使得作用域不同,输入后果为123,456。

let a = 456;{    let a = 123;    console.log(a);//123}console.log(a);//456

3) 不存在变量晋升

var命令会产生”变量晋升“景象,即变量能够在申明之前应用,值为undefined。这种景象多多少少是有些奇怪的,依照个别的逻辑,变量应该在申明语句之后才能够应用。

也就意味着被let申明的变量,必须先定义在应用。

// var 的状况console.log(foo); // 输入undefinedvar foo = 2;
// let 的状况console.log(bar); // 报错ReferenceErrorlet bar = 2;

4) 不容许反复申明

var a = 123;  var a = 123; //  能够实现let b = 123;let b = 123; //  Identifier 'a' has already been declared

2. this

1) 当this呈现在一般办法时,this代表调用以后办法的对象自身。

2) 当this呈现在事件中时,this代表触发以后事件的HTML元素自身。

//惯例函数        function fun(){        console.log(this);//this是window对象    }    fun();//匿名函数    setTimeout(function(){        console.log(this);//this是window对象    },2000);//事件    document.onclick = function(){        console.log(this);//document对象    }

3. bind

bind往往用来批改匿名函数的this指向;

语法:函数对象.bind(新this的指向):用新的参数扭转this的指向;

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style type="text/css">            #box {                height: 100px;                width: 100px;                background-color: red;            }        </style>    </head>    <body>        <div id="box">            </div>    </body></html><script type="text/javascript">    let oBox = document.querySelector('#box');    document.onclick = function(){        //document不是元素,不能应用document.style.display会报错        //所以必须应用bind批改this的指向,能力暗藏div块        this.style.display = 'none';    }.bind(oBox);</script>

扩大:有名函数从新指定this对象: apply call

    function fun() {        console.log(this);    }    //apply call    fun.apply(oBox);    fun.call(oBox);

4.JSON.parse/JSON.stringify

<script type="text/javascript">    let jsonStr = '{"name":"小猫","age": 3}';    let json = JSON.parse(jsonStr);    console.log(typeof json);//object        // let jsonObj = {"name":"小猫","age": 3};    // let json = JSON.stringify(jsonObj);    // console.log(typeof json);//String</script>

5. const 用法

const命令用来申明常量,一旦申明,其值就不能扭转。也就是只读变量。

根本用法:

1) 申明常量

const PI = 3.1415;PI = 3;// TypeError: Assignment to constant variable.

2)常量必须初始化

const foo;//报错 Missing initializer in const declaration

3) 块级作用域

{    const foo = 123;}console.log(foo);

上述代码仍然报错,和let的成果是一样的。

4) 申明不晋升(const润饰的变量必须先定义后应用)

if (true) {    console.log(MAX); // ReferenceError    const MAX = 5;}

5) const润饰的变量不可反复定义

简略来说,let和const的性能根本相似,只是let用来润饰变量,const用来润饰常量

注意事项:

1.必须要初始化const a;a = 123;//X2.不能改3.倡议只读变量名大写

6. for..in...和for...of...

let strArr = ["heihei","haha","laowang"];    for(let index in strArr){ //遍历下标        console.log(strArr[index]);    }    for(let item of  strArr){ //遍历值        console.log(item);    }

7. 字符串扩大办法

判断字符串是否蕴含在另一个字符串中:

在ES5 中应用的是 indexOf() 办法,在ES6中能够应用includes()、startsWith()、endsWith()三个办法。

  • str.includes(参数): 返回布尔值,示意是否找到了参数字符串。
  • str.startsWith(参数):返回布尔值,参数是否在源字符串的头部。
  • str.endsWith(参数): 返回布尔值,参数是否在源字符串的尾部。

UTF-16 0~65535/UTF-32:

JavaScript外部,字符以UTF-16的格局贮存,每个字符固定为2个字节。对于那些须要4个字节贮存的字(Unicode码点大于0xFFFF的字符),JavaScript会认为它们是两个字符。

如:var str = "????"; 汉字"????"的编码是21c56(须要四个字节),超过了FFFF。即超过javascript自身能示意的字符的最大范畴。javascript就会把“????”当作两个字符解决,

即str.length是2。而且,以前的函数,如:charAt()函数一次只能读取该汉字的其中一半。

<script type="text/javascript">    var str = "????";   //21c56    console.log(str.length);//2    console.log(str.charAt(0));//显示的后果有误    console.log(str.charCodeAt(0).toString(16));//一次只能读两个字节    console.log(str.codePointAt(0).toString(16));//21c56     console.log("\u{21c56}");//????</script>

8. 箭头函数 (针对匿名函数)

定义: ()=> {}

有参数: (参数1,参数2)=>{ }

带有返回值: () => {返回值}

//let fun = function(){//    console.log('haha');//}let fun = ()=>{    console.log('haha');}fun();setTimeout(()=>{console.log(123)},2000);document.onclick = () => {        console.log("document");}

9. 构造赋值

强调格局匹配:等号右边和左边统一

益处:

1)一次性定义很多个变量

let x=10,y=20;let [a,b,c]=[3,4,5];//相当于a=3,b=4,c=5//JSON对象赋值let {name,age} = {name:"老王",age:66}; console.log(name,age);//老王 66

...逆运算符

    let arr = [1,2,3];    let arr1 = arr;    arr1[0] = 66;    console.log(arr);//[66,2,3]
    let arr = [1,2,3];    let arr1 = [...arr];    arr1[0] = 66;    console.log(arr);//[1,2,3]

2) 能够让一个函数一次性返回多个值

  • 应用[], 返回的是数组

        function fun(){        return [1,2,3];    }    let arr = fun();    console.log(arr);//数组

3) 实现两个数的替换

    let a=10,b=20;    [a,b] = [b,a];    console.log(a,b);//20 10

回顾其余两种替换数字的办法:

办法1:通过引起一个两头变量

    let a=10,b=20;    let temp;    temp = a;    a = b;    b = temp;    console.log(a,b);//20 10

办法2:

    a = a + b;    b = a - b; //b=a+b-b;=>b=a;    a = a - b; //

10. set汇合

set汇合,相似于数组的一种容器

1)定义

let set = new Set(数组);let set = new Set([1,1,2,2,3,4,5,5]);

2) 特点

主动去重,没有下标

3) set的遍历

let set = new Set([1,1,2,2,3,4,5,5]);for(let item of set){    console.log(item);}

4) 实现数组去重

Array.from(汇合): 将参数容器转换成数组

let arr =[2,3,4,2,3,4,2,3,4];let set = new Set(arr);arr = Array.from(set);    console.log(arr);

5) set汇合的办法

  • add(参数) 向汇合中增加一个元素(默认增加到最初)
  • delete(值) 删除汇合中某个数
  • has(值) 判断汇合中是否含有某个值,返回true/false
  • clear() 清空集合