(一) 棧區(qū)和堆區(qū)

https://segmentfault.com/a/1190000002789651 (重要)

js變量有兩種不同的數(shù)據(jù)類型： ( 基本類型 ) 和 ( 引用類型 )

• 基本數(shù)據(jù)類型有：number，string泰涂，boolean鲫竞，null，undefined
• 引用數(shù)據(jù)類型有：array逼蒙，object从绘。
• array (是特殊的對(duì)象，屬性是數(shù)值字符串)

(1) 基本類型的變量存放在棧區(qū) （棧區(qū)指內(nèi)存里的棧內(nèi)存）

• 棧區(qū)包括了( 變量的標(biāo)識(shí)符 ) 和 ( 變量的值 )是牢。

• 不能給基本類型添加屬性和方法僵井，基本類型是不可變得；

  
  
  棧區(qū)：變量的標(biāo)識(shí)符驳棱，變量的值

(2) 引用類型的值是同時(shí)保存在棧內(nèi)存和堆內(nèi)存中的對(duì)象

• 引用類型的存儲(chǔ)需要內(nèi)存的棧區(qū)和堆區(qū)（堆區(qū)是指內(nèi)存里的堆內(nèi)存）共同完成批什，棧區(qū)內(nèi)存保存變量標(biāo)識(shí)符和指向堆內(nèi)存中該對(duì)象的指針，也可以說(shuō)是該對(duì)象在堆內(nèi)存的地址社搅。
• 引用類型的存儲(chǔ)需要 ( 棧區(qū) ) 和 ( 堆區(qū) )
• 棧區(qū)保存 ( 變量的標(biāo)識(shí)符 ) 和 ( 指向堆區(qū)中該對(duì)象的指針 )

• 引用類型可以擁有屬性和方法驻债，屬性又可以包含基本類型和引用類型。

  
  
  引用類型的值存儲(chǔ)需要棧區(qū)和堆區(qū)合呐，棧區(qū)中是標(biāo)識(shí)符和指針，堆區(qū)中的對(duì)象

(3) 基本類型賦值

對(duì)基本類型的直接復(fù)制荷并，是拷貝合砂，值互不影響

(4) 對(duì)象的引用

對(duì)象直接復(fù)制，是對(duì)象的引用源织，復(fù)制的是指向堆區(qū)中同一對(duì)象的指針翩伪，改變一個(gè)，另一個(gè)也會(huì)變

(一) ES6字符串?dāng)U展

es5中谈息，只有 indexOf() 方法可以確定一個(gè)字符串是否包含在另一個(gè)字符串中

(1) includes()：返回布爾值缘屹，表示是否找到了參數(shù)字符串。

(2) startsWith()：返回布爾值侠仇，表示參數(shù)字符串是否在原字符串的頭部轻姿。

(3) endsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的尾部逻炊。

• 這三個(gè)方法都支持第二個(gè)參數(shù)互亮，表示開(kāi)始搜索的位置
• 使用第二個(gè)參數(shù)n時(shí)，endsWith的行為與其他兩個(gè)方法有所不同余素。它針對(duì)前n個(gè)字符豹休，而其他兩個(gè)方法針對(duì)從第n個(gè)位置直到字符串結(jié)束。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true


--------------------------------------------------------------------


let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true             // 注意注意注意桨吊！ 5表示  前5個(gè)字符
s.includes('Hello', 6) // false

上面代碼表示威根，使用第二個(gè)參數(shù)n時(shí)凤巨，endsWith的行為與其他兩個(gè)方法有所不同。

endsWith 針對(duì)前n個(gè)字符洛搀，而其他兩個(gè)方法針對(duì)從第n個(gè)位置直到字符串結(jié)束敢茁。

(4) repeat()

repeat方法返回一個(gè)新字符串，表示將原字符串重復(fù)n次留美。

