js - 常用api和方法

sodakii

已于 2024-03-26 10:57:04 修改

阅读量1k

点赞数 32

文章标签： javascript

于 2024-03-25 16:50:58 首次发布

本文链接：https://blog.csdn.net/sodakii/article/details/137018595

版权

本文详细介绍了JavaScript中的DOMAPI、ConsoleAPI、FetchAPI用于网络请求、StorageAPI用于数据存储、GeolocationAPI获取用户位置，以及字符串、数组、对象和全局方法如JSON处理等内容。

摘要由CSDN通过智能技术生成

常用API

Document Object Model (DOM) API：用于操作HTML文档的结构、样式和内容。
```
  document.getElementById("myElement").innerHTML = "Hello World!";
```

Console API：提供了访问浏览器调试控制台的功能。
```
  console.log("Hello World!");
```

Fetch API：用于异步请求网络资源。

 fetch('https://api.example.com/data')

    .then(response => response.json())

    .then(data => console.log(data))

    .catch(error => console.error(error));

Storage API：包括localStorage和sessionStorage，用于在用户浏览器中存储数据。

  localStorage.setItem("key", "value");

  let value = localStorage.getItem("key");

Geolocation API：允许访问用户的地理位置信息。

  navigator.geolocation.getCurrentPosition(position => {

    console.log(position);

  });

字符串(String)方法

charAt(index)：返回指定位置的字符。
```
  "Hello".charAt(1); // "e"
```

includes(substring)：检查字符串是否包含指定的子字符串。
```
  "Hello world".includes("world"); // true
```

slice(start, end)：提取字符串的一部分并返回新字符串
```
  "Hello world".slice(0, 5); // "Hello"
```

split(separator)：将字符串分割成字符串数组。
```
  "a,b,c".split(","); // ["a", "b", "c"]
```

toLowerCase() 和 toUpperCase()：转换字符串的大小写。

"Hello World".toLowerCase(); // "hello world"

  "Hello World".toUpperCase(); // "HELLO WORLD"

trim()：去除字符串两端的空白字符。

  "  Hello World  ".trim(); // "Hello World"

数组(Array)方法

push(element) 和 pop()：向数组末尾添加元素和移除数组末尾的元素。

let fruits = ["Apple", "Banana"];

fruits.push("Orange"); // ["Apple", "Banana", "Orange"]

fruits.pop(); // ["Apple", "Banana"]

shift() 和 unshift(element)：移除数组第一个元素和向数组开头添加元素。

 let fruits = ["Apple", "Banana"];

  fruits.shift(); // ["Banana"]

  fruits.unshift("Strawberry"); // ["Strawberry", "Banana"]

map(function)：创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
```
 let numbers = [1, 2, 3];

  let squares = numbers.map(x => x * x); // [1, 4, 9]
```

filter(function)：创建一个新数组，包含通过所提供函数实现的测试的所有元素。

let numbers = [1, 2, 3, 4, 5];

  let evens = numbers.filter(x => x % 2 === 0); // [2, 4]

find(function)：返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined。
```
let numbers = [1, 2, 3, 4, 5];

  let firstEven = numbers.find(x => x % 2 === 0); // 2
```

reduce(function, initialValue)：对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

  let numbers = [1, 2, 3, 4, 5];
  let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 15

对象(Object)方法

Object.keys(obj)：返回一个包含对象自身的所有键名的数组。
```
  Object.keys({name: "John", age: 30}); // ["name", "age"]
```

Object.values(obj)：返回一个包含对象自身的所有值的数组。
```
  Object.values({name: "John", age: 30}); // ["John", 30]
```

Object.entries(obj)：返回一个给定对象自身可枚举属性的键值对数组。

  Object.entries({name: "John", age: 30}); // [["name", "John"], ["age", 30]]

Object.assign(target, ...sources)：用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

  const target = { a: 1, b: 2 };
  const source = { b: 4, c: 5 };
  const returnedTarget = Object.assign(target, source);
  console.log(returnedTarget); // { a: 1, b: 4, c: 5 }

全局函数(Global Methods)

parseInt(string, radix)：解析一个字符串并返回指定基数的十进制整数。
```
  parseInt("10", 10); // 10
```

parseFloat(string)：解析一个字符串并返回一个浮点数。
```
  parseFloat("10.00"); // 10
```

isNaN(value)：检查值是否为NaN。
```
  isNaN(NaN); // true
```

isFinite(value)：检查值是否为有限数。

 isFinite(Infinity); // false

  isFinite(100); // true

JSON 方法

JSON.stringify(value)：将JavaScript对象转换为JSON字符串。

  JSON.stringify({ name: "John", age: 30 }); // '{"name":"John","age":30}'

JSON.parse(text)：将JSON字符串转换为JavaScript对象。

  JSON.parse('{"name":"John","age":30}'); // { name: "John", age: 30 }