JS简写技巧

来自于微信公众号-前端之巅

1 声明变量

    //Longhand// let x ;// let y = 20;// shortandlet x, y = 20;

2 给多个变量赋值

我们可以使用数组结构来在一行中给多个变量赋值

    //Longhand// let a, b, c;// a = 3;// b = 4;// c = 5;// shortandlet [a, b, c] = [3, 4, 5];

3 三元运算符

    let marks = 25;//Longhand// let result;// if(marks >= 30){//     result = 'pass';// }else{//     result = 'fail'// }// shortandlet result = marks >= 30 ? 'pass' : 'fail'

4 赋默认值

我们可以使用OR（||）来给一个变量赋默认值

    // Longhandlet imagePath;let path = getImagePath()if (path !== null && path !== undefined && path !== '') {imagePath = path} else {path = 'default.jpg'}// shortandlet imagePath = getImagePath() || 'default.jpg'

5 短路运算

当一个某个变量为true时调用一个函数，可以使用与（&&）短路形式书写

    // Longhandif (isLoggedin) {goToHomepage()}// shortandisLoggedin && goToHomepage()

6 交换两个变量

使用数组结构来交换两个变量

    let x = 'hello',y = 55;// Longhandconst temp = x;x = y;y = temp;// shortand[x,y] = [y,x]console.log(x);

7 箭头函数

使用数组结构来交换两个变量

    // Longhandlet add = function(num1,num2){return num1 + num2}// shortandconst add = (num1,num2) => num1 + num2;

8 模板字符串

使用数组结构来交换两个变量

    // Longhandconsole.log('hello' + name + '. You are 666！');// shortandconsole.log(`hell0 ${name} . You are 666！`);

9 多行字符串

使用数组结构来交换两个变量

    // Longhandconsole.log('hello \n' + 'hello \n');// shortandconsole.log(`hello hello`);

11 对象属性复制

如果变量名和对象的属性名相同，那么我们只需要在对象语句中声明变量名，而不是同时声明键和值。js会自动将键作为变量的名，将值作为变量的值。

    let firstname = 'Mikasa'let lastname = 'akeman'// Longhandlet obj = { firstname: firstname, lastname: lastname }// shortandlet obj = { firstname, lastname }

12 字符串转为数字

有一些内置的方法，例如parseInt和parseFloat可以用来将字符串转为数字。我们还可以用在字符串前提供一个一元运算符（+）来实现这一点

    // Longhandlet total = parseInt('453');let average = parseFloat('42.6');// shortandlet total = +'453';let average = +'42.6'

13 重复一个字符串多次

为了重复一个字符串多次，可以用for循环，但是使用repeat（）方法，我们可以一行代码搞定

    // Longhandlet str = '';for (let i = 0; i < 5; i++) {str += 'hello ';}// shortandlet str = 'hello '.repeat(5)console.log(str);

14 指数幂

我们可以使用Math.pow()方法来得到一个数字的幂，还可以用双星号（**）

    // Longhandconst power = Math.pow(4,3); //64// shortandconst power = 4**3; //64

15 双非位运算符

双非位运算符是Math.floor（）方法的缩写-即向下取整

    // Longhandconst floor = Math.floor(6.8); //6// shortandconst floor = ~~6.8; //

16 找出数组中的最大和最小数字

我们可以使用for循环或者Array.reduce（）方法。
但使用扩展符号，我们一行就可以实现

    // shortandconst arr = [2,15,8,7];let max = Math.max(...arr); //15let min = Math.min(...arr); //2

17 for 循环

使用for…of循环和for…in循环

    // shortandlet arr = [10,20,30,40]// for of loopfor (const val of arr) {console.log(val);}for (const index in arr) {console.log(arr[index]);}//还可以使用for...in来遍历对象let obj = {x:20,y:30};for (const key in obj) {console.log(obj[key]);}

18 合并数组

使用for…of循环和for…in循环

    let arr1 = [20,30];// Longhandlet arr2 = arr1.concat([40,50])// shortandlet arr2 = [...arr1,40,50]

19 深拷贝多级对象

