常工作中,我確實經常去幫大家review代碼,長期以來,我發現有些個功能函數,JS其實可以稍微調整一下,或者換個方式來處理,代碼就會看起來更清晰,更簡潔,甚至效率更高,主要是還更好理解。
下面我列舉5個案例,我們一起來看一下
先來看一段同時使用filter和map方法遍歷數組的代碼。我相信這種場景大家一定碰到過。為了說明問題,這里我用簡單的數字內容來舉個例子。
上面代碼這樣寫,沒什么問題,而且方法的連用也是比較推薦的處理方式, 但是,還是請多想想,其實我們有更好的方式來處理這一類問題。
現在我們看使用FlatMap如何實現的
使用FlatMap的好處是
只要遍歷一遍,而且不產生中間多余數組
日常工作中寫的比較多的數組方法有filter(),find(),map(),reduce(),在必要的場景下,我們也建議將這些個方法連起來一起調用。但是,一定要注意調用順序,否則也會影響效率問題。
比如下面這樣:
仔細看上面這段代碼,你就會發現
如果我們首先使用過濾器,然后排序,這樣執行就能提高效率
你寫的代碼一定要讓大家看的懂,代碼要簡潔,然而,有些方法它就出于這個目的創造的,如果你又不用,那就太可惜了,比如reduce方法。
舉個例子,我們先從接口中拉出一段數據,然后對數據內容進行分類處理,像下面代碼這樣
我看到大多數前端開發人員都會使用forEach方法或者錯誤的使用map方法去處理,相比之下,實際上這里特別適合使用reduce方法
看起來會更清晰而且更容易理解
上面這張很清晰明了的拆解了URL的每一部分
關于頁面的URL我們可以組裝也可以拆卸,這里說一下URL各部分的組裝問題,你現在或者曾經肯定處理過URL拼接的問題,代碼可能是這么寫的
這樣寫雖然能夠實現,但是代碼看起來很混亂,很可能會被破壞,并且每次都需要你在最后添加一些規則,添加一些其他參數。
比如,你可能忘記添加/或者&符號就會導致錯誤,下面看看原生類怎么實現的,可以對比一下兩者區別
這樣看來,在處理URL組裝問題上是不是可以考慮使用原生類了?
提到生成器,大家可能只是聽過,或者知道怎么使用,而實際項目中很少去用。實際上它有很多使用場景。
使用生成器能夠節省很多代碼,代碼也非常清晰。如,進行異步操作或者按需循環或者按需加載時。
看這段代碼:
上面代碼中main函數,可以根據用戶交互或者其它技巧來調用。因為這里不希望無限加載。
好了,就說這幾點,日常工作中,希望大家都寫出高質量的代碼。
avaScript基礎概念
JS的組成:
1.ECMAScript:Js語法
2.DOM:文檔對象模型 , 文檔:html文檔 ,操作html文檔 (操作html文檔的工具)
3.BOM:瀏覽器對象模型 , 操作瀏覽器的工具
JS的三種書寫方式
行內式,內嵌式,外部鏈接
JavaScript輸入·輸出語句
alert(msg) 瀏覽器彈出警告框
consle.log(msg) 瀏覽器控制臺打印輸出信息
prompt(info) 瀏覽器彈出輸入框 用戶可以輸入信息
我自己是一名從事了多年開發的web前端老程序員,目前辭職在做自己的web前端私人定制課程,今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關注我的頭條號并在后臺私信我:前端,即可免費獲取。
變量的概念
通俗:變量是用于存放數據的容器。 我們通過 變量名 獲取數據,甚至數據可以修改。
變量理解:變化的量,變化的內容,變化的數據
變量存儲數據理解:程序運行過程中的數據存儲在內存中,但是內存比較大,為了方便管理,所以將內存分成一個一個的盒子(變量)來存儲
變量的使用
1.聲明變量 var 變量名;var age;(聲明一個 名稱為age 的變量)
2.變量的賦值 var 變量名 = 值; var age = 18; 聲明變量age同時賦值為 18
變量案例
var myname = '旗木卡卡西'; // 字符串 var address = '火影村'; var age = 30; // 數字 var email = 'kakaxi@itcast.cn'; var gz = 2000; console.log(myname); console.log(address); console.log(age); console.log(email); console.log(‘gz’); // gz console.log(gz); // 2000
注意:
// 1. 用戶輸入姓名 存儲到一個 myname的變量里面 var myname = prompt('請輸入您的名字'); // prompt 做的事情: // (1). 彈出輸入框 , 用戶輸入內容:zs // (2). 將用戶輸入內容返回 ,相當于 :var myname = 'zs'; // 2. 輸出這個用戶名 alert(myname); // zs
變量命名規范
規則
由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成,如:usrAge, num01, _name ***
嚴格區分大小寫。var app; 和 var App; 是兩個變量
不能 以數字開頭。 18age 是錯誤的
不能 是關鍵字、保留字。例如:var、for、while
變量名必須有意義。 MMD BBD nl → age
遵守駝峰命名法。首字母小寫,后面單詞的首字母需要大寫。 myFirstName
推薦翻譯網站: 有道 愛詞霸
變量案例-交換兩個變量
// js 是編程語言有很強的邏輯性在里面: 實現這個要求的思路 先怎么做后怎么做 // 1. 我們需要一個臨時變量幫我們 // 2. 把apple1 給我們的臨時變量 temp // 3. 把apple2 里面的蘋果給 apple1 // 4. 把臨時變量里面的值 給 apple2 var temp; // 聲明了一個臨時變量為空 var apple1 = '青蘋果'; var apple2 = '紅蘋果'; temp = apple1; // 把右邊給左邊 apple1 = apple2; apple2 = temp; console.log(apple1); console.log(apple2);
簡單數據類型
JavaScript 中的簡單數據類型及其說明如下:
數字型范圍:JavaScript中數值的最大和最小值
alert(Number.MAX_VALUE); // 1.7976931348623157e+308 (10的正308次方)
alert(Number.MIN_VALUE); // 5e-324 5e-324 (10的負324次方)
數字型三個特殊值
alert(Infinity); // Infinity alert(-Infinity); // -Infinity alert(NaN); // NaN *** //課堂代碼: // 5. 無窮大 console.log(Number.MAX_VALUE * 2); // Infinity 無窮大 // 6. 無窮小 console.log(-Number.MAX_VALUE * 2); // -Infinity 無窮大 // 7. 非數字 console.log('pink老師' - 100); // NaN:字符串是無法與數字進行運算的,所以結果是一個非數字
isNaN
用來判斷一個變量是否為非數字的類型,返回 true 或者 false
var usrAge = 21; var isOk = isNaN(userAge); console.log(isNum); // false ,21 不是一個非數字 var usrName = "andy"; console.log(isNaN(userName)); // true ,"andy"是一個非數字
字符串型 String
字符串型可以是引號中的任意文本,其語法為 雙引號 “” 和 單引號’’
var strMsg = "我愛北京天安門~"; // 使用雙引號表示字符串 var strMsg2 = '我愛吃豬蹄~'; // 使用單引號表示字符串 // 常見錯誤 var strMsg3 = 我愛大肘子; // 報錯,沒使用引號,會被認為是js代碼,但js沒有這些語法
字符串引號嵌套
JS 可以用單引號嵌套雙引號 ,或者用雙引號嵌套單引號 (外雙內單,外單內雙)
var strMsg = '我是"高帥富"程序猿'; // 可以用''包含""
var strMsg2 = "我是'高帥富'程序猿"; // 也可以用"" 包含''
// 常見錯誤
var badQuotes = 'What on earth?"; // 報錯,不能 單雙引號搭配
字符串轉義符
類似HTML里面的特殊字符,字符串中也有特殊字符,我們稱之為轉義符。
轉義符都是 \ 開頭的,常用的轉義符及其說明如下:
字符串長度
var strMsg = "我是帥氣多金的程序猿!";
alert(strMsg.length); // 顯示 11
字符串拼接
//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world //1.2 數值字符串 "相加" alert('100' + '100'); // 100100 //1.3 數值字符串 + 數值 alert('11' + 12); // 1112 //以上的字符串拼接都沒有意義,一般我們字符串會與變量進行拼接
原文鏈接:https://blog.csdn.net/H_eartbeat/article/details/103102782
文講述了 9 條非常強大的 JavaScript 技巧。
作者 | Klaus
譯者 | 彎月,責編 | 屠敏
以下為譯文:
全部替換
我們知道string.replace函數只會替換第一次出現的位置。在正則表達式末尾添加 /g 即可替換所有出現。
var example = "potato potato";
console.log(example.replace(/pot/, "tom"));
// "tomato potato"
console.log(example.replace(/pot/g, "tom"));
// "tomato tomato"
提取唯一值
使用Set對象和spread操作符可以創建一個新的數組,僅包含唯一的值。
var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]
數字轉為字符串
只需要將其與空字符串連接。
var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number);
// string
字符串轉為數字
只需要使用 + 運算符。
注意這個技巧只能在“字符串形式的數字”上使用。
the_string = "123";
console.log(+the_string);
// 123
the_string = "hello";
console.log(+the_string);
// NaN
打亂數組的元素順序
var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function {
return Math.random - 0.5
}));
// [4, 8, 2, 9, 1, 3, 6, 5, 7]
多維數組扁平化
只需使用spread運算符。
var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = .concat(...entries);
// [1, 2, 5, 6, 7, 9]
短路條件
比如下面的例子:
if (available) {
addToCart;
}
只需將變量和函數寫到一起即可:
available && addToCart
動態屬性名
原來我以為必須先定義一個對象才能指定動態屬性名,其實不需要:
const dynamic = 'flavour';
var item = {
name: 'Coke',
[dynamic]: 'Cherry'
}
console.log(item);
// { name: "Coke", flavour: "Cherry" }
使用length屬性來改變數組大小或清空數組
只需要重寫數組的length即可。
要想改變數組大小:
var entries = [1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length = 4;
console.log(entries.length);
// 4
console.log(entries);
// [1, 2, 3, 4]
要想清空數組:
var entries = [1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length = 0;
console.log(entries.length);
// 0
console.log(entries);
//
原文:https://dev.to/razgandeanu/9-extremely-powerful-javascript-hacks-4g3p
本文為 CSDN 翻譯,轉載請注明來源出處。
【End】
*請認真填寫需求信息,我們會在24小時內與您取得聯系。