WEB基礎(chǔ)入門(mén)十四：ES5录肯、6、7

一吊说、ECMAScript

1论咏、它是一種由ECMA組織（前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì)）制定和發(fā)布的腳本語(yǔ)言規(guī)范
2、我們學(xué)的 JavaScript 是ECMA的實(shí)現(xiàn),但術(shù)語(yǔ)ECMAScript和JavaScript平時(shí)表達(dá)同一個(gè)意思
3颁井、 JS包含三個(gè)部分：

1ECMAScript（核心）
擴(kuò)展==>瀏覽器端：BOM（瀏覽器對(duì)象模型）厅贪；DOM（文檔對(duì)象模型）
擴(kuò)展==>服務(wù)器端：Node

4、ES的幾個(gè)重要版本

ES5 : 09年發(fā)布
ES6(ES2015) : 15年發(fā)布, 也稱(chēng)為ECMA2015
ES7(ES2016) : 16年發(fā)布, 也稱(chēng)為ECMA2016 (變化不大)

二雅宾、ES5

1养涮、嚴(yán)選模式
除了正常運(yùn)行模式(混雜模式)，ES5添加了第二種運(yùn)行模式："嚴(yán)格模式"（strict mode）眉抬；
顧名思義贯吓，這種模式使得Javascript在更嚴(yán)格的語(yǔ)法條件下運(yùn)行

目的和作用
消除Javascript語(yǔ)法的一些不合理、不嚴(yán)謹(jǐn)之處蜀变，減少一些怪異行為悄谐；
消除代碼運(yùn)行的一些不安全之處，為代碼的安全運(yùn)行保駕護(hù)航库北；
為未來(lái)新版本的Javascript做好鋪墊
2爬舰、使用
在全局或函數(shù)的第一條語(yǔ)句定義為: 'use strict';
如果瀏覽器不支持, 只解析為一條簡(jiǎn)單的語(yǔ)句, 沒(méi)有任何副作用
3、語(yǔ)法和行為改變
必須用var聲明變量贤惯；
禁止自定義的函數(shù)中的this指向window洼专；
創(chuàng)建eval作用域；
對(duì)象不能有重名的屬性

<script type="text/javascript">
'use strict';
var username = 'kobe';
// window.username = 'kobe';
console.log(username);
function Person(name, age){
  this.name = name;
  this.age = age;
}
new Person('kobe', 40);
var str = 'NBA';
// eval('alert(str)');
eval('var str = "CBA"; alert(str)');
alert(str);
var obj = {
  username: 'kobe',
  username: 'wade'
}
</script>

2孵构、json對(duì)象

JSON.stringify(obj/arr)
js對(duì)象(數(shù)組)轉(zhuǎn)換為json對(duì)象(數(shù)組)
JSON.parse(json)
json對(duì)象(數(shù)組)轉(zhuǎn)換為js對(duì)象(數(shù)組)

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JSON對(duì)象</title>
 </head>
 <body>
 <!--
 1. JSON.stringify(obj/arr)
   * js對(duì)象(數(shù)組)轉(zhuǎn)換為json對(duì)象(數(shù)組)
 2. JSON.parse(json)
   * json對(duì)象(數(shù)組)轉(zhuǎn)換為js對(duì)象(數(shù)組)
 -->
 <script type="text/javascript">
     var obj = {username: 'kobe'};
     obj = JSON.stringify(obj);
     console.log(typeof obj);
     obj = JSON.parse(obj);
     console.log(typeof obj);
 </script>
 </body>
 </html>

3屁商、Object擴(kuò)展
ES5給Object擴(kuò)展了一些靜態(tài)方法, 常用的2個(gè):

1、Object.create(prototype, [descriptors])
作用: 以指定對(duì)象為原型創(chuàng)建新的對(duì)象
為新的對(duì)象指定新的屬性, 并對(duì)屬性進(jìn)行描述
value : 指定值
writable : 標(biāo)識(shí)當(dāng)前屬性值是否是可修改的, 默認(rèn)為false
configurable: 標(biāo)識(shí)當(dāng)前屬性是否可以被刪除默認(rèn)為false
enumerable：標(biāo)識(shí)當(dāng)前屬性是否能用for in 枚舉默認(rèn)為false
2、Object.defineProperties(object, descriptors)
作用: 為指定對(duì)象定義擴(kuò)展多個(gè)屬性
get ：用來(lái)獲取當(dāng)前屬性值得回調(diào)函數(shù)
set ：修改當(dāng)前屬性值得觸發(fā)的回調(diào)函數(shù)蜡镶，并且實(shí)參即為修改后的值
存取器屬性：setter,getter一個(gè)用來(lái)存值雾袱，一個(gè)用來(lái)取值

<script type="text/javascript">
  //1. Object.create(prototype, [descriptors])
  var obj = {username: 'jordan', age: 55};
  var obj1 = {};
  obj1 = Object.create(obj, {
    sex: {
      value: '男',
      writable: true,
      configurable: true,
      enumerable: true
    }
  });
  // console.log(obj1);
  console.log(obj1.sex);
  obj1.sex = '女';
  console.log(obj1.sex);
  // delete obj1.sex;
  // console.log(obj1);
  for(var i in obj1){
    console.log(i);
  }
  // 2. Object.defineProperties(object, descriptors)
  var obj2 = {firstName: 'kobe', lastName: 'bryant'};
  Object.defineProperties(obj2, {
    fullName: {
      get: function(){//獲取擴(kuò)展屬性的值，在獲取擴(kuò)展屬性值的時(shí)候get方法自動(dòng)調(diào)用
        console.log('get()');
        return this.firstName + " " + this.lastName;
},
set: function(data){//監(jiān)聽(tīng)擴(kuò)展屬性官还，當(dāng)擴(kuò)展屬性發(fā)生變化的時(shí)候芹橡，會(huì)自動(dòng)調(diào)用，自動(dòng)調(diào)用后會(huì)將變化的值作為實(shí)參注入到set函數(shù)
  console.log('set()', data);
  var names = data.split(' ');
  this.firstName = names[0];
  this.lastName = names[1];
}
    }
  })
  console.log(obj2);
  console.log(obj2.fullName);
  obj2.fullName = 'tim duncan';
  console.log(obj2.fullName);
</script>

<!--
    對(duì)象本身的兩個(gè)方法
    * get propertyName(){} 用來(lái)得到當(dāng)前屬性值的回調(diào)函數(shù)
    * set propertyName(){} 用來(lái)監(jiān)視當(dāng)前屬性值變化的回調(diào)函數(shù)
-->
<script type='text/javascript'>
  var obj3 = {
    firstName: 'stephen', 
    lastName: 'curry',
    get fullName(){
      return this.firstName + " " + this.lastName;
    },
    set fullName(data){
      var names = data.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    }
  };
  console.log(obj3);
  obj3.fullName = 'kobe bryant';
  console.log(obj3.fullName);
</script>

4望伦、Array擴(kuò)展

Array.prototype.indexOf(value) : 得到值在數(shù)組中的第一個(gè)下標(biāo)
Array.prototype.lastIndexOf(value) : 得到值在數(shù)組中的最后一個(gè)下標(biāo)
Array.prototype.forEach(function(item, index){}) : 遍歷數(shù)組
Array.prototype.map(function(item, index){}) : 遍歷數(shù)組返回一個(gè)新的數(shù)組林说，返回加工之后的值
Array.prototype.filter(function(item, index){}) : 遍歷過(guò)濾出一個(gè)新的子數(shù)組，返回條件為true的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_Array擴(kuò)展</title>
</head>
<body>
<!--
1. Array.prototype.indexOf(value) : 得到值在數(shù)組中的第一個(gè)下標(biāo)
2. Array.prototype.lastIndexOf(value) : 得到值在數(shù)組中的最后一個(gè)下標(biāo)
3. Array.prototype.forEach(function(item, index){}) : 遍歷數(shù)組
4. Array.prototype.map(function(item, index){}) : 遍歷數(shù)組返回一個(gè)新的數(shù)組屯伞，返回加工之后的值
5. Array.prototype.filter(function(item, index){}) : 遍歷過(guò)濾出一個(gè)新的子數(shù)組腿箩， 返回條件為true的值
-->
<script type="text/javascript">
  /*
   需求:
   1. 輸出第一個(gè)6的下標(biāo)
   2. 輸出最后一個(gè)6的下標(biāo)
   3. 輸出所有元素的值和下標(biāo)
   4. 根據(jù)arr產(chǎn)生一個(gè)新數(shù)組,要求每個(gè)元素都比原來(lái)大10
   5. 根據(jù)arr產(chǎn)生一個(gè)新數(shù)組, 返回的每個(gè)元素要大于4
   */
  var arr = [2,4,3,1,2,6,5,4];
  console.log(arr.indexOf(4));
  console.log(arr.lastIndexOf(4));
  arr.forEach(function(item, index){
    console.log(item, index);
  })
  var arr1 = arr.map(function(item, index) {
    return item + 10;
  });
  console.log(arr1);
  var arr2 = arr.filter(function(item, index){
    return item > 3;
  });
  console.log(arr, arr2);
</script>
</body>
</html>

5、Function擴(kuò)展

Function.prototype.bind(obj) :
作用: 將函數(shù)內(nèi)的this綁定為obj, 并將函數(shù)返回
面試題: 區(qū)別bind()與call()和apply()?
都能指定函數(shù)中的this劣摇；
call()/apply()是立即調(diào)用函數(shù)珠移；
bind()是將函數(shù)返回

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>05_Function擴(kuò)展</title>
 </head>
 <body>
 <!--
 1. Function.prototype.bind(obj) :
   * 作用: 將函數(shù)內(nèi)的this綁定為obj, 并將函數(shù)返回
 2. 面試題: 區(qū)別bind()與call()和apply()?
   * 都能指定函數(shù)中的this
   * call()/apply()是立即調(diào)用函數(shù)
   * bind()是將函數(shù)返回
 -->
 <script type="text/javascript">
        var obj = {username: 'kobe'};
     /*function foo(){
    console.log(this);
}*/
function foo(data){
    console.log(this, data);
}
// foo();
// foo.call(obj);
// foo.apply(obj);
//傳入?yún)?shù)的形式
// foo.call(obj, 33);//直接從第二個(gè)參數(shù)開(kāi)始，依次傳入
// foo.apply(obj, [33]);//第二參數(shù)必須是數(shù)組末融，傳入的參數(shù)放在數(shù)組里
//bind的特點(diǎn)：綁定完this不會(huì)立即調(diào)用當(dāng)前的函數(shù)钧惧，而是將函數(shù)返回
/*var bar = foo.bind(obj);
console.log(bar);
bar();*/
//bind傳參的方式同call一樣
foo.bind(obj, 33)();
setTimeout(function(){
    console.log(this);
}.bind(obj), 1000);
 </script>
 </body>
 </html>

ES6

1、LET關(guān)鍵字

作用：與var類(lèi)似, 用于聲明一個(gè)變量
特點(diǎn)：在塊作用域內(nèi)有效勾习；不能重復(fù)聲明浓瞪；不會(huì)預(yù)處理, 不存在變量提升
應(yīng)用：循環(huán)遍歷加監(jiān)聽(tīng)；使用let取代var是趨勢(shì)

<script type="text/javascript">
    // console.log(username);
    let username = 'kobe';
    // let username = 'wade';
    // console.log(username);
    let btns = document.getElementsByTagName('button');
    for (let i = 0; i < btns.length; i++) {
  var btn = btns[i];
  /*var無(wú)法獲取正確的索引*/
  btn.onclick = function(){
      alert(i);
  }
  /*閉包的方式解決
  (function(i){
      btn.onclick = function(){
          alert(i);
      }
      })(i);*/
    }
</script>

2语卤、const關(guān)鍵字

作用：定義一個(gè)常量
特點(diǎn)：不能修改追逮；其它特點(diǎn)同let；
應(yīng)用：保存不用改變的數(shù)據(jù)

<script type="text/javascript">
const KEY = 'NBA';
KEY = 'CBA';
console.log(KEY);
</script>

變量的解構(gòu)賦值

從對(duì)象或數(shù)組中提取數(shù)據(jù), 并賦值給變量(多個(gè))

對(duì)象的解構(gòu)賦值

let {n, a} = {n:'tom', a:12}

數(shù)組的解構(gòu)賦值

let [a,b] = [1, 'hello'];

用途
給多個(gè)形參賦值

<script type="text/javascript">
  let obj = {username: 'kobe', age: 40};
    // let username = obj.username;
    // let age = obj.age;
    // let {username, age} = obj;
    // console.log(username, age);
    // let {age} = obj;
    // console.log(age);
  let arr = [1,3,5,'abc',true];
    // let [a,b,c,d,e] = arr;
    // console.log(a,b,c,d,e);
    let [,,a,b] = arr;
    console.log(a,b);
    /*function foo(obj){
  console.log(obj.username, obj.age);
    }*/
    function foo({username, age}){//{username, age} = obj;
  console.log(username, age);
    }
    foo(obj);
</script>

模板字符串

模板字符串 : 簡(jiǎn)化字符串的拼接

模板字符串必須用 `` 包含
變化的部分使用${xxx}定義

<script type="text/javascript">
    let obj = {username: 'kobe', age: 40};
    let str = '我的名字叫：' + obj.username + '粹舵，我的年齡：' + obj.age;
    console.log(str);
    str = `我的名字叫：${obj.username}，我的年齡：${obj.age}`;
    console.log(str);
    /*
    商品列表的url：
    https://s.taobao.com/search?q=鍋&refpid=430275_1006&source=tbsy&style=grid&tab=all&pvid=4aed0d3046100602f268a24859e5bb44&clk1=b7e8112df80f92354fd6562fa21256ed&spm=a21bo.2017.201856-sline.10.5af911d9vwLBmw
    */
</script>

