常用的ES2015中的字符串、數值、數組的拓展方法

一、字符串的拓展

1、使用for ... of循環字符串中的字符

for(let a of 'java') {
      console.log(a);
}
// j
// a
// v
// a

2、利用includes、startsWith、endsWith三種方法檢測字符串中是否含有某些字符(串),根據是否存在返回布爾值

傳統中只能使用indexOf方法檢測

const value = 'hello world!';

console.log(value.includes('w'));
console.log(value.startsWith('he'));
console.log(value.endsWith('d!'));
// true
// true
// true

當然,這幾個方法都支持第二個參數,作為搜索開始的位置,但是endsWith()方法的第二個參數是指前n的字符:

console.log(value.includes('w',2));
console.log(value.startsWith('he',1));
console.log(value.endsWith('he',2));
// true
// false
// true

3、利用repeat()方法重復字符串,這個方法接受一個數字作為重復的次數,如果是小數則采用舍的方式,這個方法不會對原來的字符串進行修改
傳統的方法使用符號+進行重復

const s = 'js';
const v = s.repeat(2);
console.log(v);
// jsjs

4、使用模板字符串來簡化字符串的拼接,模板字符串為了區分普通的字符串使用反引號括起來,使用${}作為占位符標識

傳統方法使用符號+來拼接,如:

let lang = 'js';
let s = lang + ' is powerful';

如果字符串太長,還可以將字符串劃分為數組中的一個個元素,使用join()方法拼接,這樣的好處是方便代碼的組織

let lang = 'js;
let  s = [lang, ' is', ' powerful'].join('');

使用模板字符串可以更加方便和簡潔,如:

let lang1 ='js';
let lang2 = 'java';
function str(value) {
    return `${value} is powerful`;
}
let s1 = str(lang1);
let s2 =  str(lang2);

當然模板字符串中還可以嵌套模板字符串,使用函數等等。

二、數值的拓展

1、使用0b表示二進制數,使用0o表示八進制數

傳統中定義使用零0開頭表示八進制數如071就是表示57,用0x表示十六進制數,但是ES5中說明了嚴格模式中規定不能用0開頭表示八進制,ES6中則更加明確說明使用0b開頭表示,使用Number方法可以將這些轉化為10進制,同時這些進制的數字進行計算都是返回10進制數

let n = 071;
Number(n);
// 57
071 + 01;
// 58
0b10 + 0b10;
// 4

2、使用Number.isFinite()方法來檢測一個數是否有限,使用Number.isNaN()方法來檢測一個變量是否是數字
傳統中isFinite()方法和isNaN()方法已經部署到了全局對象中,使用Infinity來表示正無限,-Infinity來表示負無限,如下:

let n = 12;
isNaN(n);
// false
isFinite(n);
// true

這個與傳統方法不同的是,傳統方法使用時會先調用類型轉換,而Number新增的這兩個方法首先檢測參數是否是數字,不是數字一律返回false

isNaN('NaN');
// true
isFinite('12');
// true
Number.isNaN('NaN');
// false
Number.isFinite('12');
// false

3、Number.parseInt()和Number.parseFloat()方法

這里和傳統的全局方法parseInt()和parseFloat()一致,這樣做的目的是減少全局方法,逐步模塊化

4、利用Number.isInteger()方法判斷一個數是否是整數

傳統方法中我們可以使用Math.floor()或者是Math.ceil()方法來處理數字后與原數字對比來判斷是否為整數。

let n = 12;
console.log(n === Math.floor(n));
// true
console.log(n === Math.ceil(n));
// true
console.log(Number.isInteger(n));
// true

同樣,由于JavaScript內部儲存數據并不會區分浮點數與整數,因此12和12.0使用這個方法同樣都是返回true,都認為是整數。

console.log(Number.isInteger(12.0));
// true

三、Math對象拓展

1、利用Math.trunc()方法來舍去一個數字的小數部分,返回整數部分。

傳統方法中我們需要判斷這個數字大于0還是小于0,大于0采用Math.floor()方法處理,小于0使用Math.ceil()方法處理,因為這兩個方法一個表示入,一個表示舍

function trunc(num) {
    if(num >= 0) {
        return Math.floor(num);        
    } else {
        return Math.ceil(num);
    }
}
let n1 = 4.5;
let n2 = -4.5;
console.log(trunc(n1));
// 4
console.log(trunc(n2));
// -4
console.log(Math.trunc(n1));
// 4
console.log(Math.trunc(n2));
// -4

2、利用Math.sign()判斷一個數字的正負

傳統方法中需要和0做對比之后根據結果處理。

Math.sign()方法使用的時候同樣會先做類型轉化之后再做判斷,Math.sign()方法有可能返回5個值:

正數:返回+1

負數:返回-1

0:返回0

-0:返回-0

其他:返回NaN

