ECMAScript 6

1、目前用的版本是ECMAScript3.0，后來改了名字叫ECMAScript5。
2、ECMAScript6的特點(diǎn)：ES6增添許多必要的特性，例如模塊和類，塊級(jí)作用域，常量與變量。
3、瀏覽器的支持程度：http://kangax.github.io/compat-table/es6/
4、可以通過Babel轉(zhuǎn)碼器把ES6寫的代碼轉(zhuǎn)成ES5，就不用擔(dān)心運(yùn)行環(huán)境是否支持
5、chrome下使用ES6為保證可以正常使用大部分語法，需要使用嚴(yán)格模式，即在js開始部分加上'use strict'
6、在firefox下使用ES6為保證可以正常使用大部分語法，需要知道測(cè)試版本，即在script標(biāo)簽的type屬性中加上：“application/javascript;version=1.7”屬性值。

1.let

<pre><script>
/let 聲明變量的關(guān)鍵字
1、在相同的作用域內(nèi)，let不能重復(fù)聲明一個(gè)變量（不同的作用域內(nèi)除外）
2、let聲明的變量不會(huì)被預(yù)解析
3、暫時(shí)性死區(qū):變量在let聲明前都不能訪問，為了防止先調(diào)用后聲明這個(gè)現(xiàn)象/
'use strict'
console.log(a); //undefined
var a=12;
var a='kaivon';
console.log(a);

        //console.log(b);       //報(bào)錯(cuò)    不能提前使用
        let b=20;
        //let b=30;         //報(bào)錯(cuò) 不能重復(fù)聲明一個(gè)變量
        console.log(b);
        
        {
            let str='wendaoliu';
            console.log(str);
        }
    </script></pre>

2. 塊級(jí)作用域

let聲明的變量擁有塊級(jí)作用域，塊級(jí)作用域指的是一對(duì)大括號(hào)就是一個(gè)作用域，塊級(jí)作用域可以直接寫一對(duì)大括號(hào)，以后就不用寫自執(zhí)行函數(shù)了。
<pre><script>
'use strict'
if(true){
var str1='wendaoliu';
}
console.log(str1);
//塊級(jí)作用域
if(true){
let str2='wen';
}
//console.log(str2); //報(bào)錯(cuò)

        {
            let a=12;
            function fn(){
                let a=20;
                console.log(a);
            }
            fn();
        }
        //自執(zhí)行函數(shù)
        (function(){
            var b='abc';
        })();
        console.log(b);          //b is not defined(…)
    </script></pre>

3. let與for循環(huán)

以下兩種效果一致：
<pre> <body>
<ul> <li>red</li> <li>blue</li> <li>green</li> <li>yellow</li> </ul>

    <script>
        'use strict'
        var lis=document.querySelectorAll("li");
        for(var i=0;i<lis.length;i++){

// lis[i].onclick=function(){
// alert(i); // 4
// }

            (function(i){
                lis[i].onclick=function(){
                    alert(i);
                }
            })(i);
        }
    </script>
</body></pre>

<pre><body>
<ul> <li>red</li> <li>blue</li> <li>green</li> <li>yellow</li> </ul>

    <script>
        'use strict'
        var lis=document.querySelectorAll("li");
        for(let i=0;i<lis.length;i++){
            lis[i].onclick=function(){
                alert(i);
            }
        }
    </script>
</body></pre>

4.let選項(xiàng)卡

<pre><style>
input{
background: white;
}
input:nth-of-type(1){
background: yellow;
}
div{
display: none;
}
div:nth-of-type(1){
display: block;
}
</style>
</head>
<body>
<input type="button" value="按鈕1" />
<input type="button" value="按鈕2" />
<input type="button" value="按鈕3" />
<div>內(nèi)容一</div>
<div>內(nèi)容二</div>
<div>內(nèi)容三</div>
<script>
'use strict'
var inputs=document.querySelectorAll("input");
var divs=document.querySelectorAll("div");
//ES5選項(xiàng)卡寫法
/for(var i=0;i<inputs.length;i++){
inputs[i].index=i;
inputs[i].onclick=function(){
for(var i=0;i<inputs.length;i++){
inputs[i].style.background='white';
divs[i].style.display='none';
}
this.style.background='yellow';
divs[this.index].style.display='block';
}
}/
//let選項(xiàng)卡寫法
for(let i=0;i<inputs.length;i++){
inputs[i].onclick=function(){
for(let j=0;j<inputs.length;j++){
inputs[j].style.background='white';
divs[j].style.display='none';
}
inputs[i].style.background='yellow';
divs[i].style.display='block';
}
}
</script>
</body></pre>

5. 常量

