文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > js教程 > 正文

19 个 JavaScript 有用的简写技术分享

小云云
发布： 2018-01-03 14:56:52
原创
3257人浏览过

本文主要和大家分享19 个 JavaScript 有用的简写技术，希望能帮助到大家。

1.三元操作符

当想写if...else语句时，使用三元操作符来代替。

<span style="font-size: 16px;">const x = 20;<br/>let answer;<br/>if (x > 10) {<br/>    answer = 'is greater';<br/>} else {<br/>    answer = 'is lesser';<br/>}<br/></span>
登录后复制

简写：
const answer = x > 10 ? 'is greater' : 'is lesser';

也可以嵌套if语句：
const big = x > 10 ? " greater 10" : x

2.短路求值简写方式

当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。

<span style="font-size: 16px;">if (variable1 !== null || variable1 !== undefined || variable1 !== '') {<br/>     let variable2 = variable1;<br/>}<br/></span>
登录后复制

或者可以使用短路求值方法：
const variable2 = variable1  || 'new';

立即学习“Java免费学习笔记（深入）”；

3.声明变量简写方法

<span style="font-size: 16px;">let x;<br/>let y;<br/>let z = 3;<br/></span>
登录后复制

简写方法：
let x, y, z=3;

4.if存在条件简写方法

if (likeJavaScript === true)

简写：
if (likeJavaScript)

只有likeJavaScript是真值时，二者语句才相等

如果判断值不是真值，则可以这样：

