Front-end small knowledge points

1. Deconstruction tips

Usually, we need to use some properties in a multi-level nested object, which will be deconstructed and used.

 let obj = {
  part1: {
    name: '零一',
    age: 23
  }
}

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

In this case, after you deconstruct name and age from part1, you cannot use the part1 attribute in the variable obj, such as:

 // .... 省略

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. One line of code to generate random strings

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

First, Math.random() generates the number of [0, 1), that is, 0.123312, 0.982931 and the like, and then calls the toString method of number to convert it into 36 hexadecimal. According to MDN, 36 hexadecimal conversion should be It contains letters a~z and numbers 0~9, because this generates 0.89kjna21sa similar to this, so we need to intercept the decimal part, that is, intercepting 10 characters from index 2 is the random string we want.

3. Combine data

 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}

Improve

 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. Concatenate strings

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

Improve

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

5. List search

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

Improve

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

6. Judgment that the input box is not empty

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

Improve

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

7. Timestamp to hours, minutes and seconds

 // 时间转换
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;
}

8. Text copy function

 html:
<div class="detail">
    <span class="publicKey text-copy" title="测试">测试</span>
    <a class="copy">复制</a>
</div>

js:
 //封装公共方法：
 copyClick(content) {
    var _input = document.createElement('input'); // 直接构建input
    _input.value = content; // 设置内容
    document.body.appendChild(_input); // 添加临时实例
    _input.select(); // 选择实例内容
    document.execCommand('Copy'); // 执行复制
    document.body.removeChild(_input); // 删除临时实例
 }

  //方法调用
  $('.detail').on('click', '.copy', function (data) {
      copyClick(this.previousSibling.previousSibling.innerHTML);
  });

9. Filter duplicate values in a single array

 arrRepeat: function (arr) {
    var hash = [],
        unhash = [];
    for (let i = 0; i < arr.length; i++) {
        if (unhash.indexOf(arr[i]) == -1) {
            unhash.push(arr[i]);
        } else {
            hash.push(arr[i]);
        }
    }
    return hash;
}

arrRepeat([1, 2, 3, 5, 3, 2, 56]);  // 2,3

There are better ways to add