javascript
ES6JS笔记以及部分运行问题记录
目錄
- ES6&JS
- Array.from
- Array.of()
- bind()方法
- concat
- Array.some, Array.every()
- 定義class類(lèi)
- Date()
- Doc. addEventListener
- function
- For循環(huán)
- 簡(jiǎn)單 for 循環(huán)
- for-in
- for-of
- break，continue,return
- forEach
- flat
- find()
- findIndex
- filter
- fill
- 判斷if
- includes（）
- 實(shí)例方法：includes(), startsWith(), endsWith()
- indexOf
- lastIndexof
- instanceof
- join()
- map方法
- Let var const
- map 函數(shù)
- Map類(lèi)
- Math
- Number
- Null判斷運(yùn)算符
- Object是否含有某個(gè)屬性
- Object是否為空
- Object.keys()
- Object.assign對(duì)象合并
- Object.is判斷兩個(gè)值是否完全相等
- Object.entries
- Object.fromEntries
- Object.prototype.toString.call()
- padStart()，padEnd()實(shí)例方法
- parseInt parseFoat
- Pop
- push
- Promise
- 基礎(chǔ)promise
- promise的all和allSettled
- prototype 對(duì)象添加屬性
- reduce()函數(shù)
- reverse()
- replace
- repeat（）
- Set類(lèi)
- split
- splice slice
- substring()
- sort
- stopPropagation() 事件方法
- select()
- trimStart()，trimEnd()，trim()
- toFixed
- toString()
- toLowerCase
- toUpperCase
- typeof
- unshift() 方
- window
- window.addEventListener
- window.requestAnimationFrame
- 可選鏈操作符? ?? ||
- 判斷符號(hào)^
- ** 指數(shù)
- 屬性名當(dāng)作變量
- 深拷貝：
- 函數(shù)擴(kuò)展
- 指數(shù)運(yùn)算符
- 擴(kuò)展運(yùn)算符 三個(gè)點(diǎn)（...）
- 函數(shù)默認(rèn)值設(shè)置
- 模板字符串
- 變量的解構(gòu)賦值
- 防抖、節(jié)流
- 正則表達(dá)式
- 對(duì)象去重
- 刪除dom節(jié)點(diǎn)的子元素
- 解決內(nèi)存溢出
- 過(guò)濾特殊字符串
- 解決uview 的$u為未定義問(wèn)題
- npm run build時(shí)提示vue/types/jsx.d.ts中的錯(cuò)誤
ES6&JS
Array.from
下面是一個(gè)類(lèi)似數(shù)組的對(duì)象，Array.from將它轉(zhuǎn)為真正的數(shù)組。
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3}; // ES5的寫(xiě)法var arr1 = [].slice.call(arrayLike); // ['a', 'b','c'] // ES6的寫(xiě)法let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']擴(kuò)展運(yùn)算符背后調(diào)用的是遍歷器接口（Symbol.iterator），如果一個(gè)對(duì)象沒(méi)有部署這個(gè)接口，就無(wú)法轉(zhuǎn)換。Array.from方法還支持類(lèi)似數(shù)組的對(duì)象。所謂類(lèi)似數(shù)組的對(duì)象，本質(zhì)特征只有一點(diǎn)，即必須有l(wèi)ength屬性。因此，任何有l(wèi)ength屬性的對(duì)象，都可以通過(guò)Array.from方法轉(zhuǎn)為數(shù)組，而此時(shí)擴(kuò)展運(yùn)算符就無(wú)法轉(zhuǎn)換。
Array.from({ length: 3 }); // [ undefined, undefined, undefined ]上面代碼中，Array.from返回了一個(gè)具有三個(gè)成員的數(shù)組，每個(gè)位置的值都是undefined。擴(kuò)展運(yùn)算符轉(zhuǎn)換不了這個(gè)對(duì)象。
Array.from還可以接受第二個(gè)參數(shù)，作用類(lèi)似于數(shù)組的map方法，用來(lái)對(duì)每個(gè)元素進(jìn)行處理，將處理后的值放入返回的數(shù)組。
下面的例子將數(shù)組中布爾值為false的成員轉(zhuǎn)為0。
Array.from([1, , 2, , 3], (n) => n || 0) // [1, 0, 2, 0, 3]上面代碼中，Array.from的第一個(gè)參數(shù)指定了第二個(gè)參數(shù)運(yùn)行的次數(shù)。這種特性可以讓該方法的用法變得非常靈活。
Array.from({ length: 2 }, () => 'jack') // ['jack', 'jack']Array.of()
Array.of()方法用于將一組值，轉(zhuǎn)換為數(shù)組。 Array.of() // [] Array.of(undefined) // [undefined] Array.of(1) // [1] Array.of(1, 2) // [1, 2]bind()方法
bind()方法主要就是將函數(shù)綁定到某個(gè)對(duì)象，bind()會(huì)創(chuàng)建一個(gè)函數(shù)，函數(shù)體內(nèi)的this對(duì)象的值會(huì)被綁定到傳入bind()中的第一個(gè)參數(shù)的值，例如：f.bind(obj)，實(shí)際上可以理解為obj.f()，這時(shí)f函數(shù)體內(nèi)的this自然指向的是obj,并將創(chuàng)建的函數(shù)返回（不會(huì)立即執(zhí)行）
concat
var arr1 = [1,2,3] var arr2 = [4,5,6] arr1.concat(arr2) //輸出 [1,2,3,4,5,6] 同 [...arr1, ...arr2 n] arr1.concat(arr2,arr3,arr4) 里面不限數(shù)量 不會(huì)改變?cè)瓟?shù)組會(huì)返回新數(shù)組Array.some, Array.every()
Some():方法用于檢測(cè)數(shù)組中的元素是否有滿(mǎn)足指定條件的，若滿(mǎn)足返回true，否則返回false；
every():方法用于檢測(cè)數(shù)組中所有元素是否都符合指定條件，若符合返回true，否則返回false；
定義class類(lèi)
export default class gasComprehensive {//實(shí)時(shí)空氣質(zhì)量static async realQuality(params: Record<string, any>) {return request.get(`${base.aimsService}/web/api/v1/analyze-map/grid-detail`,params)}//空氣質(zhì)量累計(jì)數(shù)據(jù)static async airQualityPanel(params?: Record<string, any>) {return request.get(`${base.aimsPrjService}/web/api/v1/comprehensive-situation/air-quality-panel`,params) } } 使用gasComprehensive.airQualityPanel()Date()
let 函數(shù)名 =new Date(); Tue Aug 10 2021 16:01:03 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 2.1 Date().toDateString() Tue Aug 10 2021 2.2 Date().toTimeString() 16:09:53 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 2.3 Date().toLocaleDateString() 2021/8/10 2.4 Date().toLocaleTimeString() 下午4:10:27 2.5 Date().toUTCString() Tue, 10 Aug 2021 08:10:42 GMT 只列舉常見(jiàn)方法，具體參考手冊(cè) 3.1 getTime() 返回日期的毫秒，與valueOf相同 3.2 getFullYear() 返回4位年數(shù) 2021 3.3 getMonth() 返回月(0表示1月...) 7 3.4 getDate() 返回日 10 3.5 getDay() 返回周幾(0表示周日，6表示周六) 2Doc. addEventListener
// 監(jiān)聽(tīng)瀏覽器隱藏顯示 document.addEventListener('visibilitychange', function() {var isHidden = document.hidden;// console.log(document.visibilityState) // visible hiddenif (isHidden) { // '隱藏'.......} else if(codeFlag) { // '顯示'.......} });function
解構(gòu)參數(shù)
const greet = ({ greeting, firstName, lastName }) => {return `${greeting}, ${firstName}${lastName}`; }function的長(zhǎng)度:
function fn1 () {} function fn2 (name) {} function fn3 (name, age) {}console.log(fn1.length) // 0 console.log(fn2.length) // 1 console.log(fn3.length) // 2 ----------------------------------------------------------- function fn1 (name) {} function fn2 (name = '林三心') {} function fn3 (name, age = 22) {} function fn4 (name, age = 22, gender) {} function fn5(name = '林三心', age, gender) { }console.log(fn1.length) // 1 console.log(fn2.length) // 0 console.log(fn3.length) // 1 console.log(fn4.length) // 1 console.log(fn5.length) // 0 ----------------------------------------------------------- function fn1(name, ...args) {}console.log(fn1.length) // 1length 是函數(shù)對(duì)象的一個(gè)屬性值，指該函數(shù)有多少個(gè)必須要傳入的參數(shù)，即形參的個(gè)數(shù)。形參的數(shù)量不包括剩余參數(shù)個(gè)數(shù)，僅包括第一個(gè)具有默認(rèn)值之前的參數(shù)個(gè)數(shù)
For循環(huán)
簡(jiǎn)單 for 循環(huán)
const arr = [1, 2, 3]; for ( let i = 0; i < arr.length; i++) {console.log(arr[i]); } // 不可以const 因?yàn)閕要++改變for-in
const arr = [1, 2, 3]; let index; for (index in arr) {console.log( "arr[" + index + "] = " + arr[index]); } 一般情況下，運(yùn)行結(jié)果如下：
for-in 循環(huán)遍歷的是對(duì)象的屬性，而不是數(shù)組的索引。因此， for-in
遍歷的對(duì)象便不局限于數(shù)組，還可以遍歷對(duì)象。例子如下：
我們可以發(fā)現(xiàn) for-in 并不適合用來(lái)遍歷 Array
中的元素，其更適合遍歷對(duì)象中的屬性，這也是其被創(chuàng)造出來(lái)的初衷。卻有一種情況例外，就是稀疏數(shù)組。考慮下面的例子：
for-in 只會(huì)遍歷存在的實(shí)體，上面的例子中， for-in
遍歷了3次（遍歷屬性分別為"0″、 "100″、 "10000″的元素，普通 for
循環(huán)則會(huì)遍歷 10001 次）。所以，只要處理得當(dāng)， for-in 在遍歷 Array
中元素也能發(fā)揮巨大作用。
for-of
for-in循環(huán)用來(lái)遍歷對(duì)象屬性。
for-of循環(huán)用來(lái)遍歷數(shù)據(jù)—例如數(shù)組中的值。
之前的缺陷：
- forEach 不能 break 和 return；
- for-in
缺點(diǎn)更加明顯，它不僅遍歷數(shù)組中的元素，還會(huì)遍歷自定義的屬性，甚至原型鏈上的屬性都被訪問(wèn)到。而且，遍歷數(shù)組元素的順序可能是隨機(jī)的。
那 for-of 到底可以干什么呢？ - 跟 forEach 相比，可以正確響應(yīng) break, continue, return。
- for-of 循環(huán)不僅支持?jǐn)?shù)組，還支持大多數(shù)類(lèi)數(shù)組對(duì)象，例如 DOM nodelist 對(duì)象。
- for-of 循環(huán)也支持字符串遍歷，它將字符串視為一系列 Unicode 字符來(lái)進(jìn)行遍歷。
- for-of 也支持 Map 和 Set （兩者均為 ES6 中新增的類(lèi)型）對(duì)象遍歷。
總結(jié)一下，for-of 循環(huán)有以下幾個(gè)特征： - 這是最簡(jiǎn)潔、最直接的遍歷數(shù)組元素的語(yǔ)法。
- 這個(gè)方法避開(kāi)了 for-in 循環(huán)的所有缺陷。
- 與 forEach 不同的是，它可以正確響應(yīng) break、continue 和 return 語(yǔ)句。
- 其不僅可以遍歷數(shù)組，還可以遍歷類(lèi)數(shù)組對(duì)象和其他可迭代對(duì)象。
for-of循環(huán)不僅支持?jǐn)?shù)組，還支持大多數(shù)類(lèi)數(shù)組對(duì)象，例如DOM NodeList對(duì)象。
for-of循環(huán)也支持字符串遍歷，它將字符串視為一系列的Unicode字符來(lái)進(jìn)行遍歷：
break，continue,return
break會(huì)跳出一個(gè)循環(huán)可以配合if使用不會(huì)只跳出if
continue跳出循環(huán)的此次操作執(zhí)行循環(huán)的下一個(gè)
Return直接結(jié)束
break，continue 配合outer :
break，continue會(huì)直接跳出到你的標(biāo)識(shí)符的那層循環(huán)位置，如上面的位置就是break可以跳出兩層for循環(huán)
其還可以在內(nèi)部使用，跳到任意循環(huán)的指定位置，如跳到內(nèi)部
forEach
forEach() 方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)。forEach
方法為數(shù)組中含有有效值的每一項(xiàng)執(zhí)行一次 callback 函數(shù)，那些已刪除（使用
delete 方法等情況）或者從未賦值的項(xiàng)將被跳過(guò)（那些值為 undefined 或 null
的項(xiàng)會(huì)被讀取）
forEach方法中的function回調(diào)有三個(gè)參數(shù)：
第一個(gè)參數(shù)是遍歷的數(shù)組內(nèi)容，
第二個(gè)參數(shù)是對(duì)應(yīng)的數(shù)組索引，Number類(lèi)型
第三個(gè)參數(shù)是數(shù)組本身
foreach 語(yǔ)法：
flat
方法會(huì)按照一個(gè)可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回。
const arr1 = [0, 1, 2, [3, 4]]; console.log(arr1.flat()); //默認(rèn)降一維 // expected output: [0, 1, 2, 3, 4] const arr2 = [0, 1, 2, [[[3, 4]]]]; console.log(arr2.flat(2)); // expected output: [0, 1, 2, [3, 4]] flat() 方法會(huì)移除數(shù)組中的空項(xiàng): 用Infinity參數(shù)可以將數(shù)組內(nèi)不管有幾層都展平find()
數(shù)組實(shí)例的find方法，用于找出第一個(gè)符合條件的數(shù)組成員。它的參數(shù)是一個(gè)回調(diào)函數(shù)，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)，直到找出第一個(gè)返回值為true的成員，然后返回該成員。如果沒(méi)有符合條件的成員，則返回undefined。
[1, 4, -5, 10].find((n) => n < 0)// -5上面代碼找出數(shù)組中第一個(gè)小于 0 的成員。
查找函數(shù)有三個(gè)參數(shù)。value：每一次迭代查找的數(shù)組元素。index：每一次迭代查找的數(shù)組元素索引。arr：被查找的數(shù)組。
上面代碼中，find方法的回調(diào)函數(shù)可以接受三個(gè)參數(shù)，依次為當(dāng)前的值、當(dāng)前的位置和原數(shù)組。
function f(v){return v > this.age; } let person = { name: 'John', age: 20 }; [10, 12, 26, 15].find(f, person); // 26上面的代碼中，find函數(shù)接收了第二個(gè)參數(shù)person對(duì)象，回調(diào)函數(shù)中的this對(duì)象指向person對(duì)象。
findIndex
findIndex()
方法返回傳入一個(gè)測(cè)試條件（函數(shù)）符合條件的數(shù)組第一個(gè)元素位置。
findIndex() 方法為數(shù)組中的每個(gè)元素都調(diào)用一次函數(shù)執(zhí)行：
當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)返回 [true]{.underline} 時(shí), findIndex()
返回符合條件的元素的索引位置，之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)。
如果沒(méi)有符合條件的元素返回 -1
filter
返回?cái)?shù)組中所有元素都大于 18 的元素: var ages = [32, 33, 16, 40]; function checkAdult(age) {return age >= 18; } function myFunction() {document.getElementById("demo").innerHTML =ages.filter(checkAdult); } 輸出結(jié)果為: 32,33,40filter()
方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素。
注意： filter() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。
注意： filter() 不會(huì)改變?cè)紨?shù)組。
當(dāng)return為true時(shí)就返回這個(gè)item 如果為假就不返回這個(gè)item
fill
fill方法使用給定值，填充一個(gè)數(shù)組。
['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7]上面代碼表明，fill方法用于空數(shù)組的初始化非常方便。數(shù)組中已有的元素，會(huì)被全部抹去。
fill方法還可以接受第二個(gè)和第三個(gè)參數(shù)，用于指定填充的起始位置和結(jié)束位置。
上面代碼表示，fill方法從 1 號(hào)位開(kāi)始，向原數(shù)組填充 7，到 2 號(hào)位之前結(jié)束。
注意，如果填充的類(lèi)型為對(duì)象，那么被賦值的是同一個(gè)內(nèi)存地址的對(duì)象，而不是深拷貝對(duì)象。
判斷if
const data = [] if(data) true if(data.length) false const data = {} if(data) true if(data.length) false // 但是這樣是不對(duì)的 因?yàn)闊o(wú)論data是不是空其length都是0 Object.keys(obj).length === 0 // 這樣才能判斷l(xiāng)ength if(JSON.stringify(data) === '{}') true if (Object.keys(obj).length === 0 || !obj.object.name) return 如果前面的語(yǔ)句判斷為false || 后面的就不會(huì)被執(zhí)行判斷includes（）
方法返回一個(gè)布爾值，表示某個(gè)數(shù)組是否包含給定的值，與字符串的includes方法類(lèi)似。ES2016
引入了該方法。
該方法的第二個(gè)參數(shù)表示搜索的起始位置，默認(rèn)為0。如果第二個(gè)參數(shù)為負(fù)數(shù)，則表示倒數(shù)的位置，如果這時(shí)它大于數(shù)組長(zhǎng)度（比如第二個(gè)參數(shù)為-4，但數(shù)組長(zhǎng)度為3），則會(huì)重置為從0開(kāi)始。
[1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true 'mjh'.includes('mh') // false 'mjh'.includes('mj') // true實(shí)例方法：includes(), startsWith(), endsWith()
傳統(tǒng)上，JavaScript
只有indexOf方法，可以用來(lái)確定一個(gè)字符串是否包含在另一個(gè)字符串中。ES6
又提供了三種新方法。
- includes()：返回布爾值，表示是否找到了參數(shù)字符串。
- startsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的頭部。
- endsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的尾部。
這三個(gè)方法都支持第二個(gè)參數(shù)，表示開(kāi)始搜索的位置。
let s = 'Hello world!'; s.startsWith('world', 6) // true s.endsWith('Hello', 5) // true s.includes('Hello', 6) // false上面代碼表示，使用第二個(gè)參數(shù)n時(shí)，endsWith的行為與其他兩個(gè)方法有所不同。它針對(duì)前n個(gè)字符，而其他兩個(gè)方法針對(duì)從第n個(gè)位置直到字符串結(jié)束
indexOf
indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。
語(yǔ)法
stringObject.indexOf(searchvalue,fromindex)
Searchvalue 必需。規(guī)定需檢索的字符串值。
Fromindex 可選的整數(shù)參數(shù)。規(guī)定在字符串中開(kāi)始檢索的位置。它的合法取值是 0到 stringObject.length - 1。如省略該參數(shù)，則將從字符串的首字符開(kāi)始檢索。
提示和注釋
**注釋：**indexOf() 方法對(duì)大小寫(xiě)敏感！
**注釋：**如果要檢索的字符串值沒(méi)有出現(xiàn)，則該方法返回 -1。
獲得數(shù)組對(duì)象內(nèi)的某個(gè)值等于要求值的索引
let data = [{id:1,name:"小紅"},{id:2,name:"小明"}];data.indexOf(data.filter(d=>d.id == 1)) //index：0data.indexOf(data.filter(d=>d.id == 2)) //index：1data.indexOf(data.filter(d=>d.name == "小紅")) //index：0data.indexOf(data.filter(d=>d.name == "小明")) //index：1data.indexOf(data.filter(d=>d.id == 3)) // 不存在即返回-1lastIndexof
url.lastIndexOf("/") 獲取字符串最后一個(gè)/的下標(biāo)instanceof
在 JavaScript 中，判斷一個(gè)變量的類(lèi)型嘗嘗會(huì)用 typeof 運(yùn)算符，在使用typeof運(yùn)算符時(shí)采用引用類(lèi)型存儲(chǔ)值會(huì)出現(xiàn)一個(gè)問(wèn)題，無(wú)論引用的是什么類(lèi)型的對(duì)象，它都返回"object"。ECMAScript 引入了另一個(gè) Java 運(yùn)算符 instanceof來(lái)解決這個(gè)問(wèn)題。
instanceof 運(yùn)算符與 typeof運(yùn)算符相似，用于識(shí)別正在處理的對(duì)象的類(lèi)型。與 typeof方法不同的是，instanceof 方法要求開(kāi)發(fā)者明確地確認(rèn)對(duì)象為某特定類(lèi)型。
前面放變量后面放放需要判斷的類(lèi)型或者繼承關(guān)系 (只可以判斷存儲(chǔ)數(shù)據(jù)類(lèi)型Object、function)
join()
join（）方法將數(shù)組的所有元素連接成一個(gè)字符串。
語(yǔ)法：
參數(shù)
separator -
指定用于分隔數(shù)組的每個(gè)元素的字符串。如果省略，則使用逗號(hào)分隔數(shù)組元素。
返回值
連接所有數(shù)組元素后返回一個(gè)字符串。
map方法
map() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。
map() 方法按照原始數(shù)組元素順序依次處理元素。
注意： map() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。
注意： map() 不會(huì)改變?cè)紨?shù)組。
Let var const
使用let，聲明的變量?jī)H在塊級(jí)作用域內(nèi)有效 var是全局
在代碼塊內(nèi)，使用let命令聲明變量之前，該變量都是不可用的。這在語(yǔ)法上，稱(chēng)為"暫時(shí)性死區(qū)"（temporal
dead zone，簡(jiǎn)稱(chēng) TDZ）。
let不允許在相同作用域內(nèi)，重復(fù)聲明同一個(gè)變量。
map 函數(shù)
不改變?cè)瓟?shù)組返回新數(shù)組 對(duì)數(shù)組進(jìn)行操作可使用，不用來(lái)過(guò)濾數(shù)據(jù)
const datas = [1, 2, 4, 2, 4, 3]; datas.map(item => item > 2) // [false, false, true, false, true, true] item => item > 2 相當(dāng)于 item => { return item > 2 } datas.map(item => { if (item > 2) return item; }) // [undefined, undefined, 4, undefined, 4, 3] datas.map(item => item * 2) // [2, 4, 8, 4, 8, 6]Map類(lèi)
Map對(duì)象稍有不同：內(nèi)含的數(shù)據(jù)由鍵值對(duì)組成，所以你需要使用解構(gòu)（destructuring）來(lái)將鍵值對(duì)拆解為兩個(gè)獨(dú)立的變量： for (var [key, value] of phoneBookMap) { console.log(key + "'s phone number is: " + value); }var map = new Map([['1','Jckey'],['2','Mike'],['3','zhengxin']]);map.set('4','Adam');//添加key-valuemap.set('5','Tom');map.set('6','Jerry');console.log(map.get('6')); // Jerrymap.delete('6'); // 刪除console.log(map.get('6')); // undefinedfor(var [key,value] of map) {console.log('key='+key+' , value='+value);} For循環(huán)輸出 key=1 , value=Jckey key=2 , value=Mike key=3 , value=zhengxin key=4 , value=Adam key=5 , value=TomMath
Math.trunc()
Math.trunc方法用于去除一個(gè)數(shù)的小數(shù)部分，返回整數(shù)部分。 Math.trunc(4.1) // 4 Math.trunc(4.9) // 4 Math.trunc(-4.1) // -4 Math.trunc(-4.9) // -4 Math.trunc(-0.1234) // -0 對(duì)于非數(shù)值，Math.trunc內(nèi)部使用Number方法將其先轉(zhuǎn)為數(shù)值。Math.sign()
Math.sign方法用來(lái)判斷一個(gè)數(shù)到底是正數(shù)、負(fù)數(shù)、還是零。對(duì)于非數(shù)值，會(huì)先將其轉(zhuǎn)換為數(shù)值。
它會(huì)返回五種值。
- 參數(shù)為正數(shù)，返回+1；
- 參數(shù)為負(fù)數(shù)，返回-1；
- 參數(shù)為 0，返回0；
- 參數(shù)為-0，返回-0;
- 其他值，返回NaN。
Math.cbrt() .
方法用于計(jì)算一個(gè)數(shù)的立方根。
Math.hypot
方法返回所有參數(shù)的平方和的平方根。
Math.floor() 返回小于或等于一個(gè)給定數(shù)字的最大整數(shù)。
可以理解 Math.floor()為向下取整
除法取余數(shù) 5%2 1
Math.random()
生成一個(gè)0~1的隨機(jī)數(shù)，概率相同
Math.max()
找出最大值并返回最大值，括號(hào)內(nèi)必須是一組數(shù)字，如果是數(shù)組需要用擴(kuò)展運(yùn)算符擴(kuò)展
Number
number可以將將0b和0o前綴的字符串?dāng)?shù)值轉(zhuǎn)為十進(jìn)制，要使用Number方法。
Number('0b111') // 7 Number('0o10') // 8 0b 二進(jìn)制 0o 八進(jìn)制 0x 十六進(jìn)制 `Number.isFinite()`對(duì)于非數(shù)值一律返回false, 判斷一個(gè)數(shù)是不是有限數(shù)，100/0返回 false infinity（無(wú)窮大） false Number.isNaN()只有對(duì)于NaN才返回true，非NaN一律返回false。 Number.isInteger()用來(lái)判斷一個(gè)數(shù)值是否為整數(shù)。 Number.isInteger(25) // true Number.isInteger(25.1) // false 但是精度不高 Number.parseInt(), Number.parseFloat() 轉(zhuǎn)化為整數(shù)和浮點(diǎn)數(shù)Null判斷運(yùn)算符
？？ 屬性值為null或undefined時(shí)，指定默認(rèn)值
讀取對(duì)象屬性的時(shí)候，如果某個(gè)屬性的值是null或undefined，有時(shí)候需要為它們指定默認(rèn)值。常見(jiàn)做法是通過(guò)||運(yùn)算符指定默認(rèn)值。
||或運(yùn)算符表達(dá)的意思是左側(cè)表達(dá)式為null、undefined、‘’、false、0，右側(cè)表達(dá)式都會(huì)生效。但我們想要的只是在null或undefined的時(shí)候生效。
es2020引入了新的Null判斷運(yùn)算符??。它的行為類(lèi)似||，但是只有運(yùn)算符左側(cè)的值為null或undefined時(shí)，才會(huì)返回右側(cè)的值。
與鏈判斷運(yùn)算符?.配合使用。
Object是否含有某個(gè)屬性
myObject.hasOwnProperty('a') 'a' in myObject if(myObject.width)Object是否為空
if (JSON.stringify(data) === '{}') if (Object.keys(object).length === 0)Object.keys()
Object.keys() 方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和正常循環(huán)遍歷該對(duì)象時(shí)返回的順序一致
。
Object.assign對(duì)象合并
const config1 = { Host: '123', Name: 'root' Text: 'test' } const config2 = { Host: '3', Name: 'admin' dj: 'test1' } Object.assign(config1 , config2 ) //config2會(huì)把config1里面重名的屬性值覆蓋掉，不重名的都保留 var num2 =Object.assign({},num1); *//num2 = num1;* 這種賦值改變num2的屬性值是不會(huì)影響n(yōu)um1的給合并設(shè)置默認(rèn)值：
config = Object.assign({title: 'Foo',body: 'Bar'}, config);Object.is判斷兩個(gè)值是否完全相等
Object.is(120,120) // true Object.is(NaN,NaN) // true NaN === NaN // false 和===的區(qū)別是可以判斷NaN類(lèi)型Object.entries
const arr = Object.entries({name: "百度",address: 'baidu'})console.log(arr);[["name", "百度"],["address", "baidu"]]將對(duì)象轉(zhuǎn)化成二維數(shù)組
Object.fromEntries
將數(shù)組轉(zhuǎn)化成對(duì)象
const result = Object.fromEntries([['name','尚硅谷'],['java','python','js','c++'] ]); console.log(result); // {name: "尚硅谷", java: "python"} const m = new Map() m.set('name', 'MJH') const result = Object.fromEntries(m) console.log(result); //{name: "MJH"}Object.prototype.toString.call()
Object.prototype.toString.call(checkData) === '[object Array]' //數(shù)組 Object.prototype.toString.call(checkData) === '[object Object]' //對(duì)象 [object Number] //是 number類(lèi)型 [object Null] // 是null [object Boolean] // Boolean [object Undefined] // undefined [object String] // String [object Number] // NaN 判斷出來(lái)和number一致 !! 在typeof里 Array 和 Object 檢查出來(lái)都是ObjectpadStart()，padEnd()實(shí)例方法
padStart()的常見(jiàn)用途是為數(shù)值補(bǔ)全指定位數(shù)。下面代碼生成 10
位的數(shù)值字符串。
第一個(gè)參數(shù)比如10會(huì)自動(dòng)生成第二個(gè)參數(shù)填滿(mǎn)的10位字符串。最后沒(méi)有剛好填滿(mǎn)的時(shí)候會(huì)截取第二位參數(shù)來(lái)填滿(mǎn)padStart是從后往前填充
padEnd是從前往后
另一個(gè)用途是提示字符串格式。
parseInt parseFoat
parseInt(a) 可以將a轉(zhuǎn)化為int類(lèi)型 同理parseFloat
parseInt()直接舍去小數(shù)部分 不會(huì)改變?cè)禃?huì)返回值
Pop
pop() 方法將刪除 arrayObject 的最后一個(gè)元素，把數(shù)組長(zhǎng)度減1，并且返回它刪除的元素的值。如果數(shù)組已經(jīng)為空，則 pop()不改變數(shù)組，并返回 undefined 值。
push
操作后的返回值是數(shù)組的長(zhǎng)度
Promise
基礎(chǔ)promise
return Promise.reject(new Error('api地址錯(cuò)誤'))可以手動(dòng)返回一個(gè)失敗情況的promise請(qǐng)求其括號(hào)內(nèi)的內(nèi)容就會(huì)傳遞到后面.catch后面的參數(shù)里
.catch(err => { Console.log(err) })控制臺(tái)輸出： Error: api地址錯(cuò)誤
promise的all和allSettled
只要p1 和 p2 有一個(gè)成功就返回Promise成功 全部失敗就返回失敗
const result = Promise.allSettled([p1, p2])只要p1 和 p2 有一個(gè)失敗就返回Promise失敗 全部成功就返回成功
Const result = Promise.all([p1, p2])使用：
Promise.all([getControlGroupData(),getControlGroupIndexData()]).then((res:any) => {getDataChange(res) // 返回的res是數(shù)組，分布是兩個(gè)promise的res返回 }).catch((e) =>{console.warn(e); }) // 請(qǐng)求因子組 const getControlGroupData = () => {return new Promise(resolve => {if(data.groupId) {resolve('')return}waterComprehensiveApi.factorGroupQuality().then(res => {const resData = resconst filData = resData.filter((item:{code:string}) =>item.code === 'EVALUATION_5')data.groupId = filData[0].idresolve({ code: data.groupId })})}) } // 請(qǐng)求因子參數(shù)字典 const getControlGroupIndexData = () => {return new Promise(resolve => {waterComprehensiveApi.queryFactorIndex().then(res => {const resData = resdata.keyList = resDataresolve({ data: resData })})}) }prototype 對(duì)象添加屬性
prototype 屬性使您有能力向?qū)ο筇砑訉傩院头椒ā?br /> 語(yǔ)法:
object.prototype.name=valuereduce()函數(shù)
reduce()函數(shù)接收的參數(shù)和map()類(lèi)似，一個(gè)函數(shù)f，一個(gè)list，但行為和map()不同，reduce()傳入的函數(shù)f必須接收兩個(gè)參數(shù)，reduce()對(duì)list的每個(gè)元素反復(fù)調(diào)用函數(shù)f，并返回最終結(jié)果值。
例子：
如果把初始值設(shè)置為100
reduce(f, [1, 3, 5, 7, 9], 100) # 返回結(jié)果為125 // prev參數(shù)為一開(kāi)始賦值的參數(shù) 比如 0 或者上一輪return的參數(shù) (prev + cur),cur 為當(dāng)前數(shù)組的參數(shù)比如1 const arr = [1, 2, 3, 4, 5] const sum = arr.reduce((prev, cur) => { return prev + cur }, 0) console.log(sum) // 15reverse()
reverse() 方法用于顛倒數(shù)組中元素的順序。
用法：
**注釋：**該方法會(huì)改變?cè)瓉?lái)的數(shù)組，而不會(huì)創(chuàng)建新的數(shù)組。
如果要讓字符串顛倒可以這樣
replace
url = "x={x}" var a = "x" url.replace('{' + a + '}', 5); 得到 url = "x=5"提取字符串中的數(shù)字部分 ‘dsada1564dsad’
item.value = item.value.replace(/[^d]/g,' ');// 1564 去除字符串中的數(shù)字 item.unit = item.value.replace(/[0-9]+/g,"") 去除字符串中的數(shù)字和小數(shù)點(diǎn) . item.unit = item.value.replace(/[0-9,.]+/g,"") 去除空格 console.log('hel lo wor ld'.replace(/s/g, '')); // helloworldrepeat（）
repeat方法返回一個(gè)新字符串，表示將原字符串重復(fù)n次。
'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // ""Set類(lèi)
Map和Set對(duì)象是ES6中新增的類(lèi)型。ES6中的Map和Set和java中并無(wú)太大出入。
Set和Map類(lèi)似，也是一組key的集合，但不存儲(chǔ)value。由于key不能重復(fù)，所以，在Set中，沒(méi)有重復(fù)的key。
要?jiǎng)?chuàng)建一個(gè)Set，需要提供一個(gè)Array作為輸入，或者直接創(chuàng)建一個(gè)空Set：
重復(fù)元素在Set中自動(dòng)被過(guò)濾：
var s = new Set([1, 2, 3, 3, '3']); s; // Set {1, 2, 3, "3"}通過(guò)add(key)方法可以添加元素到Set中，可以重復(fù)添加，但不會(huì)有效果：
var s = new Set([1, 2, 3]); s.add(4); s; // Set {1, 2, 3, 4} s.add(4); s; // Set {1, 2, 3, 4}通過(guò)delete(key)方法可以刪除元素：
var s = new Set([1, 2, 3]); s; // Set {1, 2, 3} s.delete(3); s; // Set {1, 2}Set對(duì)象可以自動(dòng)排除重復(fù)項(xiàng)
const stringArr = ['string','string','string3','string4'];var newSet = new Set(stringArr);for(let key of newSet){console.log(key);} 輸出：string，string3，string4將set類(lèi)變成數(shù)組
var arr = [2,7,1,7,8,2] var newArr = [...new Set(arr)] // 去重split
split() 方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組。
**注釋：**如果把空字符串 (“”) 用作 separator，那么 stringObject
中的每個(gè)字符之間都會(huì)被分割。
**注釋：**String.split()執(zhí)行的操作與 Array.join 執(zhí)行的操作是相反的。
splice slice
splice會(huì)改變?cè)瓟?shù)組,splice不可以對(duì)字符串操作
splice（index，a，value，value....）index代表從函數(shù)第幾位開(kāi)始加入value，
a代表刪除并替換value的位數(shù)，如果是0就代表不刪除直接添加。
value（可選）向數(shù)組添加的新項(xiàng)目。
當(dāng)要?jiǎng)h除數(shù)組的第二位和第三位時(shí)就可以這么寫(xiě)：splice(1,2)
splice沒(méi)有返回值，只是對(duì)數(shù)組的操作。
slice（start，end）返回值 ，從數(shù)組/字符串的start到end 不會(huì)改變?cè)瓟?shù)組不包括end那位
當(dāng)使用負(fù)數(shù)作為參數(shù)時(shí)就表示從數(shù)組末尾開(kāi)始計(jì)數(shù)。
而當(dāng)省略第二個(gè)可選參數(shù)時(shí)，表示一直找到數(shù)組末尾。所以在數(shù)組上使用slice(-1)就可以獲取數(shù)組的最后一個(gè)元素了。(-1指最后一個(gè)元素，-2 指倒數(shù)第二個(gè)元素) .
substring()
substring() 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。
返回值：
一個(gè)新的字符串，該字符串值包含 stringObject 的一個(gè)子字符串，其內(nèi)容是從 start 處到 stop-1處的所有字符，其長(zhǎng)度為 stop 減 start。
說(shuō)明：
substring()方法返回的子串包括 start 處的字符，但不包括 stop 處的字符。
如果參數(shù) start 與 stop 相等，那么該方法返回的就是一個(gè)空串（即長(zhǎng)度為0的字符串）。如果 start 比 stop 大，那么該方法在提取子串之前會(huì)先交換這兩個(gè)參數(shù)。
**重要事項(xiàng)：**與 slice() 和 substr() 方法不同的是，substring()不接受負(fù)的參數(shù)。
sort
allData: [{name: '馬佳輝',value:65},{name: '馬',value:58},{name: '馬佳',value:12} ]排序方法
this.allData.sort((a,b) => {return a.value - b.value //從小到大排序（升序）// b.value-a.value從大到小（降序） }) var dataList = [2,5,8,1,3] dataList.sort((a,b) => {return a - b; })stopPropagation() 事件方法
防止同一事件的任何傳播：
function func1(event) {alert("DIV 1");event.stopPropagation(); } stopPropagation() 方法防止調(diào)用相同事件的傳播。傳播意味著向上冒泡到父元素或向下捕獲到子元素。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-lKVBIYix-1669349956873)(media/image34.png)]{width=“3.9166666666666665in”
height=“1.4270833333333333in”}
select()
方法用于選擇該元素中的文本。
<textarea id="txt1">Hello world....</textarea> document.getElementById("txt1").select() // 獲得HEllow world....trimStart()，trimEnd()，trim()
只能對(duì)字符串操作 不然會(huì)報(bào)錯(cuò)
trim() 方法用于刪除字符串的頭尾空白符，空白符包括：空格、制表符tab、換行符等其他空白符等。
trim() 方法不會(huì)改變?cè)甲址?br /> trim() 方法不適用于 null, undefined, Number 類(lèi)型。
ES2019 對(duì)字符串實(shí)例新增了trimStart()和trimEnd()這兩個(gè)方法。它們的行為與trim()一致，trimStart()消除字符串頭部的空格，trimEnd()消除尾部的空格。它們返回的都是新字符串，不會(huì)修改原始字符串。
上面代碼中，trimStart()只消除頭部的空格，保留尾部的空格。trimEnd()也是類(lèi)似行為。
除了空格鍵，這兩個(gè)方法對(duì)字符串頭部（或尾部）的 tab鍵、換行符等不可見(jiàn)的空白符號(hào)也有效。
toFixed
Num.toFixed(2) 四舍五入保留兩位小數(shù)，并把返回值轉(zhuǎn)化為字符串
toString()
轉(zhuǎn)換為字符串 number.toString()
toLowerCase
所有字母變成小寫(xiě)
name.toLowerCase()
toUpperCase
所有字母變成大寫(xiě)
name.toUpperCase()typeof
console.log(typeof '132'); // string console.log(typeof 123); // number console.log(typeof []); // object console.log(typeof {}); // object console.log(typeof null); // object console.log(typeof undefined); // undefined console.log(typeof NaN); // number console.log(typeof true); // boolean 基礎(chǔ)數(shù)據(jù)可以用 typeof '132' === string （true）判斷unshift() 方
unshift() 方法將新項(xiàng)添加到數(shù)組的開(kāi)頭，并返回新的長(zhǎng)度。
注釋： unshift() 方法會(huì)改變數(shù)組的長(zhǎng)度。
window
ES6
為了保持兼容性，var命令和function命令聲明的全局變量，依舊是頂層對(duì)象的屬性；另一方面規(guī)定，let命令、const命令、class命令聲明的全局變量，不屬于頂層對(duì)象的屬性。也就是說(shuō)，從ES6 開(kāi)始，全局變量將逐步與頂層對(duì)象的屬性脫鉤。
上面代碼中，全局變量a由var命令聲明，所以它是頂層對(duì)象的屬性；全局變量b由let命令聲明，所以它不是頂層對(duì)象的屬性，返回undefined。
window.open('www.baidu.com', '_blank'); // 新開(kāi)頁(yè)跳轉(zhuǎn)外部鏈接 window.location.href = 'www.baidu.com' // 當(dāng)前頁(yè)跳轉(zhuǎn)外部鏈接 獲取瀏覽器URL地址 window.location.href（vue內(nèi)如果使用route.path只能獲得/hy-screen等，不能獲得前綴地址）window.addEventListener
mousewheel
window.addEventListener("mousewheel", this.handleScroll, false);監(jiān)聽(tīng)鼠標(biāo)滾輪，方法調(diào)用 handleScroll（e） e.deltaY為100就是滾輪向下滾了一格，-100就是向上滾
或者綁定ref
但是vue有更好的方法直接在元素上綁定@mousewheel=“handleScroll”
resize: 監(jiān)聽(tīng)屏幕大小變化
window.requestAnimationFrame
window.requestAnimationFrame(callback);參數(shù)：callback
下一次重繪之前更新動(dòng)畫(huà)幀所調(diào)用的函數(shù)(即上面所說(shuō)的回調(diào)函數(shù))。該回調(diào)函數(shù)會(huì)被傳入DOMHighResTimeStamp參數(shù)，該參數(shù)與performance.now()的返回值相同，它表示requestAnimationFrame() 開(kāi)始去執(zhí)行回調(diào)函數(shù)的時(shí)刻。
可選鏈操作符? ?? ||
如果讀取對(duì)象內(nèi)部的某個(gè)屬性，往往需要判斷一下該對(duì)象是否存在，比如獲取list.info.base.userName的值
// 錯(cuò)誤寫(xiě)法，當(dāng)某一層級(jí)值為null或undefined時(shí)，會(huì)報(bào)錯(cuò) const userName = list.info.base.userName; // 正確寫(xiě)法（我們常用的方式） const userName = (list && list.info && list.info.base && list.info.base.userName) || 'userName要取的userName處于對(duì)象的第三層，需要三層&&判斷才能取到值。
es2020引入鏈合并運(yùn)算符，簡(jiǎn)化上面的寫(xiě)法。
鏈合并運(yùn)算符，在調(diào)用的時(shí)候判斷左側(cè)的對(duì)象是否為null或undefined。如果是的，就不再往下運(yùn)算，而是返回undefined。
三種用法：
判斷符號(hào)^
判斷規(guī)則： a^b A b 返回值 1 1 0 1 0 1 0 1 1 0 0 0** 指數(shù)
2 ** 10 = 1024 2 ** 3 = 8屬性名當(dāng)作變量
var name = 'key' var obj = {[name]: 'aaaa' } console.log(obj) // {key: 'aaaa'}深拷貝：
b = JSON.parse(JSON.stringify(a))函數(shù)擴(kuò)展
表達(dá)式還可以用于定義方法名。
let obj = { ['h' + 'ello']() {return 'hi'; }}; obj.hello() // hiES6
允許字面量定義對(duì)象時(shí)，用方法二（表達(dá)式）作為對(duì)象的屬性名，即把表達(dá)式放在方括號(hào)內(nèi)。
下面是另一個(gè)例子。
let lastWord = 'last word'; const a = {'first word': 'hello',[lastWord]: 'world'}; }a['first word'] // "hello" a[lastWord] // "world" a['last word'] // "world"指數(shù)運(yùn)算符
ES2016 新增了一個(gè)指數(shù)運(yùn)算符（**）。
2 ** 2 // 4 這個(gè)運(yùn)算符的一個(gè)特點(diǎn)是右結(jié)合，而不是常見(jiàn)的左結(jié)合。多個(gè)指數(shù)運(yùn)算符連用時(shí)，是從最右邊開(kāi)始計(jì)算的。 // 相當(dāng)于 2 ** (3 ** 2) 2 ** 3 ** 2 // 512上面代碼中，首先計(jì)算的是第二個(gè)指數(shù)運(yùn)算符，而不是第一個(gè)。
指數(shù)運(yùn)算符可以與等號(hào)結(jié)合，形成一個(gè)新的賦值運(yùn)算符（**=）。
擴(kuò)展運(yùn)算符 三個(gè)點(diǎn)（…）
對(duì)象中的擴(kuò)展運(yùn)算符(…)用于取出參數(shù)對(duì)象中的所有可遍歷屬性，拷貝到當(dāng)前對(duì)象之中
let bar = { a: 1, b: 2 }; let baz = { ...bar }; // { a: 1, b: 2 }*- 擴(kuò)展運(yùn)算符可以與解構(gòu)賦值結(jié)合起來(lái)，用于生成數(shù)組
如果用戶(hù)自定義的屬性，放在擴(kuò)展運(yùn)算符后面，則擴(kuò)展運(yùn)算符內(nèi)部的同名屬性會(huì)被覆蓋掉。
let bar = {a: 1, b: 2}; let baz = {...bar, ...{a:2, b: 4}}; *// {a: 2, b: 4}*如果把自定義屬性放在擴(kuò)展運(yùn)算符前面，就變成了設(shè)置新對(duì)象的默認(rèn)屬性值。
let aWithDefaults = { x: 1, y: 2, ...a };如果擴(kuò)展運(yùn)算符調(diào)用的是對(duì)象，其只是調(diào)用了他的引用，當(dāng)里面里面的內(nèi)容被改變的時(shí)候其之前運(yùn)用…生成的對(duì)象內(nèi)的數(shù)據(jù)也會(huì)相應(yīng)改變與數(shù)組的擴(kuò)展運(yùn)算符一樣，對(duì)象的擴(kuò)展運(yùn)算符后面可以跟表達(dá)式。
const obj = {...(x > 1 ? {a: 1} : {}),b: 2 };- 可以將數(shù)組轉(zhuǎn)換為參數(shù)序列
如果將擴(kuò)展運(yùn)算符用于數(shù)組賦值，只能將有擴(kuò)展運(yùn)算符的參數(shù)放在參數(shù)的最后一位，否則會(huì)報(bào)錯(cuò)。
- 擴(kuò)展運(yùn)算符還可以將字符串轉(zhuǎn)為真正的數(shù)組
https://blog.csdn.net/astonishqft/article/details/82899965
函數(shù)默認(rèn)值設(shè)置
function Point(x = 0, y = 0) {this.x = x;this.y = y; } const p = new Point(); p // { x: 0, y: 0 }模板字符串
ES6中提供了模版字符串，用`（反引號(hào)）標(biāo)識(shí)，用${}將變量括起來(lái)。上面的例子可以用模版字符串寫(xiě)成下面這樣：
$("#result").append(`He is <b>${person.name}</b>and we wish to know this${person.age}.that is all` ); 注意：如果使用模版字符串表示多行字符串，所有的空格和縮進(jìn)都會(huì)被保存在輸出中！！console.log( `No matter what you do, I trust you.`);顯然，由于反引號(hào)是模版字符串的標(biāo)識(shí)，如果我們需要在字符串中使用反引號(hào)，我們就需要對(duì)其進(jìn)行轉(zhuǎn)義，如下所示：
No matter what you do, I trust you.`[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-GHtiNdZF-1669349956874)(media/image35.png)]{width=“4.666666666666667in”
height=“0.9895833333333334in”}
模板字符串內(nèi)還可以調(diào)用任意的JavaScript表達(dá)式，還可以進(jìn)行運(yùn)算，以及引用對(duì)象屬性還有函數(shù)
當(dāng)調(diào)用的函數(shù)的返回值不是字符串的時(shí)候會(huì)被轉(zhuǎn)化為字符串
所有模板字符串的空格和換行，都是被保留的，比如
- 標(biāo)簽前面會(huì)有一個(gè)換行。如果你不想要這個(gè)換行，可以使用trim方法消除它。
變量的解構(gòu)賦值
以前，為變量賦值，只能直接指定值。
let a = 1;let b = 2;let c = 3;ES6 允許寫(xiě)成下面這樣。
let [a, b, c] = [1, 2, 3];當(dāng)右邊的數(shù)組數(shù)量大于左邊的時(shí)候也是可以對(duì)應(yīng)賦值的，但是后面的如果不是數(shù)組就會(huì)報(bào)錯(cuò)
對(duì)于 Set 結(jié)構(gòu)，也可以使用數(shù)組的解構(gòu)賦值。
事實(shí)上，只要某種數(shù)據(jù)結(jié)構(gòu)具有 Iterator接口，都可以采用數(shù)組形式的解構(gòu)賦值。
function fibs() {let a = 0;let b = 1;while (true) {yield a;[a, b] = [b, a + b];} } let [first, second, third, fourth, fifth, sixth] = fibs(); sixth // 5默認(rèn)值解構(gòu)賦值允許指定默認(rèn)值。
let [foo = true] = []; foo // true let [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'注意，ES6
內(nèi)部使用嚴(yán)格相等運(yùn)算符（===），判斷一個(gè)位置是否有值。所以，只有當(dāng)一個(gè)數(shù)組成員嚴(yán)格等于undefined，默認(rèn)值才會(huì)生效。
解構(gòu)不僅可以用于數(shù)組，還可以用于對(duì)象。
let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; foo // "aaa" bar // "bbb"對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；而對(duì)象的屬性沒(méi)有次序，變量必須與屬性同名，才能取到正確的值。
對(duì)象的解構(gòu)賦值，可以很方便地將現(xiàn)有對(duì)象的方法，賦值到某個(gè)變量。
上面代碼的例一將Math對(duì)象的對(duì)數(shù)、正弦、余弦三個(gè)方法，賦值到對(duì)應(yīng)的變量上，使用起來(lái)就會(huì)方便很多。例二將console.log賦值到log變量。
如果變量名與屬性名不一致，必須寫(xiě)成下面這樣。
字符串的解構(gòu)賦值
字符串也可以解構(gòu)賦值。這是因?yàn)榇藭r(shí)，字符串被轉(zhuǎn)換成了一個(gè)類(lèi)似數(shù)組的對(duì)象。
類(lèi)似數(shù)組的對(duì)象都有一個(gè)length屬性，因此還可以對(duì)這個(gè)屬性解構(gòu)賦值。
let {length : len} = 'hello'; len // 5遍歷 Map 結(jié)構(gòu)
任何部署了 Iterator 接口的對(duì)象，都可以用for…of循環(huán)遍歷。Map
結(jié)構(gòu)原生支持 Iterator
接口，配合變量的解構(gòu)賦值，獲取鍵名和鍵值就非常方便。
如果只想獲取鍵名，或者只想獲取鍵值，可以寫(xiě)成下面這樣。
// 獲取鍵名 for (let [key] of map) {} // 獲取鍵值 for (let [,value] of map) {}防抖、節(jié)流
data(){return {timer: null} } // 節(jié)流 點(diǎn)擊后1秒內(nèi)再次點(diǎn)擊則重新開(kāi)始計(jì)時(shí)，最后一次點(diǎn)擊1秒后再調(diào)用方法 changeHomeImg () {const that = thisif (this.timer) {clearTimeout(this.timer)}this.timer = setTimeout(function () {that.changeNav() // 需要執(zhí)行的方法that.timer = undefined}, 1000) }, // 防抖 短時(shí)間內(nèi)點(diǎn)擊后立刻觸發(fā)方法，1秒內(nèi)無(wú)法再次觸發(fā) changeHomeImg () {const that = thisif (this.timer) {return}this.changeNav() // 需要執(zhí)行的方法this.timer = setTimeout(function () {that.timer = undefined}, 1000) }, // 節(jié)流 點(diǎn)擊后一秒后執(zhí)行方法，在這期間點(diǎn)擊無(wú)效，1秒后才能重新點(diǎn)擊 changeHomeImg () { const that = thisif (!this.timer) {this.timer = setTimeout(function () {that.changeNav() // 需要執(zhí)行的方法that.timer = undefined}, 1000) } }正則表達(dá)式
/^(?:(?!0{1,4})d{1,4}|10{4}|0)$/ 大于0小于10000 /^100$|^(d|[1-9]d)(.d+)*$/ 大于0小于100 /^[1-9]d{0,5}$/ 小于7位 也就是 0-999999對(duì)象去重
const noRepeat = [...new Set(arr.map(item => JSON.stringify(item)))]// 反序列化 const newArr = noRepeat.map(item => JSON.parse(item))刪除dom節(jié)點(diǎn)的子元素
const dom = document.querySelector('#containers') if(!dom) return let child = dom.lastElementChild while (child) { // 清除dom節(jié)點(diǎn)的子元素dom.removeChild(child)child = dom.lastElementChild } const item = document.querySelector('#itemId') while (item.firstChild) {item.removeChild(item.firstChild) }解決內(nèi)存溢出
"--max_old_space_size=20000" // 增加這一句就可以了!
過(guò)濾特殊字符串
// eslint-disable-next-line no-useless-escape
this.fileNameKey = this.fileNameKey.replace(/[-_,!|~`()#$%^&*{}:]/g,‘’);
解決uview 的$u為未定義問(wèn)題
transpileDependencies: ['@ued_fpi/uview-ui'], // 防止uview文件未編譯npm run build時(shí)提示vue/types/jsx.d.ts中的錯(cuò)誤
— 主要是因?yàn)関ue版本過(guò)高引起的，查看了一下vue的版本是vue@2.7.10，需要vue低版本的才可以打包成功
– 解決方案：
1、npm install vue@2.6.14 或者 npm install vue@2.6.14 --legacy-peer-deps
2、npm install vue-template-compiler@2.6.14 或npm install vue-template-compiler@2.6.14 --legacy-peer-deps
總結(jié)
以上是生活随笔為你收集整理的ES6JS笔记以及部分运行问题记录的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 关于软件测试的英语面试题,软件测试工程师
- 下一篇： 重磅：IBM以340亿美元收购红帽软件