还记得之前我们是如何读取到数组里面的元素的么?
const arr = [2, 3, 4];
const a = arr[0];
const b = arr[1];
const c = arr[2];
然后通过这个方式去读取数组中的数据;
现在我们可以使用解构赋值的方法去实现
const [x, y, z] = arr;
console.log(x, y, z);
这是一种解构赋值(Destructuring assignment)的写法。它允许我们从数组 arr 中提取值,并分别赋给变量 x, y, z。解构赋值可以用于数组、对象等数据结构,以便快速获取其中的值。在这个例子中,arr 是一个数组,通过解构赋值将其第一个元素赋给 x,第二个元素赋给 y,第三个元素赋给 z。然后通过 console.log 打印出这三个变量的值。
那如何使用解构的方式去或者对象中的数组呢?
const restaurant = {
name: 'Classico Italiano',
location: 'Via Angelo Tavanti 23, Firenze, Italy',
categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
mainMenu: ['Pizza', 'Pasta', 'Risotto'],
};
● 如上方的数组,我们想获取categories的第一个和第二个数据,使用解构的的方式如下:
const [first,second] = restaurant.categories;
console.log(first,second);
● 那如果我们想获取第一个和第三个的数据呢,我们只要给他留一个即可
const [first, , second] = restaurant.categories;
console.log(first, second);
● 再看上面的数据,例如我们现在需要将categories数组中的Italian和Vegetarian进行替换,按照以前的方式,我们可能会这么做
let [main, , secondary] = restaurant.categories;
console.log(main, secondary);
const temp = main;
main = secondary;
secondary = temp;
console.log(main,secondary);
但是我们通过解构,可以很轻松的进行实现!
let [main, , secondary] = restaurant.categories;
console.log(main, secondary);
[main, secondary] = [secondary, main];
console.log(main, secondary);
● 我们也可以通过解构的方式再函数中返回数组;
const restaurant = {
name: 'Classico Italiano',
location: 'Via Angelo Tavanti 23, Firenze, Italy',
categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
mainMenu: ['Pizza', 'Pasta', 'Risotto'],
order: function (starterIndex, mainIndex) {
return [
restaurant.starterMenu[starterIndex],
restaurant.mainMenu[mainIndex],
];
},
};
例如上方的函数,如果我们使用之前的方式我们会这个做
console.log(restaurant.order(2, 0));
当然我们也可以将接受到的数组解构出来
const [starter, mainCourse] = restaurant.order(2, 0);
console.log(starter, mainCourse);
嵌套数组的解构
const nested = [2, 4, [5, 6]];
const [i, ,j] = nested;
console.log(i,j);
● 但是如果我们真的想把内部数组的数据给读取到,我们该怎么做呢?
const nested = [2, 4, [5, 6]];
const [i, , [j,k]] = nested;
console.log(i,j,k);
默认类型
● 如果我们的解构数据比我们数组的实际数据多会是怎样的呢?
const [p, q, r] = [8, 9];
console.log(p, q, r);
这时候,我们有可能给数组中的数据给一个默认值,
const [p = 1, q = 1, r = 1] = [8, 9];
console.log(p, q, r);
这有时候很有用,例如当我们从API获取数据时;