簡(jiǎn)化的對(duì)象寫(xiě)法

1骂倘、省略同名的屬性值
2眼滤、省略方法的function

let x = 1;
let y = 2;
let point = {
    x,
    y,
    setX (x) {this.x = x}
};

 <script type="text/javascript">
let username = 'kobe';
let age = 40;
let obj = {
    username,//同名的屬性可以省略不寫(xiě)
    age,
    getName(){//可以省略函數(shù)的function
        return this.username;
    }
};
console.log(obj);
console.log(obj.getName());
</script>

箭頭函數(shù)

定義匿名函數(shù)

基本語(yǔ)法：
1、沒(méi)有參數(shù): () => console.log('xxxx')历涝；
2诅需、一個(gè)參數(shù): i => i+2；
3荧库、大于一個(gè)參數(shù): (i,j) => i+j堰塌；
4、函數(shù)體不用大括號(hào): 默認(rèn)返回結(jié)果分衫；
5场刑、函數(shù)體如果有多個(gè)語(yǔ)句, 需要用{}包圍，若有需要返回的內(nèi)容蚪战，需要手動(dòng)返回
使用場(chǎng)景: 多用來(lái)定義回調(diào)函數(shù)**
箭頭函數(shù)的特點(diǎn)：
1牵现、簡(jiǎn)潔
2铐懊、箭頭函數(shù)沒(méi)有自己的this，箭頭函數(shù)的this不是調(diào)用的時(shí)候決定的瞎疼，而是在定義的時(shí)候所處的對(duì)象就是它的this
3科乎、擴(kuò)展理解：箭頭函數(shù)的this看外層的是否有函數(shù)，如果有贼急，外層函數(shù)的this就是內(nèi)部箭頭函數(shù)的this茅茂，如果沒(méi)有，則this是window太抓。

 <script type="text/javascript">
/*let fun= function(){
    console.log('我是函數(shù)');
}*/
/*
let fun = () => console.log('我是箭頭函數(shù)');
fun();
//形參的情況
//1玉吁、沒(méi)有形參的時(shí)候
let fun1 = () => console.log('我是箭頭函數(shù)');
fun1();
//2、只有一個(gè)形參的時(shí)候()可以省略
let fun2 = a => console.log(a);
fun2('aaa');
//3腻异、兩個(gè)及兩個(gè)以上的形參的時(shí)候()不能省略
let fun3 = (x, y) => console.log(x, y);
fun3(25, 36);
//函數(shù)體的情況
//1进副、函數(shù)體只有一條語(yǔ)句或者是表達(dá)式的時(shí)候{}可以省略-->會(huì)自動(dòng)返回語(yǔ)句執(zhí)行的結(jié)果，或者是表達(dá)式的結(jié)果
// let fun4 = (x,y) => {return x + y};
let fun4 = (x,y) => x + y;
console.log(fun4(24, 36));
//2悔常、函數(shù)體不止一條語(yǔ)句或者表達(dá)式的情況
let fun5 = (x, y) => {
    console.log(x, y);
    return x + y;
}
console.log(fun5(35, 49));
*/
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
btn1.onclick = function(){
    alert(this);
    console.log(this);
}
btn2.onclick = () => {
    alert(this);
}
let obj = {
    name: '箭頭函數(shù)',
    getName: () => {
        btn2.onclick = () => {
            console.log(this);
        }
    }
}
// 本質(zhì)是 obj.getName = () => {};
obj.getName();
</script>

擴(kuò)展運(yùn)算符

rest(可變)參數(shù)

用來(lái)取代arguments 但比 arguments 靈活,只能是最后部分形參參數(shù)

function fun(...values) {
    console.log(arguments);
    arguments.forEach(function (item, index) {
        console.log(item, index);
    });
    console.log(values);
    values.forEach(function (item, index) {
        console.log(item, index);
    })
}

fun(1,2,3);

擴(kuò)展運(yùn)算符

let arr1 = [1,3,5];
let arr2 = [2,...arr1,6];
arr2.push(...arr1);

形參默認(rèn)值

當(dāng)不傳入?yún)?shù)的時(shí)候默認(rèn)使用形參里的默認(rèn)值

function Point(x = 1,y = 2) {
    this.x = x;
    this.y = y;
}

Promise對(duì)象

Promise對(duì)象: 代表了未來(lái)某個(gè)將要發(fā)生的事件(通常是一個(gè)異步操作);
有了promise對(duì)象, 可以將異步操作以同步的流程表達(dá)出來(lái), 避免了層層嵌套的回調(diào)函數(shù)(俗稱(chēng)'回調(diào)地獄');
ES6的Promise是一個(gè)構(gòu)造函數(shù), 用來(lái)生成promise對(duì)象的實(shí)例
1影斑、使用promise基本步驟(2步):

