余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

好程序员web前端教程分享JavaScript简写方法

xiyangw 2022-11-24 16:24 344 浏览 174 评论

今天好程序员web前端教程为大家分享JavaScript简写方法,小伙伴们快来看一看吧。

1.三元操作符

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

1. constx =20;

2. let answer;

3. if(x >10) {

4. answer ='is greater';

5. }else{

6. answer ='is lesser';

7. }

简写:

1. constanswer = x >10?'is greater':'is lesser';

也可以嵌套if语句:

1. constbig = x >10?" greater 10": x

2.短路求值简写方式

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

1. if(variable1 !==null|| variable1 !==undefined|| variable1 !=='') {

2. let variable2 = variable1;

3. }

或者可以使用短路求值方法:

1. constvariable2 = variable1 ||'new';

3.声明变量简写方法

1. let x;

2. let y;

3. let z =3;

简写方法:

1. letx, y, z=3;

4.if存在条件简写方法

1. if(likeJavaScript ===true)

简写:

1. if(likeJavaScript)

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

如果判断值不是真值,则可以这样:

1. let a;

2. if( a !==true) {

3. // do something...

4. }

简写:

1. let a;

2. if( !a ) {

3. // do something...

4. }

5.JavaScript循环简写方法

1. for(leti =0; i < allImgs.length; i++)

简写:for(letindexinallImgs)也可以使用Array.forEach:

1. functionlogArrayElements(element, index, array) {

2. console.log("a["+ index +"] = "+ element);

3. }

4. [2,5,9].forEach(logArrayElements);

5. // logs:

6. // a[0] = 2

7. // a[1] = 5

8. // a[2] = 9

6.短路评价

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

1. let dbHost;

2. if(process.env.DB_HOST) {

3. dbHost = process.env.DB_HOST;

4. }else{

5. dbHost ='localhost';

6. }

简写:

1. constdbHost = process.env.DB_HOST ||'localhost';

7.十进制指数

当需要写数字带有很多零时(如10000000),可以采用指数(1e7)来代替这个数字:for(leti=0;i<10000;i++){}简写:

1. for(let i =0; i <1e7; i++) {}

2.

3. //下面都是返回true

4. 1e0===1;

5. 1e1===10;

6. 1e2===100;

7. 1e3===1000;

8. 1e4===10000;

9. 1e5===100000;

8.对象属性简写

如果属性名与key名相同,则可以采用ES6的方法:

1. constobj = { x:x, y:y };

简写:

1. constobj = { x, y };

9.箭头函数简写

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

1. functionsayHello(name) {

2. console.log('Hello', name);

3. }

4.

5. setTimeout(function() {

6. console.log('Loaded')

7. },2000);

8.

9. list.forEach(function(item) {

10. console.log(item);

11. });

简写:

1. sayHello = name => console.log('Hello', name);

2.

3. setTimeout(() => console.log('Loaded'),2000);

4.

5. list.forEach(item => console.log(item));

10.隐式返回值简写

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

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

1. functioncalcCircumference(diameter) {

2. returnMath.PI * diameter

3. }

4.

5. varfunc =functionfunc() {

6. return{ foo:1};

7. };

简写:

1. calcCircumference = diameter => (

2. Math.PI * diameter;

3. )

4.

5. varfunc = () => ({ foo:1});

11.默认参数值

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

1. functionvolume(l, w, h) {

2. if(w ===undefined)

3. w =3;

4. if(h ===undefined)

5. h =4;

6. returnl * w * h;

7. }

简写:

1. volume = (l, w =3, h =4) => (l * w * h);

2.

3. volume(2)//output: 24

12.模板字符串

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

1. constwelcome ='You have logged in as '+ first +' '+ last +'.'

2.

3. constdb ='http://'+ host +':'+ port +'/'+ database;

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

1. constwelcome = `Youhave logged in as ${first} ${last}`;

2.

3. constdb = `http://${host}:${port}/${database}`;

13.解构赋值简写方法

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

1. constobservable = require('mobx/observable');

2. constaction = require('mobx/action');

3. construnInAction = require('mobx/runInAction');

4.

5. conststore =this.props.store;

6. constform =this.props.form;

7. constloading =this.props.loading;

8. consterrors =this.props.errors;

9. constentity =this.props.entity;