// 傳統模擬
function sign(num) {
  x = +x; // 轉化為一個數字,遇到不能轉化的非數字返回NaN
  if (x === 0 || isNaN(x)) {
    return x;
  }
  return x > 0 ? 1 : -1;
}
Math.sign('12');
// 1
Math.sign(-12);
// -1
Math.sign(0);
// 0
Math.sign(-0);
// -0
Math.sign('12js');
// NaN

3、利用Math.cbrt()方法來求一個數的立方根

傳統方法中我們需要使用Math.abs()方法將其轉換為絕對值之后利用Math.pow()方法求絕對值的立方根,之后根據原始值的正負返回正負值。

同樣這個方法執行的時候會先調用類型裝換。

// 傳統模擬
function cbrt(num) {
    let  n = Math.pow(Math.abs(num), 1/3);
    return num >= 0 ? n : -n;
}
Math.cbrt(-1);
// -1
Math.cbrt(8);
// 2

四、數組的拓展

1、利用Array.from()方法將類數組對象和set、map數據結構轉化為一個真正的數組的對象

傳統方法中將一個有length屬性的類數組對象轉化為數組的對象會使用Array.slice.call()來轉化,如:

const  a = {
'0': 'a',
length: 1
};
const b = [].slice.call(a);
// ['a'] 

類數組對象鍵值對中鍵必須是以0,1,2這樣命名,同時也必定需要length屬性

類數組對象經典的就是arguments對象,還有DOM操作中得到的節點也是,將這些類數組對象轉化為數組后就可以放心的使用數組的所有方法了,尤其是forEach()、map()、reduce()這些迭代器方法。

function a(){
    console.log(Array.isArray(arguments));
    console.log(Array.isArray(Array.from(arguments)));
}
a();
// false
// true

2、利用Array.of()方法將一組數值轉化為一個數組

傳統方法中我們初始化一個數組一半采用字面量法,構造函數方法基本不會用到,主要是因為構造函數方法根據參數的多少,行為是不一致的。當參數只有一個時返回的是一個length屬性為參數值的數組,而當參數為兩個或者兩個以上時,返回的就是這些值組成的一個數組,而Array.of()方法就可以行為一致,始終返回這些參數組成的數組。

let a = new Array(3);
// [ , , ]
let b = new Array(2,3);
// [2,3]

顯然,傳統上將arguments對象轉化為數組即可模擬Array.of()這個方法

function arrayOf(){
  return [].slice.call(arguments);
}

3、利用數組實例方法find()來查找出符合條件的第一個成員,find()方法的參數是一個回調函數,類似于forEach()等方法的回調函數,這個函數的第一個參數是元素,第二個參數是位置,第三個參數是這個數組,find()方法返回第一個返回值為true的數組元素,如果數組中沒有返回為true的元素,則返回undefined。

傳統中這種迭代器方法還有forEach()、every()、some()、map()、filter()、reduce()、reduceRight()方法,傳統中需要模擬這個方法則需要使用循環來逐個判斷。

[1,2,3,4,-5,6].find((ele) => ele < 0);
// -5
[1,2,3,4,5].find((ele) => ele>3);
// 4

4、使用數組實例方法findIndex()來查找出符合條件的第一個成員的索引值,參數依舊是一個回調函數,如果數組中沒有符合條件的元素,則返回-1。

傳統方法中依舊是需要使用循環來逐個判斷。

[1,2,3,4,-5,6].findIndex((ele) => ele < 0);
// 4
[1,2,3,4,5].findIndex((ele) => ele>3);
// 3
[1,2,3,4,5].findIndex((ele) => ele<0);
// -1

5、使用數組實例方法includes()來判斷數組中是否存在某個元素

與字符串方法includes一樣,有則返回true,無則返回false

傳統方法中需要使用indexOf來根據索引值來判斷。

// 傳統方法模擬
function includes(arr, ele) {
    return arr.indexOf(ele) > -1 ? true : false;
}

最后是一個廣告貼,最近新開了一個分享技術的公眾號,歡迎大家關注??

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,406評論 6 538
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,034評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,413評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,449評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,165評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,559評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,606評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,781評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,327評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,084評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,278評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,849評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,495評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,927評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,172評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,010評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,241評論 2 375

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,262評論 0 4
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,726評論 18 399
  • 本章內容 使用對象 創建并操作數組 理解基本的 JavaScript 類型 使用基本類型和基本包裝類型 引用類型的...
    悶油瓶小張閱讀 693評論 0 0
  • 關于作者 劉希平,全球頂級公關公司萬博宣偉的中國區主席。作為中國公關界的權威人士,他曾帶領團隊參與過北京申辦200...
    飛生閱讀 502評論 0 2
  • 安卓逆向系列教程(二)APK 和 DEX 作者:飛龍 APK APK 是 Android 軟件包的分發格式,它本身...
    布客飛龍閱讀 1,488評論 0 7