目錄

?生成數(shù)組

數(shù)組簡單數(shù)據(jù)去重

多數(shù)組取交集

重新加載當(dāng)前頁面

滾動到頁面頂部

查找最大值索引

進(jìn)制轉(zhuǎn)換

文本粘貼

刪除無效屬性

隨機(jī)顏色生成

---

生成數(shù)組

當(dāng)你需要要生成一個0-99的數(shù)組

// 生成一個0-99的數(shù)組
// 方案一
const createArr = n => Array.from(new Array(n), (v, i) => i);
const arr = createArr(100);
console.log(arr, "------------");
// 方案二 利用fill填充和map改變數(shù)組
const createArr1 = n => new Array(n).fill(0).map((v, i) => i);
const arr1 = createArr1(100);
console.log(arr1, "------------");

Array.from()?是 ECMAScript 6 中新增的一個方法，它可以從類數(shù)組對象或可迭代對象（如字符串、Set、Map、NodeList 等）創(chuàng)建一個新的數(shù)組實例。

舉例如下：

// 從類數(shù)組對象創(chuàng)建數(shù)組
let arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
let arr = Array.from(arrayLike);
console.log(arr); // 輸出: ["a", "b", "c"]// 從 NodeList 創(chuàng)建數(shù)組
let divs = document.querySelectorAll('div');
let divArray = Array.from(divs);
console.log(divArray.length); // 輸出: 找到的div元素數(shù)量// 同時使用映射函數(shù)
let numbers = Array.from([1, 2, 3, 4], x => x * 2);
console.log(numbers); // 輸出: [2, 4, 6, 8]

數(shù)組簡單數(shù)據(jù)去重

當(dāng)你需要將數(shù)組中的所有重復(fù)的元素只保留一個

// 去重
const removeData = list => [...new Set(list)];
console.log(removeData([0, 0, 1, 2, 1, 3, 5, 2]), "------------");

?

Set是es6新增的數(shù)據(jù)結(jié)構(gòu)，似于數(shù)組，但它的一大特性就是所有元素都是唯一的，沒有重復(fù)的值，我們一般稱為集合。

也可以對對象數(shù)組進(jìn)行去重，使用Set數(shù)據(jù)結(jié)構(gòu)去除重復(fù)對象：new Set(strings)進(jìn)行轉(zhuǎn)型。

• 但是因為它是一個類似數(shù)組結(jié)構(gòu)，所以需要轉(zhuǎn)型為真正的數(shù)組去使用。所以需要用Array.from。
• 注：如果里面不是一個string類型，而是對象不會去重
• 因此需要對里面的對象數(shù)據(jù)都轉(zhuǎn)為string類型，去重后再轉(zhuǎn)parse

const list =[{ name: "張三", age: 18, address: "北京" },{ name: "李四", age: 20, address: "天津" },{ name: "張三", age: 18, address: "北京" },
]const strings = list.map((item) => JSON.stringify(item)) // 1、轉(zhuǎn)化成string類型
const removeDupList = Array.from(new Set(strings))  // 2、轉(zhuǎn)化為真正的數(shù)組
const result = removeDupList.map((item) => JSON.parse(item)) // 3、字符串類型轉(zhuǎn)化為對象類型
console.log('數(shù)組去重',result)  // [{name: '張三', age: 18, address: '北京'}, {name: '李四', age: 20, address: '天津'}]

多數(shù)組取交集

當(dāng)你需要取多個數(shù)組中的交集

// 多數(shù)組取交集
const intersection = (a, ...arr) => {return [...new Set(a)].filter(v => arr.every(b => b.includes(v)));
};
intersection([1, 2, 3, 4], [2, 3, 4, 7, 8], [1, 3, 4, 9]);

?

web

重新加載當(dāng)前頁面

const reload = () => location.reload();
reload()

滾動到頁面頂部

如果你需要將頁面翻到最頂部

