'abc' 轉換成[a, b, c]一道面試題的思考

chenjinxinlove1481273252000發表於2018-02-24
面試題

最近面試遇到那樣一個問題把'abc' 轉換成[a, b, c]，就是字串轉成陣列。

看著簡單，我就是說split，然後面試官問還有嗎。我有思考了一下。迴圈用charAt()取，然後還有Array.from()和擴充套件運算子[...'abc']。 然後就是答不出了。然後面試官問還有其他實現方式嗎。我實在想出來，那道題就過了。面試完，自己思考還有什麼方法，又翻看了 阮一峰老師的ECMAScript 6 入門。對Iterator遍歷器又有了新的認識。

1、split

'abc'.split('');
["a", "b", "c"]
複製程式碼

2、Array.from()

Array.from('abc')
["a", "b", "c"]
複製程式碼

3、...

[...'abc']
["a", "b", "c"]
複製程式碼

4、charAt()

function strToArr(str) {
  let result = [];
  for (let i = 0; i < str.length; i++) {
    result.push(str.charAt(i));
  }
  return result;
}
console.log(strToArr('abc'))
["a", "b", "c"]
複製程式碼

from和擴充套件運算子都是用了迭代器，當然可以使用for of 來迴圈

注意：for...in迴圈讀取鍵名，for...of迴圈讀取鍵值

5、利用for of

var str = 'abc';

for (let a in str) {
  console.log(a); // 0 1 2
}

for (let a of str) {
  console.log(a); // a b c
}
複製程式碼

遍歷器（Iterator）就是這樣一種機制。它是一種介面，為各種不同的資料結構提供統一的訪問機制。任何資料結構只要部署 Iterator 介面，就可以完成遍歷操作（即依次處理該資料結構的所有成員）。

Iterator 的作用有三個：一是為各種資料結構，提供一個統一的、簡便的訪問介面；二是使得資料結構的成員能夠按某種次序排列；三是 ES6 創造了一種新的遍歷命令for...of迴圈，Iterator 介面主要供for...of消費。

Iterator 的遍歷過程是這樣的。

（1）建立一個指標物件，指向當前資料結構的起始位置。也就是說，遍歷器物件本質上，就是一個指標物件。

（2）第一次呼叫指標物件的next方法，可以將指標指向資料結構的第一個成員。

（3）第二次呼叫指標物件的next方法，指標就指向資料結構的第二個成員。

（4）不斷呼叫指標物件的next方法，直到它指向資料結構的結束位置。

每一次呼叫next方法，都會返回資料結構的當前成員的資訊。具體來說，就是返回一個包含value和done兩個屬性的物件。其中，value屬性是當前成員的值，done屬性是一個布林值，表示遍歷是否結束。

6、Iterator

let str = 'abc'
let iter = str[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }
複製程式碼

原生具備 Iterator 介面的資料結構如下

  • Array
  • Map
  • Set
  • String
  • TypedArray
  • 函式的 arguments 物件
  • NodeList 物件

所以陣列可以用的字串也是可以做。

相關文章