后端开发教程 - Java、Spring Boot 实战 - msg200.com
在 React 之前先学习这个
在本文中，我们将探讨为了有效地完成 React / React Native 的第一个学习周期所必须了解的最重要的 JavaScript 基本概念
目录
-
映射（）和过滤（）
-
切片() 和 拼接()
-
连接（）
-
find() 和 findIndex()
-
解构
-
剩余 & 扩展运算符
-
承诺
映射和过滤
两者都是数组方法，并且在应用 Filter 时都会返回一个新数组，并额外消除不匹配的项目
地图：
const Data =[
{id: '1',title: "car"},
{id: '2',title: "bus"},
{id: '3',title: "plane"},
{id: '4',title: "train"},
{id: '5',title: "ship"},
]
const upperData = Data.map(element => element.title.toUpperCase());
console.log(upperData)
Output:
['CAR', 'BUS', 'PLANE', 'TRAIN', 'SHIP']
筛选：
const Data =[
{id: '1',title: "car"},
{id: '2',title: "bus"},
{id: '3',title: "plane"},
{id: '4',title: "train"},
{id: '5',title: "ship"},
]
const filterData = Data.filter(element => element.id %2 === 0);
console.log(filterData)
Output:
[ { id: '2', title: 'bus' }, { id: '4', title: 'train' } ]
切片和拼接
方法返回一个包含选定元素的新数组，而 splice 方法会更改现有数组的内容
拼接：
const Data =[
'Car',
'Bus',
'Helicopter',
'Train'
]
const CopyArray = [...Data]
CopyArray.splice(0,1)
console.log(CopyArray)
Output:
['Bus', 'Helicopter', 'Train']
const Data =[
'Car',
'Bus',
'Helicopter',
'Train'
]
const CopyArray = [...Data]
CopyArray.splice(CopyArray.length,1,"Plane")
console.log(CopyArray)
Output:
['Car', 'Bus', 'Helicopter', 'Train', 'Plane']
片：
const Data =[
'Car',
'Bus',
'Helicopter',
'Train'
]
const CopyArray = [...Data]
const newArray = CopyArray.slice(0,2)
console.log(newArray)
console.log(Data)
Output:
['Car', 'Bus']
['Car', 'Bus', 'Helicopter', 'Train']
连接
此方法返回合并两个或多个数组的新数组
连接：
const array1 = [1, 2, 3, 4, 5];
const array2 = [6, 7, 8, 9, 10];
const array3 = [11, 12, 13, 14, 15];
const mergeArray = array1.concat(array2, array3);
console.log(mergeArray);
Output:
[
1, 2, 3, 4, 5, 6,
7, 8, 9, 10, 11, 12,
13, 14, 15
]
find 和 findIndex
find 方法返回第一个满足条件的元素，而 findIndex 返回该元素的索引
查找索引：
const data = [
{ id: 1, title: "first" },
{ id: 2, title: "second" },
{ id: 3, title: "third" },
{ id: 4, title: "fourth" },
];
const itemIndex = data.findIndex((element) => element.id === 3);
console.log(itemIndex);
Ouput:
2
寻找：
const data = [
{ id: 1, title: "first" },
{ id: 2, title: "second" },
{ id: 3, title: "third" },
{ id: 4, title: "fourth" },
];
const item = data.find((element) => element.id === 3);
console.log(item);
Output:
{ id: 3, title: 'third' }
解构
解构赋值是一种特殊的语法，它允许将数组或对象属性中的值直接解包（赋值）到变量中
const name = ["jack", "pritom"];
const [firstName, lastName] = name;
console.log(firstName, lastName);
Output:
jack pritom
const data = {
id: 1,
name: "jack pritom",
loveMusic: true,
species: "human",
};
const { name: dataName, species, ...rest } = data;
console.log(dataName);
console.group(species);
console.group(rest);
Output:
jack pritom
human
{ id: 1, loveMusic: true }
剩余 & 扩展运算符
剩余参数使我们能够将未指定数量的参数传递给将被放入数组的函数，而扩展运算符使我们能够将可迭代对象（即数组）的内容扩展为单个元素
传播：
const introduction = ["my", "name", "is", "jack"];
const copyArr = [...introduction];
console.log(copyArr);
console.log(...copyArr);
Output:
[ 'my', 'name', 'is', 'jack' ]
my name is jack
休息：
const getSize = (...args) => {
return args.length;
};
console.log(getSize(1, 2, 3));
console.log(getSize(10, 20, 30, 100));
Output:
3
4
承诺
简单来说，Promise 用于处理异步操作。每个 Promise 可以成功或失败，并有三种可能的状态：待处理、已完成或已拒绝。在下面的示例中，我们在从 API 获取数据时使用 async await 语法来处理 Promise。
const fetchData = async () => {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/");
if (!response.ok) throw new Error(response.status);
const result = await response.json();
return result;
} catch (e) {
console.log(e);
}
};