- 利用sort根據(jù)對象中的某個屬性對整個對象進(jìn)行排序:
arr = arr.sort((pre, next) => pre.order - next.order);
- 利用es6語法縮寫函數(shù)
function todoApp(state, action) {
if (typeof state === 'undefined') {
return initialState;
}
return state;
}
//修改為
function todoApp(state = initialState, action) {
return state;
}
- 防止頁面因?yàn)闆]有某個功能而報錯
// 在typescript中因?yàn)橄冗M(jìn)行了變量檢測
// 所以一般直接就報錯了
// 除非先給props設(shè)置為any
let { fn } = this.props;
// 方法1：
fn && fn();
// 方法2：
if(fn) fn();
// 方法3（建議）：
fn?.()
- 利用剩余參數(shù)復(fù)制對象并添加或修改屬性
let obj1={ name: 'xiaohong', age: 11 }
// 如果obj1中有name屬性，則會被覆蓋修改
let obj2 = { ...obj1, name: 'xiaoming' };
console.log(obj2); // { name: 'xiaoming', age: 11 }
- 對象解構(gòu)的騷操作
onClick = ({target: {innerHTML}}) => {
//等同于console.log(e.target.innerHTML);
console.log(`Clicked on "${innerHTML}"!`);
// 但是請注意，這樣寫是不能直接用target訪問到target的
// 訪問target，使用{target,target:{innerHTML}}才可以
};
- 隱式轉(zhuǎn)換
// 轉(zhuǎn)換為字符串
let a = 21;
console.log(a + ''); // expected output: '21'
// 轉(zhuǎn)換為數(shù)字
let a = '21';
console.log(a * 1); // expected output: 21
console.log(+a); // expected output: 21
- 快速生成數(shù)組
/*
* Array.from方法,將類數(shù)組對象(包括字符串)轉(zhuǎn)換為數(shù)組
* @params ArrayLikeObject 類數(shù)組對象,字符串,或者帶length屬性的對象
* @params (elem,index)=>{} 回調(diào)函數(shù),當(dāng)前遍歷到的元素及其下標(biāo)，返回值作為新數(shù)組的元素
*/
let arr = Array.from({ length:10 }, (x, i) => i);
// arr:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// 快速生成一個隨機(jī)數(shù)組
let arr = Array.from({ length: 1000 }, Math.random)
// [ 0.6163093133259432, 0.8877401276499153, 0.4094354756035987, ...] - 1000 items
/*
* Array在只有1個參數(shù)時，該參數(shù)是數(shù)組的長度
*/
let arr1 = Array(1, 2, 3, 4, 5); // arr1:[1,2,3,4,5]
let arr2 = Array(3) // arr2:[empty,empty,empty]
// 利用from將字符串轉(zhuǎn)換為數(shù)組:
let str = 'app';
let arr3 = str.split(''); // arr3:['a','p','p']
let arr4 = Array.from(str); // arr4:['a','p','p']
- javascript實(shí)現(xiàn)增刪改查
let objs = [
{
name: 'xiaoming',
age: 14
},
{
name: 'xiaohua',
age: 15
}
];
// 增
let obj_add = {
name: 'xiaohong',
age: 16
};
objs.push(obj_add);
// 刪
let objs_del = objs.filter(item => item.name !== 'xiaoming');
// 查
let objs_sel = objs.filter(item => item.name === 'xiaohong');
// 改
let obj_set = {
name: 'xiaohua',
age: 16
}
let objs_set = objs.map(item => item.name === obj_set.name ? obj_set : item);
// 排序
let objs_sort = objs.sort((a, b) => a.age - b.age);
- 奇數(shù)或偶數(shù)使用 位 運(yùn)算的方式：
const value = 232;
if (value & 1) console.log("odd");
else console.log("even");
// even
- 檢查有效的 URL：
const isValidURL = (url) => {
try {
new URL(url);
return true;
} catch (error) {
return false;
}
}
isValidURL('https://segmentfault.com/u/minnanitkong/articles')
// true
isValidURL("https//invalidto");
// false
- 距離過去到現(xiàn)在時間表示：
const fromAgo = (date) => {
const ms = Date.now() - date.getTime();
const seconds = Math.round(ms / 1000);
const minutes = Math.round(ms / 60000);
const hours = Math.round(ms / 3600000);
const days = Math.round(ms / 86400000);
const months = Math.round(ms / 2592000000);
const years = Math.round(ms / 31104000000);
switch (true) {
case seconds < 60:
return `${seconds} second(s) ago"`;
case minutes < 60:
return `${minutes} minute(s) ago"`;
case hours < 24:
return `${hours} hour(s) ago"`;
case days < 30:
return `${days} day(s) ago`;
case months < 12:
return `${months} month(s) ago`;
default:
return `${years} year(s) ago`;
}
};
const createdAt = new Date(2021, 0, 5);
fromAgo(createdAt); // 14 day(s) ago;
- 邏輯空賦值(??=)，空值合并(??)和可選鏈(?.)操作符
// 為元素設(shè)置默認(rèn)值
let formData = {};
let a = formData?.name ?? 'xiaoming';
console.log(a); // xiaoming
a ??= 'xiaohong';
console.log(a); // 'xiaoming'
