JS常見技巧

本文旨在日常學習與記錄端仰;簡書好久不見_)

你沛鸵,我也好久沒見V坪洹6厍弧均澳!

こんにちは!初めから始めましょう

1. 關于數組遍歷

for...of 與 for...in
// for in是遍歷鍵名,for of是遍歷鍵值符衔。

var arr = [4,3,5)
for(var i in arr){
  console.log(i);    // 0,1,2
}

for(var v of arr){
  console.log(v);    // 4,3,5
}

for in是循環(huán)遍歷對象找前;for of語法和for in語法很像,但它的功能卻豐富的多判族,它能循環(huán)很多東西,還可以實現對iterator對象的遍歷躺盛,而for in就是簡單的遍歷了。

具體參考:阮一峰的]阮一峰大神的es6入門里的 Iterator和for...of循環(huán)

2. ES6中的``
const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
       +  'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
       +  'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
       +  ' veniam, quis nostrud exercitation ullamco laboris\n\t'
       +  'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
       +  ' irure dolor in reprehenderit in voluptate velit esse.\n\t'

// 相當于下面這種只用引號的寫法

const lorem = `Lorem ipsum dolor sit amet, consectetur
        adipisicing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse.
    `
    
// 還有一種情況

const someLove = 'I have got ' + ye + 'yue' + yue + sheng

// 簡寫為:

const someLove = `I have got ${ye} yue ${yue} ${sheng}`
3. 變量賦值

將一個變量的值賦給另一個變量時形帮,首先需要確認原值不是null槽惫、未定義或者空值
可以通過編寫一個包含多個條件的判斷語句來實現:

if (variable1 !== null || variable !== undefined || variable1 !== ' ') {
  variable2 = variable1;
}

// 或者可以簡寫成:

const variable2 = variable1 || 'new'

// 測試代碼:

let variable1;
let variable2 = variable1 || ' ';
console.log(variable2 === ' ');   // true
variable1 = 'foo';
variable2 = variable1 || ' ';
console.log(variable1);   // foo
4.箭頭函數

這個就很熟悉了,使用起來也很方便辩撑,自己平常的使用還是少了界斜,之后加強使用吧!:霞健各薇!

function sayHi(name) {
    console.log('hello', name)
}

setTiemout(function(){
    console.log('Loader')
}, 2000)

list.forEach(function(item){
    console.log(item)
})

// 以上可以簡寫:

sayHi = name => console.log('Hello', name);

setTimeout( () => console.log('Loaded'), 2000);

list.forEach( item => console.log(item));
5. 隱式返回值

返回值是通常用來返回函數最終結果的關鍵字。只有一個語句的箭頭函數君躺,可以隱式返回結果(函數必須省略括號 ({})峭判,以便省略返回關鍵字)。

要返回多行文本(例如對象文本)棕叫,需要使用()而不是{}來包裹函數體林螃,這樣可以確保代碼以單個語句的形式進行求值。

function calc(diameter){
    return Math.PI * diameter
}

// 簡寫為:

calc = diameter => (
    Math.PI * diameter
)
6. 默認參數值

可以在函數聲明中定義默認值

function volume(l, w, h){
    w ? w : 3;
    h ? h : 4;
    return l * w * h;
}

// 可以簡寫為:
volume = (l, w = 3, h = 4) => (l * w * h);
colume(2);    // 24
7. 解構賦值

從數組或對象中快速提取

const observable = require('mobile/observer');
const action = require('mobile/action');
const run = require('mobile/run')

// 可以簡寫為:
import { observable, action, run } from  'mobile';

const from = this.props.from;
const friday = this.props.friday;
const chamming = this.porps.chamming;
const nical = this.props.nical;

// 可以簡寫為:
import {from, friday, chamming, nical} from this.props;

// 可以指定變量名
const { from, friday, chamming, nical:yang } = this.props;
8. 展開運算符

使用展開運算符可以替換某些數組函數

const odd = [1, 5, 3];
const number = [4, 5, 6].concat(odd);  // [1, 5, 3, 4, 5, 6]

// 可以簡寫為
const odd = [1, 5, 3];
const number = [4, 5, 6, ...odd]
console.log(number);    // [4, 5, 6, 1, 5, 3]

const arr = [1, 2, 3, 4];
const num = arr.splice();    // [1, 2, 3, 4]

可以這樣寫:
const arr = [1, 2, 3, 4];
const num = [...arr]      // [1, 2, 3, 4]

// 還可以這樣用:
const arr = [1, 2, 3]
const num = [1, ...arr, 2, 3];  // [1, 1, 2, 3, 2, 3]
9. 雙位操作符

可以用來代替 Math.floor()俺泣,而且它執(zhí)行相同的操作運算更快治宣。

Math.floor(4.9) === 4;   // true

// 可以簡寫為:
~~4.9 === 4;    // true
10.深復制對象

其實最簡單的方法就是:

JSON.parse(JSON.stringify(Object))

// 利用JSON序列化實現一個深拷貝
function deepClone(source){
  return JSON.parse(JSON.stringify(source));
}
var o1 = {
  arr: [1, 2, 3],
  obj: {
    key: 'value'
  },
  func: function(){
    return 1;
  }
};
var o2 = deepClone(o1);
console.log(o2); // => {arr: [1,2,3], obj: {key: 'value'}}

