2021高频实用的 JavaScript 片段

2021高频实用的 JavaScript 片段

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

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

1.三元运算符

let someThingTrue = trueif(someThingTrue){    handleTrue()}else{    handleFalse()}****** 以下是简短版本 ******let someThingTrue = truesomeThingTrue ?  handleTrue() : handleFalse()复制代码

登录后复制

2.短路或运算

const defaultValue = "SomeDefaultValue"let someValueNotSureOfItsExistance = nulllet expectingSomeValue = someValueNotSureOfItsExistance ||     defaultValueconsole.log(expectingSomeValue) // SomeDefaultValue复制代码

登录后复制

3. 条件成立

let someValue = trueif (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 = 20var someStringConcatenateSomeVariable = `我是 ${name},今年 ${age} 岁`console.log(someStringConcatenateSomeVariable)复制代码

登录后复制

9. 解构赋值

import { observable, action, runInAction } from 'mobx';复制代码

登录后复制

10.多行字符串

let multiLineString = `some stringwith multi-line ofcharacters`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('前端小智'))复制代码

登录后复制

简写如下:

立即学习“Java免费学习笔记(深入)”;

let sayHello = name => `你好,${name}`console.log(sayHello('前端小智'))复制代码

登录后复制

14.隐式返回

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

登录后复制

简写如下:

立即学习“Java免费学习笔记(深入)”;

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 = 123console.log(someNumber.toString()) // "123"// 简写console.log(`${someNumber}`) // "123"复制代码

登录后复制

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

以上就是2021高频实用的 JavaScript 片段的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2725912.html

(0)
上一篇 2025年3月7日 23:27:18
下一篇 2025年2月27日 00:00:34

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 详解JavaScript获取元素的尺寸

    【相关学习推荐:javascript学习教程】 HTML尺寸 所谓元素的HTML尺寸,就是指在HTML标签中设置的尺寸样式。 例如: 复制代码 登录后复制 页面效果如下图所示: 立即学习“Java免费学习笔记(深入)”; 这种尺寸可以通过e…

    2025年3月7日 编程技术
    200
  • 学学javascript如何截取视频第一帧

    相关学习推荐:javascript视频教程 JavaScript截取视频第一帧 一、背景 在企业资料的开发中,除了涉及到视频上传之外,还需要使用视频中的第一帧或者或许几帧作为视频封面展示。 产生的问题: 因此,JS截取视频第一帧的难点就此诞…

    2025年3月7日 编程技术
    200
  • 一起看看 鸿蒙 JavaScript GUI 技术栈

    相关学习推荐:javascript视频教程 众所周知,刚刚开源的「鸿蒙 2.0」以 JavaScript 作为 IoT 应用开发的框架语言。这标志着继 SpaceX 上天之后,JavaScript 再一次蹭到了新闻联播级的热点。这么好的机会…

    2025年3月7日
    200
  • 了解JavaScript中Object.freeze()与const之间的区别

    相关学习推荐:javascript视频教程 自发布以来,ES6为JavaScript带来了一些新功能和方法。这些功能可以更好地改善我们作为JavaScript开发人员的工作流程和生产力。这些新功能包括 Object.freeze() 方法和…

    2025年3月7日 编程技术
    200
  • 初探埋点系统

    相关学习推荐:javascript视频教程 前言 最近杂七杂八的事情比较多,难得抽出时间来弥补一下之前的系列,欠大家的埋点系列现在开始走起来 为什么需要埋点系统 电影中 前端开发攻城狮开开心心的 coding,非常自豪的进行了业务、UI 分…

    2025年3月7日
    200
  • 最完整指南 JavaScript 的错误处理

    相关学习推荐:javascript视频教程 什么是编程中的错误 我们的开发过程中并不总是一帆风顺。特别是在某些情况下,我们可能希望停止程序或在发生不良情况时通知用户。 例如: 程序试图打开一个不存在的文件、网络连接断开用户输入了无效字符 在…

    2025年3月7日
    200
  • 解剖式分析 鸿蒙系统的JavaScript框架

    相关学习推荐:javascript 我在前文中曾经介绍过鸿蒙的 javascript 框架,这几天终于把 js 仓库编译通过了,期间踩了不少坑,也给鸿蒙贡献了几个 pr。今天我们就来逐行分析鸿蒙系统中的 js 框架。 文中的所有代码都基于鸿…

    2025年3月7日
    200
  • 抱着枸杞奋战多夜,我总结了JavaScript与ES的25个重要知识点

    相关学习推荐:javascript 前言 说起JavaScript,大家都知道是一门脚本语言。那么ES是什么鬼呢?ES全称ECMAScript ,是JavaScript语言的国际标准。 最近总结了条js的基础特性相关的知识点,大家一起看一下…

    2025年3月7日 编程技术
    200
  • JavaScript常见的手写功能

    相关学习推荐:javascript 1. 防抖 function debounce(func, ms = 500) {  let timer;  return function (…args) {    if (timer) {    …

    2025年3月7日
    200
  • 杜绝这五个 Javascript 错误啦

    javascript栏目将列出五个让你的代码更加可读和易于维护小窍门。 在编辑旧项目的时候,有没有遇到过那种一加新逻辑就“粉碎”的迷惑代码?我们当然都遇到过。为了让世界上不可读的 Javascript 代码更少,我得给你们看看以下的五个例子…

    2025年3月7日
    200

发表回复

登录后才能评论