<pre><script>
/*const聲明一個(gè)常量，一旦聲明后就不能修改了
1、如果聲明后再去修改的話就會(huì)報(bào)錯(cuò)
2、只聲明不賦值也會(huì)報(bào)錯(cuò)
3、只能先聲明后使用，不會(huì)被提前解析
4、不能重復(fù)聲明一個(gè)常量
注意：const聲明的對(duì)象中的屬性是可以修改的
*/
'use strict'
var a=12;
a='wendaoliu';
console.log(a); //wendaoliu

        const str='wen';
        /*str=12;       
        console.log(str);   //報(bào)錯(cuò)*/
        
        //const b;          //報(bào)錯(cuò)    沒有給值

        //聲明一個(gè)對(duì)象后，可以對(duì)它里面的屬性進(jìn)行修改
        const obj={
            name:'文刀劉'  
        };
        obj.name='wendaoliu';
        console.log(obj);
    </script></pre>

6. 解構(gòu)賦值:

按照一定的模式，從數(shù)組或者對(duì)象中把數(shù)據(jù)拿出來，對(duì)變量進(jìn)行賦值。
數(shù)組解構(gòu)賦值:等號(hào)左邊與右邊必需都是數(shù)組，數(shù)組的解構(gòu)賦值要一一對(duì)應(yīng)。如果對(duì)應(yīng)不上的話就是undefined；
對(duì)象解構(gòu)賦值:等號(hào)左邊與右邊必需都是對(duì)象，名字要一一對(duì)應(yīng)，順序不需要對(duì)應(yīng)，對(duì)應(yīng)不上的值結(jié)果是undefined。
<pre><script>
'use strict'
var [a,b,c]=[1,2,3];
console.log(a,b,c);

        let [x,,y,z]=[1,2,3];
        console.log(x,y,z);     //1 3 undefined
        
         var [a,[b,c]]=[1,[2,3]];
         console.log(a,b,c);        //1 2 3
         
         //可以用來調(diào)換兩個(gè)值
         var n1=10;
         var n2=15;
         var [n1,n2]=[n2,n1];
         console.log(n1,n2);        //15 10

         //也可以用來取函數(shù)的返回值
         function fn(){
            return ['red','green','blue'];
         }
         var [d,e,f]=fn();
         console.log(e);        //green
    </script></pre>

<pre><script>
'use strict'
var obj={
name:'wen',
QQ:356985332,
language:['css','html','js'],
work:function(){
console.log('js');
}
};
var {name,work,QQ,age}=obj;
console.log(name,work,QQ,age);
//可以用它來取一個(gè)對(duì)象的值
function fn(){
return {
c1:'red',
c2:'green',
c3:'blue'
}
}
var {c1,c2,c3}=fn();
console.log(c2); //green
</script></pre>

7. 字符串的擴(kuò)展方法

includes(s)：字符串里面是否包含某個(gè)字符，參數(shù)是一個(gè)字符；
startsWidth(s)：字符串開始位置的字符是否是參數(shù)的，參數(shù)是一個(gè)字符
endsWidth(s)：字符串結(jié)束位置的字符是否是參數(shù)的，參數(shù)是一個(gè)字符
以上的幾個(gè)方法都返回一個(gè)布爾值。
repeat(num)：復(fù)制字符串，參數(shù)為數(shù)字，表示復(fù)制的次數(shù)。參數(shù)必需是一個(gè)正數(shù)，其它的就會(huì)報(bào)錯(cuò)。
<pre><script>
'use strict'
var str='wendaoliu';
console.log(str.includes('w')); //true
console.log(str.includes('b')); //false
console.log(str.startsWith('w')); //true
console.log(str.endsWith('u')); //true
console.log(str.repeat(2)); //wendaoliuwendaoliu
//console.log(str.repeat(-1)); //報(bào)錯(cuò)
//console.log(str.repeat(Infinity)); //報(bào)錯(cuò)
</script></pre>
模板字符串：字符串的拼接方式。
1、字符串需要用一對(duì)反引號(hào)包起來，它可以定義多行字符串，只用一對(duì)反引號(hào)；
2、要拼進(jìn)去的數(shù)據(jù)需要放在${}里面；
3、大括號(hào)里還可以進(jìn)行運(yùn)算；
4、大括號(hào)里還可以調(diào)用函數(shù)；
<pre><body>
<div id="text">
<h1></h1> <p></p>
</div>
<script>
'use strict'
var obj={
title:'心情',
content:'今天很爽，吃了飯，睡了覺，還打了豆豆。'
}
var text=document.getElementById("text");
function fn(){
return '那么問題來了，豆豆爽么？';
}
var str3=<h1>${obj.title+'+1'}</h1> <p>${obj.content+fn()}</p>;
text.innerHTML=str3;
</script>
</body></pre>