简写:

1. import{ observable, action, runInAction } from'mobx';

2.

3. const{ store, form, loading, errors, entity } =this.props;

也可以分配变量名:

1. const{ store, form, loading, errors, entity:contact } =this.props;

2. //最后一个变量名为contact

14.多行字符串简写

需要输出多行字符串,需要使用+来拼接:

1. constlorem ='Lorem ipsum dolor sit amet, consectetur\n\t'

2. +'adipisicing elit, sed do eiusmod tempor incididunt\n\t'

3. +'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'

4. +'veniam, quis nostrud exercitation ullamco laboris\n\t'

5. +'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'

6. +'irure dolor in reprehenderit in voluptate velit esse.\n\t'

使用反引号,则可以达到简写作用:

1. constlorem = `Loremipsum dolor sit amet, consectetur

2. adipisicing elit, seddoeiusmod tempor incididunt

3. ut labore et dolore magna aliqua.Utenim ad minim

4. veniam, quis nostrud exercitation ullamco laboris

5. nisi ut aliquip ex ea commodo consequat.Duisaute

6. irure dolor in reprehenderit in voluptate velit esse.`

15.扩展运算符简写

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

1. // joining arrays

2. constodd = [1,3,5];

3. constnums = [2,4,6].concat(odd);

4.

5. // cloning arrays

6. constarr = [1,2,3,4];

7. constarr2 = arr.slice()

简写:

1. // joining arrays

2. constodd = [1,3,5];

3. constnums = [2,4,6, ...odd];

4. console.log(nums);// [ 2, 4, 6, 1, 3, 5 ]

5.

6. // cloning arrays

7. constarr = [1,2,3,4];

8. constarr2 = [...arr];

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

1. constodd = [1,3,5];

2. constnums = [2, ...odd,4,6];

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

1. const{ a, b, ...z } = { a:1, b:2, c:3, d:4};

2. console.log(a)// 1

3. console.log(b)// 2

4. console.log(z)// { c: 3, d: 4 }

16.强制参数简写

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

1. functionfoo(bar) {

2. if(bar ===undefined) {

3. thrownewError('Missing parameter!');

4. }

5. returnbar;

6. }

简写:

1. mandatory = () => {

2. thrownewError('Missing parameter!');

3. }

4.

5. foo = (bar = mandatory()) => {

6. returnbar;

7. }

17.Array.find简写

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

1. constpets = [

2. { type:'Dog', name:'Max'},

3. { type:'Cat', name:'Karl'},

4. { type:'Dog', name:'Tommy'},

5. ]

6.

7. functionfindDog(name) {

8. for(let i =0; i<pets.length; ++i) {

9. if(pets[i].type ==='Dog'&& pets[i].name === name) {

10. returnpets[i];

11. }

12. }

13. }

简写:

1. pet = pets.find(pet => pet.type ==='Dog'&& pet.name ==='Tommy');

2. console.log(pet);// { type: 'Dog', name: 'Tommy' }

18.Object[key]简写

考虑一个验证函数:

1. functionvalidate(values) {

2. if(!values.first)

3. returnfalse;

4. if(!values.last)

5. returnfalse;

6. returntrue;

7. }

8.

9. console.log(validate({first:'Bruce',last:'Wayne'}));// true

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

1. //对象验证规则

2. constschema = {

3. first: {

4. required:true

5. },

6. last: {

7. required:true

8. }

9. }

10.

11. //通用验证函数

12. constvalidate = (schema, values) => {

13. for(field in schema) {

14. if(schema[field].required) {

15. if(!values[field]) {

16. returnfalse;

17. }

18. }

19. }

20. returntrue;

21. }

22.

23. console.log(validate(schema, {first:'Bruce'}));// false

24. console.log(validate(schema, {first:'Bruce',last:'Wayne'}));// true

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

相关推荐

排序算法--归并排序_归并排序例题讲解

原理如图所示(先分割再合并):归并排序代码工作原理:1、申请空间,使其大小为两个已经排序序列之和,该空间用来存放合并后的序列2、设定两个指针,最初位置分别为两个已经排序序列的起始位置3、比较两个指针所...

八大排序算法-归并排序_归并排序 算法

