JavaScript中常用的簡(jiǎn)潔高級(jí)技巧總結(jié)
前言
編程是一件很快樂(lè)的事，實(shí)現(xiàn)一個(gè)目的，我們可以有很多方法路徑，在這篇文章我們介紹一些JavaScript的奇技淫巧，僅供大家參考，各路大神在平時(shí)的代碼編寫時(shí)，如很多簡(jiǎn)潔高效的書寫方式；
下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧
一、數(shù)據(jù)類型檢測(cè)
1.1 typeof
typeof操作符返回一個(gè)字符串，表示未經(jīng)計(jì)算的操作數(shù)的類型；該運(yùn)算符數(shù)據(jù)類型（返回字符串，對(duì)應(yīng)列表如圖）
1.2 instanceof
var str = "This is a simple string";
var num = 1111;
var boolean = true;
var und = undefined;
var nl = null;
var sb = Symbol('1111');
var obj = {}; // 非原始類型數(shù)據(jù)字面量定義
console.log(str instanceof String); // false
console.log(num instanceof Number); // false
console.log(boolean instanceof Boolean); // false
console.log(nl instanceof Object); // false
console.log(sb instanceof Symbol); // false
console.log(obj instanceof Object); // true
var strN = new String("This is a simple string");
var numN = new Number(1111);
var booleanN = new Boolean(true);
var objN = new Object();
console.log(strN instanceof String); // true
console.log(numN instanceof Number); // true
console.log(booleanN instanceof Boolean); // true
console.log(objN instanceof Object); // true
instanceof運(yùn)算符用于測(cè)試構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在對(duì)象的原型鏈中的任何位置；
由上結(jié)果，字面量產(chǎn)出的原始數(shù)據(jù)類型無(wú)法使用instanceof判斷。
1.3 Object.propotype.toString
Object.prototype.toString.call('string'); //"[object String]"
Object.prototype.toString.call(1111); //"[object Number]"
Object.prototype.toString.call(true); //"[object Boolean]"
Object.prototype.toString.call(null); //"[object Null]"
Object.prototype.toString.call(undefined); //"[object Undefined]"
Object.prototype.toString.call(Symbol('111')); //"[object Symbol]"
Object.prototype.toString.call({}); //"[object Object]"
上述方法最為便捷有效
1.4 constructor
比較對(duì)象的構(gòu)造函數(shù)與類的構(gòu)造函數(shù)是否相等
var a = {}
a.constructor === Object // true
var b = '111';
b.constructor === String // true
var strN = new String('11111');
strN.constructor === String // true
var c = true;
c.constructor === Boolean // true
var d = Symbol('symbol')
d.constructor === Symbol // true
1.5 propotype
比較對(duì)象的原型與構(gòu)造函數(shù)的原型是否相等
var a = {}
a.__proto__ === Object.prototype // true
var t = new Date();
t.__proto__ === Date.prototype // true
var str = 'sting';
str.__proto__ === String.prototype // true
var strN = new String('11111');
strN.__proto__ === String.prototype // true
二、數(shù)據(jù)特殊操作
2.1 交換兩個(gè)值
2.1.1 利用一個(gè)數(shù)異或本身等于0和異或運(yùn)算符合交換率
var a = 3; var b = 4 a ^= b; // a = a ^ b b ^= a; a ^= b; console.log(a, b);
2.1.2 使用ES6解構(gòu)賦值
let a = 1; let b = 2; [b, a] = [a, b]; console.log(a, b);
2.2 小數(shù)取整
var num = 123.123 // 常用方法 console.log(parseInt(num)); // 123 // “雙按位非”操作符 console.log(~~ num); // 123 // 按位或 console.log(num | 0); // 123 // 按位異或 console.log(num ^ 0); // 123 // 左移操作符 console.log(num << 0); // 123
2.3 數(shù)字金額千分位格式化
2.3.1 使用Number.prototype.toLocaleString()
var num = 123455678;
var num1 = 123455678.12345;
var formatNum = num.toLocaleString('en-US');
var formatNum1 = num1.toLocaleString('en-US');
console.log(formatNum); // 123,455,678
console.log(formatNum1); // 123,455,678.123
2.3.2 使用正則表達(dá)式
var num = 123455678;
var num1 = 123455678.12345;
var formatNum = String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
var formatNum1 = String(num1).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
console.log(formatNum); // 123,455,678
console.log(formatNum1); // 123,455,678.12,345
三、對(duì)象數(shù)據(jù)常用操作
3.1 深度克隆技巧
3.1.1 JSON.stringify 轉(zhuǎn)換成字符， JSON.parse重新生成JSON數(shù)據(jù)類型
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
var obj = {
number: 1,
string: 'abc',
bool: true,
undefined: undefined,
null: null,
symbol: Symbol('s'),
arr: [1, 2, 3],
date: new Date(),
userInfo: {
name: 'Better',
position: 'front-end engineer',
skill: ['React', 'Vue', 'Angular', 'Nodejs', 'mini programs']
},
func: function () {
console.log('hello better');
}
}
console.log(deepClone(obj))
從打印結(jié)果可以得出以下結(jié)論：
- undefined、symbol、function 類型直接被過(guò)濾掉了
- date 類型被自動(dòng)轉(zhuǎn)成了字符串類型
3.1.2 常用方式 簡(jiǎn)單遞歸
function deepClone(obj) {
var newObj = obj instanceof Array ? [] : {};
for (let i in obj) {
newObj[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
}
return newObj;
}
var obj = {
number: 1,
string: 'abc',
bool: true,
undefined: undefined,
null: null,
symbol: Symbol('s'),
arr: [1, 2, 3],
date: new Date(),
userInfo: {
name: 'Better',
position: 'front-end engineer',
skill: ['React', 'Vue', 'Angular', 'Nodejs', 'mini programs']
},
func: function () {
console.log('hello better');
}
}
console.log(deepClone(obj))
從打印的結(jié)果來(lái)看，這種實(shí)現(xiàn)方式還存在很多問(wèn)題：這種方式只能實(shí)現(xiàn)特定的object的深度復(fù)制（比如對(duì)象、數(shù)組和函數(shù)），不能實(shí)現(xiàn)null以及包裝對(duì)象Number，String ，Boolean，以及Date對(duì)象，RegExp對(duì)象的復(fù)制。
3.2 對(duì)象遍歷方式
3.2.1 for-in
function A() {
this.a = 1
this.b = 1
}
A.prototype = {
c: 1,
d: 2
}
var a = new A()
for(var i in a) {
console.log(i)
}
由上打印結(jié)果可知，for-in 會(huì)遍歷對(duì)象屬性，包括原型鏈中的屬性
3.2.2 Object.entries()
function A() {
this.a = 1
this.b = 1
}
A.prototype = {
c: 1,
d: 2
}
var a = new A()
var et = Object.entries(a)
console.log(et)
由上結(jié)果可知，entries 返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組
3.2.3 Object.keys()、 Object.values()
function A() {
this.a = 1
this.b = 1
}
A.prototype = {
c: 1,
d: 2
}
var a = new A()
var keys = Object.keys(a)
var values = Object.values(a)
console.log(keys, values)
由上結(jié)果可知，keys, values 返回一個(gè)給定對(duì)象自身可枚舉屬性數(shù)組,自身可枚舉屬性值的數(shù)組
四、數(shù)組常用操作
4.1 數(shù)組去重
4.1.1 Set 去重
var arr = [1,2,1,1,22,4,5,6]; arr1 = [...new Set(arr)];
4.1.2 結(jié)合使用數(shù)組filter方法和indexOf()方法
var arr = [1, 2, 3, 2, 6, '2', 3, 1];
function uniqueArr (arr) {
return arr.filter(function (ele, index, array) {
// 利用數(shù)組indexOf()方法，返回找到的第一個(gè)值的索引
// 如果數(shù)組元素的索引值與indexOf方法查找返回的值不相等，則說(shuō)明該值重復(fù)了，直接過(guò)濾掉
return array.indexOf(ele) === index;
})
}
4.2 多維數(shù)組一行代碼實(shí)現(xiàn)一維轉(zhuǎn)換
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
var resultArr = arr.toString().split(',').map(Number);
console.log(resultArr); // [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]
4.3 一行代碼實(shí)現(xiàn)獲取一個(gè)網(wǎng)頁(yè)使用了多少種標(biāo)簽
[...new Set([...document.querySelectorAll('*')].map(node => node.tagName))].length;
4.4 如何實(shí)現(xiàn)a == 1 && a == 2 && a == 3
4.4.1 改寫數(shù)組的toString方法
var a = [1, 2, 3]; // a.join = a.shift; // a.valueOf = a.shift; a.toString = a.shift; console.log(a == 1 && a == 2 && a == 3); // true
原理：當(dāng)復(fù)雜類型數(shù)據(jù)與基本類型數(shù)據(jù)作比較時(shí)會(huì)發(fā)生隱性轉(zhuǎn)換，會(huì)調(diào)用toString()或者valueOf()方法
4.4.2 改寫對(duì)象的toString方法
var a = {
value: 1,
toString: function () {
return a.value++;
}
}
console.log(a == 1 && a == 2 && a == 3); // true
4.5 統(tǒng)計(jì)字符串中相同字符出現(xiàn)的次數(shù)
var str = 'aaabbbccc66aabbc6';
var strInfo = str.split('').reduce((p, c) => (p[c]++ || (p[c] = 1), p), {});
console.log(strInfo); // {6: 3, a: 5, b: 5, c: 4}
4.6 將類數(shù)組對(duì)象轉(zhuǎn)成數(shù)組
4.6.1 使用Array.prototype.slice
var likeArrObj = {
0: 1,
1: 2,
2: 3,
length: 3
}
var arr1 = Array.prototype.slice.call(likeArrObj); // 或者使用[].slice.call(likeArrObj);
console.log(arr1); // [1, 2, 3]
4.6.2 使用Array.from
var likeArrObj = {
0: 1,
1: 2,
2: 3,
length: 3
}
var arr = Array.from(likeArrObj);
console.log(arr); // [1, 2, 3]
4.6.3 使用Object.values (此處省略)
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了JS寫滑稽笑臉運(yùn)動(dòng)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
js實(shí)現(xiàn)的點(diǎn)擊數(shù)量加一可操作數(shù)據(jù)庫(kù)
這篇文章主要介紹了js如何實(shí)現(xiàn)的點(diǎn)擊數(shù)量加一操作數(shù)據(jù)庫(kù),需要的朋友可以參考下2014-05-05
使用javascript做的一個(gè)隨機(jī)點(diǎn)名程序
這篇文章主要介紹了使用javascript做的一個(gè)隨機(jī)點(diǎn)名程序，經(jīng)測(cè)試，效果相當(dāng)不錯(cuò),需要的朋友可以參考下2014-02-02
JavaScript彈簧振子超簡(jiǎn)潔版 完全符合能量守恒,胡克定理
完全符合能量守恒,胡克定理的JavaScript彈簧振子(超簡(jiǎn)潔版,超越第一版!)2009-10-10
這篇文章主要介紹了淺談js數(shù)組splice刪除某個(gè)元素爬坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
理解Javascript_09_Function與Object
在《理解Javascript_08_函數(shù)對(duì)象》中講解了很多函數(shù)對(duì)象的問(wèn)題，同時(shí)也留下了許多疑問(wèn)，今天讓我們來(lái)解答部分問(wèn)題。2010-10-10
微信小程序圖片選擇區(qū)域裁剪實(shí)現(xiàn)方法
本篇文章主要介紹了微信小程序圖片選擇區(qū)域屏裁剪實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
淺析JS中的 map, filter, some, every, forEach, for in, for of 用法總
本文是小編給大家總結(jié)的關(guān)于javascript中的map, filter, some, every, forEach, for in, for of 用法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-03-03
微信小程序如何保證每個(gè)頁(yè)面都已經(jīng)登陸詳解
前段時(shí)間發(fā)布了一個(gè)微信小程序的簡(jiǎn)單登錄,但遇到一個(gè)問(wèn)題,怎么確保用戶每個(gè)頁(yè)面都已經(jīng)登陸了呢,這篇文章主要給大家介紹了關(guān)于微信小程序如何保證每個(gè)頁(yè)面都已經(jīng)登陸的相關(guān)資料,需要的朋友可以參考下2021-11-11
js+html5實(shí)現(xiàn)復(fù)制文字按鈕
這篇文章主要為大家詳細(xì)介紹了js+html5實(shí)現(xiàn)復(fù)制文字按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07