從例子就可以看到,源對象的方法在拷貝的過程中丟失了砌滞,這是因為在序列化JavaScript對象時侮邀,所有函數和原型成員會被有意忽略,這個實現可以滿足一些比較簡單的情況贝润,能夠處理JSON格式所能表示的所有數據類型绊茧,同時如果在對象中存在循環(huán)應用的情況也無法正確處理。

// 遞歸實現一個深拷貝
function deepClone(source){
   if(!source && typeof source !== 'object'){
     throw new Error('error arguments', 'shallowClone');
   }
   var targetObj = source.constructor === Array ? [] : {};
   for(var keys in source){
      if(source.hasOwnProperty(keys)){
         if(source[keys] && typeof source[keys] === 'object'){
           targetObj[keys] = source[keys].constructor === Array ? [] : {};
           targetObj[keys] = deepClone(source[keys]);
         }else{
           targetObj[keys] = source[keys];
         }
      } 
   }
   return targetObj;
}
// test example
var o1 = {
  arr: [1, 2, 3],
  obj: {
    key: 'value'
  },
  func: function(){
    return 1;
  }
};
var o3 = deepClone(o1);
console.log(o3 === o1); // => false
console.log(o3.obj === o1.obj); // => false
console.log(o2.func === o1.func); // => true

jQuery中的extend方法基本的就是按照這個思路實現的打掘,但是沒有辦法處理源對象內部循環(huán)引用的問題华畏,同時對Date鹏秋,Funcion等類型值也沒有實現真正的深度復制,但是這些類型的值在重新定義的時候一般都是直接覆蓋亡笑,所以也不會對源對象產生影響侣夷,從一定程度上來說也算是實現了一個深拷貝。

--- 在下分割線君仑乌,next to meet you ----

以上就是本文的奇伎淫巧百拓,感謝各位看官的品嘗,簡書晰甚,我們下回約Q么!厕九!哇咔咔(以后爭取一個禮拜一篇吧蓖捶!?? ?? ?? )
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市扁远,隨后出現的幾起案子俊鱼,更是在濱河造成了極大的恐慌,老刑警劉巖畅买,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件亭引,死亡現場離奇詭異,居然都是意外死亡皮获,警方通過查閱死者的電腦和手機焙蚓,發(fā)現死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來洒宝,“玉大人购公,你說我怎么就攤上這事⊙愀瑁” “怎么了宏浩?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長靠瞎。 經常有香客問我比庄,道長,這世上最難降的妖魔是什么乏盐? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任佳窑,我火速辦了婚禮,結果婚禮上父能,老公的妹妹穿的比我還像新娘神凑。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布溉委。 她就那樣靜靜地躺著鹃唯,像睡著了一般。 火紅的嫁衣襯著肌膚如雪瓣喊。 梳的紋絲不亂的頭發(fā)上坡慌,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天,我揣著相機與錄音藻三,去河邊找鬼洪橘。 笑死,一個胖子當著我的面吹牛趴酣,可吹牛的內容都是我干的。 我是一名探鬼主播坑夯,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼岖寞,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了柜蜈?” 一聲冷哼從身側響起仗谆,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎淑履,沒想到半個月后隶垮,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡秘噪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年狸吞,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片指煎。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡蹋偏,死狀恐怖,靈堂內的尸體忽然破棺而出至壤,到底是詐尸還是另有隱情威始,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布像街,位于F島的核電站黎棠,受9級特大地震影響,放射性物質發(fā)生泄漏镰绎。R本人自食惡果不足惜脓斩,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望畴栖。 院中可真熱鬧俭厚,春花似錦、人聲如沸驶臊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至扛门,卻和暖如春鸠信,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背论寨。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工星立, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人葬凳。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓绰垂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親火焰。 傳聞我的和親對象是個殘疾皇子劲装,可洞房花燭夜當晚...
    茶點故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內容

  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法昌简,內部類的語法占业,繼承相關的語法,異常的語法纯赎,線程的語...
    子非魚_t_閱讀 31,623評論 18 399
  • 任何一種約束心靈解放的形式化的宗教谦疾,哲學和主張都無法進入真理的國度。 要從根本改變社會與人生犬金,必須先改變個人自我意...
    芒果和桃閱讀 321評論 0 0
  • 月缺念恍,月圓,十二輪晚顷。 北平樊诺,長安,幾來回音同? 思歸词爬,思歸,情在駿奔权均, 思歸顿膨,思歸,我心已歸叽赊。
    雷一凡閱讀 257評論 0 0
  • 作為戰(zhàn)士 這一刻失去鎧甲的你 該用什么來面對 無邊的黑夜 于你的一生中 你將遇見太陽恋沃,月亮 河水和峰巒 你愛過信馬...
    9_crimes閱讀 191評論 0 0
  • 不喜歡一個人了囊咏,我會看清他原來有多拙劣的演技。解釋,都是掩飾梅割,因為承認自己錯了很難霜第。你不說一句,坐在他對面户辞,再次端...
    廬山煙雨閱讀 188評論 0 1