算法思想归并排序分为三个步骤:1.分解:将数列分解成n个子数列。(如果是将数列分成2个子数列则为2路归并)2.治理:对每个子数列进行排序操作3.合并:将两个排好序的子数列进行合并生成新的数列算法实现P...

高级排序之归并排序、希尔排序_希尔排序和归并排序区别

前言继上次排序算法简单排序算法之冒泡、插入和选择排序-Java实现版后,本文学习高级排序算法——归并排序、希尔排序,快速排序将在后续更新。本文实现代码调用方法,部分来自前一个文章:简单排序算法之冒泡、...

Excel办公应用:按合并单元格排序的三大方法

1.按姓名对科目排序重点:在"C2"中输入公式=IF(A2<>"",1,C1+1),然后下拉填充。2.按姓名添加连续序号(方法一)重点:选择"A2:A11"单元格区域,在编辑栏中输入公...

快速排序 Vs. 归并排序 Vs. 堆排序——谁才是最强的排序算法

知乎上有一个问题是这样的:堆排序是渐进最优的比较排序算法,达到了O(nlgn)这一下界,而快排有一定的可能性会产生最坏划分,时间复杂度可能为O(n^2),那为什么快排在实际使用中通常优于堆排序?昨天刚...

归并排序思路图解 #归并排序_归并排序百度百科

排序算法1.图解。OK,让它排一下。看好了,要开始排了。能看出来像递归吗?肯定算法难,但是这个次数非常的多,不用管次数。这个是帝规,就是递归。这是并,这是并,这是两个有序数,组合成一个最后的大的有序数...

排序算法学习——归并排序_归并排序算法稳定吗

我们先看归并排序的定义归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(DivideandConquer)的一个非常典型的应用。将已有序的子序列合并,得到完全有序的序列;即先使每...

动画|经典的归并排序究竟怎么玩儿?

作者|菠了个菜责编|郭芮由于LeetCode上的算法题很多涉及到一些基础的数据结构,为了更好的理解后续更新的一些复杂题目的动画,推出一个新系列——《图解数据结构》,主要使用动画来描述常见的数据...

Excel中,多列数据统一排名,Rank函数直接搞定

Rank实现多列联合排序排序,那太简单啦,Excel中,升序降序,一个按键就可以。但,那是针对单列情况,若需要联合多列数据进行排序呢?如下图所示,需要对1、3、5列进行统一排序,咋弄嘞?联合排序案例先...

【数据结构与算法】归并排序_数据结构中归并排序

归并排序是建立在归并操作的一种高效的排序方法,该方法采用了分治的思想,比较适用于处理较大规模的数据,但比较耗内存,今天我们聊聊归并排序排序思想一天,小一尘和慧能坐在石头上,眺望着远方师傅,我听山下的柳...

C++基础算法:归并排序_经典排序算法-----归并排序(c语言实现)

归并排序(MergeSort)是建立在归并操作上的一种有效,稳定的排序算法,该算法是采用分治法(DivideandConquer)的一个非常典型的应用。将已有序的子序列合并,得到完全有序的序列。...

马士兵说之归并排序_马士兵教育的内推是真的

大家对于排序应该是挺熟悉的吧,马士兵老师特意为排序出了一波视频,当然文章是转自博客园的,马士兵老师的视频观看请点击下方的了解更多概要本章介绍排序算法中的归并排序。内容包括:1.归并排序介绍2.归并...

C++快速排序和归并排序_c++快速排序sort

快速排序每一轮挑选一个基准元素(随机选择,编程时一般选取第一个),并让比它大或小的元素移动到基准元素的两边,把数列拆解成了两个部分。而后对这两部分分别进行快速排序。时间复杂度:O(nlogn),辅助空...

经典的排序算法——归并排序_归并排序算法步骤

归并排序(MergeSort)是一种基于分治策略的高效排序算法。它将原始数组不断地分割成两个子数组,直到每个子数组只剩下一个元素为止(即基本有序),然后再通过合并已排序的子数组来最终得到完全有序的大...

归并排序_归并排序c++实现

归并排序概念:归并排序中涉及到一个概念就是分而治之,总序列化成小序列,将小序列排序好,利用排序好的小序列,再归并排序成原来要排序的序列。所以排序前先要分:functiondivide(arr){...

已有174位网友发表了看法:

取消回复欢迎 发表评论: