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. hadoop的lzo支持

    目录 1.下载相关文件: 2.Configure LZO to build a shared library (required) and use a package-specific prefix ...

  2. vue的el-select标签全选以及出现需要有禁用选项

    首先说一下遇到这种问题的解决思路吧,很简单先去https://element.eleme.cn/#/zh-CN 这个官网上找到对应的需求,然后就是拼接数据的问题. 以下是全选的例子: <el-s ...

  3. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  4. VMware 安装 CentOS7 后的简单配置

    1.连网 如果能连网,跳过此步 试着ping一下百度 ping baidu.com 动态分配 IP sudo vim /etc/sysconfig/network-scripts/ifcfg-ens3 ...

  5. NumPy 将停止支持 Python 2

    NumPy 项目宣布将停止支持 Python 2.Python 核心团队已经决定在 2020 年停止支持 Python 2,而 NumPy 项目自 2010 年以来同时支持 Python 2 和 Py ...

  6. 为什么要从 Linux 迁移到 BSD3

    BSD 是正常人所在的地方 首先我要说的是,我并不是字面上的意思.我这里说的是从系统管理和编码的角度出发的设计和开发决策. 与 Linux 发行版相反,Berkeley 软件发行版( BSD )并不是 ...

  7. [WC2014]时空穿梭

    这才叫莫比乌斯反演题. 一.题目 点此看题 二.解法 也没有什么好的思路,我们不妨把暴力柿子写出来,我们想枚举直线,但是这道题不能枚举直线的斜率,所以就要用整数来表示直线,我们不妨枚举出发点和终止点的 ...

  8. webpack4.x 从零开始配置vue 项目(一)基础搭建项目

    序 现在依旧记得第一次看到webpack3.x 版本配置时候的状态  刚开始看到这些真的是一脸懵.希望这篇文章能帮到刚开始入门的同学. webpack 是什么? webpack是一个模块化打包工具,w ...

  9. 【java框架】MyBatis-Plus(1)--MyBatis-Plus快速上手开发及核心功能体验

    1.MyBatis-Plus入门开发及配置 1.1.MyBatis-Plus简介 MyBatis-Plus(简称 MP)是一个 MyBatis的增强工具,在 MyBatis 的基础上只做增强不做改变, ...

  10. Quartz基础使用

    Quartz基本组成部分: 调度器:Scheduler 任务:JobDetail 触发器:Trigger,包括SimpleTrigger和CronTrigger . using Quartz; usi ...