js代码优化

s1.优化  if...else...

let this.list=[

                {name:'巧克力'，id:0,group:'套餐1'},

                {name:'薯片'，id:1,,group:'套餐2'},

                {name:'瓜子'，id:2,,group:'套餐1'},

                {name:'溜溜梅'，id:3,,group:'套餐3'},

                {name:'辣条'，id:4,,group:'套餐1'},

                {name:'饮料'，id:5,,group:'套餐2'},

                {name:'面包'，id:6,,group:'套餐1'},

        ]

// 要求据id返回list的名称    find()

//bad

 format(val) {       

     if (val === 0) return '巧克力'
      else if (val === 1) return '薯片'
      else if (val === 2) return '瓜子'
      else if (val === 3) return '溜溜梅'
      else if (val === 4) return '辣条'
      else if (val === 5) return '饮料'
      else if (val === 6) return '面包'

}

//good

 format(val) {

return this.list.find(item => item.id === val).name

}

//要求返回套餐1里的食品名称    find()和filter()

//bad

let names=[]

for(let i=0;i<this.list.length;i++){

    if(this.list[i].group==='套餐1'){

    names.push(this.list[i].name)

  }

}

//good

let names=this.list.find.filter(i=>i.group==='套餐1').map(i=>i.name)

//替换成使用filter与map来取代for循环不仅可以使代码更精简，还可以使语义更加明确，这样我们一下就可以看出是先对数组过滤再重组

filter()

//过滤数组中的虚值

let arr=[1,'a',undefined,NaN,2,null,true,'something',false]

console.log(arr.filter(Boolean))     //[1, 'a', 2, true, 'something']

//当我们需要创建新变量时, 有时需要检查为其值引用的变量是否为null或未定义时, 就可以使用简便写法。空值合并操作符（??）

//bad

if (key!==null&&key!==undefiend){
    string=''
}else{
    string='123'
}

//good

 string=key??'123'  

// 空值合并操作符（??） 当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。



补充:可选链操作符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。 ?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值

let person = {
    name: "胡三疯",
    education:null
}

let school = person.education.school  //报错
let school = person.education?.school  //不会报错  返回undefiend

reduce（）

我们应该利用reduce方法来快速找到基本的数学运算。

const array  = [5,4,7,8,9,2];

• 和

array.reduce((a,b) => a+b);
// 输出: 35

• 最大

array.reduce((a,b) => a>b?a:b);
// 输出: 9

• 最小

array.reduce((a,b) => a<b?a:b);
// 输出: 2

includes（）

let str='a'
let arr=['a','b','c']

//bad

if(str==='a'||str=='b'||str=='c'){    
    .....
}

//good

if(arr.includes(str)){
...
}

//缩短数组长度  用数组的length

const numbers = [1, 2, 3, 4, 5]

numbers.length = 3;

console.log(numbers); // [1, 2, 3]          

数字排序  sort()---根据unicode编码排序（存在bug）

let arr=[6,3,4,1,9]
console.log(arr.sort())   // (5) [1, 3, 4, 6, 9]

let arr1=[12,25,16,56,23,45,1,9]
console.log(arr1.sort())  //(8) [1, 12, 16, 23, 25, 45, 56, 9]

正确的方法：：：：定义一个比较器函数

sort(callback)

function(x,y){return x-y}  x-y小于0，则把x移到y前面

let arr1=[12,25,16,56,23,45,1,9]

console.log(arr1.sort(function(x,y){return x-y}))  //(8) [1, 9, 12, 16, 23, 25, 45, 56]

console.log(arr1.sort(function(x,y){return y-x}))  //(8) [56, 45, 25, 23, 16, 12, 9, 1]

装箱与拆箱的概念

装箱：基本数据类型转换至引用数据类型的操作

var num=131  //number
var objNum=new Number(123)  // object

拆箱：引用类型转换成对应的值类型对象

方法一： valueof()
var objNum=new Number(123)  //object
let num=objNum.valueof()    //number

//方法二：   js toPrimitive(input, type) input:传入的值 type: 值类型

//  内部流程
//   1.input 判断是不是原始类型的值:是直接返回
//   2.不是: input.value0f() :是原始类型:直接返回
//   3.还不是: input. tostring() : string 是原始类型返回
//   4.报错

//   value0f(): input 原始类型的值:有:返回，没有:返回对象本身
//   tostring(): input 字符串转换:对象: [object type] type: 对象类型

//   面试题
// console.1og([] + [])          // " " + toPrimitive()
// console.1og([].valueOf())     // []
// console.1og([].toString())    // ''+''   // "

// console.1og([] + {}) /1 " + toPrimitive()   //[object object ]
// console.1og([].valueOf())    // ''
// console.1og({}.valueOf())    // []
// console.1og({}.toString())   //[object object ]

console.log({}+[]) //有的浏览器中显示0  ---因为将{}当作代码块了---console.log(+[])