<span style="font-size: 16px;">let a;<br/>if ( a !== true ) {<br/>// do something...<br/>}<br/></span>
登录后复制

简写：

<span style="font-size: 16px;">let a;<br/>if ( !a ) {<br/>// do something...<br/>}<br/></span>
登录后复制

5.JavaScript循环简写方法

for (let i = 0; i

简写：
for (let index in allImgs)
也可以使用Array.forEach：

<span style="font-size: 16px;">function logArrayElements(element, index, array) {<br/>  console.log("a[" + index + "] = " + element);<br/>}<br/>[2, 5, 9].forEach(logArrayElements);<br/>// logs:<br/>// a[0] = 2<br/>// a[1] = 5<br/>// a[2] = 9<br/></span>
登录后复制

6.短路评价

给一个变量分配的值是通过判断其值是否为null或undefined，则可以：

<span style="font-size: 16px;">let dbHost;<br/>if (process.env.DB_HOST) {<br/>  dbHost = process.env.DB_HOST;<br/>} else {<br/>  dbHost = 'localhost';<br/>}<br/></span>
登录后复制

简写：
const dbHost = process.env.DB_HOST || 'localhost';

7.十进制指数

当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字：
for (let i = 0; i
简写：

<span style="font-size: 16px;">for (let i = 0; i < 1e7; i++) {}<br/><br/>// 下面都是返回true<br/>1e0 === 1;<br/>1e1 === 10;<br/>1e2 === 100;<br/>1e3 === 1000;<br/>1e4 === 10000;<br/>1e5 === 100000;<br/></span>
登录后复制

8.对象属性简写

如果属性名与key名相同，则可以采用ES6的方法：
const obj = { x:x, y:y };

简写：
const obj = { x, y };

9.箭头函数简写

传统函数编写方法很容易让人理解和编写，但是当嵌套在另一个函数中，则这些优势就荡然无存。

<span style="font-size: 16px;">function sayHello(name) {<br/>  console.log('Hello', name);<br/>}<br/><br/>setTimeout(function() {<br/>  console.log('Loaded')<br/>}, 2000);<br/><br/>list.forEach(function(item) {<br/>  console.log(item);<br/>});<br/></span>
登录后复制

简写：

<span style="font-size: 16px;">sayHello = name => console.log('Hello', name);<br/><br/>setTimeout(() => console.log('Loaded'), 2000);<br/><br/>list.forEach(item => console.log(item));<br/></span>
登录后复制

10.隐式返回值简写

经常使用return语句来返回函数最终结果，一个单独语句的箭头函数能隐式返回其值（函数必须省略{}为了省略return关键字）

为返回多行语句（例如对象字面表达式），则需要使用()包围函数体。

<span style="font-size: 16px;">function calcCircumference(diameter) {<br/>  return Math.PI * diameter<br/>}<br/><br/>var func = function func() {<br/>  return { foo: 1 };<br/>};<br/></span>
登录后复制

简写：

<span style="font-size: 16px;">calcCircumference = diameter => (<br/>  Math.PI * diameter;<br/>)<br/><br/>var func = () => ({ foo: 1 });<br/></span>
登录后复制

11.默认参数值

为了给函数中参数传递默认值，通常使用if语句来编写，但是使用ES6定义默认值，则会很简洁：

<span style="font-size: 16px;">function volume(l, w, h) {<br/>  if (w === undefined)<br/>    w = 3;<br/>  if (h === undefined)<br/>    h = 4;<br/>  return l * w * h;<br/>}<br/></span>
登录后复制

简写：

<span style="font-size: 16px;">volume = (l, w = 3, h = 4 ) => (l * w * h);<br/><br/>volume(2) //output: 24<br/></span>
登录后复制

12.模板字符串

传统的JavaScript语言，输出模板通常是这样写的。

<span style="font-size: 16px;">const welcome = 'You have logged in as ' + first + ' ' + last + '.'<br/><br/>const db = 'http://' + host + ':' + port + '/' + database;<br/></span>
登录后复制

ES6可以使用反引号和${}简写：

<span style="font-size: 16px;">const welcome = `You have logged in as ${first} ${last}`;<br/><br/>const db = `http://${host}:${port}/${database}`;<br/></span>
登录后复制

13.解构赋值简写方法

在web框架中，经常需要从组件和API之间来回传递数组或对象字面形式的数据，然后需要解构它

<span style="font-size: 16px;">const observable = require('mobx/observable');<br/>const action = require('mobx/action');<br/>const runInAction = require('mobx/runInAction');<br/><br/>const store = this.props.store;<br/>const form = this.props.form;<br/>const loading = this.props.loading;<br/>const errors = this.props.errors;<br/>const entity = this.props.entity;<br/></span>
登录后复制

简写：

<span style="font-size: 16px;">import { observable, action, runInAction } from 'mobx';<br/><br/>const { store, form, loading, errors, entity } = this.props;<br/></span>
登录后复制

也可以分配变量名：

<span style="font-size: 16px;">const { store, form, loading, errors, entity:contact } = this.props;<br/>//最后一个变量名为contact<br/></span>
登录后复制

14.多行字符串简写

需要输出多行字符串，需要使用+来拼接：

<span style="font-size: 16px;">const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'<br/>    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'<br/>    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'<br/>    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'<br/>    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'<br/>    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'<br/></span>
登录后复制

使用反引号，则可以达到简写作用：

<span style="font-size: 16px;">const lorem = `Lorem ipsum dolor sit amet, consectetur<br/>    adipisicing elit, sed do eiusmod tempor incididunt<br/>    ut labore et dolore magna aliqua. Ut enim ad minim<br/>    veniam, quis nostrud exercitation ullamco laboris<br/>    nisi ut aliquip ex ea commodo consequat. Duis aute<br/>    irure dolor in reprehenderit in voluptate velit esse.`<br/></span>
登录后复制

15.扩展运算符简写

扩展运算符有几种用例让JavaScript代码更加有效使用，可以用来代替某个数组函数。

<span style="font-size: 16px;">// joining arrays<br/>const odd = [1, 3, 5];<br/>const nums = [2 ,4 , 6].concat(odd);<br/><br/>// cloning arrays<br/>const arr = [1, 2, 3, 4];<br/>const arr2 = arr.slice()<br/></span>
登录后复制

简写：

<span style="font-size: 16px;">// joining arrays<br/>const odd = [1, 3, 5 ];<br/>const nums = [2 ,4 , 6, ...odd];<br/>console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]<br/><br/>// cloning arrays<br/>const arr = [1, 2, 3, 4];<br/>const arr2 = [...arr];<br/></span>
登录后复制

不像concat()函数，可以使用扩展运算符来在一个数组中任意处插入另一个数组。

<span style="font-size: 16px;">const odd = [1, 3, 5 ];<br/>const nums = [2, ...odd, 4 , 6];<br/></span>
登录后复制

也可以使用扩展运算符解构：

<span style="font-size: 16px;">const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };<br/>console.log(a) // 1<br/>console.log(b) // 2<br/>console.log(z) // { c: 3, d: 4 }<br/></span>
登录后复制

16.强制参数简写

JavaScript中如果没有向函数参数传递值，则参数为undefined。为了增强参数赋值，可以使用if语句来抛出异常，或使用强制参数简写方法。

<span style="font-size: 16px;">function foo(bar) {<br/>  if(bar === undefined) {<br/>    throw new Error('Missing parameter!');<br/>  }<br/>  return bar;<br/>}<br/></span>
登录后复制

简写：

<span style="font-size: 16px;">mandatory = () => {<br/>  throw new Error('Missing parameter!');<br/>}<br/><br/>foo = (bar = mandatory()) => {<br/>  return bar;<br/>}<br/></span>
登录后复制

17.Array.find简写

想从数组中查找某个值，则需要循环。在ES6中，find()函数能实现同样效果。

<span style="font-size: 16px;">const pets = [<br/>  { type: 'Dog', name: 'Max'},<br/>  { type: 'Cat', name: 'Karl'},<br/>  { type: 'Dog', name: 'Tommy'},<br/>]<br/><br/>function findDog(name) {<br/>  for(let i = 0; i<pets.length; ++i) {<br/>    if(pets[i].type === 'Dog' && pets[i].name === name) {<br/>      return pets[i];<br/>    }<br/>  }<br/>}<br/></span>
登录后复制

简写：

<span style="font-size: 16px;">pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');<br/>console.log(pet); // { type: 'Dog', name: 'Tommy' }<br/></span>
登录后复制

18.Object[key]简写

考虑一个验证函数

<span style="font-size: 16px;">function validate(values) {<br/>  if(!values.first)<br/>    return false;<br/>  if(!values.last)<br/>    return false;<br/>  return true;<br/>}<br/><br/>console.log(validate({first:'Bruce',last:'Wayne'})); // true<br/></span>
登录后复制

假设当需要不同域和规则来验证，能否编写一个通用函数在运行时确认？

<span style="font-size: 16px;">// 对象验证规则<br/>const schema = {<br/>  first: {<br/>    required:true<br/>  },<br/>  last: {<br/>    required:true<br/>  }<br/>}<br/><br/>// 通用验证函数<br/>const validate = (schema, values) => {<br/>  for(field in schema) {<br/>    if(schema[field].required) {<br/>      if(!values[field]) {<br/>        return false;<br/>      }<br/>    }<br/>  }<br/>  return true;<br/>}<br/><br/><br/>console.log(validate(schema, {first:'Bruce'})); // false<br/>console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true<br/></span>
登录后复制

现在可以有适用于各种情况的验证函数，不需要为了每个而编写自定义验证函数了

19.双重非位运算简写

有一个有效用例用于双重非运算操作符。可以用来代替Math.floor()，其优势在于运行更快，可以阅读此文章了解更多位运算。
Math.floor(4.9) === 4  //true

简写：
~~4.9 === 4  //true

相关推荐：

js判断是否为空字符串的简写方法实例详解

js的简写写法介绍

怎么简写php 中的三元运算符

以上就是19 个 JavaScript 有用的简写技术分享的详细内容，更多请关注php中文网其它相关文章！

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
相关标签：
php JavaScript es6 Array Object NULL 运算符 三元运算符 if if...else for foreach math const 字符串 循环 Length JS undefined 对象
来源：php中文网
收藏 点赞
上一篇：vue、react等单页面项目部署到服务器方法 下一篇：使用docker基于daocloud自动化部署到自己的主机
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
JS中的箭头函数和普通函数有什么区别？ 箭头函数与普通函数的关键区别在于this绑定、构造函数能力和arguments对象。1.this指向不同：普通函数的this取决于调用方式，而箭头函数继承外层作用域的this，如在对象方法中使用可能无法访问对象属性；2.箭头函数不能作为构造函数，无法通过new创建实例；3.箭头函数无自己的arguments对象，引用外层函数的arguments，建议改用rest参数替代；适合在无需改变this、非构造函数、不依赖arguments的场景使用，反之则应避免。
2025-06-08 16:51:01
602
JS中的call和apply有什么区别？ call和apply的核心区别在于参数传递方式不同。1.call的参数依次列出，适用于参数固定、明确的场景，如Math.max.call(null,1,2,3)；2.apply的参数为数组或类数组，会自动展开，适合参数为数组的情况，如Math.max.apply(null,[10,20,30])；3.现代可用bind绑定this或扩展运算符替代apply的展开功能，但理解call和apply的本质仍很重要。
2025-06-08 15:30:02
441
JavaScript中的Proxy对象有什么用？ Proxy对象用于拦截和自定义对象操作。1)实现只读对象，阻止属性修改。2)数据验证，确保属性类型正确。3)日志记录，监控属性访问和修改。4)响应式编程，监听属性变化并触发更新。
2025-06-08 15:15:01
689
JS中的JSON.parse和JSON.stringify有什么用？ JSON.parse用于将JSON字符串转为JavaScript对象，而JSON.stringify则用于将对象转为JSON字符串。1.JSON.parse常用于解析接口返回的字符串数据，需确保字符串是合法JSON格式，否则会报错；2.JSON.stringify常用于发送数据到后端或存储到localStorage，但函数、undefined、Symbol类型不会被序列化；3.使用时可结合try-catch避免解析失败导致程序崩溃；4.JSON.stringify支持传入replacer函数进行
2025-06-08 15:09:02
482
JS中的for...of和for...in有什么区别？ for...in遍历对象键，for...of遍历可迭代值。1.for...in用于遍历对象的键名，适用于对象和数组，但遍历数组时可能包含原型链属性，需配合hasOwnProperty使用；2.for...of用于遍历可迭代对象（如数组、字符串、Map等）的值，更直观安全，但不适用于普通对象；3.若需同时获取键和值，可用Object.entries()+for...of；4.根据数据类型选择合适方式：对象用for...in，可迭代结构用for...of。
2025-06-08 14:12:01
766
JS中的Array.isArray怎么用？有什么作用？ Array.isArray()是JavaScript中用于准确判断数组的方法。typeof无法区分数组与对象，而Array.isArray(value)能精准返回布尔值，如Array.isArray([1,2])返回true，Array.isArray({})返回false。实际应用中，它常用于函数参数校验，例如在processItems函数中确保传入数组以避免后续错误。与typeof配合使用时，可先用typeof判断原始值，再用Array.isArray()确认对象是否为数组。此外，该方法被广
2025-06-08 10:18:02
155
js怎么实现元素的淡入淡出效果 在JavaScript中实现元素淡入淡出效果可以通过逐步改变CSS的opacity属性来实现。具体步骤包括：1.使用setInterval或setTimeout逐步增加或减少opacity值；2.淡入时从0增加到1，淡出时从1减少到0；3.控制元素的display属性，淡入时设为block，淡出结束后设为none。
2025-06-07 23:06:01
417
JS中的Date对象怎么用？如何格式化日期？ JavaScript中Date对象的使用方法包括：1.创建方式有四种，分别是不带参数获取当前时间、传入时间字符串、年月日参数及时间戳；2.获取日期信息的方法包括getFullYear()、getMonth()+1等；3.格式化需手动组合各部分并注意padStart的使用；4.常见问题涉及兼容性、时间设置、格式化扩展等内容。
2025-06-07 22:33:01
399
JS中的标签模板是什么？如何使用？ 标签模板是JavaScript中模板字符串的高级用法，通过在模板字符串前添加一个函数名作为“标签”，将模板中的静态部分和动态插值分别传入该函数进行自定义处理。它允许开发者灵活控制字符串的拼接方式，常用于格式化输出、防止XSS、构建HTML或CSS片段等场景。其基本形式是定义一个函数（如myTag），接收两个参数：strings（模板中的静态文本部分）和values（动态插值的值），然后按需组合它们。例如，logColor函数可用于高亮控制台输出，safeHTML函数可自动转义HTML字符以防止X
2025-06-07 20:09:01
720
JS中的深拷贝和浅拷贝有什么区别？ 浅拷贝和深拷贝的核心区别在于是否创建原对象的完整独立副本。1.浅拷贝仅复制对象第一层属性，若属性为引用类型则复制其地址，常见方法包括Object.assign、扩展运算符和数组的slice()、concat()，修改嵌套对象会影响原对象；2.深拷贝递归复制所有层级，生成完全独立对象，常用方法有JSON序列化反序列化（有局限）或递归函数实现，修改拷贝后对象不影响原对象；3.选择依据是对象结构复杂度，简单结构用浅拷贝更高效，复杂嵌套结构需深拷贝避免副作用；4.实现简易深拷贝可用递归函数，但应对复杂情
2025-06-07 19:57:01
338
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部