JavaScript 點滴積累

一、很是巧妙的數組去重辦法

const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
 const arr2 = arr1.filter( (element, index, self) => { return self.indexOf( element ) === index; }); //核心行
 console.log( arr2 ); // [1, 2, 3, 5, 4] 
 console.log( arr1 ); // [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]
複製代碼

二、js實現剪切板功能

var Url2 = ENV.INSURANCE_HOST + "/fl/" + row.flowId
    var oInput = document.createElement("input")
    oInput.value = Url2
    document.body.appendChild(oInput)
    oInput.select() // 選擇對象
    document.execCommand("Copy") // 執行瀏覽器複製命令
複製代碼

三、0.1 + 0.2 等不等於0.3的正確比較方法

console.log( Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON);
  Number.EPSILON  number類型的最小精度
  Math.abs   返回絕對值的方法
複製代碼

四、判斷數據類型的辦法

var symbolObject = (function(){ return this; }).call(Symbol("a"));
 console.log(typeof symbolObject); //object
 console.log(symbolObject instanceof Symbol); //true
 console.log(symbolObject.constructor == Symbol); //true
複製代碼

五、重要的按鈕操做（如發送，建立）要給按鈕添加去重操做

六、時間戳轉換（傳入13位）

time(time = +new Date()) { 
    var date = new Date(time + 8 * 3600 * 1000) // 增長8小時
    return date
      .toJSON()
      .substr(0, 19)
      .replace("T", " ")
  },
複製代碼

七、原生js去除字符串空格

String.prototype.trim=function(){
       return this.replace(/(^\s*)|(\s*$)/g, "");
      }
複製代碼

八、vue路由query問題

vue 路由query取出的參數爲字符串類型 因此不要用true/false放到query的參數上
複製代碼

九、獲取當天時間的 24:00

方法一：
      a = Date.now() + 1000 * 60 * 60 * 8
      a - (a % (1000 * 60 * 60 * 24)) -  (1000 * 60 * 60*8)    
      a % (1000 * 60 * 60 * 24)  //一成天的秒數
方法二：
      new Date("2019-5-17").getTime() //1558022400000
      用方法拼括號裏的字符串
複製代碼

十、meta標籤的用法

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 默認使用最新瀏覽器 -->
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 不被網頁(加速)轉碼 -->
<meta name="robots" content="index,follow">
<!-- 搜索引擎抓取 -->
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 刪除蘋果默認的工具欄和菜單欄 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 設置蘋果工具欄顏色 -->

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">
<!--關閉iOS上的內容識別-->

http://www.alenqi.site/2018/03/04/complete-tags/
<!--別人總結好的meta的連接-->
複製代碼

十一、隨機生成的加密字符串庫（crypto-random-string）

$ npm install crypto-random-string //安裝命令

const cryptoRandomString = require('crypto-random-string');
 
cryptoRandomString({length: 10});
//=> '2cf05d94db'
 
cryptoRandomString({length: 10, type: 'base64'});
//=> 'YMiMbaQl6I'
 
cryptoRandomString({length: 10, type: 'url-safe'});
//=> 'YN-tqc8pOw'
 
cryptoRandomString({length: 10, characters: '1234567890'});
//=> '1791935639'
複製代碼

十二、上下文的概念

JavaScript 標準把一段代碼（包括函數），
執行所需的全部信息定義爲：「執行上下文」。
複製代碼

1三、上傳圖片本地預覽功能

uploadChange(file) {
    console.log(file)
    let blobUrl
    try {
      blobUrl = URL.createObjectURL(file.raw)
    } catch (err) {
      console.error("[Element Error][Upload]", err)
    }
    console.log(blobUrl)
  },
  

URL.createObjectURL() 靜態方法會建立一個 DOMString，
其中包含一個表示參數中給出的對象的URL。
這個 URL 的生命週期和建立它的窗口中的 document 綁定。
這個新的URL 對象表示指定的 File 對象或 Blob 對象。

用 URL.revokeObjectURL() 方法來釋放內存
複製代碼

1四、every和some方法

every()是對數組中每一項運行給定函數，
若是該函數對每一項返回true,則返回true。

some()是對數組中每一項運行給定函數，
若是該函數對任一項返回true，則返回true。

const tempData = [
  {
    id: 1,
    name: "rocker",
    adress: "US"
  },
  {
    id: 2,
    name: "rocker",
    adress: "US"
  },
  {
    id: 3,
    name: "rocker",
    adress: "US"
  }
];
let everyReturn = tempData.every((item, index) => {
  return item.id > 1;
});
let someReturn = tempData.some((item, index) => {
  return item.id > 2;
});

console.log(everyReturn);
//有一個是錯的就返回 false 且的關係

console.log(someReturn);
//有一個是對的就返回 true 或的關係


複製代碼

1五、前端總結(github優質資源整理)

https://juejin.im/post/5d3edad9f265da03a652f133
複製代碼

1六、JavaScript定義函數的幾種方式

一、普通函數

function foo(){
    //code
}
複製代碼

二、箭頭函數

const foo = () => {
    //code
}
複製代碼

三、class中定義的函數

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
//函數聲明   會提高
//類聲明     不會提高
複製代碼

1七、講個笑話

佩奇有天放學回家對媽媽抱怨說：同窗們都說我長得像吹風機
媽媽平靜的看着佩奇：說話就說話，你別拿嘴吹我
複製代碼

1八、深拷貝

