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