一、条件语句

       1,使用 Array.includes 来处理多重 || 条件         

// ----- 一般 ------

    if (fruit == 'apple' || fruit == 'strawberry' || fruit == 'banana'  ) {
console.log('red');
} //------- 优雅 ------ // 把条件提取到数组中
const redFruits = ['apple', 'strawberry', 'banana', 'cranberries']; if (redFruits.includes(fruit)) {
console.log('red');
}

       

        2,少写嵌套,无效条件尽早返回

/_ 当发现无效条件时尽早返回 _/
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']; if (!fruit) thrownewError('No fruit!'); // 条件 1:尽早抛出错误
if (!redFruits.includes(fruit)) return; // 条件 2:当 fruit 不是红色的时候,直接返回
console.log('red'); // 条件 3:必须是大量存在
if (quantity > 10) {
console.log('big quantity');
}
}

     

      3,使用函数默认参数和解构

// -------   默认参数  一般   -------

function test(fruit, quantity) {
if (!fruit) return;
const q = quantity || 1; // 如果没有提供 quantity,默认为 1
console.log(`We have ${q}${fruit}!`);
} // ------- 默认参数 优雅 ------- function test(fruit, quantity = 1) { // 如果没有提供 quantity,默认为 1
if (!fruit) return;
console.log(`We have ${quantity}${fruit}!`);
} // ------- 解构 一般 ------- function test(fruit) {
// 如果有值,则打印出来
if (fruit && fruit.name) {
console.log (fruit.name);
} else {
console.log('unknown');
}
} // ------- 解构 优雅 ------- // 解构 —— 只得到 name 属性
// 默认参数为空对象 {}
function test({name} = {}) {
console.log (name || 'unknown');
}

     

      4,相较于 switch,Map / Object 也许是更好的选择

//------   switch   一般 ---------

function test(color) {
// 使用 switch case 来找到对应颜色的水果
switch (color) {
case 'red':
return ['apple', 'strawberry'];
case 'yellow':
return ['banana', 'pineapple'];
case 'purple':
return ['grape', 'plum'];
default:
return [];
}
} // ----- Object 优雅 ----- // 使用对象字面量来找到对应颜色的水果
const fruitColor = {
red: ['apple', 'strawberry'],
yellow: ['banana', 'pineapple'],
purple: ['grape', 'plum']
};
function test(color) {
return fruitColor[color] || [];
} // ----- Map 优雅 ----- // 使用 Map 来找到对应颜色的水果
const fruitColor = newMap()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']);
function test(color) {
return fruitColor.get(color) || [];
} // ----- filter 优雅 ----- const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'strawberry', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'pineapple', color: 'yellow' },
{ name: 'grape', color: 'purple' },
{ name: 'plum', color: 'purple' }
];
function test(color) {
// 使用 Array filter 来找到对应颜色的水果
return fruits.filter(f => f.color == color);
}

      5,使用 Array.every 和 Array.some 来处理全部/部分满足条件

// -------   直接优雅 --------
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
];
function test() {
// 条件:(简短形式)所有的水果都必须是红色
const isAllRed = fruits.every(f => f.color == 'red'); // 条件:至少一个水果是红色的
const isAnyRed = fruits.some(f => f.color == 'red');
console.log(isAllRed); // false
}

优雅的敲JS代码的几个原则的更多相关文章

  1. 如何才能优雅地书写JS代码

    第一:关于匿名函数的使用 要避免全局变量泛滥, 可以考虑使用匿名函数, 把不需要在外部访问的变量或者函数限制在一个比较小的范围内. 例如以下代码: <script> function fu ...

  2. 几个你所不知道的技巧助你写出更优雅的vue.js代码

    1. watch 与 computed 的巧妙结合 如上图,一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ ...

  3. 优雅的vue.js

    优雅的vue.js代码 https://www.cnblogs.com/zhengrunlin/p/9164951.html watch 与 computed 的巧妙结合 如上图,一个简单的列表页面. ...

  4. 也谈谈规范JS代码的几个注意点

    也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品,你希望它保持一份不仅干净而且也优 ...

  5. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  6. JS代码的简单重构与优化

    JS代码的简单重构与优化(适合新手) 原文  http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) ...

  7. JS代码的几个注意点规范

    也谈谈规范JS代码的几个注意点 也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品, ...

  8. 添加可运行的js代码

    如何在博客园的文章/随笔中添加可运行的js代码 在博客园浏览大牛们写的文章时,经常会看到在文章中混有一些可运行示例,例如司徒正美的博客中: 带有可运行示例 可以点击“运行代码” 经过一番小小的探索,掌 ...

  9. js代码之编程习惯

    编程习惯: 异常处理 如果你没有使用异常处理的习惯,这可能是因为你并未真正的理解它的作用.当你正确使用异常处理之后,你会发现你的代码最显著的变化就是:少了很多的 if-else 语句 . 虽然在 JS ...

随机推荐

  1. git --添加多个文件

    今天测试,发现之前写的auto testcase,有好多发生了改变,因此需要修改脚本重新上传至git当中. 对好几个test case script 进行了修改,之前只是一个一个的修改,这次是多个,经 ...

  2. 题解 P2421 【[NOI2002]荒岛野人】

    我的第一道数论紫题 首先,我们先看两个野人,他们相遇的充要条件是 \(C_i+P_i\times k\equiv C_j+P_j\times k\;(mod\;M)\) 其中\(k\)是第几年,且\( ...

  3. 我的.vimrc配置

    termux平台下,通过pkg update && pkg upgrade && pkg install vim来获得vim.可是,当我配置.vimrc时发现如果我每在 ...

  4. 2020版Adobe全家桶介绍及免费下载安装

    前言 Adobe公司创建于1982年,是世界领先的数字媒体和在线营销解决方案供应商.公司总部位于美国加利福尼亚州圣何塞.Adobe 的 客户包括世界各地的企业.知识工作者.创意人士和设计者.OEM合作 ...

  5. 如何理解golang中的nil

    nil的奇怪行为 刚接触golang时,发现nil在不同的上下文,行为表现是不同的,并且和其他语言中的表现,也不大相同 实例1:输入true, true, false,不符合传递性 func main ...

  6. 对CSS3中的transform:Matrix()矩阵的一些理解

    只要有CSS基础的人肯定都知道,我们可以通过transform中的translate,scale,rotate,skew这些方法来控制元素的平移,缩放,旋转,斜切,其实这些方法呢都是为了便于开发者使用 ...

  7. scrapy爬取效率提升配置

    增加并发: 默认scrapy开启的并发线程为32个,可以适当进行增加.在settings配置文件中修改CONCURRENT_REQUESTS = 100值为100,并发设置成了为100. 降低日志级别 ...

  8. mysql 一台服务器中装两个mysql

    个人经验: 服务器中已有mysql5.0 现要安装mysql5.5 下载安装包,安装后,mysql5.5中没有my.ini文件,就在我自己的电脑上复制了mysql5.5的my.ini文件进去. 1.在 ...

  9. 基于vue+Django的简迩音乐用户界面实现

    应这次软件工程课程要求,我们团队着力打造一个音乐播放器软件. 软件实现主要采用基于Vue.js+Python Django,前后端分离架构实现网页. 用户界面主要功能:呈现用户收藏歌单歌曲信息,并且提 ...

  10. Hyperledger Fabric——balance transfer(一)启动示例

    Blacne transfer是Hyperledger fabric Node SDK的一个示例应用,主要使用了SDK中fabric-client 和 fabric-ca-client 模块中的API ...