• 參數(shù)如果是小數(shù)彰檬，會(huì)被取整，即只取整數(shù)部分谎砾。(!!!!)
• 如果repeat的參數(shù)是負(fù)數(shù)或者Infinity僧叉，會(huì)報(bào)錯(cuò)
• 如果參數(shù)是 0 到-1 之間的小數(shù)，則等同于 0棺榔，這是因?yàn)闀?huì)先進(jìn)行取整運(yùn)算。0 到-1 之間的小數(shù)隘道，取整以后等于-0症歇，repeat視同為 0。
• 參數(shù)NaN等同于 0谭梗。
• 如果repeat的參數(shù)是字符串忘晤，則會(huì)先轉(zhuǎn)換成數(shù)字。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat(2.9) // "nana"    ---- 參數(shù)是小數(shù)激捏，取整

'na'.repeat(Infinity)         ---- 報(bào)錯(cuò)
// RangeError
'na'.repeat(-1)               ---- 報(bào)錯(cuò)
// RangeError

'na'.repeat(-0.9) // ""
'na'.repeat(NaN) // ""
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"      ---- 參數(shù)是字符串设塔，會(huì)被轉(zhuǎn)換成數(shù)字

(5) padStart()，padEnd()

ES2017 引入了字符串補(bǔ)全長(zhǎng)度的功能远舅。如果某個(gè)字符串不夠指定長(zhǎng)度闰蛔，會(huì)在頭部或尾部補(bǔ)全。padStart()用于頭部補(bǔ)全图柏，padEnd()用于尾部補(bǔ)全序六。

• pad：是墊，補(bǔ)全的意思
• padStart和padEnd一共接受兩個(gè)參數(shù)：
  第一個(gè)參數(shù)用來(lái)指定字符串的長(zhǎng)度蚤吹。
  第二個(gè)參數(shù)是用來(lái)補(bǔ)全的字符串例诀。
• 如果原字符串的長(zhǎng)度，等于或大于指定的最小長(zhǎng)度裁着，則返回原字符串繁涂。
• 如果用來(lái)補(bǔ)全的字符串與原字符串，兩者的長(zhǎng)度之和超過(guò)了指定的最小長(zhǎng)度二驰，則會(huì)截去超出位數(shù)的補(bǔ)全字符串扔罪。
• 如果省略第二個(gè)參數(shù)，默認(rèn)使用空格補(bǔ)全長(zhǎng)度诸蚕。

padStart的常見(jiàn)用途是為數(shù)值補(bǔ)全指定位數(shù)步势。下面代碼生成 10 位的數(shù)值字符串氧猬。

'1'.padStart(10, '0') // "0000000001"              // padStart主要用于給數(shù)值補(bǔ)全位數(shù)
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

padStart另一個(gè)用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

-----------------------------------------------------

'xxx'.padStart(2, 'ab') // 'xxx'       -- 指定的字符串長(zhǎng)度坏瘩，小于原字符串長(zhǎng)度盅抚，則返回原字符串
'xxx'.padEnd(2, 'ab') // 'xxx'

-----------------------------------------------------

'abc'.padStart(10, '0123456789')
// '0123456abc'

-----------------------------------------------------

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

(二) js錯(cuò)誤的類型 ( 6種 ) ( 前4種常用 )

1. SyntaxError : 語(yǔ)法錯(cuò)誤
2. ReferenceError : 引用錯(cuò)誤 ( 要用的東西沒(méi)有找到 ) ( reference 是引用的意思 )
3. RangeError : 范圍錯(cuò)誤 ( 專指參數(shù)超出范圍 )
4. TypeError : 類型錯(cuò)誤 ( 錯(cuò)誤的調(diào)用了對(duì)象的方法 )
5. EvalError: eval()方法錯(cuò)誤的使用
6. URIError: url地址錯(cuò)誤

(1) Error對(duì)象

JavaScript 解析或運(yùn)行時(shí)，一旦發(fā)生錯(cuò)誤倔矾，引擎就會(huì)拋出一個(gè)錯(cuò)誤對(duì)象妄均。JavaScript 原生提供Error構(gòu)造函數(shù)，所有拋出的錯(cuò)誤都是這個(gè)構(gòu)造函數(shù)的實(shí)例哪自。

