( 棧區(qū)，堆區(qū) ) + ( 字符串?dāng)U展 ) + ( Error對象 ) + ( 數(shù)組擴(kuò)展 )

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

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

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

  • 基本數(shù)據(jù)類型有：number，string，boolean，null，undefined
  • 引用數(shù)據(jù)類型有：array，object。
  • array (是特殊的對象，屬性是數(shù)值字符串)

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

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

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


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

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

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

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


    引用類型的值存儲需要棧區(qū)和堆區(qū)，棧區(qū)中是標(biāo)識符和指針，堆區(qū)中的對象

(3) 基本類型賦值

對基本類型的直接復(fù)制，是拷貝，值互不影響

(4) 對象的引用

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

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

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

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

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

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

  • 這三個(gè)方法都支持第二個(gè)參數(shù)，表示開始搜索的位置
  • 使用第二個(gè)參數(shù)n時(shí)，endsWith的行為與其他兩個(gè)方法有所不同。它針對前n個(gè)字符，而其他兩個(gè)方法針對從第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 針對前n個(gè)字符，而其他兩個(gè)方法針對從第n個(gè)位置直到字符串結(jié)束。

(4) repeat()

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

  • 參數(shù)如果是小數(shù)，會被取整，即只取整數(shù)部分。(!!!!)
  • 如果repeat的參數(shù)是負(fù)數(shù)或者Infinity，會報(bào)錯(cuò)
  • 如果參數(shù)是 0 到-1 之間的小數(shù)，則等同于 0，這是因?yàn)闀冗M(jìn)行取整運(yùn)算。0 到-1 之間的小數(shù)，取整以后等于-0，repeat視同為 0。
  • 參數(shù)NaN等同于 0。
  • 如果repeat的參數(shù)是字符串，則會先轉(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ù)是字符串，會被轉(zhuǎn)換成數(shù)字

(5) padStart()，padEnd()

ES2017 引入了字符串補(bǔ)全長度的功能。如果某個(gè)字符串不夠指定長度，會在頭部或尾部補(bǔ)全。padStart()用于頭部補(bǔ)全，padEnd()用于尾部補(bǔ)全。

  • pad：是墊，補(bǔ)全的意思
  • padStart和padEnd一共接受兩個(gè)參數(shù)：
    第一個(gè)參數(shù)用來指定字符串的長度。
    第二個(gè)參數(shù)是用來補(bǔ)全的字符串。
  • 如果原字符串的長度，等于或大于指定的最小長度，則返回原字符串。
  • 如果用來補(bǔ)全的字符串與原字符串，兩者的長度之和超過了指定的最小長度，則會截去超出位數(shù)的補(bǔ)全字符串。
  • 如果省略第二個(gè)參數(shù)，默認(rèn)使用空格補(bǔ)全長度。
