JavaScript中的使用技巧有哪些

這篇文章主要介紹了JavaScript中的使用技巧有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括比如網(wǎng)站建設(shè)、比如網(wǎng)站制作、比如網(wǎng)頁制作以及比如網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，比如網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到比如省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

&& 和 || 的妙用

有時(shí)候我們需要在某個(gè)函數(shù)或變量為 true 時(shí)執(zhí)行另外一個(gè)函數(shù)。例如:

const task1 = () => {
 console.log('執(zhí)行 task1');
 return Math.random() >= 0.5;
}

const task2 = () => console.log('task1 執(zhí)行成功后執(zhí)行 task2');
if (task1()) task2();

上面的 if 語句可以使用 && 直接簡寫為:

task1() && task2();

如果還要在 task1 失敗(也就是task1返回false)后執(zhí)行 task3, 可以使用:

const task3 = () => console.log('task1 執(zhí)行失敗后執(zhí)行 task3');
task1() && task2() || task3();

本質(zhì)上還是利用了 && 和 || 的短路特性。

其實(shí)這里使用條件運(yùn)算符也是可以的:

task1() ? task2() : task3();

下面展示一個(gè)我最近使用 react hooks 開發(fā)的項(xiàng)目的的一個(gè)代碼片段:

const ProfileItem = (props) => {
 const { name, value, render } = props;

 return (
  <div className="profile-item">
   <span className="item-name">{name}</span>
   <form action="">
    {/* 根據(jù)是否有 render 這個(gè) props 來返回不同的內(nèi)容 */}
    {render && render(props) || <SimpleProfileItemContent value={value}/>}
   </form>
  </div>
 )
}

函數(shù)默認(rèn)值

ES5 版本

使用短路或操作符來設(shè)置函數(shù)默認(rèn)值的方式其實(shí)很常見。但是有一些坑，下面展示的代碼中當(dāng)默認(rèn)值參數(shù)為一個(gè)數(shù)字時(shí)，傳參為 0 還是會(huì)使用默認(rèn)值，必須對 y 為 0 的時(shí)候單獨(dú)進(jìn)行判斷。

const pow = (x, y) => {
 y = y || 2;
 
 let result = 1;
 for (let i = 0, max = y; i < max; i++) {
  result *= x;
 }

 return result;
}

console.log(pow(2)); // => 4
console.log(pow(2, 3)); // => 8

// 當(dāng) y 傳值為 0 時(shí), y 取值 2
console.log(pow(2, 0)); // => 4

ES6 版本

ES6 在語法層面提供的默認(rèn)值語法就靠譜的多了

const pow = (x, y=2) => {
 let result = 1;
 for (let i = 0, max = y; i < max; i++) {
  result *= x;
 }

 return result;
}

console.log(pow(2)); // => 4
console.log(pow(2, 3)) // => 8
console.log(pow(2, 0)); // => 1

類數(shù)組轉(zhuǎn)數(shù)組

類數(shù)組指的是像 arguments ，jquery 對象一樣可以使用下標(biāo)訪問還有 length 屬性的和數(shù)組很像但并不是數(shù)組的一類對象。

類數(shù)組沒有 slice, map 等集合函數(shù)，這也是為什么我們有時(shí)候需要將類數(shù)組轉(zhuǎn)換成數(shù)組的原因。

function func() {
 for (let i = 0, max = arguments.length; i < max; i++) {
  console.log(arguments[i]);
 }

 console.log(Array.isArray(arguments)); // => false
 // 類數(shù)組沒有 slice, forEach, map 等集合函數(shù)
 console.log(arguments.slice === undefined); // => true
}

func('Google', 'facebook', 'Microsoft'); 
// => 
// Google
// facebook
// Microsoft

ES5 中的轉(zhuǎn)換方法

將 Array 原型中的 slice 方法綁定到 arguments 對象上調(diào)用，并且不傳參數(shù)目的為了讓其返回所有的元素。

function func() {
 const array = Array.prototype.slice.call(arguments);
 console.log(array.slice(0, 1));
}

func('Google', 'facebook', 'Microsoft'); // => [ 'Google' ]

ES6 中的轉(zhuǎn)換方法

ES6 將類數(shù)組轉(zhuǎn)換成數(shù)組的方法多一些。

使用擴(kuò)展運(yùn)算符

function func() {
 console.log([...arguments])
}

func('Google', 'facebook', 'Microsoft'); // [ 'Google', 'facebook', 'Microsoft' ]

使用 Array.from

function func() {
 console.log(Array.from(arguments))
}

func('Google', 'facebook', 'Microsoft'); // [ 'Google', 'facebook', 'Microsoft' ]

構(gòu)造一個(gè)連續(xù)整數(shù)的數(shù)組

這里就直接給出我覺得最好的方法了

// 輸出 2 開始連續(xù)的8個(gè)整數(shù)
const array = Array.from({ length: 8}).map((ele, index) => index + 2);
console.log(array); // => [ 2, 3, 4, 5, 6, 7, 8, 9 ]?
// 評論區(qū)指出有更簡潔的版本, Array.from 自帶的映射函數(shù)
const array = Array.from({ length: 8}, (ele, index) => index + 2);
console.log(array); // => [ 2, 3, 4, 5, 6, 7, 8, 9 ]?

函數(shù)參數(shù)使用解構(gòu)賦值

函數(shù)參數(shù)比較多的時(shí)候我們往往會(huì)讓參數(shù)直接接受一個(gè)配置對象。但是使用對象參數(shù)我們無法設(shè)置默認(rèn)值，在函數(shù)體中使用對象參數(shù)時(shí)還需要使用通過對象參數(shù)來訪問，當(dāng)訪問次數(shù)比較多或者嵌套比較深就會(huì)覺得不方便。在函數(shù)參數(shù)中使用解構(gòu)賦值就解決了上面的問題。

// 必須給對象參數(shù)設(shè)置默認(rèn)值, 不然傳參數(shù)時(shí)因?yàn)闆]有解構(gòu)對象會(huì)報(bào)錯(cuò)
const getUsers = ({
 offset=0,
 limit=1,
 orderBy="salary"
}={}) => {
 // 根據(jù)條件查詢數(shù)據(jù)庫返回用戶數(shù)據(jù)
 console.log({ offset, limit, orderBy });
}

getUsers({ offset: 10, limit: 20,orderBy: 'age' }); // => { offset: 10, limit: 20, orderBy: 'age' }
getUsers();// => { offset: 0, limit: 1, orderBy: 'salary' }

使用 !! 將其它類型轉(zhuǎn)換成 bool 型

console.log(!!{}); // true
console.log(!!0); // false
console.log(!![]); // true
console.log(!!undefined); // false

const httpGet = (url, retry) => {
 if (!!retry) {
  // 超時(shí)重發(fā)
 }
}

JSON.stringify

深度克隆

使用先序列化再反序列化這種方式來深度克隆對象在一般情況下很方便，缺點(diǎn)就是無法克隆函數(shù)以及繼承的屬性。
如果還要克隆函數(shù)屬性，推薦使用 lodash 的 cloneDeep。

const me = {
  name: 'lyreal666',
  age: 23,
  speak() {
    console.log(`Hello, I'm ly!`);
  }
}

const clonedMe = JSON.parse(JSON.stringify(me));
console.log(clonedMe); // => { name: 'lyreal666', age: 23 }
console.log(clonedMe.speak === undefined); // => true

使用第二個(gè)和第三參數(shù)

JSON.stringify 的第二個(gè)參數(shù)是用來對屬性值進(jìn)行處理的，第三個(gè)參數(shù)則是用來指定輸出的 json 字符串的縮進(jìn)長度，可以傳數(shù)字也可以傳字符串。

const me = {
  name: 'lyreal666',
  age: 23,
  speak() {
    console.log(`Hello, I'm ly!`);
  }
}

const jsonStr = JSON.stringify(me, (key, value) => key === 'name' ? '老余' : value, 2);

console.log(jsonStr);
/* =>
{
 "name": "老余",
 "age": 23
}
*/

優(yōu)雅的遍歷對像

使用解構(gòu)賦值和 Object.entries。

const me = {
  name: 'lyreal666',
  age: 23,
  speak() {
    console.log(`Hello, I'm ly!`);
  }
}

for (const [key, value] of Object.entries(me)) {
  console.log(`${key}: ${value}`);
}

/* =>
name: lyreal666
age: 23
speak: speak() {
    console.log(`Hello, I'm ly!`);
  }
*/

清空數(shù)組的最快方法

評論區(qū)有人說這種直接修改 length 的做法是有問題的, 我之前也看過關(guān)于清空數(shù)組的方法的討論, 但是我覺得一般情況下這樣用是沒什么問題的, 既簡單, 又不用重新分配內(nèi)存給新數(shù)組。

const array = [1, 2, 3, 4];
array.length = 0;
console.log(array); // => []

// 網(wǎng)友指出可以更好的方式是直接賦值空數(shù)組
let array = [1, 2, 3, 4];
array = [];

判斷一個(gè)整數(shù)是否是 -1

// ~ 操作符的運(yùn)算規(guī)律可以簡單記作將加一的結(jié)果取反
console.log(~1); // => -2
console.log(~0); // => -1
console.log(~(-3)); // => 2
console.log(~(-1)); // => 0

const number = -2;

// 判斷一個(gè)數(shù)是否為 -1
if (!~number) {
  // 當(dāng) number 是 -1 的操作...
}

立即執(zhí)行函數(shù)

