不可錯過的一些 js小技巧

1. 獲取指定范圍內的隨機整數

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

2. 打亂數組順序

let arr:[31,2,3,'排序','??']
arr = arr.sort(() => 0.5 - Math.random())
//  [ 3, 2, "??", "排序", 31 ]

3. 用Math.max()取數組最大值

let arrr = [ 6, 1, 2, 8, 10 ] 
// ES5 的寫法
let max = Math.max.apply(Math,arr) 
Math.max.apply(null, arrr)
// ES6使用拓展運算符的寫法
Math.max(...arr)
// max = 10

// 等同于
Math.max(14, 3, 77);

3. 去除數字之外的所有字符

var str = ''yannnianjunzi这敬,溫其如玉热押,一個億斤贰,1000000000??"
let num = str.replace(/\D/g,'')
// num 1000000000

3.1 replaceAll方法

const str = "hello world";
// 之前
str.replace(/o/g, "a")// "hella warld"
// 現(xiàn)在
str.replaceAll("o", "a")// "hella warld"

4. 反轉字符串或者單詞

let str = 'dfvgwsdfgg枯芬,奮斗奮斗參考看看,dsfgf'
let reverseStr = str.split('').reverse().join('')

5. 將十進制轉換為二進制或十六進制

let num = 12;
let num1 = Number(this.num10).toString(2)
let num2 = Number(this.num10).toString(16)

6. 如何檢查對象中是否存在某個屬性

6.1 第一種使用 in 操作符號:

const o = { 
  "prop" : "bwahahah",
  "prop2" : "hweasa"
};
 
console.log("prop" in o); // true
console.log("prop1" in o); // false

6.2 使用 hasOwnProperty 方法,hasOwnProperty() 方法會返回一個布爾值,指示對象自身屬性中是否具有指定的屬性(也就是,是否有指定的鍵)

6.2.1 Object.hasOwn()和Object.hasOwnProperty區(qū)別 JavaScript 對象的屬性分成兩種:自身的屬性和繼承的屬性旭寿。對象實例有一個hasOwnProperty()方法,可以判斷某個屬性是否為原生屬性崇败。ES2022 在Object對象上面新增了一個靜態(tài)方法Object.hasOwn()盅称,也可以判斷是否為自身的屬性。Object.hasOwn()可以接受兩個參數后室,第一個是所要判斷的對象缩膝,第二個是屬性名。

const foo = Object.create({ a: 123 });
foo.b = 456;

Object.hasOwn(foo, 'a') // false
Object.hasOwn(foo, 'b') // true

上面示例中岸霹,對象foo的屬性a是繼承屬性疾层,屬性b是原生屬性。Object.hasOwn()對屬性a返回false贡避,對屬性b返回true痛黎。
Object.hasOwn()的一個好處是,對于不繼承Object.prototype的對象不會報錯刮吧,而hasOwnProperty()是會報錯的湖饱。

console.log(o.hasOwnProperty("prop2")); // true
console.log(o.hasOwnProperty("prop1")); // false
const obj = Object.create(null);

obj.hasOwnProperty('foo') // 報錯
Object.hasOwn(obj, 'foo') // false
// 上面示例中,Object.create(null)返回的對象obj是沒有原型的杀捻,不繼承任何屬性井厌,
// 這導致調用obj.hasOwnProperty()會報錯,但是Object.hasOwn()就能正確處理這種情況致讥。

6.3 第三種使用括號符號obj["prop"]仅仆。如果屬性存在,它將返回該屬性的值垢袱,否則將返回undefined墓拜。

console.log(o["prop"]); // "bwahahah"
console.log(o["prop1"]); // undefined

7.生成一個長度為100并且內容為0的數組

1. new Array(100).fill(0); Array(100).fill(0)
2. Array.from({length:100}, x => x=0)
3. Array.apply(null, {length:100} ).map(x => x=0)
1.png

2.png

3.png