padStart的常見用途是為數(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'       -- 指定的字符串長度，小于原字符串長度，則返回原字符串
'xxx'.padEnd(2, 'ab') // 'xxx'

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

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

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

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

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

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

(1) Error對象

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

  • js解析或運(yùn)行出錯(cuò)，都會拋出一個(gè)錯(cuò)誤對象
  • 所有拋出的錯(cuò)誤都是 Error構(gòu)造函數(shù)的實(shí)例
  • 拋出Error實(shí)例對象以后，整個(gè)程序就中斷在發(fā)生錯(cuò)誤的地方，不再往下執(zhí)行。
  • Error構(gòu)造函數(shù)，接受一個(gè)參數(shù)，表示錯(cuò)誤提示?？梢詮?實(shí)例對象的 message 屬性讀到這個(gè)參數(shù)

Error實(shí)例對象屬性： ( 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í)例對象
       
console.log( err.message );                // 實(shí)例的 message 屬性，讀取Error構(gòu)造函數(shù)的 參數(shù)
console.log( err.name );
console.log( err.stack );


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

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


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



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



RangeError對象是一個(gè)值超出有效范圍時(shí)發(fā)生的錯(cuò)誤。主要有幾種情況，  // 超出范圍，數(shù)組，對象方法，堆棧
一是 : 數(shù)組長度為負(fù)數(shù)，
二是 : Number對象的方法參數(shù)超出范圍，以及函數(shù)堆棧超過最大值。



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



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



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

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

(2) throw 語句

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

  • throw語句，手動(dòng)中斷程序執(zhí)行，并拋出一個(gè)錯(cuò)誤
  • throw可以拋出任何類型的值。也就是說，它的參數(shù)可以是任何值。
let a=9;

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


// 對于 JavaScript 引擎來說，遇到throw語句，程序就中止了。

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



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

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

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

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

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

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

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

  • try...catch結(jié)構(gòu)，對錯(cuò)誤進(jìn)行處理，選擇是否往下執(zhí)行
  • catch代碼塊捕獲錯(cuò)誤之后，程序不會中斷，會按照正常流程繼續(xù)執(zhí)行下去。( 重要 )
  • catch代碼塊之中，還可以再拋出錯(cuò)誤，甚至使用嵌套的try...catch結(jié)構(gòu)。
  • 為了捕捉不同類型的錯(cuò)誤，catch代碼塊之中可以加入判斷語句。
       let a=9;

       try {
           if (a<10) {
               throw new Error('錯(cuò)誤，a不能小于10')    // throw手動(dòng)中止執(zhí)行，并拋出錯(cuò)誤
               console.log('該條語句不會被執(zhí)行，因?yàn)閠hrow命令會中斷代碼執(zhí)行')！?。。。。。。?！
           }
       } catch (error) {    // 錯(cuò)誤被catch代碼塊捕獲，參數(shù)是try代碼塊拋出的值
           console.log(error.name + ':' + error.message)
       }
        console.log('該條語句會執(zhí)行，因?yàn)閏atch捕獲錯(cuò)誤后，程序會按正常執(zhí)行')?。。。。。。。。?！


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

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

(4) finally 代碼塊

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

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

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

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


// 上面代碼中，由于沒有catch語句塊，所以錯(cuò)誤沒有捕獲。
// 執(zhí)行finally代碼塊以后，程序就中斷在錯(cuò)誤拋出的地方。

(重要)

function idle(x) {
  try {
    console.log(x);
    return 'result';
  } finally {        // try語句未發(fā)生錯(cuò)誤，finally依舊會執(zhí)行。執(zhí)行完finally，才會執(zhí)行return ?。。?！
    console.log("FINALLY");
  }
}

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


// 上面代碼說明，try代碼塊沒有發(fā)生錯(cuò)誤，而且里面還包括return語句，但是finally代碼塊依然會執(zhí)行。

// 注意，只有在其執(zhí)行完畢后，才會顯示return語句的值。




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

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

結(jié)果是： 
11111111
22222222
33333333
// 說明 return語句的執(zhí)行是排在finally代碼之前，只是等finally代碼執(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語句的執(zhí)行是排在finally代碼之前，只是等finally代碼執(zhí)行完畢后才返回。

// return語句的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('該語句不會執(zhí)行，trorw 會中止程序');
          } 
      } catch (err) {   // catch 捕獲 try 代碼塊的錯(cuò)誤，catch執(zhí)行完，會正常執(zhí)行程序
        console.log(err.message, 'err');   // err.message輸出 Error 構(gòu)造函數(shù)的參數(shù)
        console.log('catch 中還能拋出錯(cuò)誤，也能再嵌套 try...catch...');
      } finally {   
        console.log('不管有沒有錯(cuò)誤，都會執(zhí)行finally語句');
      }
      console.log('這句會正常執(zhí)行，catch不會中止程序執(zhí)行');
      console.log('js錯(cuò)誤類型有 SyntaxError語法錯(cuò)誤')；
      console.log('js錯(cuò)誤類型有 ReferenceError引用錯(cuò)誤，引用不存在的變量')；
      console.log('js錯(cuò)誤類型有 RangeError范圍錯(cuò)誤，如數(shù)組的長度為負(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 不管有沒有錯(cuò)誤，都會執(zhí)行finally語句
//username.js:88 這句會正常執(zhí)行，catch不會中止程序執(zhí)行
//username.js:89 js錯(cuò)誤類型有 SyntaxError語法錯(cuò)誤
//username.js:90 js錯(cuò)誤類型有 ReferenceError引用錯(cuò)誤，引用不存在的變量
//username.js:91 js錯(cuò)誤類型有 RangeError范圍錯(cuò)誤，如數(shù)組的長度為負(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 的寫法
Math.max.apply(null, [14, 3, 77])     // apply第一個(gè)參數(shù)是需要綁定的對象，第二個(gè)參數(shù)只能是數(shù)組

// ES6 的寫法
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ū)同一對象的 指針，并不是對象的克隆，改變其中一個(gè)值，另一個(gè)值就會跟著改變。
const a1 = [1, 2];
const a2 = a1;

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

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

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

