js小技巧

1、删除重复项
你主要使用循环来迭代整个 Array 以从中删除重复项。 但我将向你展示通过编写更少的代码来完成相同工作的专业方法。
let array = [100, 200, 200, 120, 238, 201, 201]
let newArray = Array.from(new Set(array));
console.log(newArray) // [ 100, 200, 120, 238, 201 ]

2、数组的最后一个元素
当你需要获取数组的最后一个元素时, slice 方法在 JavaScript 中非常有用。 只需将负数作为参数传递,它就会从最后一个索引开始对数组进行切片。

Slice 方法的最大好处是它不会影响你的原始数组。

let array = [1, 3, 4, 5, 6, 9, 10, 12]
console.log(array.slice(-1)) // [12]
console.log(array.slice(-2)) // [10, 12]
console.log(array.slice(-4)) // [6, 9 ,10, 12]

3、带有“Reduce”的数组的平均值
Reduce 方法是一种非常棒的遍历数组并获得单个输出的方法。 使用 Reduce 方法的一个示例是获取数组中值的平均值。

let array = [100, 120, 150, 101, 301]
let sum = array.reduce((previous, current)=> current += previous)
let average = sum / array.length
console.log(average) // 154.4
首先,我们声明一个包含值的数组,然后,我们使用 Reduce 方法计算所有值的总和,最后,我们将总和除以数组的长度以获得平均值。

4、具有唯一值的数组
拥有重复的数组对我们来说总是一个麻烦。 在 JavaScript 中,你可能使用map或filter来清除数组中的重复值。 但是我们还有另一种选择,那就是使用Set 对象。 看看下面的例子。

let array = [1, 3, 3, 1, 2, 4, 5, 6 ,5, 2]
const uniqueArray = […new Set(array)]
console.log(uniqueArray) // [1, 3, 2, 4, 5, 6]

5、缩短数组
想象一下,你有一个包含 100 个项目的数组,并且你想缩短它。 在 JavaScript 中,你可能会使用 splice 方法,但我将向你展示另一种截断数组的方法。

let array = [100, 200, 300, 400, 500, 600, 700]
//shortening your array
array.length = 4
console.log(array) // [100, 200, 300, 400]

6、将对象与扩展方法结合
假设你想将多个对象合并为一个。 在 JavaScript 中,你可以使用 Spread 方法,这是实现此目的的好方法。 在下面的示例代码中,我使用 spread 方法组合了两个对象。

示例如下:

let object1 = {‘a’ : 1, ‘b’ : 2, ‘c’: 3}
let object2 = {‘d’ : 4, ‘e’ : 5}
//combining the objects
const combine = {…object1 , …object2}
console.log(combine) // {‘a’ : 1, ‘b’ : 2, ‘c’: 3, ‘d’ : 4, ‘e’ : 5}

7、在数组中查找索引
假设你必须找到数组中特定元素的索引。 你可能会为此使用 findindex() 方法。 但是,在这个技巧中,我将向你展示另一种以更有效的方式完成相同工作的方法。
let array = [1, 4, 78, 90, 23, 123, 100, 230]
//IndexOf Method
console.log(array.indexOf(123)) // 5
console.log(array.indexOf(23)) // 4
console.log(array.indexOf(1)) // 0

8、展平数组
你是否有一个大型二维数组并想将其展平以制作单个一维数组? 这个技巧可能会对你有所帮助。 查看下面的示例代码。
let array = [1, 2, [3, 4], [5, 6, 7, ]];
const newArray = array.flat()
console.log(newArray) // [1, 2, 3, 4, 5, 6, 7]

9、以好的方式交换值
在不使用临时变量或第三方变量的情况下交换它们
let a = 5;
let b = 7;
console.log(a, b); // 5 7
[a, b] = [b, a];
console.log(a, b); // 7 5

10、用随机范围内值填充数组
const RandomIntArray = (min, max, n = 1) => Array.from({ length: n }, () => Math.floor(Math.random() * (max - min + 1)) + min)
RandomIntArray(5, 20, 4) // [ 8, 17, 13, 9]

11、合并两个数组
假设你有两个数组并且你想将它们组合起来。 此方法将帮助你快速完成此操作。

let array1 = [1, 2, 3, 4, 5, 6, 7];
let array2 = [8, 9, 10, 11, 12];
const merge = array1.concat(array2)
console.log(merge) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

12、获取当前对象的类型
这个技巧将帮助你了解任何对象的类型。 假设你使用 JavaScript 从网站请求数据,并且你想知道你收到的数据类型是字符串、整数等。

const GetType = v => v === undefined ? ‘undefined’ : v === null ? ‘null’ : v.constructor.name.toLowerCase();
console.log(GetType(“Programming”)) // String
console.log(GetType(123)) //Integer

13、当前网址
这个技巧将帮助你获取正在运行 Javascript 的当前 URL。 假设你想查看你当前看到的网页的网址,那么你可以使用下面的代码。

let GetCurrentURL = () => window.location.href;
GetCurrentURL() //https://medium.com/

14、计算数组中出现的次数
假设你有很大的重复值数组,并且你想计算特定元素的出现次数。

const CountOcc = (array, val) => array.reduce((x, v) => (v === val ? x + 1 : x), 0);
console.log(CountOcc([3, 3, 4, 1, 2, 5, 3, 6],3)) // 3
console.log(CountOcc([3, 4, 4, 1, 3, 6],4)) // 2

15、错误处理
在每种编程语言中,出现错误都是一种痛苦。 这个技巧将帮助你处理 JavaScript 编程中出现的错误。

try {
try condition
}
catch (exception_var) {
catch condition
}

16、修剪空格
本技巧将指导你使用正则表达式修剪字符串中的空格。 当你拥有原始数据并且想要删除空格时,此提示将非常有用。

let string = " a b cd e ";
let Trim = string.replace(/\s+/g, ‘’);
console.log(Trim)

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值