解决JavaScript中不必要的条件嵌套,多余判定,参数设置,以及参数不确定性。
<script>
'use strict';
//1.使用Array.includes来处理多重条件
/**
* 如果我们要找到符合我们需要的鞋子
* 符合的有"Asics" , "Nike" , "Adidas"
*/
//一般方式处理
let fondShoes_1 = (shoes)=> {
if (shoes === "慢跑鞋" || shoes === "休闲鞋" || shoes === "娃娃鞋")
console.log(`这双${shoes}我喜欢!`);
};
// fondShoes_1("慢跑鞋"); //这双慢跑鞋我喜欢!
//使用Array.includes处理
//首先将需要验证的对象放到数组中
const SHOESArr = ["慢跑鞋" , "休闲鞋" , "娃娃鞋"];
let fondShoes_2 = (shoes)=>{
if (SHOESArr.includes(shoes))
console.log(`这双${shoes}我喜欢!`);
};
// fondShoes_2("娃娃鞋");//这双娃娃鞋我喜欢!
//2.减少条件的嵌套
/**
* 添加条件:
* a.在上面的鞋子中如果没有,抛出错误
* b.如果该鞋子是蓝色的打印标注
*/
//第一种
let dealShoes_1 = (shoes , color)=>{
if (shoes) {//shoes是存在的
if (SHOESArr.includes(shoes)) {
console.log(`这双${shoes}还可以!`);
if (color === "blue")
console.log(`我很喜欢蓝色的${shoes}!`);
}
}else {
throw new Error("没有鞋子");//打印错误信息,停止后面的代码执行
}
};
// dealShoes_1();//报错打印“没有鞋子”
// dealShoes_1("休闲鞋");//这双休闲鞋还可以!
// dealShoes_1("休闲鞋" , "blue");//这双休闲鞋还可以!我很喜欢蓝色的休闲鞋!
//第二种
let dealShoes_2 = (shoes , color)=>{
if (!shoes) throw new Error("没有鞋子");
if (SHOESArr.includes(shoes)) {
console.log(`这双${shoes}还可以!`);
if (color === "blue")
console.log(`我很喜欢蓝色的${shoes}!`);
}
};
// dealShoes_2();//报错打印“没有鞋子”
// dealShoes_2("休闲鞋");//这双休闲鞋还可以!
// dealShoes_2("休闲鞋" , "blue");//这双休闲鞋还可以!我很喜欢蓝色的休闲鞋!
//第三种
let dealShoes_3 = (shoes , color)=>{
if (!shoes) throw new Error("没有鞋子");
if (!SHOESArr.includes(shoes)) return;
console.log(`这双${shoes}还可以!`);
if (color === "blue")
console.log(`我很喜欢蓝色的${shoes}!`);
};
// dealShoes_3();//报错打印“没有鞋子”
// dealShoes_3("休闲鞋");//这双休闲鞋还可以!
// dealShoes_3("休闲鞋" , "blue");//这双休闲鞋还可以!我很喜欢蓝色的休闲鞋!
//3.使用函数默认参数和解构
//原始方式处理参数
let defPara_1 = (shoes , color)=>{
if (!shoes) return;//如果没有鞋子就不处理了
let def_color = color || "蓝色";
console.log(`我很喜欢${def_color}的${shoes}`);
};
// defPara_1("篮球鞋");//我很喜欢蓝色的篮球鞋
// defPara_1("篮球鞋" , "红色");//我很喜欢红色的篮球鞋
//使用默认参数
let defPara_2 = (shoes , color = "蓝色")=>{
if (!shoes) return;
console.log(`我很喜欢${color}的${shoes}`);
};
// defPara_2("篮球鞋");//我很喜欢蓝色的篮球鞋
// defPara_2("篮球鞋" , "红色");//我很喜欢红色的篮球鞋
//结构(deconstruction):当处理对象是一个对象时
//原始
let dec_1 = (shoes)=>{
if (shoes && shoes.name)
console.log(shoes.name);
else
console.log("没有这个鞋子");
};
// dec_1("篮球鞋");
// dec_1({});
// dec_1({name : "篮球鞋" , color : "blue"});
//默认参数为{}空对象
let dec_2 = ({name} = {})=>{
console.log(name || "没有这个鞋子")
};
// dec_2("篮球鞋");
// dec_2({});
// dec_2({name : "篮球鞋" , color : "blue"});
//对于switch/map来说Object也许是更好的选择
/**
* 根具颜色打印鞋子
*/
//switch方式
let findShoesOfColor_1 = (color)=>{
switch (color){
case "blue" :
console.log("休闲鞋");
break;
case "red":
console.log("娃娃鞋");
break;
default:
console.log("五颜六色的鞋子");
}
};
findShoesOfColor_1();//五颜六色的鞋子
findShoesOfColor_1("red");//娃娃鞋
//使用对象字面量
const shoes_color_group = {blue : "休闲鞋" , red : "娃娃鞋"};
let findShoesOfColor_2 = (color)=>{
console.log(shoes_color_group[color] || "五颜六色的鞋子");
};
findShoesOfColor_2();//五颜六色的鞋子
findShoesOfColor_2("red");//娃娃鞋
//使用Map
const shoes_map = new Map()
.set("blue","休闲鞋")
.set("red" , "娃娃鞋");
let findShoesOfColor_3 = (color)=>{
console.log(shoes_map.get(color) || "五颜六色的鞋子");
};
findShoesOfColor_3();//五颜六色的鞋子
findShoesOfColor_3("blue");//娃娃鞋
//重构语法
/**
* filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
* 注意: filter() 不会对空数组进行检测。
* 注意: filter() 不会改变原始数组。
*/
const shoes_obj = [
{name : "慢跑鞋" , color : "black"},
{name : "休闲鞋" , color : "blue"},
{name : "娃娃鞋" , color : "red"}
];
let findShoesOfColor_4 = (color)=>{
console.log(shoes_obj.filter(f =>f.color === color));
};
findShoesOfColor_4();//[]
findShoesOfColor_4("black");//[{name : "慢跑鞋" , color : "black"},]
//使用Array.every和Array.some来检查数组中是否全部/部分满足需求
//原始
let checkShoes_1 = (color)=>{
let isRed = true;
for (let s of shoes_obj) {
if (!isRed) break;
isRed = (s.color === color);
}
console.log(isRed);
};
checkShoes_1();//false
checkShoes_1("red");//false
//使用every检查全部是否符合
let checkShoes_2 = (color)=>{
let isRed = shoes_obj.every(f => f.color === color);
console.log(isRed);
};
checkShoes_2();//false
checkShoes_2("red");//false
//使用some检查是否含有符合标准的项
let checkShoes_3 = (color)=>{
let hasRes = shoes_obj.some(f => f.color === color);
console.log(hasRes);
};
checkShoes_3();//false
checkShoes_3("red");//true
</script>