22+高频实用的JavaScript片段（2020年）

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

如果 zip是undefined ，则不会引发错误。

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

 
 
 
 

  
  
  
  
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年）
URL分享：http://www.hantingmc.com/qtweb/news3/501453.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联