• js解析或運(yùn)行出錯(cuò)丰包，都會(huì)拋出一個(gè)錯(cuò)誤對(duì)象
• 所有拋出的錯(cuò)誤都是 Error構(gòu)造函數(shù)的實(shí)例
• 拋出Error實(shí)例對(duì)象以后，整個(gè)程序就中斷在發(fā)生錯(cuò)誤的地方壤巷，不再往下執(zhí)行邑彪。

• Error構(gòu)造函數(shù)，接受一個(gè)參數(shù)胧华，表示錯(cuò)誤提示寄症。可以從 實(shí)例對(duì)象的 message 屬性讀到這個(gè)參數(shù)

Error實(shí)例對(duì)象屬性： ( message , name , stack )

1. message：錯(cuò)誤提示信息
2. name：錯(cuò)誤名稱（非標(biāo)準(zhǔn)屬性）
3. stack：錯(cuò)誤的堆棧（非標(biāo)準(zhǔn)屬性）

let err = new Error('這是錯(cuò)誤信息提示')      // Error構(gòu)造函數(shù)矩动，new執(zhí)行構(gòu)造函數(shù)有巧，返回實(shí)例對(duì)象
       
console.log( err.message );                // 實(shí)例的 message 屬性，讀取Error構(gòu)造函數(shù)的 參數(shù)
console.log( err.name );
console.log( err.stack );


// 拋出Error實(shí)例對(duì)象以后悲没，整個(gè)程序就 ( 中斷 ) 在發(fā)生錯(cuò)誤的地方篮迎，不再往下執(zhí)行。

// Error實(shí)例對(duì)象必須有message屬性

SyntaxError對(duì)象是解析代碼時(shí)發(fā)生的語(yǔ)法錯(cuò)誤示姿。    // 語(yǔ)法錯(cuò)誤



ReferenceError對(duì)象是引用一個(gè)不存在的變量時(shí)發(fā)生的錯(cuò)誤甜橱。  // 引用不存在的變量



RangeError對(duì)象是一個(gè)值超出有效范圍時(shí)發(fā)生的錯(cuò)誤。主要有幾種情況峻凫，  // 超出范圍渗鬼，數(shù)組，對(duì)象方法荧琼，堆棧
一是 : 數(shù)組長(zhǎng)度為負(fù)數(shù)譬胎，
二是 : Number對(duì)象的方法參數(shù)超出范圍，以及函數(shù)堆棧超過(guò)最大值命锄。



TypeError對(duì)象是變量或參數(shù)不是預(yù)期類型時(shí)發(fā)生的錯(cuò)誤堰乔。                    // 類型錯(cuò)誤
比如，對(duì)字符串脐恩、布爾值镐侯、數(shù)值等原始類型的值使用new命令，就會(huì)拋出這種錯(cuò)誤，
因?yàn)閚ew命令的參數(shù)應(yīng)該是一個(gè)構(gòu)造函數(shù)苟翻。



URIError對(duì)象是 URI 相關(guān)函數(shù)的參數(shù)不正確時(shí)拋出的錯(cuò)誤韵卤，主要涉及這六個(gè)函數(shù):
encodeURI()、decodeURI()崇猫、encodeURIComponent()沈条、decodeURIComponent()、escape()诅炉、 unescape()



// 以上這6種派生錯(cuò)誤蜡歹，連同原始的Error對(duì)象，都是構(gòu)造函數(shù)

// 這些構(gòu)造函數(shù)都接受一個(gè)函數(shù)涕烧，代表錯(cuò)誤提示信息（message）月而。

(2) throw 語(yǔ)句

throw語(yǔ)句的作用是手動(dòng)中斷程序執(zhí)行，拋出一個(gè)錯(cuò)誤议纯。

• throw語(yǔ)句父款，手動(dòng)中斷程序執(zhí)行，并拋出一個(gè)錯(cuò)誤
• throw可以拋出任何類型的值瞻凤。也就是說(shuō)铛漓，它的參數(shù)可以是任何值。

let a=9;

