JavaScript内置API

• js的内置api：js语言本身提供的一组预定义的对象、方法和属性,开发者可以直接使用它们来实现各种功能
• 优点：
  1.提高开发效率
  2.增加代码可读性和可维护性
  3.跨平台兼容
  4.性能优化
  5.社区支持
  6.标准化和规范化

1.DOM API

提供了操作网页HTML元素的方法和属性

<div id="myElement"></div>

//获取id为myElement的元素，并为其设置innnerHTML
const myElement = document.getElementById("myElement")
myElement.innerHTML = "这是新增内容"
console.log(myElement.innerHTML);
//输出结果：这是新增内容

2.数组(Array)API

包含了操作数组的各种方法

(1)array.push()在数组末尾添加一个或者多个元素

let fruits = ['coffee', 'tea'];
fruits.push('cocacola');
console.log(fruits); 
// 输出结果: ['coffee', 'tea', 'cocacola']

(2)array.pop()删除并返回数组的最后一个元素

let fruit = ['coffee', 'tea', 'cocacola'];
let lastFruit = fruit.pop();
console.log(fruit); 
// 输出结果: ['coffee', 'tea']
console.log(lastFruit);
 // 输出结果: 'cocacola'

(3)array.map()对数组的每一个元素执行的给定函数，并返回一个新数组

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers);
 // 输出结果: [2, 4, 6, 8, 10]

3.字符串(String)API

提供了处理字符串的各种函数

(1)string.split()将一个字符串分割成字符串数组

let sentence = "Hello World.";
let words = sentence.split(" ");
console.log(words); 
//输出结果: ['Hello', 'World']

(2)string.replace()返回一个新的字符串，该字符串是通过在此字符串中用第二个参数替换第一个参数匹配得子串而创建的

let message = "这是一行字";
let updateMessage = message.replace("这是一行字", "这是第二行字");
console.log(updateMessage);
//输出结果：这是第二行字

4.数学(Math)API

包括了数学运算相关的属性和方法

(1)math.max()返回零个或者多个数值中的最大值

let number = [5, 4, 6, 9, 8, 7]
let maxNumber = Math.max(...number)
 console.log(maxNumber);
//输出结果：9

(2)math.random()返回0到1之间的一个随机数

let randomNumber = Math.random()
console.log(randomNumber);
//输出结果:0.7929119698815386

5.时间(Date)API

用于处理日期和时间的对象和方法

(1)date.now()返回当前时间的毫秒数

let currentTimestamp = Date.now();
console.log(currentTimestamp);
//输出结果：1718330237749

(2)Date.getFullYear从一个日期对象以四位数字返回年份

let date = new Date()
let year = date.getFullYear()
console.log(year);
//输出结果：2024

6.JSON API

提供了解析和生成JSON数据的方法

(1)JSON.stringify()将一个js对象编码成一个JSON字符串

let person = { name: "Adela", age: 22, city: "China" }
let jsonString = JSON.stringify(person);
console.log(jsonString);
//输出结果：{"name":"Adela","age":22,"city":"China"}

(2)JSON.parse()解析一个JSON字符串，构造一个js对象

let jsonStrings = '{"name":"Adela","age":20,"city":"China"}'
let persons = JSON.parse(jsonStrings)
console.log(person);
//输出结果：{name: 'Adela', age: 20, city: 'China'}

7.错误处理API

包括了抛出和捕获异常的语法

function divideNumbers(a, b) {
     if (b === 0) {
         return "Error: Cannot divide by zero";
      }
      return a / b;
}
try {
     const result1 = divideNumbers(10, 2);
     console.log("Result 1:", result1); 
// 输出结果: Result 1: 5
     const result2 = divideNumbers(10, 0);
     console.log("Result 2:", result2); 
// 输出结果: Result 2: Error: Cannot divide by zero
} catch (error) {
      console.error("Error:", error.message);
}

8.Web API

浏览器提供的一些API

//fetch()函数发出get请求，获取数据
fetch('https://jsonplaceholder.typicode.com/users')
//.then()方法处理响应，先转换成JSON格式，然后遍历输出用户名
    .then(response => response.json())
//.then()方法处理前一个.then()返回的promise
    .then(data => {
        console.log('Users data:', data);
// 遍历并输出用户名
         data.forEach(user => {
              console.log('Username:', user.username);
         });
     })
     .catch(error => {
          console.error('Error:', error);
     });

• 输出结果

Users data: [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }，
   //剩余数据...
]
Username: Bret
Username: Antonette
//剩余用户名...

9.异步编程API

包括了 Promise 对象和 async/await 语法,用于更好地处理异步操作

// 模拟一个异步操作,返回一个 Promise
//fetchData()函数返回一个Promise，Promise用setTimeout()2秒钟的异步操作
function fetchData() {
     return new Promise((resolve, reject) => {
          setTimeout(() => {
              resolve({ data: 'Hello, async/await!' });
           }, 2000);
     });
}
// 使用 async/await 进行异步操作，async可以使用await等待异步操作的完成
async function getData() {
    try {
        console.log('Fetching data...');
//用await等待fetchData()返回的Promise，并将其赋给result
        const result = await fetchData();
        console.log('Data fetched:', result.data);
     } catch (error) {
          console.error('Error:', error);
     }
}
// 调用 getData() 函数
getData();
//输出结果：Data fetched: Hello, async/await!

10.正则表达式API

提供了使用正则表达式的方法

// 定义一个电子邮件地址的字符串
const text = 'My email is [email protected], please contact me.';
// 定义一个用于匹配电子邮件地址的正则表达式
const emailRegex = /\S+@\S+\.\S+/;
// 使用 split() 方法将 text 字符串按空格分割成一个数组
// ['My', 'email', 'is', '[email protected],', 'please', 'contact', 'me.']
const parts = text.split(' ');
// 遍历 parts 数组中的每个元素
for (const part of parts) {
// 使用 emailRegex.test() 方法检查当前元素是否匹配电子邮件地址格式
    if (emailRegex.test(part)) {
// 如果匹配成功,输出 "email: [匹配的电子邮件地址]"
        console.log(`email: ${part}`);
// 输出结果: email: [email protected],
     }
}