創(chuàng)建promise對(duì)象

let promise = new Promise((resolve, reject) => {
    //初始化promise狀態(tài)為 pending
  //執(zhí)行異步操作
  if(異步操作成功) {
    resolve(value);//修改promise的狀態(tài)為fullfilled
  } else {
    reject(errMsg);//修改promise的狀態(tài)為rejected
  }
})

調(diào)用promise的then()

promise.then(function(
  result => console.log(result),
  errorMsg => alert(errorMsg)
))

2、promise對(duì)象的3個(gè)狀態(tài)

pending: 初始化狀態(tài)
fullfilled: 成功狀態(tài)
rejected: 失敗狀態(tài)

3机打、應(yīng)用

使用promise實(shí)現(xiàn)超時(shí)處理
使用promise封裝處理ajax請(qǐng)求

let request = new XMLHttpRequest();
request.onreadystatechange = function () {
}
request.responseType = 'json';
request.open("GET", url);
request.send()

4矫户、promise過(guò)程分析:



<script type="text/javascript">

    /*

    //創(chuàng)建promise對(duì)象

    let promise = new Promise((resolve, reject) => {

        //初始化promise狀態(tài)：pending（初始化）

        console.log('111');

        //執(zhí)行異步操作，通常是發(fā)送ajax請(qǐng)求残邀、開(kāi)啟定時(shí)器

        setTimeout(() => {

            console.log('333');

            //根據(jù)異步任務(wù)的返回結(jié)果皆辽，去修改promise的狀態(tài)

            //異步任務(wù)執(zhí)行成功

            // resolve('哈哈');//修改promise的狀態(tài)為fullfilled（成功狀態(tài)）

            //異步任務(wù)執(zhí)行失敗

            reject('555');//修改promise的狀態(tài)為rejected（失敗狀態(tài)）

        }, 2000);

    })

    console.log('222');



    promise

        .then((data) => {//成功的回調(diào)

            console.log(data, '成功了~~~');

        }, (error) => {//失敗的回調(diào)

            console.log(error, '失敗了~~~');

        });

    */



    // 定義獲取新聞的功能函數(shù)

    function getNews(url){

        let promise = new Promise((resolve, reject) => {

            // 狀態(tài)：初始化

            // 執(zhí)行異步任務(wù)

            // 創(chuàng)建xmlHttp實(shí)例對(duì)象

            let xmlHttp = new XMLHttpRequest();

            console.log(xmlHttp.readyState);

            //綁定readyState監(jiān)聽(tīng)

            xmlHttp.onreadystatechange = function(){

                if(xmlHttp.readyState === 4){

                    if(xmlHttp.status == 200){//請(qǐng)求成功

                        // console.log(xmlHttp.responseText);

                        //修改狀態(tài)

                        resolve(xmlHttp.responseText);//修改promise的狀態(tài)為成功的狀態(tài)

                    }else{//請(qǐng)求失敗

                        reject('暫時(shí)沒(méi)有新聞內(nèi)容');

                    }

                }

            };



            // open設(shè)置請(qǐng)求的方式以及url

            xmlHttp.open('GET', url);

            // 發(fā)送

            xmlHttp.send();

        })



        return promise;

    }



    getNews('http://localhost:30001/news?id=2')

        .then((data) => {

            console.log(data);

            // console.log(typeof data);



            // 準(zhǔn)備獲取評(píng)論內(nèi)容的url

            let commentsUrl = JSON.parse(data).commentsUrl;

            let url = 'http://localhost:3000' + commentsUrl;



            // 發(fā)送請(qǐng)求獲取評(píng)論內(nèi)容

            return getNews(url);

        }, (error) => {

            console.log(error);

        })

        .then((data) => {

            console.log(data);

        }, () => {



        });

</script>

Symbol

ES6中的添加了一種原始數(shù)據(jù)類(lèi)型symbol(已有的原始數(shù)據(jù)類(lèi)型：String, Number, boolean, null, undefined, 對(duì)象)
特點(diǎn)：
1、Symbol屬性對(duì)應(yīng)的值是唯一的芥挣，解決命名沖突問(wèn)題驱闷；
2、Symbol值不能與其他數(shù)據(jù)進(jìn)行計(jì)算空免，包括同字符串拼串空另；
3、for in, for of遍歷時(shí)不會(huì)遍歷symbol屬性
使用：

調(diào)用Symbol函數(shù)得到symbol值

let symbol = Symbol();
let obj = {};
obj[symbol] = 'hello';

傳參標(biāo)識(shí)

let symbol = Symbol('one');
let symbol2 = Symbol('two');
console.log(symbol);// Symbol('one')
console.log(symbol2);// Symbol('two')

