言

這是我踏上搬磚之路那刻起，一路走來記下的點點滴滴coding技巧。驀然回首才發現已經不是一時半會可以看完的了，隨機選取部分進行分享給大家，希望能給你帶去收獲的喜悅。無論此時此刻你是多么的不可一世，但若干年后回首時依舊會覺得曾經的自己是多么的可笑與幼稚，但是正是這點滴的可笑與幼稚成就了最好的你吖。成長之路如此，技術之路亦是如此。

不積跬步，無以至千里；不積小流，無以成江海。點點滴滴終將成就最好的你！

花草叢中過，花香贈與君；君若顏開笑，留下贊與情。

通過此次Coding小技巧學習,不但可以讓你的代碼質量更上一層樓，而且可以讓你的coding速度直逼火箭！！！

Coding小技巧

數組的對象解構

使用對象解構將數組項賦值給變量：

const str="1997,kangkang,boy,23"
const {1:name,2:sex,0:age}=str.split(',')
console.log(name,sex,age) //kangkang boy 1997

注：本例中，2 為 split 之后的數組下標，sex 為指定的變量，值為 boy

創建純對象

創建一個對象打印出來是這樣的

const obj={}
console.log(obj)
console.log(obj.constructor)
console.log(obj.toString)
console.log(obj.hasOwnProperty)
復制代碼

創建一個 100% 的純對象，這個對象不會繼承Object的任何屬性和方法（比如 constructor，toString() 等）：

const obj=Object.create(null)
console.log(obj)//{}
console.log(obj.constructor)//undefined
console.log(obj.toString)//undefined
console.log(obj.hasOwnProperty)//undefined

你沒見過的valueOf

const obj={
    i:1,
    valueOf:function(){
        if(this.i===1){
            this.i ++
            return 1
        }else{
            return 2
        }
    }
}
if(obj==1&&obj==2){
    console.log(obj)
}

一個對象居然可以等于兩個值？？？ 猜一猜這個console.log(obj)會不會執行？最終的結果會是什么？（這個大概率會出現在面試題哦~）

給個總結，相信你已經得出答案：

清空和截短數組

下面有一個數組，現在我想截取前五個，如何操作

const arr=[1,2,3,4,5,6,7,8,9]

這時候可能你會想到slice()和splice()

slice()

返回一個索引和另一個索引之間的數據(不改變原數組),slice(start,end)有兩個參數(start必需,end選填),都是索引,返回值不包括end

const arr=[1,2,3,4,5,6,7,8,9]
const arr2=arr.slice(0,5)
console.log(arr2)//[1,2,3,4,5]

splice()

用來添加或者刪除數組的數據,只返回被刪除的數據,類型為數組(改變原數組)

const arr=[1,2,3,4,5,6,7,8,9]
arr.splice(5)
console.log(arr)//[1,2,3,4,5]

最簡單的清空和截短數組的方法就是改變 length 屬性

const arr=[1,2,3,4,5,6,7,8,9]
arr.length=5
console.log(arr)//[1,2,3,4,5]
arr.length=0//清空數組

對數組中的所有值求和

大家第一時間想到的可能是使用一個循環，但是那樣會很浪費。

var numbers=[3, 5, 7, 2];
var sum=numbers.reduce((x, y)=> x + y);
console.log(sum); // returns 17

條件短路

下面是常寫的代碼

if (hungry) {
    goToFridge();
}

我們可以進一步簡化代碼，同時使用變量和函數：

hungry && goToFridge()
復制代碼

對條件使用或（OR）邏輯

以前在函數開始時聲明變量，只是為了避免在出現意外錯誤時遇到 undefined。

function doSomething(arg1){
    arg1=arg1 || 32; // if it's not already set, arg1 will have 32 as a default value
}

逗號運算符

這個寫出來，同事肯定請教你。

let x=1;
x=(x++, x);
console.log(x);
// expected output: 2
x=(2, 3);
console.log(x);
// expected output: 3

擴展運算符

輕松移除數組中的重復項：

const removeDuplicate=arr=>[...new Set(arr)]
let result=removeDuplicate([42,42,'11','11',true,true,null,null])
console.log(result)//[42, "11", true, null]

