双语学习解构赋值、数组解构和对象解构
双语学习解构赋值、数组解构和对象解构
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性值从对象或数组中取出,赋值给其他变量。
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
描述
对象和数组逐个对应表达式，或称对象字面量和数组字面量，提供了一种简单的定义一个特定的数据组的方法。
Description
The object and array literal expressions provide an easy way to create ad hoc packages of data.
数组解构
Array destructuring
为了理解数组解构，我举个例子吧，这个例子是我们家孩子暑假的学习list。他暑假要学习语文、数学、英语，他自己还喜欢画画。
const hugetodoListToday = ['Language', 'math','English','painting'];
const [Language, math] = hugetodoListToday;
console.log(Language,math);//Language math
获取到相应位置的值
Get the value to the corresponding location
可以用不同的变量代替数组中第一、第二项的值。例如，用a1、a2代替Langugae和math.
const hugetodoListToday = ['Language', 'math','English','painting'];
const [a1,a2] = hugetodoListToday;
console.log(a1,a2);、//Language math
忽略某些返回值
Ignoring some returned values
可以用中间添加逗号的方式忽略返回值，下面的例子，我们忽略了第二项--math，
const hugetodoListToday = ['Language', 'math','English','painting'];
const [a1,,a2] = hugetodoListToday;
console.log(a1,a2);//Language English
剩余参数
rest parameter
将剩余数组赋值给一个变量
Assigning the rest of an array to a variable
const hugetodoListToday = ['Language', 'math','English','painting'];
const [a1,...a2] = hugetodoListToday;
console.log(a1,a2);//Language 0: "math"1: "English"2: "painting"
得到的结果是：一个Language和由其他参数组成的数组
这里补充一点剩余参数的知识：
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
The rest parameter syntax allows us to represent an indefinite number of arguments as an array.
Description
A function's last parameter can be prefixed with ... which will cause all remaining (user supplied) arguments to be placed within a "standard" javascript array. Only the last parameter can be a "rest parameter".
如果函数的最后一个命名参数以...为前缀，则它将成为一个由剩余参数组成的真数组，其中从0（包括）到theArgs.length（排除）的元素由传递给函数的实际参数提供。
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a);
console.log("b", b);
console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]
补充知识2：实参和形参
function sum(sum1,sum2){//形参
var c = sum1+sum2;
for(var i=0;i<arguments.length;++){
console.log(arguments[i]);
}
console.log(c);
};
sum(1,20); //实参
这里的sum1和sum2就是形参
当你调用函数的时候传入的参数就为实参
剩余参数和 arguments对象之间的区别主要有三个：
- 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
- arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。
- arguments对象还有一些附加的属性 （如callee属性）。
Difference between rest parameters and the arguments object
There are three main differences between rest parameters and the arguments object:
- rest parameters are only the ones that haven't been given a separate name (i.e. formally defined in function expression), while the arguments object contains all arguments passed to the function;
- the arguments object is not a real array, while rest parameters are Array instances, meaning methods like sort, map, forEach or pop can be applied on it directly;
- the arguments object has additional functionality specific to itself (like the calleeproperty).
补充小知识3：
the rest 和the other的区别
the other 一般是指两者中的一个,比如说the one,the other one,或者用来表示另一部分,比如说 一些人同意这个计划,另一些人不同意,就可以说,some people agreed this plan,but the others didn't.
the rest 一般指剩下的全部,例如 the rest of your life,the rest of the money.the rest 一般情况下与of 搭配.
回到正题。
解构数组默认值问题,
Default values
const hugetodoListToday = ['Language', 'math','English','painting'];
const [a1,a2,a3,a4,a5 = 'program'] = hugetodoListToday;
console.log(a1,a2,a4,a5,a3);
//Language math painting program English
注意输出顺序改了一下哟
如果默认值是null
const hugetodoListToday = ['Language', 'math','English','painting',null];
const [a1,a2,a3,a4,a5 = 'program'] = hugetodoListToday;
console.log(a1,a2,a4,a5,a3);
// Language math painting null English
变量先声明后赋值时的解构
应用场景：交换数组的值，
就是交换变量
Swapping variables
let one = 1, two = 2;
[one,two] = [two,one];
console.log(one,two);
对象解构
Object destructuring
基本赋值
Basic assignment
const huge = {
name: 'huge',
age: 9,
todoList:{
Language: 'Copybook',
math: 'Paper',
English: 'word'
},
}
const {name, age} = huge;
console.log(name);// huge
console.log(age);// 9
无声明赋值
Assignment without declaration
let a, b;
({a, b} = {a: 1, b: 2});
解构嵌套对象和数组
Nested object and array destructuring
const huge = {
name: 'huge',
age: 9,
todoList:{
Language: 'Copybook',
math: 'Paper',
English: 'word'
},
}
const {Language: l, math: m, English: e, painting = 'comic'} = huge.todoList;
console.log(l);//Copybook
console.log(m);//Paper
console.log(e); //word
console.log(painting);//comic
上面的例子还给变量重新命名，Language重命名为l。
