文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

比较实用的JavaScript 片段有哪些

2024-04-02 19:55

关注

比较实用的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

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网行业资讯频道,感谢您对编程网的支持。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