內(nèi)置Symbol值
除了定義自己使用的Symbol值以外蹋砚，ES6還提供了11個(gè)內(nèi)置的Symbol值扼菠，指向語(yǔ)言內(nèi)部使用的方法;
Symbol.iteratorl;
對(duì)象的Symbol.iterator屬性，指向該對(duì)象的默認(rèn)遍歷器方法

Iterator遍歷器

iterator是一種接口機(jī)制坝咐，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問(wèn)機(jī)制
作用：
1循榆、為各種數(shù)據(jù)結(jié)構(gòu)，提供一個(gè)統(tǒng)一的墨坚、簡(jiǎn)便的訪問(wèn)接口秧饮；
2、使得數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列；
3浦楣、ES6創(chuàng)造了一種新的遍歷命令for...of循環(huán)袖肥，Iterator接口主要供for...of消費(fèi)。
工作原理：
1振劳、創(chuàng)建一個(gè)指針對(duì)象(遍歷器對(duì)象)椎组，指向數(shù)據(jù)結(jié)構(gòu)的起始位置。
2历恐、第一次調(diào)用next方法寸癌，指針自動(dòng)指向數(shù)據(jù)結(jié)構(gòu)的第一個(gè)成員
3、接下來(lái)不斷調(diào)用next方法弱贼，指針會(huì)一直往后移動(dòng)蒸苇，直到指向最后一個(gè)成員
4、每調(diào)用next方法返回的是一個(gè)包含value和done的對(duì)象吮旅，{value: 當(dāng)前成員的值,done: 布爾值}
5溪烤、value表示當(dāng)前成員的值，done對(duì)應(yīng)的布爾值表示當(dāng)前的數(shù)據(jù)的結(jié)構(gòu)是否遍歷結(jié)束庇勃。
6檬嘀、當(dāng)遍歷結(jié)束的時(shí)候返回的value值是undefined，done值為false
原生具備iterator接口的數(shù)據(jù)(可用for of遍歷)
1责嚷、Array鸳兽；
2、arguments罕拂；
3揍异、set容器；
4爆班、map容器衷掷；
5、String...

Generator函數(shù)

ES6提供的解決異步編程的方案之一蛋济；
Generator函數(shù)是一個(gè)狀態(tài)機(jī)棍鳖，內(nèi)部封裝了不同狀態(tài)的數(shù)據(jù)；
用來(lái)生成遍歷器對(duì)象碗旅；
可暫停函數(shù)(惰性求值), yield可暫停，next方法可啟動(dòng)镜悉。每次返回的是yield后的表達(dá)式結(jié)果
特點(diǎn)：
1祟辟、function 與函數(shù)名之間有一個(gè)星號(hào)；
2侣肄、內(nèi)部用yield表達(dá)式來(lái)定義不同的狀態(tài)

function* generatorExample(){
  let result = yield 'hello';  // 狀態(tài)值為hello
  yield 'generator'; // 狀態(tài)值為generator
}

3旧困、generator函數(shù)返回的是指針對(duì)象(即iterator)，而不會(huì)執(zhí)行函數(shù)內(nèi)部邏輯；
4吼具、調(diào)用next方法函數(shù)內(nèi)部邏輯開(kāi)始執(zhí)行僚纷，遇到y(tǒng)ield表達(dá)式停止，返回{value: yield后的表達(dá)式結(jié)果/undefined, done: false/true}拗盒；
5怖竭、再次調(diào)用next方法會(huì)從上一次停止時(shí)的yield處開(kāi)始，直到最后陡蝇；
6痊臭、yield語(yǔ)句返回結(jié)果通常為undefined，當(dāng)調(diào)用next方法時(shí)傳參內(nèi)容會(huì)作為啟動(dòng)時(shí)yield語(yǔ)句的返回值登夫。

async函數(shù)

真正意義上去解決異步回調(diào)的問(wèn)題广匙，同步流程表達(dá)異步操作

本質(zhì)： Generator的語(yǔ)法糖
語(yǔ)法：

async function foo(){
    await 異步操作;
    await 異步操作；
}

特點(diǎn)：
1恼策、不需要像Generator去調(diào)用next方法鸦致，遇到await等待，當(dāng)前的異步操作完成就往下執(zhí)行涣楷；
2分唾、返回的總是Promise對(duì)象，可以用then方法進(jìn)行下一步操作总棵；
3鳍寂、async取代Generator函數(shù)的星號(hào)*，await取代Generator的yield情龄；
4迄汛、語(yǔ)意上更為明確，使用簡(jiǎn)單骤视，經(jīng)臨床驗(yàn)證鞍爱，暫時(shí)沒(méi)有任何副作用

class

