22+ 高频实用的 JavaScript 片段 (2020年)

可莉
• 阅读 609

废话不多话,在本文中,列出了一些比较常用或者实用的的 JavaScript 代码片段,希望对你们有所帮助。

1.三元运算符

`let someThingTrue = true
if(someThingTrue){
    handleTrue()
}else{
    handleFalse()
}

****** 以下是简短版本 ******

let someThingTrue = true
someThingTrue ?  handleTrue() : handleFalse()

`

2.短路运算

`const defaultValue = "SomeDefaultValue"
let someValueNotSureOfItsExistance = null
let expectingSomeValue = someValueNotSureOfItsExistance ||     defaultValue

console.log(expectingSomeValue) // SomeDefaultValue

`

3. 条件成立

let someValue = true if (someValue) {   console.log('条件成立!') }

4. for 循环

for (let i = 0; i < 1e2; i++) { // 代替 i<100 是不是有点酷 }

let someValues = [1, 2, 4] for (let val in someValues) {   console.log(val) } let obj = {   'key1': 'value1',   'key2': 'value2',   'key3': 'value3' } for (let key in obj) {   console.log(key) }

5. 值到对象的映射

`let x='x',y='y'
let obj = {x,y}

console.log(obj) // {x: "x", y: "y"}

`

6. Object.entries()

`const credits = {
  producer: '大迁世界',
  name: '前端小智',
  rating: 9
}
const arr = Object.entries(credits)
console.log(arr)

*** 输出 ***
[ [ 'producer', '大迁世界' ], [ 'name', '前端小智' ], [ 'rating', 9 ] ]

`

7. Object.values()

`const credits = {
  producer: '大迁世界',
  name: '前端小智',
  rating: 9
}
const arr = Object.values(credits)
console.log(arr)

*** 输出 ***

[ '大迁世界', '前端小智', 9 ]
`

8. 模板字面量

let name = '前端小智' let age = 20 var someStringConcatenateSomeVariable = `我是 ${name},今年 ${age} 岁` console.log(someStringConcatenateSomeVariable)

9. 解构赋值

import { observable, action, runInAction } from 'mobx';

10.多行字符串

``let multiLineString = some string\n with multi-line of\n characters\n

console.log(multiLineString)
``

11.Array.find 简写

`const pets = [{
    type: 'Dog',
    name: 'Max'
  },
  {
    type: 'Cat',
    name: 'Karl'
  },
  {
    type: 'Dog',
    name: 'Tommy'
  }
]
pet = pets.find(pet => pet.type === 'Dog' && pet.name === 'Tommy')

console.log(pet) // { type: 'Dog', name: 'Tommy' }
`

12.默认参数值

早期的做法

function area(h, w) {   if (!h) {     h = 1;   }   if (!w) {     w = 1;   }   return h * w }

ES6 以后的做法

function area(h = 1, w = 1) {   return h * w }

13.箭头函数的简写

``let sayHello = (name) => {
  return 你好,${name}
}

console.log(sayHello('前端小智'))
``

简写如下:

``let sayHello = name => 你好,${name}

console.log(sayHello('前端小智'))
``

14.隐式返回

let someFuncThatReturnSomeValue = (value) => {   return value + value } console.log( someFuncThatReturnSomeValue('前端小智'))

简写如下:

let someFuncThatReturnSomeValue = (value) => (   value + value ) console.log(someFuncThatReturnSomeValue('前端小智'))

15.函数必须有参数值

function mustHavePatamMethod(param) {   if (param === undefined) {     throw new Error('Hey You must Put some param!');   }   return param; }

以像这样重写:

mustHaveCheck = () => {   throw new Error('Missing parameter!') } methodShoudHaveParam = (param = mustHaveCheck()) => {   return param }

16.charAt() 简写

'SampleString'.charAt(0) // S // 简写 'SampleString'[0]

17.有条件的函数调用

`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()
}
`

简短的写法:

(checkValue === 3 ? fn1 : fn2)()

17.Math.Floor 简写

`let val = '123.95'

console.log(Math.floor(val)) // 常规写法
console.log(~~val) // 简写
`

18.Math.pow  简写

Math.pow(2, 3) // 8 // 简写 2 ** 3 // 8

19.将字符串转换为数字

const num1 = parseInt('100') // 简写 console.log(+"100") console.log(+"100.2")

20.&& 运算

let value = 1; if (value === 1)   console.log('Value is one') //OR In short  value && console.log('Value is one')

21.toString 简写

let someNumber = 123 console.log(someNumber.toString()) // "123" // 简写 console.log(`${someNumber}`) // "123"

22.可选的链运算符(即将发布🍻)

现在有一个关于ECMAScript的新提议,值得了解。

let someUser = {   name: 'Jack' } let zip = someUser?.address?.zip //可选链接,像 Swift

如果 zipundefined ,则不会引发错误。

该语法还支持函数和构造函数调用

let address = getAddressByZip.?(12345)

如果getAddressByZip是调用它的函数,否则,表达式将以undefined的形式计算。

23. 使用对象的方式来替换 switch  语法

let fruit = 'banana'; let drink; switch (fruit) {   case 'banana':     drink = 'banana juice';     break;   case 'papaya':     drink = 'papaya juice';     break;   default:     drink = 'Unknown juice!' } console.log(drink) // banana juice


作者:xor 译者:前端小智  来源:medium

原文:https://medium.com/javascript-in-plain-english/some-js-shortcuts-82bc2f56146e

学习交流

  • 关注公众号【前端宇宙】,每日获取好文推荐

  • 添加微信,入群交流

22+ 高频实用的 JavaScript 片段 (2020年)

“在看和转发” 就是最大的支持

本文分享自微信公众号 - 前端宇宙(gh_8184da923ced)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Souleigh ✨ Souleigh ✨
2年前
前端性能优化 - 雅虎军规
无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的
Wesley13 Wesley13
2年前
thinkphp3.2.3模板渲染支持三元表达式
thinkphp3.2.3模板渲染支持三元表达式{$status?'正常':'错误'}{$info'status'?$info'msg':$info'error'}注意:三元运算符中暂时不支持点语法。如下:           <divclass"modalhidefade"id'myModa
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
程昱 程昱
3星期前
2023最新版-Web前端架构师35周完结无密
2023最新版Web前端架构师35周完结无密download》quangneng.com/3677/Web前端工程师需要学什么Web前端工程师需要学习的技能和知识主要包括以下几个方面:HTML/CSS/JavaScript:HTML、CSS和JavaScr