8. Math對(duì)象的擴(kuò)展方法

<pre><script>
/*Math對(duì)象的擴(kuò)展方法
Math.trunc(num) 去除小數(shù)部分，是直接把小數(shù)部分去掉
1、對(duì)于非數(shù)值，先調(diào)用Number方法把它轉(zhuǎn)成數(shù)字
2、對(duì)于空值和無法轉(zhuǎn)成數(shù)字的值，結(jié)果是NaN
Math.sign(num) 判斷一個(gè)數(shù)是正數(shù)還是負(fù)數(shù)還是0
1、參數(shù)為正數(shù)，返回1
2、參數(shù)為負(fù)數(shù)，返回-1
3、參數(shù)為0，返回0
4、參數(shù)為-0，返回-0
5、參數(shù)為其它值，返回NaN
Math.hypot() 開平方，參數(shù)可以為多個(gè)，把所有的參數(shù)的平方加起來，然后再開平方
*/
'use strict'
console.log(Math.trunc(12.74)); //12
console.log(Math.trunc('36.01')); //36
console.log(Math.trunc('wen')); //NaN

        console.log(Math.sign(0));              //0
        console.log(Math.sign(-0));             //-0
        console.log(Math.sign('wen'));          //NaN
        
        console.log(Math.hypot(3,4));           //5
        console.log(Math.hypot(3,4,5));         //7.0710678118654755
    </script></pre>

數(shù)組的擴(kuò)展方法:

  1. Array.from() 把（有遍歷接口）類數(shù)組轉(zhuǎn)成真正的數(shù)組。
    任何有l(wèi)ength屬性的對(duì)象都可以用這個(gè)方法轉(zhuǎn)真正數(shù)組。

  2. [...類數(shù)組] 它是一個(gè)擴(kuò)展方法，在這里可以把一個(gè)類數(shù)組轉(zhuǎn)成一下真正的數(shù)組。

  3. Array.of() 把一組數(shù)值轉(zhuǎn)成真正的數(shù)組。
    includes(數(shù)據(jù),起始位置) 查找數(shù)組中有沒有某個(gè)數(shù)據(jù)。
    <pre><script>
    'use strict'
    var lis=document.querySelectorAll("li");

        //var newLis=[].slice.call(lis);    轉(zhuǎn)換成數(shù)組
    var newLis=Array.from(lis);
    console.log(newLis);            //把類數(shù)組轉(zhuǎn)換成數(shù)組[li, li, li, li, li]
    
    var str='wendao';
    var newStr=Array.from(str);
    console.log(newStr);            //["w", "e", "n", "d", "a", "o"]
    
    var newLis2=[...lis];
    console.log(newLis2);       //[li, li, li, li, li]
    
    //對(duì)象身上只要有l(wèi)ength屬性就可以調(diào)用Array.from()把對(duì)象轉(zhuǎn)成數(shù)組,對(duì)象中的key必需是從0開始的數(shù)字才能轉(zhuǎn)
    var obj={
        0:'red',
        1:'green',
        2:'blue',
        3:'yellow',
        length:4
    };
    var obj2={
        1:'red',
        2:'green',
        3:'blue',
        4:'yellow',
        length:4
    };
    console.log(Array.from(obj));
    console.log(Array.from(obj2));
</script></pre>

<pre><script>
'use strict'
console.log(new Array()); //[]
console.log(new Array(3)); //[, , ,]
console.log(new Array(1,2,3)); //[1, 2, 3]

        console.log(Array.of(1));       //[1]
        console.log(Array.of(1,2,3));   //[1, 2, 3]
        
        var arr=['red','green','blue','yellow'];
        console.log(arr.includes('red'));       //true
        console.log(arr.includes('pink'));      //false
        console.log(arr.includes('green',2));   //false
    </script></pre>

<pre><script>
/for in 循環(huán)，能夠直接讀取鍵名
for of 循環(huán)，能夠直接讀取鍵值
它不光可以遍歷數(shù)組或者對(duì)象，只要有遍歷接口的對(duì)象都可以用它
keys() 存儲(chǔ)了數(shù)組的所有鍵名
values() 存儲(chǔ)了數(shù)組的所有鍵值
entries() 存儲(chǔ)了數(shù)組的所有鍵值對(duì)
/
'use strict'
var color=['red','green','blue','yellow'];
//for in
for(var attr in color){
console.log(attr); //0 1 2 3
}
//for of
for(var value of color){
console.log(value); //red green blue yellow
}
//字符串也可以使用for of
var str='wen';
for(var value of str){
console.log(value); //w e n
}
//遍歷keys
for(var key of color.keys()){
console.log(key); //0 1 2 3
}
//遍歷values
/for(var value of color.values()){
console.log(value); //red green blue yellow 提示一下，chrom還不支持
}/
//遍歷entries
for(let [key,value] of color.entries()){
console.log(key,value); //0 "red" 1 "green" 2 "blue" 3 "yellow"
}
</script></pre>

