强化JS基础水平的10个单行代码来喽！（必看）

目录

 生成数组

数组简单数据去重

多数组取交集

重新加载当前页面

滚动到页面顶部

查找最大值索引

进制转换

文本粘贴

删除无效属性

随机颜色生成

---

生成数组

当你需要要生成一个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'