一、字符串的拓展
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;
}
最后是一個廣告貼,最近新開了一個分享技術的公眾號,歡迎大家關注??