JavaScript 分支与循环结构、对象简化及解构赋值

分支（条件选择语句）

单分支: if(){}

if (score < 60){
    alert("不及格")  // 条件成立执行语句，条件不成立则不执行。
}

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

if (score < 60){
    alert("不及格")  // 条件成立时执行语句
} else {
     alert("及格")  // 条件不时成立执行语句
}

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

// 判断多个条件，根据其是否为 true，选择执行不同的语句
if(score < 60){
    alert("不及格");
} else if(score < 70){
    alert("及格");
} else if(score < 90){
    alert("良好");
} else {
    alert("优秀")
}

双分支语法糖: con ? true : false

// 三元运算，格式：条件 ？ 结果表达式1 ：结果表达式2
// 当条件成立，取值结果表达式1
// 当条件不成立，取值结果表达式2
result = status ? 'Success' : "Fail";
// 当 status = true, result = 'Success'
// 当 status = false, result = 'Fail'

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

// 适用于需要判断的条件时有限可数的情况
// 注意：每个 case 语句后必须加 break;
// default 语句必须要有。
switch (true){
    case score < 60: alert("不及格"); break;
    case score < 70: alert("及格"); break;
    case score < 90: alert("良好"); break;
    default: alert("优秀");
}

循环语句

循环，针对的是集合类型（数组、对象）的数据操作。

循环三要素：

初始化：从哪里开始，入口
条件：到哪里结束，true 继续，false 停止
更新条件：避免死循环

while()

let arr = ['red', 'green', 'blue'];
let i = 0;  // 初始化入口
while (i < arr.length){  // 条件
    console.log(arr[i]);  // 每个循环的执行语句
    i++;  // 更新条件
}
/* 输出：
 * red
 * green
 * blue
 */

for()

// while()的简化，将三要素写在一起
let arr = ['red', 'green', 'blue'];
for(let j = 0; j < arr.length; j++){
    console.log(arr[i]);
}
/* 输出：
 * red
 * green
 * blue
 */

for-of

// 遍历数组，每次迭代都将当前对应的数组元素值赋值给指定的变量
// 获取数组元素的值
// 只能遍历数组，不能遍历对象
let arr = ['red', 'green', 'blue'];
for (let value of arr){
    console.log(value);
}
/* 输出：
 * red
 * green
 * blue
 */

for-in

// 遍历对象，每次迭代都将当前对应的数组元素键名赋值给指定的变量
// 获取对象元素的键名
// for-in循环中，不能用“点”语法来访问对象成员，必须用[]
let user = { id: 5, uname: 'Tom', salary: 8000, }
for (let key in user){
    console.log(user[key]);
}
/* 输出：
 * 5
 * Tom
 * 8000
 */

forEach()

// 遍历数组
// 语法：forEach(function(值, 该值的索引, 正在遍历的当前数组){})
let arr = ['red', 'green', 'blue'];
arr.forEach(function (value, index, arr){
    console.log(value, index, arr);
})
/* 输出：
 * red 0 (3) ['red', 'green', 'blue']
 * green 1 (3) ['red', 'green', 'blue']
 * blue 2 (3) ['red', 'green', 'blue']
 */
// 只有第一个参数（值）是必选的，后面两个是可选
// 实际使用时只关注值，就只写第一个参数
arr.forEach(function (value){
    console.log(value);
})
/* 输出：
 * red
 * green
 * blue
 */
// 参数时回调函数，也是匿名函数，可以用箭头函数来简化
arr.forEach(value => console.log(value));

map()

// 遍历数组
// 与 forEach 使用方法一样，只不过有一个返回值
let arr = [1, 2, 3];
let arrDouble = arr.map(value => value * 2);
console.log(arrDouble);
/* 输出：
 *[2, 4, 6]
 */
