屒型人

0%

實用的內建方法

發表於 更新於 Disqus：

本篇文章主要在介紹split/match/indexOf/includes/search/join/concat的用法, 會有這一次的觀念釐清, 主要是因為自己在撰寫程式的時候, 常常會搞不清楚要用哪一個語法 . 於是會開始上網找mdn, 不僅浪費時間又耗費精神, 為了加速自己開發的流程, 所以特別把用法和適用場景詳述一番.

在解釋觀念前, 最重要的就是要知道要對誰用, 俗話說的好, 找對人事情減少一半.
相信大家也知道, 資料型態可以分為Primitive 和 Object types, 這邊就先來分類一下

  • Primitive: search, match, includes, split
  • Object: join
  • 都可: indexOf

解釋觀念

先來看看各個原生用法mdn上的解釋

  • 定義: 執行正則表達和String對象的的匹配
  • 返回值: 如果匹配成功，返回成功的索引值, 否則返回-1.

indexOf

  • 定義: 方法會回傳給定元素於陣列中第一個被找到之索引，若不存在於陣列中則回傳 -1。
  • 返回值: 如果匹配成功，返回成功的索引值, 否則返回-1.
  • 注意事項: 不需要透過正則即可達成

match

  • 定義: 如果匹配成功, 返回匹配成功的字串並轉成陣列
  • 返回值: 若只呼叫match()而沒有傳入任何參數，則會回傳內含一個空字串的陣列，即[“”]。
  • 注意事項:
    • 不需要透過正則也有效果, 但會因此侷限, 例如只能選到大寫的字母
    • 字串須為連續性, 若不是則回傳null
    • 回傳字串, 不是回傳索引值

includes

  • 字串定義: 使用它來判斷字串是否包含在其他字串, 透過字串找字串, 字串須為連續字元.
  • 陣列定義: 使用它來判斷陣列是否包含特定元素.
  • 返回值: true or false
  • 注意事項:
    • 可以用來判斷是否含有特定文字, 有點像是關鍵字搜尋, 另外只有支援ES6.

小結

這三個方法來說, 都是在面對str的時候去尋找相對應的值, 可以不透過正則搜尋值的indexOf大量被使用也同時是最重要的. 適用場景就像是從陣列裡面搭配forEach, map 遍歷去尋找值.

補充: includes也可以用在陣列中, 去尋找特定值

split

  • 型別轉換: 字串 ⇒ 陣列
  • 定義: 面對str使用, 並在split裡面輸入想要用什麼來分割, 分割完後變成陣列

join

  • 型別轉換: 陣列 ⇒ 字串

  • 類似方法: toString

  • 定義: 面對陣列使用, 適用場景為把陣列變成字串時的型別轉換.

  • 描述: 所有陣列中的元素轉成字串型態後，連接合併成一個字串

  • 注意事項:

    • 會回傳一組新字串 , 另外的重點是前後不會加入參數

  • 心得: 可以把join擴充成黏在一起的含義 → 經過此方法, 字要能黏在一起, 所以可以把想成陣列的轉型

小結

這兩個方法來說, 在處理大量data的時候都很常被用到, 所以一定要對他們非常熟稔
筆者目前只想到那麼多的範例, 若是有其餘範例會再補充上去.

concat

  • 定義: 在陣列中合併另一數值, 陣列, func 所使用
  • 返回: 會回傳一組新陣列
  • 注意事項: 原始的資料不會被動用到, 沒有sideEffect

範例程式碼

search

1
2
3
4
5
var str = "hey JudE";
var re = /[A-Z]/g; // 找大寫字母
var re2 = /[.]/g;
console.log(str.search(re)); // returns 4, which is the index of the first capital letter "J"
console.log(str.search(re2)); // returns -1 cannot find '.' dot punctuation

match

1
2
3
4
5
6
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
var regexp = /[A-E]/gi;
var matches_array = str.match(regexp);

console.log(matches_array);
// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']