const goToTop = () => window.scrollTo(0, 0);
goToTop(

查找最大值索引

但你需要找到一個數(shù)組中的最大值的索引

const indexOfMax = arr => arr.reduce((prev, curr, i, a) => (curr > a[prev] ? i : prev));
indexOfMax([1, 3, 4, 7, 5]); // 2
console.log(indexOfMax([1, 3, 4, 7, 5]), "------------");

參數(shù)：?
?參數(shù)一： callback 函數(shù)（執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù)）：

• ? ? prev 必需 （上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））
• ? ? cur 必需（數(shù)組中當(dāng)前被處理的元素）
• ? ? index 可選 （當(dāng)前元素在數(shù)組中的索引）
• ? ? arr 可選 （調(diào)用 reduce 的數(shù)組）

參數(shù)二：initialValue 可選 （表示初始值，作為第一次調(diào)用 callback 的第一個參數(shù)。）

• ? ??提供初始值，cur 從數(shù)組第一項開始，若不提供初始值，則 cur 從第二項開始執(zhí)行，對應(yīng)的第一次 prev 是數(shù)組第一項的值?

reduce()方法可以搞定的東西特別多，就是循環(huán)遍歷能做的，reduce都可以做，比如數(shù)組求和、數(shù)組求積、統(tǒng)計數(shù)組中元素出現(xiàn)的次數(shù)、數(shù)組去重等等。

reduce() 方法對數(shù)組中的每個元素執(zhí)行一個由您提供的reduce函數(shù)(依次執(zhí)行)，將其結(jié)果匯總為單個返回值。

進(jìn)制轉(zhuǎn)換

將10進(jìn)制轉(zhuǎn)換成n進(jìn)制，可以使用toString(n)

const toDecimal = (num, n = 10) => num.toString(n);
// 假設(shè)數(shù)字10要轉(zhuǎn)換成2進(jìn)制
toDecimal(10, 2); // '1010'
console.log(toDecimal(10, 2), "------------");

將n進(jìn)制轉(zhuǎn)換成10進(jìn)制，可以使用parseInt(num, n)

const toDecimalism = (num, n = 10) => parseInt(num, n);
toDecimalism(1010, 2);
console.log(toDecimalism(1010, 2), "------------");

?

文本粘貼

當(dāng)你需要復(fù)制文本到粘貼板上

const copy = (text) => navigator.clipboard?.writeText && navigator.clipboard.writeText(text)
copy('你需要粘貼的文本')

刪除無效屬性

當(dāng)你需要刪除一個對象中的屬性值為null或undefined的所有屬性

const removeNullUndefined = (obj) => Object.entries(obj).reduce((a, [k, v]) => (v == null ? a : ((a[k] = v), a)), {});removeNullUndefined({name: '', age: undefined, sex: null}) // { name: '' }

?上面一長串連體寫法可能不易懂，我拆分了一下，等價于下面寫法

const removeNullUndefined = obj =>Object.entries(obj).reduce((a, [k, v]) => {if (v == null) { //console.log( undefined == null ) //true因此這里只需要判斷null即可return a;} else {a[k] = v;return a;}}, {});console.log(removeNullUndefined({ name: "1", age: undefined, sex: null }), "------------");

?

console.log( undefined == null ) //true

原因：

????????null 和 undefined都代表著無效的值。

????????規(guī)范中提到， 要比較相等性之前，不能將 null 和 undefined 轉(zhuǎn)換成其他任何值，并且規(guī)定null 和 undefined 是相等的。

console.log( undefined === null ) //false

全等于狀態(tài)下，是false，這個很好理解了。它們不屬于同一數(shù)據(jù)類型。

????????typeof null? //?object

????????typeof undefined? // undefined

隨機(jī)顏色生成

當(dāng)你需要獲取一個隨機(jī)顏色

const getRandomColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
getRandomColor(); // '#4c2fd7'