小編給大家分享一下JavaScript的編碼技巧，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
目前創(chuàng)新互聯(lián)公司已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、新區(qū)網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
注意：下面的代碼對(duì)比沒有絕對(duì)的正確和錯(cuò)誤，有些寫法的使用場(chǎng)景會(huì)比較單一，根據(jù)大家的習(xí)慣和喜好判斷即可，如果有更好或不同意見歡迎留言交流哦～
1. 短路操作：
當(dāng)我們遇到這樣的情況的時(shí)候，你會(huì)是
const res1 = item.a ? item.a : item.b // 看起來很是簡(jiǎn)潔const res2 = item.a ? item.b : item.a // 看起來很是簡(jiǎn)潔
還是利用js邏輯運(yùn)算來實(shí)現(xiàn)呢？
const res1 = item.a || item.b;const res1 = item.a && item.b;
2. 通過條件判斷給變量賦值布爾值的正確姿勢(shì)：
當(dāng)我們需要比較單一的值來獲取結(jié)果的時(shí)候，利用直接的運(yùn)算，要不if判斷要簡(jiǎn)潔的多～
重慶分公司
重慶分公司
let res;if(a === '余光'){
res = true }else{
res = false;}// good?const res = a === '余光'3. 在if中判斷數(shù)組長(zhǎng)度不為零的正確姿勢(shì)：
場(chǎng)景：如果數(shù)組內(nèi)存在元素，則進(jìn)行操作：
// badif (arr.length !== 0) {
// todo}// goodif (arr.length) {
// todo}以此類推，當(dāng)我們需要判斷數(shù)組的長(zhǎng)度為為空時(shí)：
if(!arr.length){
// todo}4. 使用includes簡(jiǎn)化if判斷：
場(chǎng)景：如果參數(shù)等于1、2、3、4，就進(jìn)行下一步操作
寫第一版代碼：
if(a === 1 || a === 2 || a === 3 || a ===4){
// todo}看完感覺異常的頭疼，遂修改為：
if([1,2,3,4].includes(a)){
// todo}5. 使用some判斷是否存在符合條件的值：
場(chǎng)景：尋找是否存在價(jià)格小于n的商品
const itemList = [
{name: '手機(jī)', price: 1000},
{name: '手機(jī)殼', price: 10},
{name: '帽子', price: 50},]function checkData(n){
for(let i = 0; i < item.length; i++){
if(item.price < n){
return true;
}
}
return false;}方法寫完了，但既然js為我們提供了那么多數(shù)組的方法，用起來：
const itemList = [
{name: '手機(jī)', price: 1000},
{name: '手機(jī)殼', price: 10},
{name: '帽子', price: 50},]const checkData = (n) => itemList.some(item => item.price < n)再次優(yōu)化
const checkData = (n, itemList) => itemList.some(item => item.price < n)
6. 使用filter方法過濾原數(shù)組，形成新數(shù)組
情景：剔除某些不需要的元素，例如每一條數(shù)據(jù)的id是之后操作的必須數(shù)據(jù)，為了剔除缺陷數(shù)據(jù)，我們會(huì)這么做：
const data = [
{ name: '手機(jī)', price: 1000, id: 1 },
{ name: '手機(jī)殼', price: 10, id: 2 },
{ name: '帽子', price: 50, id: '' },]// badlet newArr = []for (let i = 0; i < data.length; i ++) {
if (data.id) {
newArr.push(arr[i])
}}掌握“過濾”思想，我們這樣處理：
const afterData = data.filter(item => item.id);
7. 使用map對(duì)數(shù)組內(nèi)的元素進(jìn)行批量處理：
情景：在涉及到價(jià)格的交互中，我們拿到的價(jià)格字段通常是以分為單位的，我們要怎么做展示呢？
const data = [10000, 20000, 980000]const afterData = data.map(price => price / 100)
8. 解構(gòu)數(shù)組進(jìn)行變量值的替換
情景：需要將兩個(gè)值進(jìn)行交換
// badlet a = 1, b = 2let temp = a a = b b = temp// goodlet a = 1, b = 2[b, a] = [a, b]
9. 解構(gòu)融到代碼中：
情景：獲取對(duì)象中的某個(gè)元素，并設(shè)置默認(rèn)值
寫第一版代碼：
// badsetForm (person) {
this.name = person.name this.age = person.age
}// goodsetForm ({name = '余光', age}) {
this.name = name this.age = age
}10. 多個(gè)方法合體時(shí)都能做什么？（舉例一）
這是最后一條代碼簡(jiǎn)潔思路，拿一個(gè)具體的場(chǎng)景距離，拋磚引玉，歡迎大家在評(píng)論區(qū)留言～
場(chǎng)景：
前端拿到的數(shù)據(jù)是
data = [
{ id: 1, name: '一級(jí)標(biāo)題-1' },
{ id: 2, name: '一級(jí)標(biāo)題-2' },
{ id: 3, name: '二級(jí)標(biāo)題-1', pid: 1 },
{ id: 3, name: '一級(jí)標(biāo)題-3' },
{ id: 3, name: '二級(jí)標(biāo)題-2', pid: 2 },]我們需要形成及聯(lián)關(guān)系，如：
needData = [
{
id: 1,
name: '一級(jí)標(biāo)題-1',
children: [
{ id: 3, name: '二級(jí)標(biāo)題-1', pid: 1 }
]
},
{
id: 2,
name: '一級(jí)標(biāo)題-2',
children: [
{ id: 5, name: '二級(jí)標(biāo)題-2', pid: 2 }
]
},
{ id: 4, name: '一級(jí)標(biāo)題-3' },]于是我借助數(shù)組提供的多個(gè)api：
newList = data.reduce((result, item, _, arr) => {
if (!item.pid) {
return [...result, item];
}
const parentItem = arr.find(({ id }) => id === item.pid);
if (parentItem) {
const { children = [] } = parentItem;
parentItem.children = [...children, item];
}
return result;}, []);思路：
尋找存在父級(jí)的元素
將它發(fā)到正確的位置上
返回所有沒有父級(jí)字段（pid）的數(shù)據(jù)
如果大家有更多類似的思路和操作請(qǐng)一定要留言哦
看完了這篇文章，相信你對(duì)“JavaScript的編碼技巧”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
