js,ts控制流程


摘要:

在 JavaScript 和 TypeScript 中,控制流程是指程序执行的顺序和条件判断。以下是一些常见的控制流程结构,包括条件语句、循环语句和函数调用等。

1. 条件语句:

if 语句

bash 复制代码
let condition = true;

if (condition) {
  console.log('Condition is true');
} else {
  console.log('Condition is false');
}

switch 语句

bash 复制代码
let value = 2;

switch (value) {
  case 1:
    console.log('Value is 1');
    break;
  case 2:
    console.log('Value is 2');
    break;
  default:
    console.log('Value is not 1 or 2');
}

2. 循环语句:

for 循环

bash 复制代码
for (let i = 0; i < 5; i++) {
  console.log(i);
}

while 循环

bash 复制代码
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

do...while 循环

bash 复制代码
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

for...of 循环

bash 复制代码
let array = [1, 2, 3, 4, 5];
for (let item of array) {
  console.log(item);
}

for...in 循环

bash 复制代码
let obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key, obj[key]);
}

3. 函数调用:

声明函数

bash 复制代码
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('Alice');

箭头函数

bash 复制代码
const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

greet('Alice');

4. 异步控制流程:

Promise

bash 复制代码
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success');
  }, 1000);
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

async/await

bash 复制代码
async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

5. 类和对象:

bash 复制代码
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

let person = new Person('Alice', 30);
person.greet();

对象字面量

bash 复制代码
let person = {
  name: 'Alice',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

person.greet();

6. 错误处理:

try...catch

bash 复制代码
try {
  // 可能会抛出错误的代码
  throw new Error('Something went wrong');
} catch (error) {
  console.error(error.message);
} finally {
  console.log('This will always run');
}

7. 条件运算符:

三元运算符

bash 复制代码
let age = 20;
let message = age >= 18 ? 'Adult' : 'Minor';
console.log(message);

8. 数组和对象的方法:

数组方法

bash 复制代码
let array = [1, 2, 3, 4, 5];

array.forEach((item) => {
  console.log(item);
});

let filteredArray = array.filter((item) => item > 2);
console.log(filteredArray);

let mappedArray = array.map((item) => item * 2);
console.log(mappedArray);

let reducedValue = array.reduce((acc, item) => acc + item, 0);
console.log(reducedValue);

对象方法

bash 复制代码
let obj = { a: 1, b: 2, c: 3 };

Object.keys(obj).forEach((key) => {
  console.log(key, obj[key]);
});

Object.values(obj).forEach((value) => {
  console.log(value);
});

Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value);
});

9. 总结:

  • 条件语句:用于根据条件执行不同的代码块。
  • 循环语句:用于重复执行一段代码。
  • 函数调用:用于封装和重用代码。
  • 异步控制流程:用于处理异步操作。
  • 类和对象:用于组织和管理复杂的数据结构。
  • 错误处理:用于捕获和处理错误。
  • 条件运算符:用于简洁地表达条件逻辑。
  • 数组和对象的方法:用于操作数组和对象。

这些控制流程结构可以帮助你更有效地管理和控制程序的执行流程。希望这些示例能帮助你更好地理解和使用 JavaScript 和 TypeScript 中的控制流程。

相关推荐
别拿曾经看以后~15 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死18 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试21 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人30 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人30 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR35 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香37 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969340 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter