常常寫代碼寫的不少很累贅,看看下面例子,爭取之後代碼簡潔簡化。我的也以爲簡潔分明的代碼很重要。html
本文來自另外一篇博客:http://www.javashuo.com/article/p-nrrlkevd-dx.html。數組
感受內容很好用,方便之後快速學習。app
1.獲取URL中 ?後的攜帶參數函數
// 獲取URL的查詢參數 let params={} location.search.replace(/([^?&=]+)=([^&]+)/g, (_,k,v) => parmas[k] = v); console.log(params) // ?a=b&c=d&e=f => {a: "b", c: "d", e: "f"}
2.對多個條件篩選用 Array.includes學習
// 優化前
function test(fruit) {
if (fruit == 'apple' || fruit == 'strawberry') {
console.log('red');
}
}
// 優化後
function test(fruit) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (redFruits.includes(fruit)) {
console.log('red');
}
}
3. 更少的嵌套,儘早返回 優化
// 優化前
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (!fruit) throw new Error('No fruit!');
if (redFruits.includes(fruit)) {
if (quantity > 10) {
console.log('big quantity');
}
}
}
// 優化後
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (!fruit) throw new Error('No fruit!'); // condition 1: throw error early
if (!redFruits.includes(fruit)) return; // condition 2: stop when fruit is not red
if (quantity > 10) {
console.log('big quantity');
}
}
4.使用默認的函數參數和解構ui
// 優化前
function test(fruit,quantity ) {
const q = quantity || 1;
console.log ( );
if (fruit && fruit.name) {
console.log (fruit.name);
} else {
console.log('unknown');
}
}
// 優化後
function test({name} = {},quantity = 1) {
console.log (name || 'unknown');
console.log (quantity );
}
5.選擇 Map 或對象字面量,而不是 Switch 語句 或者 if elsethis
// 優化前
function test(color) {
switch (color) {
case 'red':
return ['apple', 'strawberry'];
case 'yellow':
return ['banana', 'pineapple'];
case 'purple':
return ['grape', 'plum'];
default:
return [];
}
}
// 優化後 方式1
const fruitColor = {
red: ['apple', 'strawberry'],
yellow: ['banana', 'pineapple'],
purple: ['grape', 'plum']
};
function test(color) {
return fruitColor[color] || [];
}
// 優化後 方式2
const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']);
function test(color) {
return fruitColor.get(color) || [];
}
// if... if else... else... 優化方法
const actions = new Map([
[1, () => {
// ...
}],
[2, () => {
// ...
}],
[3, () => {
// ...
}]
])
actions.get(val).call(this)
6.數組 串聯(每一項是否都知足)使用 Array.every ; 並聯(有一項知足)Array.some 過濾數組 每項設值spa
// 每一項是否知足
[1,2,3].every(item=>{return item > 2}) // false
// 有一項知足
[1,2,3].some(item=>{return item > 2}) // true
// 過濾數組
[1,2,3].filter(item=>{return item > 2}) // [3]
// 每項設值
[1,2,3].fill(false) // [false,false,false]
7.數組去重code
Array.from(new Set(arr))
[...new Set(arr)]
8.數組合並
[1,2,3,4].concat([5,6]) // [1,2,3,4,5,6]
[...[1,2,3,4],...[4,5]] // [1,2,3,4,5,6]
[1,2,3,4].push.apply([1,2,3,4],[5,6]) // [1,2,3,4,5,6]
9.數組求和
const all = [
{
name: 'Tom',
age: 10
},
{
name: 'Jack',
age: 11
},
{
name: 'Jun',
age: 11
}
]
// total 總和
console.log(all.reduce(function (total, cur) {
return total + cur.age;
}, 0))
10.數組排序
const arr = [43, 1, 65, 3, 2, 7, 88, 212, 191]
// 升序 第一位數字從小到大
console.log(arr.sort())
// 升序 從小到大
console.log(arr.sort((x, y) => {
return x - y
}))
// 降序
console.log(arr.sort((x, y) => {
return y - x
}))
// 按照 age升序/降序
const obj = [
{
name: 'tom',
age: 1
},
{
name: 'tom4',
age: 81
},
{
name: 'tom3',
age: 31
},
{
name: 'tom2',
age: 2
}
]
console.log(obj.sort((x, y) => {
return y.age - x.age
}))
11.數組 判斷是否包含值
[1,2,3].includes(4) //false
[1,2,3].indexOf(4) //-1 若是存在換回索引
[1, 2, 3].find((item)=>item===3)) //3 若是數組中無值返回undefined
[1, 2, 3].findIndex((item)=>item===3)) //2 若是數組中無值返回-1
12.對象和數組轉化
Object.keys({name:'張三',age:14}) //['name','age']
Object.values({name:'張三',age:14}) //['張三',14]
Object.entries({name:'張三',age:14}) //[[name,'張三'],[age,14]]