少妇下蹲无内裤露出毛58,亚洲精品在线亚洲人妻,免费高清网站

JavaScript 是一個靈活性很強的語言，有很多和其他語言不一樣的特性，本文分享7 個日常開發中可以用到的 JavaScript 編碼技巧，享受其優雅編程的快感。更多的編碼技巧可以參閱《18個JavaScript代碼的小技巧》和《24 個 Javascript 代碼優化技巧》。

1.有條件地的擴展對象屬性

擴展運算符 ... 是現在項目中最喜歡使用的操作符，讓數組、對象操作變得簡潔優雅。這里介紹另一種用法，使用其有條件的擴展對象屬性。

我們可以使用擴展運算符 ... 來有條件地向 JavaScript 對象快速添加屬性。

下面就以歐洲杯的比賽為例，競猜主場英格蘭和客場蘇格蘭的比賽，主場勝則增加 homeVictory: true 的屬性，代碼如下：

const conditionAddField = (scoreHome, scoreVisiting) => {
    return {
        home: "England",
        visiting: "Scottish",
        ...(scoreHome > scoreVisiting && { homeVictory: true }),
    };
};
console.log(conditionAddField(2, 1)); // { home: 'England', visiting: 'Scottish', homeVictory: true }
console.log(conditionAddField(1, 1)); // { home: 'England', visiting: 'Scottish' }

上面代碼就實現了有條件的擴展對象屬性，同樣對于數組也適用。

2.檢查對象屬性是否存在

in 操作符，估計大部分人在項目中很少用，其實可以用來檢查對象是否屬性是否存在，如下：

const result = {
    home: "England",
    visiting: "Scottish",
    scoreResult: "2:1",
};
console.log("scoreResult" in result); // true
console.log("isFinish" in result); // false

3.用變量解構屬性

數組解構或者對象解構大部份人都知道，如需要將對象的屬性值賦值給變量的時候，可以使用解構的方式，如下：

const result = {
    home: "England",
    visiting: "Scottish",
};
const { home: homeTeam } = result;
console.log(homeTeam); // England

現在來看下另外的解構方式，如下：

const result = {
    home: "England",
    visiting: "Scottish",
};
const keyName = "visiting";
const { [keyName]: homeTeam } = result;
console.log(homeTeam); // Scottish

4.檢查數組中的假值

對于數組操作，有必要熟悉這三個方法：filter、some 和 every，下面來看看 Boolean 的妙用，如下：

const arrayTest = [
    null,
    false,
    "UEFA European Football Championship",
    undefined,
    0,
];
// 過濾非真值
const arrayFiltered = arrayTest.filter(Boolean);
console.log(arrayFiltered); // [ 'UEFA European Football Championship' ]
// 檢查至少一個值是否為真
const orResult = arrayTest.some(Boolean);
console.log(orResult); // true
// 檢查所有的值都為真
const andResult = arrayTest.every(Boolean);
console.log(andResult); // false

在一些動態驗證或者配置表單的場景中，驗證輸入項的正確性，可以使用 some來實現 or 的條件，every 實現 and 的條件，例如下面的代碼：

實現可能不是最佳，只為說明問題

const ageValidationOptions = {
    title: "年齡",
    condition: "and",
    validations: [
        {
            description: "必須為數字",
            fn: (val) => !isNaN(val),
        },
        {
            description: "必須 0-120",
            fn: (val) => val < 120 && val > 0,
        },
    ],
};
const orValidationOptions = {
    title: "測試",
    condition: "or",
    validations: [
        {
            description: "數字",
            fn: (val) => !isNaN(val),
        },
        {
            description: "大于0",
            fn: (val) => parseInt(val, 10) > 0,
        },
    ],
};
const validationCondition = {
    and: (validations, inputVal) =>
        validations.every((item) => item.fn(inputVal)),
    or: (validations, inputVal) =>
        validations.some((item) => item.fn(inputVal)),
};
const validationHelper = ({ condition, validations }, inputVal) => {
    return validationCondition[condition](validations, inputVal);
};
console.log(validationHelper(ageValidationOptions, "140")); // false
console.log(validationHelper(ageValidationOptions, 20)); // true

console.log(validationHelper(orValidationOptions, 20)); // true
console.log(validationHelper(orValidationOptions, "a")); // false

5.使用變量增加或者獲取對象屬性

通常需要通過變量動態獲取對象屬性名稱或者增加新的屬性是使用 [attrName]，如：

const result = {
    home: "England",
    visiting: "Scottish",
};
const addField = (key, value, object) => {
    object[key] = value;
    return object;
};
console.log(addField("isFinish", true, result)); // { home: 'England', visiting: 'Scottish', isFinish: true }

// 動態獲取
const fieldName = "home";
console.log(result[fieldName]); // England

上面代碼只是為了展示動態增加對象屬性，實際項目中這么用會涉及對象拷貝的問題。

6.扁平化數組

原型 Array 上有一個方法 flat 可以從數組的數組中創建一個數組：

flat() 方法會按照一個可指定的深度遞歸遍歷數組，并將所有元素與遍歷到的子數組中的元素合并為一個新數組返回。

語法

var newArray = arr.flat([depth])

參數

depth 可選，指定要提取嵌套數組的結構深度，默認值為 1。

返回值

一個包含將數組與子數組中所有元素的新數組。

const arrayTest = [{ id: 101 }, [{ id: 102 }], [{ id: 103 }]];
const arrayFlatted = arrayTest.flat();
console.log(arrayFlatted); // [ { id: 101 }, { id: 102 }, { id: 103 } ]

還可以定義一個深度級別，指定嵌套數組結構應展平的深度。例如：

const arrayTest = [0, 1, 2, [[[3, 4, [5]]]]];
console.log(arrayTest.flat(2)); // [ 0, 1, 2, [ 3, 4, [ 5 ] ] ]
console.log(arrayTest.flat(3)); // [ 0, 1, 2, 3, 4, [ 5 ] ]

7.`console.log` 的使用

使用控制臺日志記錄可以輸出信息，特別在調試的時候可以起到跟蹤變量的值，先分享 console.log() 的一個技巧，例如要打印一組數據，如下：

const person = (name, color, countries) => {
    return {
        name,
        color,
        countries,
    };
};
const person1 = person("克里斯蒂亞諾·羅納爾多", "black", "葡萄牙");
const person2 = person("羅梅盧·盧卡庫", "white", "比利時");
const person3 = person("帕特里克·希克", "blue", "捷克");
console.log({ person1, person2, person3 });

輸出結果如下：

{
  person1: { name: '克里斯蒂亞諾·羅納爾多', color: 'black', countries: '葡萄牙' },
  person2: { name: '羅梅盧·盧卡庫', color: 'white', countries: '比利時' },
  person3: { name: '帕特里克·希克', color: 'blue', countries: '捷克' }
}

這樣可以清晰的知道輸出的變量名稱的值，接下里繼續介紹日志輸出函數 console.table()，傳入一個數組，它會將數組打印為表格，方便對比數據，如下：

const person = (name, color, countries) => {
    return {
        name,
        color,
        countries,
    };
};
const person1 = person("克里斯蒂亞諾·羅納爾多", "black", "葡萄牙");
const person2 = person("羅梅盧·盧卡庫", "white", "比利時");
const person3 = person("帕特里克·希克", "blue", "捷克");
console.table([person1, person2, person3]);

輸入結果如下（第一個是在終端里面打印的效果，第二個是瀏覽器打印效果）：

console.log