真正的克隆 (復(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);

// 上面的兩種寫法，a2都是a1的克隆。

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

[...'hello']          

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

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


// 原生具有 iterator 接口的數(shù)據(jù)結(jié)構(gòu) ：
(1) array，
(2) string，
(3) NodeList對象， ----- 如：document.querySellectorAll()返回值
(4) TypedArray，  
(5) 函數(shù)的 arguments 對象     ----------- arguments對象包含了函數(shù)運(yùn)行時(shí)的所有參數(shù)，用[下標(biāo)]取值
(6) Map
(7) Set
  • 注意：對于那些沒有部署 Iterator 接口的類似數(shù)組的對象，擴(kuò)展運(yùn)算符就無法將其轉(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方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組：
(1) 類似數(shù)組的對象（array-like object）,
(2) 可遍歷（iterable）的對象（包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map）。

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

  • Array.from()將 類似數(shù)組的對象 和 可遍歷的對象 轉(zhuǎn)化成真正的 數(shù)組
  • 只要是部署了 Iterator 接口的數(shù)據(jù)結(jié)構(gòu)，Array.from 都能將其轉(zhuǎn)為數(shù)組。?。?！
  • 只要是部署了 Iterator 接口的數(shù)據(jù)結(jié)構(gòu)，展開運(yùn)算符 都能將其轉(zhuǎn)為數(shù)組。！?。?/li>
  • 如果參數(shù)是一個(gè)真正的數(shù)組，Array.from會返回一個(gè)一模一樣的新數(shù)組。
  • 所謂類似數(shù)組的對象，本質(zhì)特征只有一點(diǎn)，即必須有l(wèi)ength屬性。因此，任何有l(wèi)ength屬性的對象，都可以通過Array.from方法轉(zhuǎn)為數(shù)組，而此時(shí)擴(kuò)展運(yùn)算符就無法轉(zhuǎn)換。(重要) ?。。?/li> 
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

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

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

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

// ( 展開運(yùn)算符 ) 只能是對具有iterator接口的數(shù)據(jù)類型轉(zhuǎn)換成數(shù)組，不適用于一般的類似數(shù)組的對象
  • 實(shí)際應(yīng)用中，常見的類似數(shù)組的對象是 DOM 操作返回的 NodeList 集合，以及函數(shù)內(nèi)部的arguments對象。Array.from都可以將它們轉(zhuǎn)為真正的數(shù)組。
  • NodeList對象 和 arguments對象具有iterator接口，所以也能用 展開運(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ù)組的對象 轉(zhuǎn)換成真正的數(shù)組
(2) 具有iterator接口的數(shù)據(jù)結(jié)構(gòu)，都可以通過展開運(yùn)算符，轉(zhuǎn)換成數(shù)組。
(3) 原生具有iterator接口的數(shù)據(jù)結(jié)構(gòu)有：array，string，NodeList，arguments，map，set，TypedArray
(4)  ( NodeList對象 )，( arguments對象 ) 可以通過 ( Array.from() ) 和 ( 展開運(yùn)算符 )轉(zhuǎn)化為數(shù)組
  • 所謂類似數(shù)組的對象，本質(zhì)特征只有一點(diǎn)，即必須有l(wèi)ength屬性。因此，任何有l(wèi)ength屬性的對象，都可以通過Array.from方法轉(zhuǎn)為數(shù)組，而此時(shí)擴(kuò)展運(yùn)算符就無法轉(zhuǎn)換。(重要) ?。?！
Array.from({ length: 3 });
// [ undefined, undefined, undefined ]
Array.from還可以接受第二個(gè)參數(shù)，作用類似于數(shù)組的map方法，用來對每個(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)，你就可以先對它的值進(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ù)的不同，會導(dǎo)致Array()的行為有差異。
  • Array.of基本上可以用來替代Array()或new Array()，并且不存在由于參數(shù)不同而導(dǎo)致的重載。它的行為非常統(tǒng)一。
  • Array.of總是返回參數(shù)值組成的數(shù)組。如果沒有參數(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]
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

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