使用擴展運算符可以快速扁平化二維數組：

const arr=[1,[2,3],[4,5]]
const flatArr=[].concat(...arr)
console.log(flatArr)//[1, 2, 3, 4, 5]

不幸的是，上面的技巧只能使用二維數組，但是使用遞歸，我們可以扁平化任意緯度數組：

function flattenArray(arr){
    const flatArr=[].concat(...arr)
    return flatArr.some(item=>Array.isArray(item))?flattenArray(flatArr):flatArr
}
const arr=[1,[2,3],[4,5,[6,7,[8,9]]]]
console.log(flattenArray(arr))//[1, 2, 3, 4, 5, 6, 7, 8, 9]

動態屬性名稱

const dynamic='flavour';
var item={
    name: 'Coke',
    [dynamic]: 'Cherry'
}
console.log(item); 
// { name: "Coke", flavour: "Cherry" }

對象轉換為數組

//注意對象必須是以下格式的才可以通過此方式轉化為數組
//獲取的DOM集合，以及函數的arguments也可以通過此方式轉化為數組
var obj={
    0: 'qian',
    1: 'long',
    2: 'chu',
    3: 'tian',
    length: 4
}
var objArr=Array.prototype.slice.call(obj);
// var objArr=[].slice.call(obj);
// var objArr=Array.prototype.slice.apply(obj);
console.log(objArr)

獲取數組中最大或者最小值

function maxAndMin(arr){
    return {
       max:Math.max.apply(null,arr.join(',').split(',')),
       min:Math.min.apply(null,arr.join(',').split(','))
    }
}

判斷兩個數組是否相同

/**
 * 判斷數組是否相同
 * @param {Array} array1
 * @param {Array} array2
 */
export function scalarArrayEquals(array1, array2) {
  return array1.length===array2.length && array1.every(function(v, i) { return v===array2[i]})
}

徹底屏蔽鼠標右鍵

oncontextmenu=”window.event.returnValue=false”
< table border oncontextmenu=return(false)>< td>no< /table> 可用于 Table

取消選取、防止復制

< body onselectstart=”return false”>

JS不允許粘貼

onpaste=”return false

JS防止復制

oncopy=”return false;” oncut=”return false;

禁用輸入法

< input style=”ime-mode:disabled”>

防止被人 frame

if (top.location !=self.location)top.location=self.location;

網頁禁用另存為

< no>< iframe src=*.html>< /iframe>< /no>

前端不背鍋小妙招

javaScript空值合并操作符（??）

只有當左側為null和undefined時，才會返回右側的數

• 空值合并操作符（??）是一個邏輯操作符，當左側的操作數為 null 或者 undefined 時，返回其右側操作數，否則返回左側操作數。
• 與邏輯或操作符（||）不同，邏輯或操作符會在左側操作數為假值時返回右側操作數。也就是說，如果使用 || 來為某些變量設置默認值，可能會遇到意料之外的行為。比如為假值（例如，'' 或 0）時。見下面的例子。

let str=null||undefined
let result=str??'你真好看'
console.log(result)//你真好看

const nullValue=null;
const emptyText=""; // 空字符串，是一個假值，Boolean("")===false
const someNumber=42;

const valA=nullValue ?? "valA 的默認值";
const valB=emptyText ?? "valB 的默認值";
const valC=someNumber ?? 0;

console.log(valA); // "valA 的默認值"
console.log(valB); // ""（空字符串雖然是假值，但不是 null 或者 undefined）
console.log(valC); // 42

javaScript可選鏈操作符( ?. )

　可選鏈操作符( ?. )允許讀取位于連接對象鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。?. 操作符的功能類似于 . 鏈式操作符，不同之處在于，在引用為空(nullish ) (null 或者 undefined) 的情況下不會引起錯誤，該表達式短路返回值

const demo={
    name: 'Alice',
    cat: {
        name: 'Dinah'
    }
};
console.log(dog.dog); //正常輸出會直接報錯
console.log(demo.someNonExistentMethod());

使用可選鏈操作符( ?. )瀏覽器不會出現報錯！

const demo={
    name: 'Alice',
    cat: {
        name: 'Dinah'
    }
};
console.log(demo.dog?.name); 
// expected output: undefined
console.log(demo.what?.());
// expected output: undefined

