一些小操作

最新推荐文章于 2024-08-30 20:29:15 发布

zhangnian-张张张

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量42

点赞数

文章标签： javascript 前端开发语言

原文链接：https://juejin.cn/post/7172088772257906725

版权

本文介绍了JavaScript中将字符串转换为数字、数组扁平化、去重的方法，包括使用Number函数、Array.flat以及Set数据结构。同时，讲解了如何实现并集、交集和差集的操作，以及将伪数组转化为数组。此外，还讨论了CSS滤镜在实现网页置灰和其他视觉效果中的应用。

摘要由CSDN通过智能技术生成

1. 字符串转数字
大多数人会使用 Number（）
后可以用～～ / +

2.数组扁平化

let arr = [1, [2, [3, 4，5]]];
function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr))// [1, 2, 3, 4，5]

后可以使用

let arr = [1, [2, [3, 4，5]]]; 
console.log(arr.flat(Infinity)); // [1, 2, 3, 4，5]

3.数组去重复

let arr = [3, 5, 2, 2, 5, 5]; 
let setArr = new Set(arr)            // 返回set数据结构Set(3) {3, 5, 2} 
//方法一 es6的...解构 
let unique1 = [...setArr ];          //去重转数组后 [3,5,2] 
//方法二 Array.from()解析类数组为数组 
let unique2 = Array.from(setArr )    //去重转数组后 [3,5,2]

4.字符串去重

let str = "352255"; 
let unique = [...new Set(str)].join(""); // 352

5.实现并集、交集、和差集

let a = new Set([1, 2, 3]); 
let b = new Set([4, 3, 2]); 
// 并集 
let union = new Set([...a, ...b]); // Set {1, 2, 3, 4} 
// 交集 
let intersect = new Set([...a].filter(x => b.has(x))); // set {2, 3} 
// （a 相对于 b 的）差集 
let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}

6.将伪数组转化为数组

//伪数组转换为数组
var nodeList = document.querySelectorAll('div');
console.log([...nodeList]);  // [div, div, div ... ]

7.配合rest 运算符应用

function sumRest (...m) {
    var total = 0; 
    for(var i of m){
        total += i;
    }
    return total;
}
console.log(sumRest(1,2,3));//6

8.网站置灰
CSS滤镜 -webkit-filter

html.gray-mode { filter: grayscale(.95); -webkit-filter: grayscale(.95); }

blur 模糊-webkit-filter:blur(2px);

brightness 亮度-webkit-filter:brightness(25%);

contrast 对比度-webkit-filter: contrast(50%);

drop-shadow 阴影-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

opacity 透明度-webkit-filter: opacity(50%);

grayscale 灰度-webkit-filter: grayscale(80%);

sepia 褐色-webkit-filter: sepia(100%);

invert 反色-webkit-filter: invert(100%);

hue-rotate 色相旋转-webkit-filter:hue-rotate(180deg);

saturate 饱和度-webkit-filter: saturate(1000%);