Array.from()還可以接受一個函數作為第二個參數,作用類似于數組的map()方法请契,用來對每個元素進行處理咳榜,將處理后的值放入返回的數組潘懊。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

8. 通過toString來檢測各種數據類型

/**
* @description: 數據類型的檢測
* @param {any} data 要檢測數據類型的變量
* @return {string} type 返回具體的類型名稱【小寫】
*/
const isTypeOf = (data) => {
    return Object.prototype.toString.call(data).replace(/\[object (\w+)\]/, '$1').toLowerCase()
}

console.log(isTypeOf({})) // object
console.log(isTypeOf([])) // array
console.log(isTypeOf("ss")) // string
console.log(isTypeOf(1)) // number
console.log(isTypeOf(false)) // boolean
console.log(isTypeOf(/w+/)) // regexp
console.log(isTypeOf(null)) // null
console.log(isTypeOf(undefined)) // undefined
console.log(isTypeOf(Symbol("id"))) // symbol
console.log(isTypeOf(() => { })) // function

**9.遞歸求數組的和

getRecursionList(list){
  function getSum(i)  {
    return i >= list.length ? 0 : list[i] +  getSum(i+1)
}
// return getSum(0)  // getSum(0) 相當于調用了這個函數
return getSum(0)
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市贿衍,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌救恨,老刑警劉巖贸辈,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異肠槽,居然都是意外死亡擎淤,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門秸仙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來嘴拢,“玉大人,你說我怎么就攤上這事寂纪∠猓” “怎么了?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵捞蛋,是天一觀的道長孝冒。 經常有香客問我,道長拟杉,這世上最難降的妖魔是什么庄涡? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮搬设,結果婚禮上穴店,老公的妹妹穿的比我還像新娘。我一直安慰自己拿穴,他們只是感情好泣洞,可當我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著贞言,像睡著了一般斜棚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上该窗,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天弟蚀,我揣著相機與錄音,去河邊找鬼酗失。 笑死义钉,一個胖子當著我的面吹牛,可吹牛的內容都是我干的规肴。 我是一名探鬼主播捶闸,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼夜畴,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了删壮?” 一聲冷哼從身側響起贪绘,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎央碟,沒想到半個月后税灌,有當地人在樹林里發(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡亿虽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年菱涤,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片洛勉。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡粘秆,死狀恐怖,靈堂內的尸體忽然破棺而出收毫,到底是詐尸還是另有隱情攻走,我是刑警寧澤,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布此再,位于F島的核電站陋气,受9級特大地震影響,放射性物質發(fā)生泄漏引润。R本人自食惡果不足惜巩趁,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望淳附。 院中可真熱鬧议慰,春花似錦、人聲如沸奴曙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽洽糟。三九已至炉菲,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間坤溃,已是汗流浹背拍霜。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留薪介,地道東北人祠饺。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像汁政,于是被迫代替她去往敵國和親道偷。 傳聞我的和親對象是個殘疾皇子缀旁,可洞房花燭夜當晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內容

  • JavaScript 1 初識JavaScript 1.1 JavaScript 是什么 JavaScript 是...
    SY閱讀 230評論 0 2
  • [if !supportLists]第一章 [endif]基本語法 [if !supportLists]一、[en...
    海綿寶寶_b8a2閱讀 511評論 0 0
  • 一勺鸦、類型轉換方法 1并巍、Boolean() 所有非0都為true,所有非空的字符也為true换途;0履澳,undefined...
    柒零叁閱讀 207評論 0 1
  • JS 1、js簡介 JavaScript是一種基于對象的客戶端的腳本語言 是一種弱類型的動態(tài)腳本語言 弱類型:對數...
    前端陳陳陳閱讀 230評論 0 2
  • JS 1怀跛、js簡介 JavaScript是一種基于對象的客戶端的腳本語言 是一種弱類型的動態(tài)腳本語言 弱類型:對數...
    北冥有魚_425c閱讀 193評論 0 1