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

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

点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

废话不多话,在本文中,列出了一些比较常用或者实用的的 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

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

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

文章每周持续更新,可以微信搜索 【大迁世界 】 第一时间阅读,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。

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

前端小智@大迁世界

22+ 高频实用的 JavaScript 片段 (2020年)
CSDN认证博客专家


TypeScript
ECMAScript 6
前端框架

我不是什么大牛,我其实想做的就是一个传播者。内容可能过于基础,但对于刚入门的人来说或许是一个窗口,一个解惑之窗。我要先坚持分享20年,大家来一起见证吧。

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

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

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 22+ 高频实用的 JavaScript 片段 (2020年)
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