立即執(zhí)行函數(shù)可以讓我們的代碼中的變量不污染外部變量，常見的使用方式是像下面這樣的。

// 使用括號將函數(shù)括起來調(diào)用
(function(window, $) {
  // 內(nèi)部代碼
}) (window, jQuery)

更優(yōu)雅的方式是下面這種，事實(shí)上很多其它的算術(shù)運(yùn)算符比如 +, -, *, ~ 等也是可以的。

! function(window, $) {
  // 內(nèi)部代碼
} (window, jQuery)

// 還可以使用 +, -, * 等
+ function(window, $) {
  // 內(nèi)部代碼
} (window, jQuery)

// 更神奇的是還可以用 new, typeof 等操作符
new function(window, $) {
  // 內(nèi)部代碼
} (window, jQuery)；

使用 set 來對數(shù)組去重復(fù)

console.log([...new Set([1, 3, 1, 2, 2, 1])]); // => [ 1, 3, 2 ]

使用 reduce 連乘或連加

const array = [ 1, 2, 3, 4];
// 連加
console.log(array.reduce((p, c) => p + c)); // => 10
// 連乘
console.log(array.reduce((p, c) => p * c)); // => 24

取整

Math 中的一堆取整函數(shù)這里就不說了，主要是提一些比較巧妙地取整方式。

console.log(~~3.14); // => 3
console.log(~~(-2.5)); // => -2

console.log(6.18 | 0); // => 6
console.log(-3.6 | 0); // => -3

console.log(9.9 >> 0); // => 9
console.log(-2.1 >> 0); // => -2

// superagent 是一個(gè)很實(shí)用的發(fā)送 http 請求的 node 模塊，它對返回碼的處理就用到了 |
var type = status / 100 | 0;

// status / class
res.status = status;
res.statusType = type;

// basics
res.info = 1 == type;
res.ok = 2 == type;
res.clientError = 4 == type;
res.serverError = 5 == type;
res.error = 4 == type || 5 == type;

使用 + 將其它類型轉(zhuǎn)換成 number 類型

console.log(+'3.14'); // => 3.14
console.log(typeof +'3.14') // => number

const sleep = (milliseconds) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(), milliseconds);
    });
}

// 當(dāng)然這里可以考慮使用 console.time 來測試
! async function main() {
  const start = +new Date();
  await sleep(3000);
  const end = +new Date();
  console.log(`執(zhí)行了${end - start}`); // 執(zhí)行了 3002
}();

使用科學(xué)計(jì)數(shù)法表示大數(shù)字

const str1 = 'hello';
const str2 = ' world'

console.time('測試 + 拼接字符串');
for (let i = 0; i < 200000000; i++) {
  const joinedStr = str1 + str2;
}
console.timeEnd('測試 + 拼接字符串');

console.time('測試模板字符串拼接字符串');
// 使用科學(xué)計(jì)數(shù)法比打 8 個(gè) 0 方便不少
for (let i = 0; i < 2E8; i++) {
  const joinedStr =`${str1}${str2}`;
}
console.timeEnd('測試模板字符串拼接字符串')

/* =>
測試 + 拼接字符串: 3238.037ms
測試模板字符串拼接字符串: 3680.225ms
*/

交換變量值

直接利用解構(gòu)賦值

let a = 666;
let b = 999;
[a, b] = [b, a];
console.log({ a, b }); // => { a: 999, b: 666 }

獲取隨機(jī)字符串

截取下標(biāo) 2 開始后的字符串是因?yàn)椴恍枰?Math.random() 返回的小數(shù)構(gòu)成的字符串的 0. 這兩個(gè)字符。使用 36 進(jìn)制可以制造字符種類更多些的隨機(jī)字符串

console.log(Math.random().toString(16).substring(2)); // 13位 => 45d9d0bb10b31
console.log(Math.random().toString(36).substring(2)); // 11位 => zwcx1yewjvj

扁平化數(shù)組

ES 2019 新增了 Array.prototype.flat，目前 chrome 最新正式版 73.0.3683.103 已經(jīng)支持了, node 最新的 LTS 10.15.3 還不支持, node 最新開發(fā)版 11.13.0 是支持的。這里貼一個(gè)在掘金一個(gè)兄弟面經(jīng)里面看到的比較 hack 的方法，這里要注意根據(jù)情況做類型轉(zhuǎn)換。

const array = [1, [2, [3, 4], 5], 6, 7];
console.log(array.toString().split(',').map(ele => Number.parseInt(ele))); // => [ 1, 2, 3, 4, 5, 6, 7 ]

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript中的使用技巧有哪些”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

分享文章：JavaScript中的使用技巧有哪些
標(biāo)題鏈接：http://muchs.cn/article12/gjspgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、App設(shè)計(jì)、做網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)公司、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)