indexOf

1
2
3
4
5
6
7
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

console.log(beasts.indexOf('giraffe'));
// expected output: -1

尋找元素是否存在於陣列中，若沒有則加入到陣列裡, 這個範例很值得一看再看.

includes

1
2
3
4
5
6
7
8
9
10
11
// 1. 字串的用法
'something'.includes('thing'); // true

// 2. 陣列的用法
const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

split

方法三是重要的用法,務必留意

1
2
3
4
5
6
7
8
9
10
11
12
13
// 方法一: 透過變數使用, 底下寫法是無效的, 因為字串是不可變的, 更改他的值需要新開記憶體位置.   
var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
names.split(";") -> // 錯誤寫法
names = names.split(';') -> // 正確
console.log(names); //  ["Harry Trump ", "Fred Barney", " Helen Rigby ", " Bill Abel ", "Chris Hand"]
 
// 方法二: 針對每個字母分割
var str = 'hey hello world!'
console.log(str.split('')) // ["h", "e", "y", " ", "h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

// 方法三: 針對每個字分割
var str = 'hey hello world!'
console.log(str.split(' ')) //["hey", "hello", "world!"]

join

1
2
3
4
5
6
7
8
var arr = [1,2,3]
console.log(arr.join('!')) // 1!2!3

var a = ['Wind', 'Rain', 'Fire'];
a.join();      // 'Wind,Rain,Fire'
a.join(', ');  // 'Wind, Rain, Fire'
a.join(' + '); // 'Wind + Rain + Fire'
a.join('');    // 'WindRainFire'

concat

可以把他當成push來看, 且原始的數據也不會改變. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr = [1, 2, 3]

// 用法1: 
var newArr = arr.concat(4)

// 用法2: 
var newArr2 = arr.concat(4).concat(5) //push不支援此種用法...

// 用法3: 
var newArr3 = arr.concat(4, 5, 6) // 

console.log(arr, newArr) // [1, 2, 3] ; [1, 2, 3, 4]
console.log(newArr2) // [1, 2, 3, 4, 5]
console.log(newArr3) // [1, 2, 3, 4, 5, 6]

同場加映

  1. split 和 join 組合技為 - 逆轉字串
1
2
3
const str = 'aszx'
const strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa'
console.log(strReverse) // xzsa
  1. 解構賦值
1
2
3
4
5
let ary = 'a, b, c, d, e'
ary.split(', ') // ['a', 'b', 'c', 'd', 'e']
let [first, second, ...third] = ary.split(', ')
console.log(first) // a
console.log(third) // 'c', 'd', 'e'
  1. join和split的搭配延伸
1
2
3
4
var arr = ['vue', 'react', 'angular']
var newArr = arr.join(',').split(',') // ['vue', 'react', 'angular']

console.log(arr === newArr) // false. 因為存放的位置不同

那如果只比較值呢?

方法一: 序列化

1
2
console.log(JSON.stringify(arr) === JSON.stringify(newArr));// true
// expected output: "['vue', 'react', 'angular']"

我想這邊所使用的方法, 是因為字串本身是傳值, 所以stringify後, 變成兩兩字串比較, 因此值相同, 回傳true.

方法二: every

1
console.log(newArr.every((item, i) => item === arr[i])) // true

透過此方法, 就是在比較陣列裡面的所有值, 是最直覺的作法

方法三: reduce 

1
2
3
4
5
console.log(newArr.reduce((isEqual, el, i) => {
    if(el === arr[i]) return isEqual
    //console.log(isEqual) 
    return false
}, true))

就我現在的理解, 第一個值是自定義isEqual為true, 一旦不是true, 就會跳出false.

!!

常用來強制轉型使用, 用一個才達到目的吧, 用兩個推褲子放屁..

1
2
3
4
5
6
7
!-1 === false
!!-1 === true

!0 === true
!!0 === false

!123 === false

參考文獻

indexOf

match

search

join

split

Array- includes

String- includes