首页 > 编程语言 >11个提高技能的JavaScript 技巧,附中奖者名单

11个提高技能的JavaScript 技巧,附中奖者名单

时间:2022-11-21 16:00:59浏览次数:59  
标签:11 console log 示例 JavaScript 中奖者 example 技巧

11个提高技能的JavaScript 技巧,附中奖者名单_javascript

英文 | https://levelup.gitconnected.com/12-javascript-features-youve-probably-never-used-db932c413cdd

翻译 | 杨小二


当我开始学习 JavaScript 时,我总是很想找到可以节省时间并提高编程效率的技巧。我最终总是在 Stackoverflow 上搜索到答案,以及在Medium阅读许多 文章。

在本文中,我将分享我发现的 11 个提高效率的JavaScript开发技巧,它们将帮助你像专业程序员一样工作。不浪费任何时间,让我们开始吧。

1、你需要过滤掉错误值吗?

这个技巧肯定会帮助你摆脱错误值,例如 False、“ ”、0、undefined null。查看下面的示例代码以更好地理解。

//example code
const array = [1, 0, false, "", 2, null, 3]
const farray = array.filter(Boolean)
console.log(farray) // [1, 2, 3]

2、去除重复

我们都在 JavaScript 编程中遇到过重复值,最常用的摆脱它们的方法是将 indexOf() 方法与循环结合使用。今天这个技巧将向你展示两种快速去除重复的方法。

//example code
//method 1
const array = [1, 2, 1, 3, 3, 2, 4, 5, 5, 6, 1]
const farray=array.filter((item,idx,arr)=>arr.indexOf(item)===idx)
console.log(farray) // [1, 2, 3, 4, 5, 6]
//method 2
const farray2 =[...new Set(array)];
console.log(farray2) // [1, 2, 3, 4, 5, 6]

3、在 JavaScript 中截断数组

我主要使用这个技巧来缩短我的大数组或使其全空。我们将使用 Array 的长度参数并用一个值初始化它。该值可以是任何正数。

此值将根据你传递的大小截断你的数组。为了更好地理解,请看下面的示例代码。

// example code
const arr1 = [1, 2, 3, 4, 6]
arr1.length=2
console.log(arr1) // [1, 2]
const arr2 = [5, 4, 3, 9, 100, 101]
arr2.length=0
console.log(arr2) //[]
const arr3 = [5, 4, 3, 9, 100, 101]
arr3.length=7
console.log(arr3) //[5, 4, 3, 9, 100, 101, undefined]

4、合并多个对象

假设你需要在 JavaScript 中将两个对象合并为一个,以使其获得更好的信息。对于此任务,你可以使用扩展运算符 (...)。此运算符由三个点 (...) 表示。

它在许多情况下非常有用,我们将通过将两个数组合并为一个来尝试其中之一。查看下面的示例代码。

// example code
let employee = {
'id': 'S129',
'name': 'Haider',
'age': 22,
'addr': 'USA'
}
let job = {
'title': 'Software Engineer',
'location': 'Canada'
}
// merging them into one object
// using spread operator
let merge = {...employee, ...job};
console.log('Final Merged', merge);
//output:
// {
// 'id': 'S129',
// 'name': 'Haider',
// 'age': 22,
// 'addr': 'USA'
// 'title': 'Software Engineer',
// 'location': 'Canada'
// }

5、使用析构的简单交换

在其他编程语言中,交换是在第三个变量(通常名为 temp)的帮助下完成的。但是在 JavaScript 中,你可以使用析构方法在两个对象之间进行交换。查看下面的代码示例以更好地理解。

// example code
let x = 5;
let y = 9;
console.log(x, y); // 5 9
[x, y] = [y, x]; //swaping
console.log(x, y); // 9 5

6、将十进制转换为十六进制和二进制

这个很棒的技巧将帮助你使用内置方法 toString() 将十进制转换为十六进制和二进制值。

//example code
const deci = 500
console.log(deci.toString(2)) // 111110100
console.log(deci.toString(16)) // 1f4
console.log(deci.toString(8)) // 764

7、单行回文检查

这个短行代码技巧将教你如何检查一个字符串是不是回文。

// example code
function isPalindrome(str)
{
return str === str.split('').reverse().join('')


}
console.log(isPalindrome("mom")) // true
console.log(isPalindrome("ball")) // false
console.log(isPalindrome("maham")) // true

8、带空格的 JSON 输出

使 JSON 更清晰的一种简单方法是以其格式提供空格和缩进。这个技巧将帮助你使JSON 代码看起来更清晰和可读。查看下面的代码示例。

//example code
const employee = {
name : "Haider",
age : 22,
salary : 500000
}
const jemployee = JSON.stringify(employee, null, 2)
console.log(jemployee)
//output:
// {
// "name": "Haider",
// "age": 22,
// "salary": 500000
// }