if (a<10) {
  throw new Error('a不能小于10')   // throw拋出的錯(cuò)誤鲫构，就是 Error構(gòu)造函數(shù)的參數(shù)，程序會(huì)中止執(zhí)行
}


// 對(duì)于 JavaScript 引擎來(lái)說(shuō)玫坛，遇到throw語(yǔ)句结笨，程序就中止了。

// 引擎會(huì)接收到throw拋出的信息湿镀，可能是一個(gè)錯(cuò)誤實(shí)例炕吸，也可能是其他類型的值。



----------------------------------------------

// 拋出一個(gè)字符串
throw 'Error勉痴！';
// Uncaught Error赫模！

// 拋出一個(gè)數(shù)值
throw 42;
// Uncaught 42

// 拋出一個(gè)布爾值
throw true;
// Uncaught true

// 拋出一個(gè)對(duì)象
throw {
  toString: function () {
    return 'Error!';
  }
};
// Uncaught {toString: ?}

(3) try…catch 結(jié)構(gòu)

一旦發(fā)生錯(cuò)誤，程序就中止執(zhí)行了蒸矛。JavaScript 提供了try...catch結(jié)構(gòu)瀑罗，允許對(duì)錯(cuò)誤進(jìn)行處理，選擇是否往下執(zhí)行雏掠。

• try...catch結(jié)構(gòu)斩祭，對(duì)錯(cuò)誤進(jìn)行處理，選擇是否往下執(zhí)行
• catch代碼塊捕獲錯(cuò)誤之后乡话，程序不會(huì)中斷摧玫，會(huì)按照正常流程繼續(xù)執(zhí)行下去。( 重要 )
• catch代碼塊之中绑青，還可以再拋出錯(cuò)誤诬像，甚至使用嵌套的try...catch結(jié)構(gòu)屋群。
• 為了捕捉不同類型的錯(cuò)誤，catch代碼塊之中可以加入判斷語(yǔ)句坏挠。

       let a=9;

       try {
           if (a<10) {
               throw new Error('錯(cuò)誤芍躏，a不能小于10')    // throw手動(dòng)中止執(zhí)行，并拋出錯(cuò)誤
               console.log('該條語(yǔ)句不會(huì)被執(zhí)行癞揉，因?yàn)閠hrow命令會(huì)中斷代碼執(zhí)行')Ｖ饺狻！：笆臁０胤尽！＝媾啤７澄丁！壁拉！
           }
       } catch (error) {    // 錯(cuò)誤被catch代碼塊捕獲谬俄，參數(shù)是try代碼塊拋出的值
           console.log(error.name + ':' + error.message)
       }
        console.log('該條語(yǔ)句會(huì)執(zhí)行，因?yàn)閏atch捕獲錯(cuò)誤后弃理，程序會(huì)按正常執(zhí)行')＠Ｂ邸！６徊Ｔ垦！Ａ咎ΑＫ憔摹！Ｗて　菲驴！


// 上面代碼中，try代碼塊拋出錯(cuò)誤（throw語(yǔ)句）骑冗，JavaScript 引擎就立即把代碼的執(zhí)行赊瞬，轉(zhuǎn)到catch代碼塊，

// 或者說(shuō)錯(cuò)誤被catch代碼塊捕獲了贼涩。catch接受一個(gè)參數(shù)森逮，表示try代碼塊拋出的值。

(4) finally 代碼塊

try...catch結(jié)構(gòu)允許在最后添加一個(gè)finally代碼塊磁携，表示不管是否出現(xiàn)錯(cuò)誤褒侧，都必需在最后運(yùn)行的語(yǔ)句。

• finally 表示不管是否出現(xiàn)錯(cuò)誤，都必須在最后執(zhí)行的語(yǔ)句

