目录
生成数组
当你需要要生成一个0-99的数组
// 生成一个0-99的数组
// 方案一
const createArr = n => Array.from(new Array(n), (v, i) => i);
const arr = createArr(100);
console.log(arr, "------------");
// 方案二 利用fill填充和map改变数组
const createArr1 = n => new Array(n).fill(0).map((v, i) => i);
const arr1 = createArr1(100);
console.log(arr1, "------------");
Array.from()
是 ECMAScript 6 中新增的一个方法,它可以从类数组对象或可迭代对象(如字符串、Set、Map、NodeList 等)创建一个新的数组实例。举例如下:
// 从类数组对象创建数组 let arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3}; let arr = Array.from(arrayLike); console.log(arr); // 输出: ["a", "b", "c"] // 从 NodeList 创建数组 let divs = document.querySelectorAll('div'); let divArray = Array.from(divs); console.log(divArray.length); // 输出: 找到的div元素数量 // 同时使用映射函数 let numbers = Array.from([1, 2, 3, 4], x => x * 2); console.log(numbers); // 输出: [2, 4, 6, 8]
数组简单数据去重
当你需要将数组中的所有重复的元素只保留一个
// 去重
const removeData = list => [...new Set(list)];
console.log(removeData([0, 0, 1, 2, 1, 3, 5, 2]), "------------");
Set是es6新增的数据结构,似于数组,但它的一大特性就是所有元素都是唯一的,没有重复的值,我们一般称为集合。
也可以对对象数组进行去重,使用Set数据结构去除重复对象:
new Set(strings)
进行转型。
- 但是因为它是一个类似数组结构,所以需要转型为真正的数组去使用。所以需要用Array.from。
- 注:如果里面不是一个string类型,而是对象不会去重
- 因此需要对里面的对象数据都转为string类型,去重后再转parse
const list =[ { name: "张三", age: 18, address: "北京" }, { name: "李四", age: 20, address: "天津" }, { name: "张三", age: 18, address: "北京" }, ] const strings = list.map((item) => JSON.stringify(item)) // 1、转化成string类型 const removeDupList = Array.from(new Set(strings)) // 2、转化为真正的数组 const result = removeDupList.map((item) => JSON.parse(item)) // 3、字符串类型转化为对象类型 console.log('数组去重',result) // [{name: '张三', age: 18, address: '北京'}, {name: '李四', age: 20, address: '天津'}]
多数组取交集
当你需要取多个数组中的交集
// 多数组取交集
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
重新加载当前页面
const reload = () => location.reload();
reload()
滚动到页面顶部
如果你需要将页面翻到最顶部
const goToTop = () => window.scrollTo(0, 0);
goToTop(
查找最大值索引
但你需要找到一个数组中的最大值的索引
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]), "------------");
参数:
参数一: callback 函数(执行数组中每个值的函数,包含四个参数):
- prev 必需 (上一次调用回调返回的值,或者是提供的初始值(initialValue))
- cur 必需(数组中当前被处理的元素)
- index 可选 (当前元素在数组中的索引)
- arr 可选 (调用 reduce 的数组)
参数二:initialValue 可选 (表示初始值,作为第一次调用 callback 的第一个参数。)
- 提供初始值,cur 从数组第一项开始,若不提供初始值,则 cur 从第二项开始执行,对应的第一次 prev 是数组第一项的值
reduce()方法可以搞定的东西特别多,就是循环遍历能做的,reduce都可以做,比如数组求和、数组求积、统计数组中元素出现的次数、数组去重等等。
reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(依次执行),将其结果汇总为单个返回值。
进制转换
将10进制转换成n进制,可以使用toString(n)
const toDecimal = (num, n = 10) => num.toString(n);
// 假设数字10要转换成2进制
toDecimal(10, 2); // '1010'
console.log(toDecimal(10, 2), "------------");
将n进制转换成10进制,可以使用parseInt(num, n)
const toDecimalism = (num, n = 10) => parseInt(num, n);
toDecimalism(1010, 2);
console.log(toDecimalism(1010, 2), "------------");
文本粘贴
当你需要复制文本到粘贴板上
const copy = (text) => navigator.clipboard?.writeText && navigator.clipboard.writeText(text)
copy('你需要粘贴的文本')
删除无效属性
当你需要删除一个对象中的属性值为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都代表着无效的值。
规范中提到, 要比较相等性之前,不能将 null 和 undefined 转换成其他任何值,并且规定null 和 undefined 是相等的。
console.log( undefined === null ) //false
全等于状态下,是false,这个很好理解了。它们不属于同一数据类型。
typeof null // object
typeof undefined // undefined
随机颜色生成
当你需要获取一个随机颜色
const getRandomColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
getRandomColor(); // '#4c2fd7'