// 应用示例，在页面生成一组列表
let arr = ['电脑', '手机', '相机'];  // 列表项目名称数组
// 用map()方法给列表项目名称套上 `<li>` `<a>` 标签
let arrList = arr.map(value => `<li><a href="">${value}</a></li>`);
// 将数组转换成字符串：join()方法，默认用逗号连接，这里用""（空字符串）连接
let elemList = arrList.join("");
// 再给字符串套上 `<ul>` 标签
elemList = '<ul>' + elemList + '</ul>';
// DOM 操作渲染到页面
document.body.insertAdjacentHTML('afterbegin',elemList);

对象简化

ES6 中的 class 只支持简化的对象字面量语法！

// 完整的对象声明
let teacher = {
    // 属性
    name: '朱老师',
    // 方法
    greet: function (){
        return `Hello, ${this.name}`;
    }
}
console.log(teacher.greet());    // 输出：Hello, 朱老师
// 属性简化
// 属性值如果来自同一个作用域的变量，属性名与变量同名，则只写属性即可
let name = '朱老师';
let teacher = {
    // 属性
    name, // 等同于 name: name
}
console.log(teacher.name);    // 输出：朱老师
// 方法简写: 删除 “: function”
let name = '朱老师';
let teacher = {
    name, 
    // 方法
    greet(){
        return `Hello, ${this.name}`;
    }
}
console.log(teacher.greet());    // 输出：Hello, 朱老师
// 注意，对象字面量中不能使用箭头函数（没有自己的 this），除非声明的方法中不使用 this。
let name = '朱老师';
let teacher = {
    name,
    // 方法，
    greet: () => {
        // 用对象名称访问，可以
        return `Hello, ${teacher.name}`;
        // 用 this 访问: undefined
        return `Hello, ${this.name}`;
    },
}

解构赋值

将数组、对象等集合中的每个成员赋值给独立的变量。

语法：模板 = 数据

数组：[ … ] = [ … ]
对象：{ … } = { … }

数组解构: []=[]

const user = ['admin', 'admin@qq.com'];
// 传统方法，逐个赋值
let uname = user[0];
let email = user[1];
// 解构赋值
const user = ['admin', 'admin@qq.com'];
let [uname, email] = user;
// 也可以直接写成
let [uname, email] = ['admin', 'admin@qq.com'];
// 更新值
[uname, email] = ['tony', 'tony@qq.com'];
// 变量不足：给默认值
[uname, email, age = 30] = ['tony', 'tony@qq.com'];
console.log([uname, email, age])    // 输出：['tony', 'tony@qq.com', 30]
// 数据过多：剩余参数 '...arr'
[uname, email, ...arr] = ['tony', 'tony@qq.com', 40, 8000];
console.log(uname, email, arr);    // 输出：tony tony@qq.com [40, 8000]
// 展开剩余参数
console.log(uname, email, ...arr);    // 输出：tony tony@qq.com 40 8000

对象解构: {}={}

// 默认：对象的属性名（键）就是变量名
let {uname, email} = {uname:'admin', email:'admin@qq.com'};
console.log(uname, email);    // 输出：admin admin@qq.com
// 使用别名来访问：属性名:别名变量名
let {uname:myName, email:myEmail} = {uname:'admin', email:'admin@qq.com'};
console.log(myName, myEmail);

应用

克隆

// 克隆对象
let item = {name: 'mobile', price: 5880};
let {...obj} = item; // 将 item 中所有内容复制到 obj
console.log(obj);    // 输出：{name: 'mobile', price: 5880}
// obj 和 item 不是同一个对象，obj 是 item 的复制品

传参

// 传递参数
let show = function (item){
    // item 是对象
    return `${item.name}: ${item.price} 元`;
}
console.log(show({name: 'computer', price: 6880}));
// 对象解构传参
show = function ({name, price}){
    return `${name}: ${price} 元`;
}
console.log(show({name: 'camera', price: 16880}));
// 用箭头函数简化
show =  ({name, price}) => `${name}: ${price} 元`;
console.log(show({name: 'camera', price: 16880}));

分支（条件选择语句）

循环语句

对象简化

解构赋值

相关文章