線上上相親交友這麼受歡迎的當下，相親原始碼開發自然要抓住此機遇以實現快速發展。但是在相親原始碼開發的過程總我們會遇到各種各樣的問題，尤其是前端開發涉及的知識點更繁雜，今天我們就一起來了解一下相親原始碼前端開發的一些知識點。

1、解構小技巧

在相親原始碼開發中，我們可能需要用到一個巢狀多層的物件中某些屬性，會將其解構出來使用

let obj = {
  part1: {
    name: '零一',
    age: 23
  }
}
// 解構
const { part1: { name, age } } = obj
// 使用
console.log(name, age)  // 零一  23

這種情況下，你把 name 和 age 從 part1 裡解構出來了以後，你就無法使用變數 obj 中的 part1 屬性了，如：

// .... 省略
const { part1: { name, age } } = obj
console.log(part1)   // Uncaught ReferenceError: part1 is not defined
其實你可以多次解構，如：
// .... 省略
const { part1: { name, age }, part1 } = obj
console.log(part1)   // {name: "零一", age: 23}

2、一行程式碼生成隨機字串

const str = Math.random().toString(36).substr(2, 10);
console.log(str);   // 'w5jetivt7e'

先是 Math.random() 生成 [0, 1) 的數，也就是 0.123312、0.982931之類的，然後呼叫 number 的 toString方法將其轉換成36進位制的，按照MDN的說法，36進位制的轉換應該是包含了字母 a~z 和 數字0~9的，因為這樣生成的是 0.89kjna21sa 類似這樣的，所以要擷取一下小數部分，即從索引 2 開始擷取10個字元就是相親原始碼開發時我們想要的隨機字串了

3、合併資料

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]
const obj1 = {
  a:1,
}
const obj1 = {
  b:1,
}
const obj = Object.assgin({}, obj1, obj2);//{a:1,b:1}

改進

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]
const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

4、拼接字串

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考試成績及格`;
}else{
  result = `${name}的考試成績不及格`;
}

改進

const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考試成績及格':'的考試成績不及格'}`;

5、列表搜尋

const a = [1,2,3,4,5];
const result = a.filter(
  item =>{
    return item === 3
  }
)

改進

const a = [1,2,3,4,5];
const result = a.find(
  item =>{
    return item === 3
  }
)

6、輸入框非空的判斷

if(value !== null && value !== undefined && value !== ''){
    //...
}

改進

if(value??'' !== ''){
  //...
}

7、時間戳轉時分秒

// 時間轉換
function timestampToTime(timestamp) {
  var date = new Date(parseInt(timestamp));//時間戳為10位需*1000，時間戳為13位的話不需乘1000
  var Y = date.getFullYear() + '-';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var D = date.getDate() + ' ';
  var h = (date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()) + ':';
  var m = (date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()) + ':';
  var s = (date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds());
  return Y + M + D + h + m + s;
}

以上便是“相親原始碼前端開發知識點，多學一點就離成功更近一點”的全部內容，相親原始碼的開發不容易，前端開發需要注意的細節太多了，不過只要我們多學一點就能裡成功更近一點。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：

相親原始碼前端開發知識點，每天進步一點點

1、解構小技巧

相關文章