function cleansUp() {
  try {          // try代碼塊
    throw new Error('出錯(cuò)了……');  // throw手動(dòng)中止程序闷供，并拋出錯(cuò)誤
    console.log('此行不會(huì)執(zhí)行');    // trow會(huì)中止代碼執(zhí)行
  } finally {   // try拋出錯(cuò)誤烟央，會(huì)立即執(zhí)行catch語(yǔ)句。 finally語(yǔ)句表示不管是否出現(xiàn)錯(cuò)誤歪脏，都必須在最后執(zhí)行
    console.log('完成清理工作');    // 因?yàn)闆](méi)有catch 疑俭，所以執(zhí)行完 finally后，程序就會(huì)中止( 因?yàn)閠hrow )
  }
}

cleansUp()
// 完成清理工作
// Error: 出錯(cuò)了……


// 上面代碼中婿失，由于沒(méi)有catch語(yǔ)句塊钞艇，所以錯(cuò)誤沒(méi)有捕獲。
// 執(zhí)行finally代碼塊以后豪硅，程序就中斷在錯(cuò)誤拋出的地方哩照。

(重要)

function idle(x) {
  try {
    console.log(x);
    return 'result';
  } finally {        // try語(yǔ)句未發(fā)生錯(cuò)誤，finally依舊會(huì)執(zhí)行懒浮。執(zhí)行完finally飘弧，才會(huì)執(zhí)行return ！Ｑ庵４瘟妗！
    console.log("FINALLY");
  }
}

idle('hello')
// hello
// FINALLY
// "result"


// 上面代碼說(shuō)明稽穆，try代碼塊沒(méi)有發(fā)生錯(cuò)誤冠王，而且里面還包括return語(yǔ)句，但是finally代碼塊依然會(huì)執(zhí)行舌镶。

// 注意版确，只有在其執(zhí)行完畢后，才會(huì)顯示return語(yǔ)句的值乎折。




-------------------------------------

try {
   console.log('111111');
    return console.log('222222222');
} catch (err) {
     console.log('不執(zhí)行');
} finally {
    console.log('333333333');
}

結(jié)果是： 
11111111
22222222
33333333
// 說(shuō)明 return語(yǔ)句的執(zhí)行是排在finally代碼之前，只是等f(wàn)inally代碼執(zhí)行完畢后才返回侵歇。




------------------------------------------------

function test() {
   try {
      console.log('111111');
      return '222222222';
   } catch (err) {
      console.log('不執(zhí)行');
  } finally {
      console.log('333333333');
  }
}
const returnValue = test();
console.log(returnValue)

結(jié)果是：
11111111
33333333
22222222

(重要)

var count = 0;
function countUp() {
  try {
    return count;
  } finally {
    count++;
  }
}

countUp()
// 0
count
// 1

// return語(yǔ)句的執(zhí)行是排在finally代碼之前骂澄，只是等f(wàn)inally代碼執(zhí)行完畢后才返回。

// return語(yǔ)句的count的值惕虑，是在finally代碼塊運(yùn)行之前就獲取了坟冲。

總結(jié)：

componentDidMount() {
      let x = 10;
      try {
          if (x < 11) {
              console.log('Error的實(shí)例中有 message，name溃蔫，stack等屬性')健提；
              console.log('throw可以拋出任何類型的值');
              throw new Error('錯(cuò)誤信息：x不能小于11');  // throw手動(dòng)中斷代碼執(zhí)行，并拋出錯(cuò)誤
              console.log('該語(yǔ)句不會(huì)執(zhí)行伟叛，trorw 會(huì)中止程序');
          } 
      } catch (err) {   // catch 捕獲 try 代碼塊的錯(cuò)誤私痹，catch執(zhí)行完，會(huì)正常執(zhí)行程序
        console.log(err.message, 'err');   // err.message輸出 Error 構(gòu)造函數(shù)的參數(shù)
        console.log('catch 中還能拋出錯(cuò)誤，也能再嵌套 try...catch...');
      } finally {   
        console.log('不管有沒(méi)有錯(cuò)誤紊遵，都會(huì)執(zhí)行finally語(yǔ)句');
      }
      console.log('這句會(huì)正常執(zhí)行账千，catch不會(huì)中止程序執(zhí)行');
      console.log('js錯(cuò)誤類型有 SyntaxError語(yǔ)法錯(cuò)誤')；
      console.log('js錯(cuò)誤類型有 ReferenceError引用錯(cuò)誤暗膜，引用不存在的變量')匀奏；
      console.log('js錯(cuò)誤類型有 RangeError范圍錯(cuò)誤，如數(shù)組的長(zhǎng)度為負(fù)')学搜；
      console.log('js錯(cuò)誤類型有 TypeError類型錯(cuò)誤娃善，變量或參數(shù)不是預(yù)期類型')；
}


