1. 声明变量

//普通写法
let x;
let y = 20; //简写
let x, y = 20;

2. 给多个变量赋值

//普通写法
let a, b, c;
a = 5;
b = 8;
c = 12; //简写
let [a, b, c] = [5, 8, 12];

3. 三元运算符

//普通写法
let marks = 26;
let result;
if(marks >= 30){
result = 'Pass';
}else{
result = 'Fail';
}
//简写
let result = marks >= 30 ? 'Pass' : 'Fail';

4. 多值匹配

//普通写法
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
// Execute some code
} //简写 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
// Execute some code
} //简写 2
if ([1, 'one', 2, 'two'].includes(value)) { // 包含则返回 true,否则返回false。
// Execute some code
}

5. 字符串转数字

//普通写法
let total = parseInt('453');
let average = parseFloat('42.6'); //简写
let total = +'453';
let average = +'42.6';

6. 多次重复一个字符串

//普通写法
let str = '';
for (let i = 0; i < 5; i++) {
str += 'Hello ';
}
console.log(str); // Hello Hello Hello Hello Hello //简写
'Hello '.repeat(5); // 想要换行只需加换行符即可(helle\n)

7. 查找数组中最大和最小的数

// 我们可以使用for循环遍历数组的每个值并找到最大值或最小值。我们也可以使用Array.reduce()方法在数组中找到最大和最小数。
//简写
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2

8. Array.find

// 前
const pets = [
{type: 'Dog', name: 'Max'},
{type: 'Cat', name: 'Karl'},
{type: 'Dog', name: 'Tommy'}
] function findDog(name) {
for(let i = 0; i < pets.length; ++i) {
if(pets[i].type === 'Dog' && pets[i].name === name) {
return pets[i]
}
}
} // 后
dog2 = pets.find(pet => pet.type === 'Dog' && pet.name === 'Tommy');

9. AND(&&)短路求值法

如果仅在变量为true的情况下才调用函数,则可以使用AND(&&)短路求值法作为替代方法。

//普通写法
if (isLoggedin) {
goToHomepage();
} //简写
isLoggedin && goToHomepage();

10. 交换两个变量

要交换两个变量,我们经常要用到第三个变量。但是,我们也可以通过数组解构赋值,从而轻松地交换变量。

let x = 'Hello', y = 55;
//普通写法
const temp = x;
x = y;
y = temp; //简写
[x, y] = [y, x];

11. 箭头函数

//普通写法
function add(num1, num2) {
return num1 + num2;
} //简写
const add = (num1, num2) => num1 + num2;

12. 模板字面量

我们通常使用+运算符将字符串值与变量连接在一起。但是,我们也可以使用ES6模板字面量这个更简单的实现方式。

//普通写法
console.log('You got a missed call from ' + number + ' at ' + time); //简写
console.log(`You got a missed call from ${number} at ${time}`);

13. 对象属性赋值

如果变量名和对象键名相同,那么我们只需在对象字面量中提及变量名即可,而不需要键和值。JavaScript会自动给与变量名相同的键设置变量值,例如:

let firstname = 'Amitav';
let lastname = 'Mishra';
//普通写法
let obj = {firstname: firstname, lastname: lastname}; //简写
let obj = {firstname, lastname};

14. for循环

为了遍历数组,我们通常使用传统的for循环。我们可以利用for ... of循环遍历数组。要访问每个值的索引,我们可以使用for ... in循环。

let arr = [10, 20, 30, 40];
//普通写法
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//简写
//for of loop
for (const val of arr) {
console.log(val);
}
//for in loop
for (const index in arr) {
console.log(`index: ${index} and value: ${arr[index]}`);
} 我们还可以使用for ... in循环遍历对象属性。 let obj = {x: 20, y: 50};
for (const key in obj) {
console.log(obj[key]);
}

15. 合并数组

let arr1 = [20, 30];
//普通写法
let arr2 = arr1.concat([60, 80]);
// [20, 30, 60, 80] //简写
let arr2 = [...arr1, 60, 80];
// [20, 30, 60, 80]

16. 从字符串中获取字符

let str = 'jscurious.com';
//普通写法
str.charAt(2); // c //简写
str[2]; // c