9、代码的执行时间

为了计算你的代码执行时间,这个技巧将向你介绍控制台的 time 和 timeEnd 方法。

//example code
console.time("timer-1")
var a = 20
var b = 3
for(let i = b; i < a; i++)
{
// do something
}
console.timeEnd("timer-1") // timer-1: 1ms

10、检查 isArray

如果你想检查你的对象是不是一个数组,那么,这个技巧会派上用场。我们将使用一个简单的 JavaScript 内置方法,它接受一个参数对象。

//example code
const array1 = [1, 3, 4, 5]
console.log(Array.isArray(array1)) // true
const array2 = {}
console.log(Array.isArray(array2)) // false

11、JavaScript 中的快速 Power 方法

计算功率的一种方法是调用 Math.pow() 方法并传递值,但你也可以使用 **。

//example code
console.log("New Method Power of 2 ^ 3 ", 2**3); // 8
console.log("Old Method Power of 2 ^ 3 ", Math.pow(2,3)); //8

最后的想法

这就是我与你分享的 11个最好的 JavaScript 技巧,以便来帮助你提高你的开发技能并节省你的宝贵时间。 

我希望你喜欢这篇文章,并不要忘记在JavaScript 社区与大家分享它。

感谢你的阅读,祝编程快乐!


PS:​《JavaScript悟道》赠书活动的中奖者名单已经出来了,见下图:

11个提高技能的JavaScript 技巧,附中奖者名单_javascript_02

请以上10位小伙伴,添加微信号【web_xiaoer】,备注【图书中奖】,通过后,请尽快将图书收货信息发送过来,以便于尽快安排时间寄出,这次赠书活动是与图灵出版社合作的,所以图书会由图灵这边统一寄出,请大家耐心等待一下。

对于,没有中奖的小伙伴不用灰心,后面我们也会有其他相关活动,敬请继续关注。

最后,感谢大家的积极参与。

我是杨小二,我们一起学习进步。



11个提高技能的JavaScript 技巧,附中奖者名单_数组_03

11个提高技能的JavaScript 技巧,附中奖者名单_ide_04


标签:11,console,log,示例,JavaScript,中奖者,example,技巧
From: https://blog.51cto.com/u_15809510/5874087

相关文章

  • javaScript 纯函数
    一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数叫做纯函数。为什么要煞费苦心地构建纯函数?因为纯函数非常靠谱,执行一个纯函数你不用担......
  • [Typescript] 112. Hard - DeepPick
    ImplementatypeDeepPick,thatextendsUtilitytypes Pick.Atypetakestwoarguments.Forexample:typeobj={name:'hoge',age:20,friend:{......
  • 11个步骤完美排查服务器是否被入侵
    随着开源产品的越来越盛行,作为一个Linux运维工程师,能够清晰地鉴别异常机器是否已经被入侵了显得至关重要,个人结合自己的工作经历,整理了几种常见的机器被黑情况供参考:背景信......
  • 2022-11-21 vue+uniapp之小程序 video iphone手机 视频播放卡顿
    如题。卡一两次可以当成是视频缓存问题,可要是一直卡者不动那就是代码问题了。经测试,android和ios手机存在卡顿情况,ios较为明显一点,原因我猜测是在小程序中video这个标签在......
  • NOI2011真题:兔兔与蛋蛋游戏
    NOI2011真题:兔兔与蛋蛋游戏题目描述这些天,兔兔和蛋蛋喜欢上了一种新的棋类游戏。这个游戏是在一个n行m列的棋盘上进行的。游戏开始之前,棋盘上有一个格子是空的,其它......
  • 2022.11.20 第八次组会记录
    团队:集农广益小组地点:桃园食堂时间:下午三点参与人:全体人员组会内容摘要:详细文档的编写以及代码的分工实现组会主要内容:1.对问答平台的详细设计进行讨论设计2.讨......
  • MarkDown学习 2022/11/21
    MarkDown学习标题:+空格(一级标题+空格(二级标题以此类推标题三级标题四级标题字体前后一个*:斜体前后两个*:粗体前后三个*:斜粗体前后两个~:删除线HelloWorld!......
  • 2022-11-21 Acwing每日一题
    本系列所有题目均为Acwing课的内容,发表博客既是为了学习总结,加深自己的印象,同时也是为了以后回过头来看时,不会感叹虚度光阴罢了,因此如果出现错误,欢迎大家能够指出错误,我......
  • 【221121-4】已知:正数a,b满足ab-a-b=1.求:a+b的最小值。
    ......
  • WIN 11 共享设置
    我的电脑->管理->用户->解除GUEST禁用gpedit.msc->计算机管理->本地->从网络上访问本机->允许GUEST高级共享设置->从网络上访问选择文件夹->共享......