執(zhí)行結(jié)果：
//Error的實(shí)例中有 message瑞佩，name聚磺，stack等屬性
//username.js:78 throw可以拋出任何類型的值
//username.js:83 錯(cuò)誤信息：x不能小于11 err
//username.js:84 catch 中還能拋出錯(cuò)誤，也能再嵌套 try...catch...
//username.js:86 不管有沒(méi)有錯(cuò)誤钉凌，都會(huì)執(zhí)行finally語(yǔ)句
//username.js:88 這句會(huì)正常執(zhí)行咧最，catch不會(huì)中止程序執(zhí)行
//username.js:89 js錯(cuò)誤類型有 SyntaxError語(yǔ)法錯(cuò)誤
//username.js:90 js錯(cuò)誤類型有 ReferenceError引用錯(cuò)誤，引用不存在的變量
//username.js:91 js錯(cuò)誤類型有 RangeError范圍錯(cuò)誤御雕，如數(shù)組的長(zhǎng)度為負(fù)
//username.js:92 js錯(cuò)誤類型有 TypeError類型錯(cuò)誤矢沿，變量或參數(shù)不是預(yù)期類型

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

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

• 擴(kuò)展運(yùn)算符后面還可以放置表達(dá)式。
• 如果擴(kuò)展運(yùn)算符后面是一個(gè)空數(shù)組酸纲，則不產(chǎn)生任何效果捣鲸。

表達(dá)式
const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];



空數(shù)組
[...[], 1]
// [1]

• 獲取數(shù)組最大的元素 (重要)

// ES5 的寫(xiě)法
Math.max.apply(null, [14, 3, 77])     // apply第一個(gè)參數(shù)是需要綁定的對(duì)象，第二個(gè)參數(shù)只能是數(shù)組

// ES6 的寫(xiě)法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

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

(1) 復(fù)制數(shù)組

數(shù)組是復(fù)合類型的數(shù)據(jù)結(jié)構(gòu)闽坡，直接復(fù)制栽惶，只是復(fù)制了指向底層數(shù)據(jù)結(jié)構(gòu)的指針，而不是克隆一個(gè)全新的數(shù)組疾嗅。

• 基本類型和引用類型 https://segmentfault.com/a/1190000002789651
• 直接復(fù)制引用類型的值(數(shù)組)外厂，其實(shí)只是復(fù)制了棧區(qū) 指向 堆區(qū)同一對(duì)象的 指針，并不是對(duì)象的克隆代承，改變其中一個(gè)值汁蝶，另一個(gè)值就會(huì)跟著改變。

const a1 = [1, 2];
const a2 = a1;

a2[0] = 2;
a1 // [2, 2]

// 上面代碼中论悴，a2并不是a1的克隆掖棉，而是指向同一份數(shù)據(jù)的另一個(gè)指針。修改a2膀估，會(huì)直接導(dǎo)致a1的變化

// a1有指向堆區(qū) 該數(shù)組的指針
// a2只是復(fù)制了 棧區(qū)幔亥，棧區(qū)的指針也指向了 堆區(qū)的該數(shù)組
// 改變其中一個(gè)變量，另一個(gè)也會(huì)改變

真正的克隆 (復(fù)制)

(1) es5中的 concat() 方法  ------------------------ concat()方法

const a1 = [1, 2];
const a2 = a1.concat();

a2[0] = 2;
a1 // [1, 2]

// concat方法用于多個(gè)數(shù)組的合并察纯。它將新數(shù)組的成員帕棉，添加到原數(shù)組成員的后部针肥，然后返回一個(gè)新數(shù)組，原數(shù)組不變笤昨。
// 除了數(shù)組作為參數(shù)祖驱，concat也接受其他類型的值作為參數(shù)，添加到目標(biāo)數(shù)組尾部瞒窒。



------------------------------------

(2) es6 擴(kuò)展運(yùn)算符 ------------------------------- 數(shù)組的淺拷貝

let a1 = [1,2,3];
// let a2 = [...a1];
let [...a2] = a1;
a2.push(4);
console.log(a1);
console.log(a2);

// 上面的兩種寫(xiě)法捺僻，a2都是a1的克隆。

(2) 將字符串轉(zhuǎn)為真正的數(shù)組崇裁。-------- (重要)

[...'hello']          

// [ "h", "e", "l", "l", "o" ]

// 展開(kāi)運(yùn)算符可以用于所有具有iterator接口的數(shù)據(jù)


// 原生具有 iterator 接口的數(shù)據(jù)結(jié)構(gòu) ：
(1) array匕坯，
(2) string，
(3) NodeList對(duì)象拔稳， ----- 如：document.querySellectorAll()返回值
(4) TypedArray葛峻，  
(5) 函數(shù)的 arguments 對(duì)象     ----------- arguments對(duì)象包含了函數(shù)運(yùn)行時(shí)的所有參數(shù)，用[下標(biāo)]取值
(6) Map
(7) Set

• 注意：對(duì)于那些沒(méi)有部署 Iterator 接口的類似數(shù)組的對(duì)象巴比，擴(kuò)展運(yùn)算符就無(wú)法將其轉(zhuǎn)為真正的數(shù)組术奖。

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

// TypeError: Cannot spread non-iterable object.              // spread 是擴(kuò)展的意思
let arr = [...arrayLike];

(2) Array.from()

Array.from方法用于將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組：
(1) 類似數(shù)組的對(duì)象（array-like object）,
(2) 可遍歷（iterable）的對(duì)象（包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map）。

Array.from還可以接受第二個(gè)參數(shù)轻绞，作用類似于數(shù)組的map方法采记，用來(lái)對(duì)每個(gè)元素進(jìn)行處理，將處理后的值放入返回的數(shù)組政勃。

• Array.from()將 類似數(shù)組的對(duì)象 和 可遍歷的對(duì)象 轉(zhuǎn)化成真正的 數(shù)組
• 只要是部署了 Iterator 接口的數(shù)據(jù)結(jié)構(gòu)唧龄，Array.from 都能將其轉(zhuǎn)為數(shù)組。＜樵丁＜裙住！
• 只要是部署了 Iterator 接口的數(shù)據(jù)結(jié)構(gòu)懒叛，展開(kāi)運(yùn)算符 都能將其轉(zhuǎn)為數(shù)組丸冕。！Ｑ胖烛！
• 如果參數(shù)是一個(gè)真正的數(shù)組，Array.from會(huì)返回一個(gè)一模一樣的新數(shù)組拆檬。
• 所謂類似數(shù)組的對(duì)象，本質(zhì)特征只有一點(diǎn)妥凳，即必須有l(wèi)ength屬性竟贯。因此，任何有l(wèi)ength屬性的對(duì)象逝钥，都可以通過(guò)Array.from方法轉(zhuǎn)為數(shù)組屑那，而此時(shí)擴(kuò)展運(yùn)算符就無(wú)法轉(zhuǎn)換拱镐。(重要) ！３旨省沃琅！

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的寫(xiě)法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的寫(xiě)法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

// Array.from() 將類似數(shù)組的對(duì)象 轉(zhuǎn)換成真正的 數(shù)組    ( array like object )

// ( 展開(kāi)運(yùn)算符 ) 只能是對(duì)具有iterator接口的數(shù)據(jù)類型轉(zhuǎn)換成數(shù)組，不適用于一般的類似數(shù)組的對(duì)象

