前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分享 17 个常使用高频好用的 JS 代码片段

分享 17 个常使用高频好用的 JS 代码片段

作者头像
前端达人
发布2021-12-29 15:45:20
4240
发布2021-12-29 15:45:20
举报
文章被收录于专栏:前端达人前端达人

英文 | https://javascript.plainenglish.io/17-high-frequency-javascript-code-chunks-for-2022-6e9258e28b00

翻译 | 杨小爱

JavaScript 的故事很长。在今天,JavaScript 的运行从移动设备到服务器端,无论您是计划在 2022 年学习或使用 JavaScript ,还是目前正在使用JavaScript进行开发,还是已经熟练掌握了JavaScript技能,我在这里与您分享的这17个高频使用的JavaScript代码段,对您一定会有一些帮助。

好了,我们现在就开始吧。

1、短路表达式

代码语言:javascript
复制
const defaultSafeValue = "defaultSafeValue"
let someValueNotSureOfItsExistence = null
let expectingSomeValue = someValueNotSureOfItsExistence || defaultSafeValue
console.log(expectingSomeValue)

如果 someValueNotSureOfItsExistance 为 undefined/null/false,则 defaultSafeValue 将就位。

如果我们不确定任何值是否存在,这会很方便。它还确保您不会从错误的对象中查看任何内容,即如下所示。

代码语言:javascript
复制
let someValueNotSureOfItsExistence = null
// let someValueNotSureOfItsExistence = { expectingSomeValue:1 }
let { expectingSomeValue } = someValueNotSureOfItsExistence ||  {}
console.log(expectingSomeValue)

你可以在上面的代码中取消注释,看看它可以避免可能的崩溃。

2、IF条件

代码语言:javascript
复制
let someValue = true // or some value like 1,.. {} etc
if(someValue){
   console.log('Yes. Its exist')
}

3、多重条件

代码语言:javascript
复制
const conditions = ["Condition 2","Condition String2"];someFunction(str){
  if(str.includes("someValue1") || str.includes("someValue2")){
    return true
  }else{
    return false
  }
}

同样可以通过以下方式完成

代码语言:javascript
复制
someFunction(str){
   const conditions = ["someValue1","someValue2"];
   return conditions.some(condition=>str.includes(condition));
}

4、模板文字

代码语言:javascript
复制
let name = "John Doe", profession = "Engineering"
let someSentence = `My Name is ${name} and he is doing ${profession}`
console.log(someSentence)
// His Name is John Doe and he is doing Engineering

5、解构赋值

代码语言:javascript
复制
let personObject = {
  name:"John Doe",
  phone:"1234",
  address:{
    line:"abc ave",
    postCode:12223,
  },
}
const {name, phone, address} = personObject;

我们经常在像 React 这样的框架中这样做,如下所示

代码语言:javascript
复制
import { observable, action, runInAction } from 'mobx';

6、扩展运算符

代码语言:javascript
复制
const previousNumber = [1, 3, 5 ];
const allNumbers = [2 ,4 , 6, ...previousNumber];
console.log(allNumbers);
// [ 2, 4, 6, 1, 3, 5 ]
//Handy if you want to merge two objects

7、箭头功能简写

代码语言:javascript
复制
var sayHello = (name)=>{
   return "Hello " + name
}
console.log(sayHello("John"))

反而

代码语言:javascript
复制
var sayHello = (name)=> "Hello " + name
console.log(sayHello("John"))

8、条件函数调用

代码语言:javascript
复制
function fn1(){
  console.log('I am Function 1');
}
function fn2(){
  console.log('I am Function 2');
}
let checkValue = 3;
if(checkValue === 3){
 fn1();
}else{
 fn2();
}

相反,简而言之

代码语言:javascript
复制
(checkValue ===3 ? fn1:fn2)(); // Short Version

9、&& 运算符

代码语言:javascript
复制
var value = true; // or true or some value exist
if(value){
  console.log('Value is there or true')
}
// OR via this way
value && console.log('Value is there or true')

10、 将字符串转换为数字

代码语言:javascript
复制
const numberStr1 = "100";
const numberStr2 = "200";
var sampleValue = +numberStr1 + +numberStr2;
console.log(sampleValue);
console.log(typeof sampleValue); // Its a number!

11、避免过多的函数参数

代码语言:javascript
复制
function myFunction(employeeName,jobTitle,yrExp,majorExp){
}
// you can call it via
myFunction("John","Project Manager",12,"Project Management");
//    ***** PROBLEMS ARE *****
// Violation of ‘clean code’ principle
// Parameter sequencing is important
// Unused Params warning if not used 
// Testing need to consider a lot of edge cases.

相反,创建一个 params 对象,如

代码语言:javascript
复制
const mockTechPeople = {
employeeName:'John',
jobTitle:'Project Manager',
yrExp:12,
majorExp:'Project Management'
}

并在函数中解构 params 使其更清晰,产生错误的可能性更小。

代码语言:javascript
复制
function myFunction({employeeName,jobTitle,yrExp,majorExp}){

     // ES2015/ES6 destructuring syntax is in action
     // map your desired value to variable you need.
}

现在调用很简单

代码语言:javascript
复制
myFunction(mockTechPeople); // Only One argument

12、 默认参数值

代码语言:javascript
复制
function rectangle(h,w){
 if(!h){
   h=0;
 }else if(!w){
  w=0;
 }
 return h*w;
}
console.log(rectangle())

反而

代码语言:javascript
复制
function rectangle(h =0,w=0){
  return h*w;
}
console.log(rectangle(1,12))

13、Math.Floor 简写

代码语言:javascript
复制
var val = "1212121212"
console.log(Math.floor(val)) // Long one
console.log(~~val) // smart one

14、toString 简写

代码语言:javascript
复制
var someNumber = 123
console.log(someNumber.toString()) //return "123"
// Or in SHORT CUT
console.log(`${someNumber}`) //return "123"

15、For 循环

代码语言:javascript
复制
for(let i=0;i<1e3;i++){ // instead of i<1000, Cool, right?   
}

16、值到对象映射,即键和值相同

代码语言:javascript
复制
var x='x',y='y'
var obj = {x,y} // instead of {x:x, y:y}
console.log(obj)

17、多行字符串

代码语言:javascript
复制
var multiLineString = `some string\n
with multi-line of\n
characters\n`
console.log(multiLineString)

总结

以上内容就是我与您分享的全部内容了,当然,我这个列表内容不是全面的,如果您还知道一些其他高频好用的JavaScript代码段,请在留言区与我分享,我会非常感激您。

最后,感谢您的阅读,祝编程愉快!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-12-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 13、Math.Floor 简写
  • 14、toString 简写
  • 15、For 循环
  • 16、值到对象映射,即键和值相同
  • 17、多行字符串
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档