流程控制和函数和返回值

流程控制

1. 顺序(默认)

2. 分支

• 有条件的执行某个代码块

1. 单分支:进当表达式计算结果为真时,才执行代码块 if(条件表达式){}

let age = 28;
if (age >= 18) {
  console.log("你好");
}
// `if (age >= 18) ` 此为判断条件 当 age>=18 时 才向下执行{}里面的 `console.log("你好");`.否则不执行

1. 双分支: 有一个默认分支

let age = 8;
if (age >= 18) {
  console.log("你好");
} else {
  console.log("现在不好");
}
// 当 `age>=18;` 执行 "你好", 否则 执行 "现在不好"
///简化代码
let age = 8;
let res = age >= 18 ? "你好" : "现在不好";
console.log(res);

1. 多分支: 有多个默认分支

let age = 48;
if (age >= 1 && age < 30) {
  console.log("我再1-30之间");
} else if (age >= 30 && age < 50) {
  console.log("我再30-50之间");
} else if (age >= 50 && age < 100) {
  console.log("我再50-100之间");
} else {
  console.log("我不在100以内");
}
///  && 为并且  || 或

1. switch 进行优化

let age = 118;
switch (true) {
  case age >= 1 && age < 30:
    console.log("我再1-30之间");
    break;
  case age >= 30 && age < 50:
    console.log("我再30-50之间");
    break;
  case age >= 50 && age < 100:
    console.log("我再50-100之间");
    break;
  default:
    console.log("我不在100以内");
}

3. 循环

1. while 入口行判断

const colors = ["red", "green", "blue"];
console.log(colors[0], colors[1], colors[2]);
// 查看数组里有几个值
console.log(colors.length);
//查看数组里面最后一个值的索引号
console.log(colors.length - 1);
//  起始索引
let i = 0;
// 循环条件
let length = colors.length;
// 设变量 length 等于 数组里面有几个数值
//  更新索引 要在代码块里面
while (i < length) {
  console.log(colors[i]);
  i++;
}

• 循环三条件

1. 初始条件: 数组索引的引用 (i = 0)
2. 循环条件: 为真才执行循环体 ( i < arr.length)
3. 更新条件: 必须要有,否则进入死循环 ( i++)

2. do{} while() 出口型判断,无论条件是否成立,必须执行一次代码

// 出口型判断,无论条件是否成立,必须执行一次代码
i = 0;
do {
  console.log(colors[i]);
  i++;
} while (i < length);
// 正常输出  red  , green , blue
// 如果把条件改为不成立  `(i > length)` 他也会输出  `red ` 因为不管成不成立 都会输出一次

for()循环 (是 while 的简化)

• for (初始化条件; 循环条件; 更新条件) {…}

for (i = 0; i < length; i++) {
  console.log(colors[i]);
}
// 优化, 将数组长度,提前计算出来缓存到一个变量中(有助有提高速度)
for (let i = 0, length = colors.length; i < length; i++) {
  console.log(colors[i]);
}

3.for - of 快速迭代处理集合

• 数组内部有一个迭代器的方法,可以用for - of
• for - of 优点 : 用户不必再起关心索引,而将注意力集中在数组成员上

for (let f of colors.entries()) {
  console.log(f);
}
// colors.entries() 返回的是数组每个成员的键值对
// colors.keys(); 返回的是数组每个成员的键值(0 ,1, 2)
// colors.values() 返回的是数组每个成员的值(red, green,blue)
// 优化(默认返回值)
for (let f of colors) {
  console.log(f);
}
// 返回的是数组每个成员的值(red, green,blue)

4.for - in 遍历对象

const obj = { a: "red", b: "green", c: "blue" };
for (let key in obj) {
  console.log(obj[key]);
}

函数和返回值

返回值

• 函数默认单值返回

• 如何返回多个值;

  1. 用数组返回

w = () => [1, 2, 3, 4];
console.log(w());

1. 对象: 模块

w = () => ({ a: 1, b: 2, c: 3 });
console.log(w());
// 对象的简化
let name = "ianren";
let user = {
  //   name: "woshiwo",
  //   name: name,
  name,
};
console.log(user.name);
// 变量名（name）与属性名（name）同名时；且在同一作用域可以直接写一个name
// 2. 方法简化
user = {
  name,
  //   所谓方法本质仍是属性  他的值是一个函数声明
  getName() {
    return this.name;
  },
  getName1: () => this.name,
};
//  箭头函数不要用到字面量中（有this的不能用箭头函数）
console.log(user.getName());
console.log(user.getName1());

模板字面量 与模板函数

-模板字面量(加反引号)

console.log("hello");
console.log(`hello`);

• 模板字面量 里面可以使用插值（解析变量）

let name1 = "ianren";
console.log("hello " + name1);
// 使用插值
console.log(`hello ${name}`);
// 变量/表达式等插值，使用${...}插入到模板字面量中
//  表达式
console.log(`10 + 20 = ${10 + 20}`);
// 判断
console.log(`${10 < 20 ? "大于" : "小于"}`);
//  模板函数：使用模板字面量为参数的函数
// 1.模板函数（第一个参数是字面量做成的数组，第二个参数起，是字面量中的插值列表）
function total(strings, num, price) {
  console.log(num, price);
}
let num = 10;
let price = 20;
total`${10} * ${500}`;
// 模板函数的优化 以后只用这一种
//  使用 ...rest 将插值合并
function sum(strings, ...arr) {
  console.log(strings);
  console.log(arr);
  console.log(`${arr.reduce((a, c) => a + c)}`);
}
sum`计算多个数 和：${1}${2}${3}${4}${5}`;