# [Codewars - 6kyu解題] Create Phone Number 創造電話號碼

###### tags: `Codewars`,`6kyu`,`Javascript`,`Array`,`.splice()`,`.reduce()`,`.replace()`,`RegExp`

> Javascript菜鳥紀錄Codewars解題過程

## Instructions 題目
:link: https://www.codewars.com/kata/525f50e3b73515a6db000b83

:pushpin: **Instructions:**
接收一組10個整數的陣列(整數介於0~9之間)，回傳電話號碼型態的字串。
Write a function that accepts an array of 10 integers (between 0 and 9), that returns a string of those numbers in the form of a phone number.

:bulb: **Examples:**

createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
=> returns "[phone]"

:bulb: **Notice:**

回傳的電話號碼必須與傳入的陣列號碼順序相同，且要在括弧後加上空白格。
The returned format must be correct in order to complete this challenge. Don't forget the space after the closing parentheses!

## My Solution 我的解法

function createPhoneNumber(numbers){
  numbers.splice(0,0,'(');
  numbers.splice(4,0,') ');
  numbers.splice(8,0,'-');
  return numbers.join('');
}

## Solutions(1) 其他更精簡的寫法

function createPhoneNumber(numbers){
   return numbers.reduce((p,c) => p.replace('x',c), "(xxx) xxx-xxxx");
}

## Solutions(2) 其他更精簡的寫法

function createPhoneNumber(numbers){
  return numbers.join('').replace(/(\d{3})(\d{3})(\d{4})/,'($1) $2-$3');
}

## Solutions(3) 其他更精簡的寫法

function createPhoneNumber(numbers){
  return numbers.join('').replace(/(...)(...)(.*)/, '($1) $2-$3');
}

## :memo: 學習筆記

:bulb: **Array.prototype.splice()**
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
>
> 刪除既有元素並／或加入新元素來改變一個陣列的內容。
> array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
>
> Ex:
> 從索引 2 的位置開始，刪除 0 個元素並插入「drum」

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum');
// myFish 為 ["angel", "clown", "drum", "mandarin", "sturgeon"] 
// removed 為 [], 沒有元素被刪除

> Ex:
> 從索引 3 的位置開始，刪除 1 個元素

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);
// removed 為 ["mandarin"]
// myFish 為 ["angel", "clown", "drum", "sturgeon"] 

---
:bulb: **Array.prototype.reduce()**
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
>
*Array.prototype.reduce(accumulator, currentValue)*
> 將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。
> arr.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)
>

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

---
:bulb: **String.prototype.replace()**
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String/replace

*str.replace(regexp|substr, newSubstr|function)*
>
> 傳回一個新字串，此新字串是透過將原字串與 pattern 比對，以 replacement 取代吻合處而生成。pattern 可以是字串或 RegExp，而 replacement 可以是字串或函式（會在每一次匹配時被呼叫）。
>

var re = /apples/gi;
var str = 'Apples are round, and apples are juicy.';
var newstr = str.replace(re, 'oranges');
console.log(newstr);  // oranges are round, and oranges are juicy.

---

:bulb: **正規表示式RegExp**
http://syunguo.blogspot.com/2013/04/jsregular-expressions.html

https://felixhuang.pixnet.net/blog/post/23673013-%5Bjavascript%5D-%E6%AD%A3%E8%A6%8F%E5%8C%96%E8%A1%A8%E7%A4%BA%E6%B3%95%E9%80%9F%E6%9F%A5%E8%A1%A8

https://atedev.wordpress.com/2007/11/23/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%A4%BA%E5%BC%8F-regular-expression/