通過(guò)class定義類(lèi)/實(shí)現(xiàn)類(lèi)的繼承;
在類(lèi)中通過(guò)constructor定義構(gòu)造方法;
通過(guò)new來(lái)創(chuàng)建類(lèi)的實(shí)例;
通過(guò)extends來(lái)實(shí)現(xiàn)類(lèi)的繼承;
通過(guò)super調(diào)用父類(lèi)的構(gòu)造方法;
重寫(xiě)從父類(lèi)中繼承的一般方法

字符串?dāng)U展

includes(str) : 判斷是否包含指定的字符串;
startsWith(str) : 判斷是否以指定字符串開(kāi)頭;
endsWith(str) : 判斷是否以指定字符串結(jié)尾;
repeat(count) : 重復(fù)指定次數(shù)

數(shù)值擴(kuò)展

二進(jìn)制與八進(jìn)制數(shù)值表示法: 二進(jìn)制用0b, 八進(jìn)制用0o;
Number.isFinite(i) : 判斷是否是有限大的數(shù);
Number.isNaN(i) : 判斷是否是NaN;
Number.isInteger(i) : 判斷是否是整數(shù);
Number.parseInt(str) : 將字符串轉(zhuǎn)換為對(duì)應(yīng)的數(shù)值;
Math.trunc(i) : 直接去除小數(shù)部分

數(shù)組擴(kuò)展

Array.from(v) : 將偽數(shù)組對(duì)象或可遍歷對(duì)象轉(zhuǎn)換為真數(shù)組;
Array.of(v1, v2, v3) : 將一系列值轉(zhuǎn)換成數(shù)組;
find(function(value, index, arr){return true}) : 找出第一個(gè)滿足條件返回true的元素;
findIndex(function(value, index, arr){return true}) : 找出第一個(gè)滿足條件返回true的元素下標(biāo)

對(duì)象擴(kuò)展

Object.is(v1, v2)
判斷2個(gè)數(shù)據(jù)是否完全相等
Object.assign(target, source1, source2..)
將源對(duì)象的屬性復(fù)制到目標(biāo)對(duì)象上
直接操作 proto 屬性

let obj2 = {};
obj2.__proto__ = obj1;

深度克隆

1、數(shù)據(jù)類(lèi)型：
數(shù)據(jù)分為基本的數(shù)據(jù)類(lèi)型(String, Number, boolean, Null, Undefined)和對(duì)象數(shù)據(jù)類(lèi)型;
基本數(shù)據(jù)類(lèi)型特點(diǎn)：存儲(chǔ)的是該對(duì)象的實(shí)際數(shù)據(jù);
對(duì)象數(shù)據(jù)類(lèi)型特點(diǎn)：存儲(chǔ)的是該對(duì)象在棧中引用专酗，真實(shí)的數(shù)據(jù)存放在堆內(nèi)存里

2睹逃、復(fù)制數(shù)據(jù)

基本數(shù)據(jù)類(lèi)型存放的就是實(shí)際的數(shù)據(jù)，可直接復(fù)制

let number2 = 2;
let number1 = number2;

克隆數(shù)據(jù)：對(duì)象/數(shù)組

區(qū)別：淺拷貝/深度拷貝
判斷：拷貝是否產(chǎn)生了新的數(shù)據(jù)還是拷貝的是數(shù)據(jù)的引用
知識(shí)點(diǎn)：對(duì)象數(shù)據(jù)存放的是對(duì)象在棧內(nèi)存的引用祷肯，直接復(fù)制的是對(duì)象的引用

let obj = {username: 'kobe'}
let obj1 = obj; // obj1 復(fù)制了obj在棧內(nèi)存的引用

常用的拷貝技術(shù)
1沉填、arr.concat(): 數(shù)組淺拷貝；
2佑笋、arr.slice(): 數(shù)組淺拷貝翼闹；
3、JSON.parse(JSON.stringify(arr/obj)): 數(shù)組或?qū)ο笊羁截? 但不能處理函數(shù)數(shù)據(jù)蒋纬；
4猎荠、淺拷貝包含函數(shù)數(shù)據(jù)的對(duì)象/數(shù)組坚弱；
5、深拷貝包含函數(shù)數(shù)據(jù)的對(duì)象/數(shù)組

Set和Map數(shù)據(jù)結(jié)構(gòu)

Set容器 : 無(wú)序不可重復(fù)的多個(gè)value的集合體

Set()
Set(array)
add(value)
delete(value)
has(value)
clear()
size

Map容器 : 無(wú)序的 key不重復(fù)的多個(gè)key-value的集合體

Map()
Map(array)
set(key, value)//添加
get(key)
delete(key)
has(key)
clear()
size

for_of循環(huán)