9. 函數(shù)參數(shù)的默認(rèn)值

<pre><script>
'use strict'
function fn(a,b){
b=b||'wendaoliu';
console.log(a,b);
}
fn('hello'); //hello wendaoliu
fn('hello','moto'); //hello moto
//參數(shù)變量是默認(rèn)聲明的，不能用let或者const再次聲明
function fn2(a=20,b=10){
//console.log(a,b); //20 10
//let a=12; //報(bào)錯(cuò)
console.log(a+b);
}
fn2(); //30
fn2(23,45); //68
</script></pre>
rest參數(shù)：
<pre><script>
/*rest參數(shù) ...變量名
rest參數(shù)是一個(gè)數(shù)組，它的后面不能再有參數(shù)，不然會(huì)報(bào)錯(cuò)
擴(kuò)展方法 ...
1、三個(gè)點(diǎn)后面是一個(gè)類數(shù)組，它的作用是把這個(gè)類數(shù)組轉(zhuǎn)成真正的數(shù)組，但是它需要放到一對(duì)中括號(hào)里面
2、三個(gè)點(diǎn)后面是一個(gè)真正的數(shù)組，它的作用是把數(shù)組轉(zhuǎn)成一個(gè)普通的集合數(shù)據(jù)，不需要加中括號(hào)的
*/
'use strict'
function fn(a,b,c,...values){
console.log(values);
}
fn(1,2,3,4,5,6,78); //[4, 5, 6, 78]

        function fn2(...values/*,a*/){
            let sum=0;
            for(var val of values){
                sum+=val;
            }
            //console.log(a);       //報(bào)錯(cuò),rest參數(shù)是一個(gè)數(shù)組，它的后面不能再有參數(shù)
            console.log(sum);
        }
        fn2(1,2,3,4,5);     //15
        
        //三個(gè)點(diǎn)的用法
        var arr1=[12,34,5,28,97];
        var divs=document.querySelectorAll("div");
        console.log([...divs]);      //注意：類數(shù)組以及三個(gè)點(diǎn)需要放在一對(duì)中括號(hào)里面
        console.log(...arr1);        //12 34 5 28 97，注意把數(shù)組轉(zhuǎn)成集合數(shù)據(jù)，不用加中括號(hào)
        
        //作用1：替代數(shù)組的apply方法
        console.log(Math.max(12,34,5,28,97));       //97            
        var arr2=[12,34,5,28,97];
        console.log(Math.max.apply(null,arr2));     //ES5寫法求最大值 97          
        console.log(Math.max(...arr2));             //ES6寫法求最大值 97  
        
        //作用2：替代concat
        var arr3=[1,2,3];
        var arr4=['a','b','c'];
        //console.log(arr3.concat(arr4));       //[1, 2, 3, "a", "b", "c"]          
        arr3.push(...arr4);
        console.log(arr3);      //[1, 2, 3, "a", "b", "c"]
        //作用3：把字符串轉(zhuǎn)成數(shù)組
        var str='kaivon';
        console.log([...str]);  //["k", "a", "i", "v", "o", "n"]
    </script></pre>

箭頭函數(shù)：
<pre><script>
/箭頭函數(shù)
語法：1、function用var、let、const來表示
2、參數(shù)要寫在第一個(gè)等號(hào)后面
1、如果沒有參數(shù)，需要寫一對(duì)空的小括號(hào)
2、只有一個(gè)參數(shù)，那就直接寫，不用加括號(hào)
3、參數(shù)有多個(gè)，需要加一個(gè)小括號(hào)，參數(shù)用逗號(hào)隔開
3、函數(shù)的主體內(nèi)容是放在箭頭后面，如果語句只有一條，那就直接寫。如果語句有多條，需要把它們放在一對(duì)大括號(hào)里
注意：1、函數(shù)體內(nèi)的this對(duì)象就是定義函數(shù)時(shí)所在的對(duì)象，不是調(diào)用函數(shù)時(shí)候的對(duì)象
2、不能當(dāng)作構(gòu)造函數(shù)來用，不能使用new
3、函數(shù)內(nèi)不能使用arguments對(duì)象，如果要用的話就用rest參數(shù)來代替
/
'use strict'
/function fn1(){
console.log('kaivon');
}
fn1();/
var fn1=()=>console.log('kaivon');
fn1();
let fn2=a=>console.log(a);
fn2('wen'); //wen

        const fn3=(a,b)=>{
            let result=a+b;
            console.log(result);
        }
        fn3(1,2);       //3
    </script></pre>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容