使用JSON.stringfy()和JSON.parse()实现
使用for…of循环和for…in循环

    // shortandconst obj = { x: 30, y: 40 };obj = JSON.stringify(JSON.parse(obj))

20 获取字符串中的字符

使用JSON.stringfy()和JSON.parse()实现
使用for…of循环和for…in循环

    let str = 'Mikasa';// Longhandstr.charAt(2); //k// shortandstr[2]; //k

—内容来源于微信公众号—前端之巅。
作者为Amitav Mishra.

JS简写技巧（来自于微信公众号-前端之巅）相关推荐

Node.js七天搞定微信公众号（又名：Koa2实现电影微信公众号前后端开发）- 问题汇总
未完待续视频资料在上一篇博客<Node.js七天搞定微信公众号(又名:Koa2实现电影微信公众号前后端开发)> 问题1:该公众号提供的服务出现故障,请稍后重试! 出处:<第4章实 ...
微信公众号前端开发（angular6/7）
angular框架非常好用,但是国内确实资料不多,关于微信公众号开发,我只找到了17年的比较老的教程,这里对相关教程做了一个更新.感谢古尘师姐的教程. 本文档只进行到微信公众号授权登录部分,其他众多接 ...
微信公众号内嵌页面不执行ajax,微信公众号前端开发（weui）+ajax
>> 一行代码即可使页面适应手机屏幕,具体介绍可参考链接,很好用 >> > 3. rem >> rem之后好像没怎么用,以后有更多了解再来补充 >> ...
前端开发攻略，微信公众号前端开发教程
毕业工作一年之后,有了转行的想法,偶然接触到程序员这方面,产生了浓厚且强烈的兴趣,开始学习前端,成功收割了大厂offer,开始了我的程序员生涯. 在自学过程中有过一些小厂的面试经历,也在一些小型的互联 ...
微信公众号前端开发教程，8个优秀的CSS实践
1.ant-design的使用总结及常用组件和他们的基本用法? ant-design为React,Angular和Vue都提供了组件,同时为PC和移动端提供了常用的基础组件.ant-design提供的 ...
微信公众号前端开发，学习路线图必不可少
面试题: Html 1,html语义化 2,meta viewport相关 3,canvas 相关 CSS 1,盒模型 1.1,ie盒模型算上border.padding及自身(不算margin),标 ...
uni-app - 最详细 H5 网页接入微信支付功能，提供从详细的示例代码与注释（移动端网页实现微信支付能力，微信公众号前端支付 JSAPI / JS-SDK 详细示例源码）官方最新超级详细教程
前言关于 uni-app 项目中接入微信支付的文章鱼龙混杂,各种 JSAPI / JS-SDK 乱代码.过时.没注释.不讲流程原理,非常难用. 本文实现了 uni-app H5 移动端网页项目,实现 ...
Node.js+Koa开发微信公众号个人笔记（一）准备工作 - ZhangCui - 博客园
本人也是在学习过程中,所以文章只作为学习笔记,如果能帮到你,那就更好啦~当然也难免会有错误,请不吝指出~ 一.准备工作 1.本人学习教程:慕课网Scott老师的<Node.js七天搞定微信公众号 ...
【微信公众号● DBAplus】Oracle原厂老兵：从负面案例看Hint的最佳使用方式
原创 2016-10-12 罗敏 Oracle原厂老兵:从负面案例看Hint的最佳使用方式作者介绍罗敏,从事Oracle技术研究.开发和服务工作20余年,在Oracle中国公司的10多年,分别在 ...

JS简写技巧（来自于微信公众号-前端之巅）

JS简写技巧

来自于微信公众号-前端之巅

1 声明变量

2 给多个变量赋值

3 三元运算符

4 赋默认值

5 短路运算

6 交换两个变量

7 箭头函数

8 模板字符串

9 多行字符串

11 对象属性复制

12 字符串转为数字

13 重复一个字符串多次

14 指数幂

15 双非位运算符

16 找出数组中的最大和最小数字

17 for 循环

18 合并数组

19 深拷贝多级对象

20 获取字符串中的字符

JS简写技巧（来自于微信公众号-前端之巅）相关推荐

最新文章

热门文章