2020高频实用的JavaScript片段

【相关学习推荐:javascript视频教程】

尧都网站建设公司成都创新互联公司,尧都网站设计制作,有大型网站制作公司丰富经验。已为尧都1000多家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱,请找那个售后服务好的尧都做网站的公司定做!

废话不多话,在本文中,列出了一些比较常用或者实用的的 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.可选的链运算符(即将发布

网站名称:2020高频实用的JavaScript片段
地址分享:https://www.cdcxhl.com/article24/cpssje.html

成都网站建设公司_创新互联,为您提供网站维护关键词优化用户体验网站收录网页设计公司域名注册

广告

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

商城网站建设