for(let value of target){}循環(huán)遍歷

遍歷數(shù)組
遍歷Set
遍歷Map
遍歷字符串
遍歷偽數(shù)組

最后編輯于：2018.10.08 08:28:40

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末关摇，一起剝皮案震驚了整個(gè)濱河市荒叶，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌输虱，老刑警劉巖些楣，帶你破解...
沈念sama閱讀 221,430評(píng)論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異悼瓮，居然都是意外死亡戈毒，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,406評(píng)論 3贊 398
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)横堡，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)埋市，“玉大人，你說(shuō)我怎么就攤上這事命贴〉勒” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 167,834評(píng)論 0贊 360
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵胸蛛，是天一觀的道長(zhǎng)污茵。經(jīng)常有香客問(wèn)我，道長(zhǎng)葬项，這世上最難降的妖魔是什么泞当？我笑而不...
開(kāi)封第一講書(shū)人閱讀 59,543評(píng)論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮民珍，結(jié)果婚禮上襟士，老公的妹妹穿的比我還像新娘。我一直安慰自己嚷量，他們只是感情好陋桂，可當(dāng)我...
茶點(diǎn)故事閱讀 68,547評(píng)論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著蝶溶，像睡著了一般嗜历。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上抖所，一...
開(kāi)封第一講書(shū)人閱讀 52,196評(píng)論 1贊 308
城市分裂傳說(shuō)
那天梨州，我揣著相機(jī)與錄音，去河邊找鬼田轧。笑死摊唇，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的涯鲁。我是一名探鬼主播巷查，決...
沈念sama閱讀 40,776評(píng)論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼抹腿！你這毒婦竟也來(lái)了岛请？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 39,671評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤警绩，失蹤者是張志新（化名）和其女友劉穎崇败，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體肩祥，經(jīng)...
沈念sama閱讀 46,221評(píng)論 1贊 320
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡后室，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,303評(píng)論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了混狠。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片岸霹。...
茶點(diǎn)故事閱讀 40,444評(píng)論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖将饺，靈堂內(nèi)的尸體忽然破棺而出贡避，到底是詐尸還是另有隱情，我是刑警寧澤予弧，帶...
沈念sama閱讀 36,134評(píng)論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布刮吧，位于F島的核電站，受9級(jí)特大地震影響掖蛤，放射性物質(zhì)發(fā)生泄漏杀捻。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,810評(píng)論 3贊 333
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一蚓庭、第九天我趴在偏房一處隱蔽的房頂上張望致讥。院中可真熱鬧，春花似錦彪置、人聲如沸拄踪。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 32,285評(píng)論 0贊 24
一樁弒父案拳魁，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)惶桐。三九已至，卻和暖如春潘懊，著一層夾襖步出監(jiān)牢的瞬間姚糊，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,399評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工授舟，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留救恨，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,837評(píng)論 3贊 376
代替公主和親
正文我出身青樓释树，卻偏偏與公主長(zhǎng)得像肠槽，于是被迫代替她去往敵國(guó)和親擎淤。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,455評(píng)論 2贊 359

WEB基礎(chǔ)入門(mén)十四：ES5赖瞒、6震糖、7

WEB基礎(chǔ)入門(mén)十四：ES5录肯、6、7

一吊说、ECMAScript

二雅宾、ES5

ES6

變量的解構(gòu)賦值

模板字符串

簡(jiǎn)化的對(duì)象寫(xiě)法

箭頭函數(shù)

擴(kuò)展運(yùn)算符

形參默認(rèn)值

Promise對(duì)象

Symbol

Iterator遍歷器

Generator函數(shù)

async函數(shù)

class

字符串?dāng)U展

數(shù)值擴(kuò)展

數(shù)組擴(kuò)展

對(duì)象擴(kuò)展

深度克隆

Set和Map數(shù)據(jù)結(jié)構(gòu)

for_of循環(huán)

推薦閱讀更多精彩內(nèi)容

WEB基礎(chǔ)入門(mén)十四：ES5录肯、6、7

一吊说、ECMAScript

二 雅宾、ES5

ES6

變量的解構(gòu)賦值

模板字符串

簡(jiǎn)化的對(duì)象寫(xiě)法

箭頭函數(shù)

擴(kuò)展運(yùn)算符

形參默認(rèn)值

Promise對(duì)象

Symbol

Iterator遍歷器

Generator函數(shù)

async函數(shù)

class

字符串?dāng)U展

數(shù)值擴(kuò)展

數(shù)組擴(kuò)展

對(duì)象擴(kuò)展

深度克隆

Set和Map數(shù)據(jù)結(jié)構(gòu)

for_of循環(huán)

推薦閱讀更多精彩內(nèi)容

二雅宾、ES5