乐趣区

关于javascript:day14-ES6

jiezi

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); // 输入 undefined
var foo = 2;
// let 的状况
console.log(bar); // 报错 ReferenceError
let 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;//X
2. 不能改
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() 清空集合
退出移动版