ES6 对象增强和结构赋值

时间：2023-03-08 18:55:26

The enhanced Object literals: ES6 has added some new syntax-based extensions to {} object literal for creating properties. (增强的对象字面量: 对于创建对象字面量的属性，ES6 新增了一些语法层面的扩展)

　　1, Defining Properties（定义属性）

　　ES6 provides a shorter syntax for asssinging the object properties to the values of the variables, which have the same name as the properties. (给一个属性赋一个变量值，如果变量名和属性名相同，ES6 提供了一个简洁的语法，可以省略变量名)

　　In ES5, you have been doing this:

var x = 1, y = 2;
var object = {
　　x: x,
　　y: y
};
console.log(object.x); //output "1"

　　In ES6, you can do it this way:

let x = 1, y = 2;
let object = { 
　　x, 
　　y 
};
console.log(object.x); //output "1"

　　2, Defining methods（定义方法）

　　ES6 provides a new syntax for define the methods on an object. Here is an example to demonstrate the new syntax: (ES6提供了简洁的方法来定义方法，省略function关键字)

let object = {
    myFunction(){
        console.log("Hello World")
    }
}

　　This concise function allows the use of super in them, whereas the traditional methods of the objects don't allow the use of super(这种简洁的函数可以使用super，super在class 中用到). 

　　3, The computed property names (计算属性名)

　　The property names that are evaluated during runtime are called as the computed property names. An expression is usually resolved to find the property name dynamically. （在程序运行过程中才能确认的属性名叫动态属性名， 表达式通常来动态获取这个属性名）

　　In ES5, the computed properties are defined in this way:

var object = {};
object["first"+"Name"] = "Eden";//"firstName" is the property name

//extract
console.log(object["first"+"Name"]); //Output "Eden"

　　Here, after creating the object, we attach the properties to the object. But In ES6, we can add the properties with the computed name while creating the objects. Here is an example: （ES5中，先创建一个对象，再添加属性，但在ES6中，创建对象的同时可以添加动态属性名）

let object = {
　　["first" + "Name"]: "Eden",
};

//extract
console.log(object["first" + "Name"]); //Output "Eden"

Array Destructuring Assignment

　　1, Using the rest operator(可以使用剩余操作符)

　　We can prefix the last variable of the array destructuring expression using the " … " token. In this case, the variable is always converted into an array object, which holds the rest of the values of the iterable object, if the number of other variables is less than the values in the iterable object. Consider this example to understand it: (当使用剩余操作符的时候，当然只能是最后一个变量使用剩余操作符，这个变量就变成了数组，且如果我们声明的变量的个数小于数组中元素的个数，这个变量就会把数组中剩余的元素收集起来)

let [a, b, ...c] = [1,3,4,5,6] 

console.log(a)  // 1
console.log(b)  // 3
console.log(c) // [4,5,6]

　　2, Default values（默认参数）

　　While destructuring, you can also provide the default values to the variables if the array index is undefined. Here is an example to demonstrate this:(如果右边的数组的元素的个数少于我们声明的变量的个数，我们可以给变量赋一个默认值)

let [a, b, c=2] = [1,3];
console.log(c) // 2

　　3, Using the destructuring assignment as a parameter （解构赋值用作函数参数）

　　We can also use the array destrucuring expression as the function parameters for extracting the values of an iterable object, passed as argument into the function parameters. Here is an example to demonstrate this:

function myFunction([a, b, c = 3])
{
    console.log(a, b, c); //Output "1 2 3"
}
myFunction([1, 2]);

相关文章