js 进阶篇代码等级提升

一、条件语句

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，默认为 1console.log(`We have ${q}${fruit}!`);
}// -------   默认参数  优雅   -------function test(fruit, quantity = 1) { // 如果没有提供 quantity，默认为 1if (!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 进阶篇代码等级提升相关推荐

web前端开发分享js进阶篇
js进阶篇: js进阶,等妙味看的差不多,心里难免痒痒,看老师用尽可能少的代码来实现了众多以前没法实现的动态效果.然后自己想写,但不知道写啥东西,下面就这个问题做以建议,写这些东西的目的有这么几个,一 ...
2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
cytoscape.js进阶篇
cytoscape.js进阶篇系列文章前言 cytoscape依赖引用 cytoscape扩展依赖引用升级Cytoscape组件扩展Cytoscape组件模板容器扩展Cytoscape组件方 ...
js 定时网页点击_前端面试题整合（JS进阶篇）（二）
Ajax 是什么? 如何创建一个Ajax? AJAX全称是Asychronous JavaScript And Xml(异步的 JavaScript 和 XML) 它的作用是用来实现客户端与服务器端的 ...
JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
JS进阶篇--JS数组reduce()方法详解及高级技巧 1
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
JS进阶篇--ckplayer.js视频播放插件
网页中常见的功能就是播放视频,下面介绍的这个ckplayer.js既可以在pc端播放,也可以在手机网页上播放. 可调用flash也可以调用html5播放器: <div id="a1&q ...
Three.js进阶篇之4 - 着色器
"渲染"(Rendering)是即使非计算机专业的都不会觉得陌生的词,虽然在很多人说这个词的时候,并不清楚"渲染"究竟意味着什么.相反,"着色器&qu ...
js 定时网页点击_前端面试题熬夜吐血（js进阶篇）
Ajax 是什么? 如何创建一个Ajax? AJAX全称是Asychronous JavaScript And Xml(异步的 JavaScript 和 XML) 它的作用是用来实现客户端与服务器端的 ...

js 进阶篇代码等级提升

js 进阶篇代码等级提升相关推荐

最新文章

热门文章

js 进阶篇 代码等级提升

js 进阶篇 代码等级提升相关推荐

最新文章

热门文章

js 进阶篇代码等级提升

js 进阶篇代码等级提升相关推荐