//方法1
JSON.parse(JSON.stringify())
//方法2 ES6
const arr1=[1,2,3];
const arr2=Array.from(arr1）
//方法3
用lodash的cloneDeep
//方法4  concat 方法會返回一個新數組
var cc = [].concat(data);
複製代碼

1九、處理 retina 1px的兼容問題

github.com/jonathantne…

20、src和href的區別

• href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。
• src 是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；
• 在請求 src 資源時會將其指向的資源下載並應用到文檔內，例如 js 腳本，img 圖片和 frame 等元素。 當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將 js 腳本放在底部而不是頭部。

2一、parseInt

parseInt(string, radix)
複製代碼

參數	描述
string	必需。要被解析的字符串。
radix	可選。表示要解析的數字的基數。該值介於 2 ~ 36 之間。若是省略該參數或其值爲 0，則數字將以 10 爲基礎來解析。若是它以 「0x」 或 「0X」 開頭，將以 16 爲基數。

若是該參數小於 2 或者大於 36，則 parseInt() 將返回 NaN。

['1', '7', '11'].map(parseInt) 的結果是 [1, NaN, 3] 的緣由是由於，map() 方法是向傳遞給他的函數中傳遞三個參數，分別爲當前值，當前索引以及整個數組

而 parseInt 函數接收兩個參數：須要轉換的字符串，以及進制基數，因此，整個語句能夠寫做：['1', '7', '11'].map((value, index, array) => parseInt(value, index, array))，array 被 parseInt 捨棄以後，獲得的結果分別是：parseInt('1', 0)、parseInt('7', 1) 以及 parseInt('11', 2)，也就是上面看到的 [1, NaN, 3]。

2二、vscode 保存時自動格式化代碼

"editor.formatOnSave": true,  //保存時自動格式化
複製代碼

2三、睡眠函數

/**
 * 睡眠函數
 *
 * @param {number} time 睡眠時間
 * @returns
 */
export const sleep = (time = 0) => {
  return new Promise((reslove) => {
    setTimeout(reslove, time)
  })
}
複製代碼

2四、空格和tab

tab在不一樣的系統中佔位不一樣，因此不推薦tab

2五、PostCSS

PostCSS是一款使用插件去轉換CSS的工具
複製代碼

2六、多個select框不能選同一個值的問題

每次選擇的時候，都去遍歷全部的select框的值，

把這些值放到一個數組，把這個數組中有的值設置爲disabled
複製代碼

2七、查詢git歷史操做

fc -il 1
複製代碼

2八、insertAdjacentElement

句法
targetElement .insertAdjacentElement（position，element）;

參數
position
A DOMString表示相對於的位置targetElement; 必須匹配（不區分大小寫）如下字符串之一：
'beforebegin'：在targetElement本身以前。
'afterbegin'：就在targetElement第一個孩子面前。
'beforeend'：就在targetElement最後一個孩子以後。
'afterend'：targetElement本身以後。

element
要插入樹中的元素。

返回值
插入的元素，或者null插入失敗的元素。
複製代碼

2九、map ( )

//不會改變原數組
//返回一個新數組

The map() method creates a new array 
with the results 
of calling a provided function on every 
element in the calling array
複製代碼

30、數組中返回某個匹配的值

function testMap3(key) {
    let arr = [
      {
        key: 1,
        value: 1
      },
      {
        key: 2,
        value: 2
      },
      {
        key: 3,
        value: 3
      },
      {
        key: 4,
        value: 4
      },
    ]
    let data = arr.filter((item, index) => {
      return item.key === key
    })
    return data
  }
  console.log(testMap3(2));//[{key: 2, value: 2}]
複製代碼

3一、移動端調試神器

<script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
<script>
   var vConsole = new VConsole();
</script>

移動端調試模擬pc端的控制檯
直接在html頁面引入 奇蹟就會出現
複製代碼

3二、try catch finaly語句

catch語句中不能聲明變量e,不然會報錯
finaly 語句必定會執行 通常用於釋放資源
複製代碼

3三、賦值表達式結合運算符

a += b 等價於 a = a + b

能這樣用的運算符還有
*=、/=、%=、+=、-=、<<=
>>=、>>>=、&=、^=、|=、**=
複製代碼

3四、react setState方法當即生效的辦法

this.state = {
  count:0
}
this.setState((prevState) => {
  return { count: 0 }
})
this.setState((prevState) => {
  return { count: prevState.count + 1 } // 上一個 setState 的返回是 count 爲 0，當前返回 1
})
this.setState((prevState) => {
  return { count: prevState.count + 2 } // 當前返回 3
})
複製代碼

上面咱們進行了三次 setState，可是實際上組件只會從新渲染一次，而不是三次；這是由於在 React.js 內部會把 JavaScript 事件循環中的消息隊列的同一個消息中的 setState 都進行合併之後再從新渲染組件

3五、獲取textarea多行文本行數

text.split(/\r?\n|\r/).length
複製代碼

3六、查詢npm插件使用狀況

https://www.npmjs.com/package/package
複製代碼

3七、手機號脫敏

phoneHide(phone) {
    var reg = /(\d{3})\d*(\d{4})/
    var hiddenPhone = phone.replace(reg, "$1****$2")
    return hiddenPhone
}
複製代碼

3八、forEach跳出循環

Array.forEach(item => {
    if(true){
        throw new error()
    }
)
複製代碼

另外 every 和 some 均可以用return來終止循環