• 實(shí)際應(yīng)用中蜘欲，常見(jiàn)的類似數(shù)組的對(duì)象是 DOM 操作返回的 NodeList 集合益眉，以及函數(shù)內(nèi)部的arguments對(duì)象。Array.from都可以將它們轉(zhuǎn)為真正的數(shù)組姥份。
• NodeList對(duì)象 和 arguments對(duì)象具有iterator接口郭脂，所以也能用 展開(kāi)運(yùn)算符轉(zhuǎn)換成數(shù)組

function a(x,y,z) {
    console.log( arguments );  // Arguments(3) [1, 2, 3, callee: ?, Symbol(Symbol.iterator): ?]
    console.log( arguments[0]);               // 1
    console.log( Array.from(arguments) );     // [1, 2, 3]
    console.log( [...arguments]);             // [1, 2, 3]
    return x+y+z;
}
a(1,2,3);

總結(jié)： 
(1) Array.from能將類似數(shù)組的對(duì)象 轉(zhuǎn)換成真正的數(shù)組
(2) 具有iterator接口的數(shù)據(jù)結(jié)構(gòu)，都可以通過(guò)展開(kāi)運(yùn)算符澈歉，轉(zhuǎn)換成數(shù)組展鸡。
(3) 原生具有iterator接口的數(shù)據(jù)結(jié)構(gòu)有：array，string埃难，NodeList莹弊，arguments，map涡尘，set忍弛，TypedArray
(4)  ( NodeList對(duì)象 )，( arguments對(duì)象 ) 可以通過(guò) ( Array.from() ) 和 ( 展開(kāi)運(yùn)算符 )轉(zhuǎn)化為數(shù)組

• 所謂類似數(shù)組的對(duì)象悟衩，本質(zhì)特征只有一點(diǎn)剧罩，即必須有l(wèi)ength屬性寇损。因此围俘，任何有l(wèi)ength屬性的對(duì)象，都可以通過(guò)Array.from方法轉(zhuǎn)為數(shù)組豹绪，而此時(shí)擴(kuò)展運(yùn)算符就無(wú)法轉(zhuǎn)換挑势。(重要) Ｕ蚍馈！潮饱！

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]

Array.from還可以接受第二個(gè)參數(shù)来氧，作用類似于數(shù)組的map方法，用來(lái)對(duì)每個(gè)元素進(jìn)行處理香拉，將處理后的值放入返回的數(shù)組啦扬。 (重要)！Ｙ炻怠扑毡！

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

(重要)(重要)(重要)(重要)(重要)(重要)(重要)(重要)(重要)(重要)(重要)

function a(x,y,z) {
    console.log( Array.from(arguments, x => (x+'').repeat(4)) );    // ["1111", "2222", "3333"]
    console.log( [...arguments]);
    return x+y+z;
}
a(1,2,3)

下面的例子將數(shù)組中布爾值為false的成員轉(zhuǎn)為0。

Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]

Array.from()可以將各種值轉(zhuǎn)為真正的數(shù)組盛险，并且還提供map功能瞄摊。這實(shí)際上意味著勋又，只要有一個(gè)原始的數(shù)據(jù)結(jié)構(gòu)，你就可以先對(duì)它的值進(jìn)行處理换帜，然后轉(zhuǎn)成規(guī)范的數(shù)組結(jié)構(gòu)楔壤，進(jìn)而就可以使用數(shù)量眾多的數(shù)組方法

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']

(3) Array.of()

Array.of方法用于將一組值，轉(zhuǎn)換為數(shù)組惯驼。

• 這個(gè)方法的主要目的蹲嚣，是彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()的不足。因?yàn)閰?shù)個(gè)數(shù)的不同跳座，會(huì)導(dǎo)致Array()的行為有差異端铛。
• Array.of基本上可以用來(lái)替代Array()或new Array()，并且不存在由于參數(shù)不同而導(dǎo)致的重載疲眷。它的行為非常統(tǒng)一禾蚕。
• Array.of總是返回參數(shù)值組成的數(shù)組。如果沒(méi)有參數(shù)狂丝，就返回一個(gè)空數(shù)組

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]