本文旨在日常學習與記錄端仰;簡書好久不見_)
你沛鸵,我也好久沒見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 ----