这些简写技术中有些可能与项目的使用不相关,但是多学一点总不会错。编码愉快!------ 转载于微信公众号前端新世界

JavaScript 简写技巧的更多相关文章

  1. JavaScript简写技巧总结

    在日常工作中,JavaScript一些常用的简写技巧,将直接影响到我们的开发效率,现将常用技巧整理如下: 1. 空(null, undefined)验证     当我们创建了一个新的变量,我们通常会去 ...

  2. 10 个超棒的 JavaScript 简写技巧

    今天我要分享的是10个超棒的JavaScript简写方法,可以加快开发速度,让你的开发工作事半功倍哦. 开始吧! 1. 合并数组 普通写法: 我们通常使用Array中的concat()方法合并两个数组 ...

  3. JavaScript 开发人员需要知道的简写技巧

    本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读. 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作. 文 ...

  4. 12个非常实用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  5. javascript小小技巧

    JS的一些小技巧,我主要是做后台的(.NET),前端知识了解得不多,经验非常有限,不过还是经常写JS代码,对前端有着浓厚的兴趣,特喜欢js这门语言,虽然很多人喷它,但还是很喜欢Js.下面说说项目中我经 ...

  6. 11个不常被提及的JavaScript小技巧

    这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...

  7. [转]11个教程中不常被提及的JavaScript小技巧

    原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...

  8. 11个教程中不常被提及的JavaScript小技巧

    这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...

  9. 12个十分实用的JavaScript小技巧

    12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候 ...

随机推荐

  1. 6. vue组件详解(一)

    主要内容: 1. 组件的基本使用 2. 全局组件和局部组件 3. 父组件和子组件 4. 组件语法糖的写法 5. 组件data关联的写法 6. 父子组件的通信 组件系统是 Vue 的一个重要概念,因为它 ...

  2. 微信小程序:条件渲染wx:if和hidden

    一.条件渲染:wx:if,wx:elif,wx:else 花括号中的true或false可以改成变量从而来动态显示. 二.hidden 只显示hidden2 当标签不是频繁切换显示(控制是否渲染到页面 ...

  3. 永远不要眼高手低,Vue完整实现一套简单的增删改查CURD操作

    1: 永远不要眼高手低,看起来很简单,但是你从来没有去动手试一下,就不知道其中真正需要注意的许多细节, 2:完整code如下: 1 <!DOCTYPE html> 2 <html l ...

  4. Lua C++交互 应用实例步骤(UserData使用)

    一.配置Lua C++交互环境 1.下载Lua 包环境 地址: https://www.lua.org/download.html ,我们这里用的是5.4.2版本. 2.新建C++ 控制台应用程序 3 ...

  5. MyBatis中模糊查询

    接口 // 模糊查询 List<User> getUserLike(String value); Mapper.xml文件 <!-- 模糊查询 --> <select i ...

  6. Java 并发编程小册整理好了

    Java 有并发,并发知识之大,一口吃不下 这曾是我不愿意触碰的知识角 多次一头扎进并发,无功而返 为应对面试,临时苦苦记忆,不成体系 这一次我决定从基础开始,攻克它 12,0000 字 68Mb 高 ...

  7. 什么是ETL?

    一.ETL概念之背景 随着企业的发展,目前的业务线越来越复杂,各个业务系统独立运营.例如:CRM系统只会生产CRM的 数据:Billing只会生产Billing的数据.各业务系统之间只关心自己的数据, ...

  8. 关于mysql事物和特性

    事务的 四个特征(ACID) 事务具有四个特征:原子性( Atomicity ).一致性( Consistency ).隔离性( Isolation )和持续性( Durability ).这四个特性 ...

  9. 什么是SSR SSR有什么用 如何使用使用SSR

    什么是SSR 以下信息来自维基百科: Shadowsocks(简称SS)是一种基于Socks5代理方式的加密传输协议,也可以指实现这个协议的各种开发包.当前包使用Python.C.C++.C#.Go语 ...

  10. 了解PSexec

    PSExec允许用户连接到远程计算机并通过命名管道执行命令.命名管道是通过一个随机命名的二进制文件建立的,该文件被写入远程计算机上的ADMIN $共享,并被SVCManager用来创建新服务. 您可以 ...