JavaScript实例演示：分支与循环结构、解构赋值与应用场景

分支与循环结构

分支与循环结构是编程中经常使用到的，就JS来说，主要有以下几种实现方式。

单分支: if(){}

let result = 75
if (result >= 60) {
    console.log('及格')
}

如果符合条件，返回‘及格’，如果不符合条件则无返回。

双分支: if(){}else{}

let result = 55
if (result >= 60) {
    console.log('及格')
} else if (result < 60) {
    console.log('不及格')
}

双分支有个简化的语法糖，上面的例子可以简写
console.log(result >=60 ? '及格' : '不及格')

多分支: if(){}else if(){}else{}

let result = 79
if (result >= 60 && result < 80) {
    console.log('及格')
} else if (result >= 80){
    console.log('优秀')
} else {
    console.log('不合格')
}

多分支语法糖: switch(离散,区间)

let result = 89
switch(true) {
    case result >= 60 && result < 80 :
        console.log('及格')
        break
    case result > 80 :
        console.log('优秀')
        break
    default:
        console.log('不及格')
}

注意在各个区间结尾用‘break’结束运行，在最后的默认项就不用了，不然持续运行直至结束。

循环结构

循环都有三要素，缺一不可，不然会造成死循环，一是初始化，即从哪里开始，二是条件；即到哪里结束，条件为true即运行，条件为false即结束；三是更新条件，避免出现死循环。

while()

用一个遍历数组的简单小例子说明，其中length是数组自带的属性，表示数组中元素的个数，从第一个开始，直至最后一个结束。

let arr = ['赵','钱','孙','李']
// 1. 初始化
let i = 0
// 2. 条件
while (i < arr.length) {
    console.log(arr[i])
    // 3. 更新条件
    i++
}

for()

这其实就是while的简化语法糖

for (i = 0;i<arr.length;i++){
console.log(arr[i])
}

for-of()

用于遍历数组

for (let vv of arr) {
    console.log(vv)
}

for-in()

用于遍历对象

let population = {id:1,surname:'赵',number:23}
for (let vv in population) {
    console.log(population[vv])
}

解构赋值与应用场景

解构赋值的使用对象是数组、对象等集合类型。解构就是将集合中每个成员， 赋值给独立的变量。语法分别是：
数组[…] = […]，对象{…} = {…}

数组解构

一个商品参数列表，分别赋值给id/name/price

const product = [1,'iphone',5800]
let [id,name,price] = [1,'iphone',5800]
console.log(id,name,price)

对象解构

const product = {id:1,name:'iphone',price:5800}
let {id:uid,name:uname,price:uprice} = {id:1,name:'iphone',price:5800}
console.log(uid,uname,uprice)

默认对象的属性名就是变量名，这是将变量名进行了更改。

克隆一个对象

const product = {id:1,name:'iphone',price:5800}
let {...obj} = product

实际查看对象‘obj’和‘product’完全一样。