函數調用：

let result=someOne.customMethod?.();

如果希望允許 someOne 也為 null 或者 undefined ，那么你需要像這樣寫 someOne?.customMethod?.()

可選鏈與表達式：

let nestedProp=obj?.['prop' + 'Name'];

可選鏈訪問數組：

let arrayItem=arr?.[42];

短路計算：

let potentiallyNullObj=null;
let x=0;
let prop=potentiallyNullObj?.[x++];

console.log(x); // x 將不會被遞增，依舊輸出 0

//當在表達式中使用可選鏈時，如果左操作數是 null 或 undefined，表達式將不會被計算

連用可選鏈操作：

let customer={
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls" // details 的 address 屬性未有定義
  }
};
let customerCity=customer.details?.address?.city;

// … 可選鏈也可以和函數調用一起使用
let duration=vacations.trip?.getTime?.();

空值合并操作符可以在使用可選鏈時設置一個默認值：

let customer={
  name: "Carl",
  details: { age: 82 }
};

let customerCity=customer?.city ?? "中國";
console.log(customerCity);  // “中國

實際項目中能用到的地方很多哦~后端接口問題的鍋，我前端靚仔才不背！！！

lt;<<廈崽Ke>>>：itzcw.com/9395/

在前端開發中，掌握HTML5、CSS3和JavaScript是至關重要的。這三者共同構成了構建現代網頁和應用程序所需的基礎。下面我將簡要介紹一些你可能會發現有用的主題和實戰案例，幫助你深入理解它們的應用和互動。

HTML5

1. 語義化標記：利用HTML5元素（如<header>、<footer>、<nav>等）增強頁面結構和可訪問性。
2. 表單增強：使用HTML5新的輸入類型（如<input type="date">、<input type="email">等）和驗證特性。
3. 多媒體支持：嵌入視頻（<video>）和音頻（<audio>），控制播放、暫停等功能。
4. Canvas繪圖：使用<canvas>元素繪制圖形、動畫或圖表。

CSS3

5. 響應式布局：使用媒體查詢和彈性布局（Flexbox）或網格布局（Grid）適應不同設備和屏幕尺寸。
6. 過渡和動畫：利用CSS3過渡和動畫特性創建流暢的用戶界面效果，如淡入淡出、平移和旋轉動畫。
7. 陰影和漸變：應用陰影效果（box-shadow）和顏色漸變（linear-gradient、radial-gradient）增強視覺效果。
8. 字體和圖標：使用@font-face導入自定義字體，以及集成圖標字體（如Font Awesome）。

JavaScript

9. DOM操作：通過JavaScript選擇元素、修改內容、添加/移除元素，并處理事件。
10. AJAX與API：使用XMLHttpRequest或Fetch API從服務器異步獲取數據，并處理JSON響應。
11. ES6+特性：掌握箭頭函數、模板字面量、解構賦值等現代JavaScript語法特性。
12. 客戶端存儲：使用LocalStorage或SessionStorage在客戶端存儲數據，以及使用IndexedDB進行更復雜的本地數據庫操作。

實戰案例

13. 圖片庫網頁：展示圖片，并允許用戶上傳、查看詳細信息。
14. 在線待辦清單：使用表單和LocalStorage創建一個簡單的任務管理工具。
15. 響應式導航菜單：根據屏幕寬度切換不同的導航樣式和布局。
16. 交互式輪播圖：利用JavaScript實現帶有控制按鈕和自動播放的輪播功能。
17. 簡易天氣應用：使用AJAX請求天氣API，并根據響應更新頁面內容。
18. 網頁動畫效果：結合CSS3和JavaScript創建按鈕點擊效果或頁面加載動畫。
19. 地圖標記應用：使用Google Maps API或其他地圖服務，在地圖上標記位置并顯示詳細信息。
20. 實時聊天應用：利用WebSocket或長輪詢技術實現實時通訊功能。

通過這些實例，你可以掌握HTML5、CSS3和JavaScript的核心概念，并學會如何將它們結合起來構建現代、交互式的網頁和應用程序。記住，不斷練習和嘗試新的項目是提高技能的最佳方法。