ES6中的函数、对象定义

摘要:
ES6之前的函数定义:通过声明由关键字Function定义,这是最早也是最经典的函数定义方法。conshello3=firstname=˃`你好${firstname}`;ES6增强了对象的文字性。您可以定义constobj={hello4{return` Hello${firstname}`;}}简而言之,对于ES6增强的对象文字,与ES5相比,ES6增强了对象文字。ES5对象文本vartype='rock';varheat=“50%”;varmusic={type:type,heat:heat};ES6对象识字在ES6中,如果对象属性名称与当前作用域中的变量名称相同,那么现在不需要编写此类型或heat两次。ES6对象将自动帮助您完成键到值的分配。在ES5中创建对象有三种类型的对象键:对象。xx、对象[“xx”]和object.defineProperty。

ES6之前的函数定义:

通过声明
通过关键词 function 定义 ,这是最早也是最经典的function定义方式。
function hello (firstname) {
return `Hello ${firstname}`;
}

这个函数有一个名称 "hello", 所以我们称这个函数为命名函数。

通过表达式
这是比较现代化的定义方式了。这种定义方式也说明了函数也是对象,因此可以把函数赋值给变量。
const hello = function (firstname) {
return `Hello ${firstname}`;
};
仔细看,你会发现这个函数是没有名称的,因此它是匿名函数
它在创建时,没有名称 (形如 "function (...) { ... }")。即便我们把这个函数赋值给一个名称为hello的变量, 它依然是一个匿名函数
注意: 这既然是一个赋值语句,那么在结尾处有分号就很自然了。 就像其他普通的赋值语句一样: const pi = 3.14; 。

ES6的函数定义:

通过箭头语法
箭头语法是ES6中出新的新语法,可以用在通过表达式定义函数的情境中:
去除关键词 function 添加箭头符号 => 到参数右侧的位置.
const hello = (firstname, lastname) => {
return `Hello ${firstname} ${lastname}`;
};
这种写法已经很简洁明了。如果满足以下情况,写法还可以更简单:
1、当只有一个参数时,参数外面可以不要圆括号;
2、当函数体内只有一行代码时,函数体可以不需要花括号"{ ... }"包裹 ;
3、当函数体内只有一行代码时,关键词return 可以省略。

const hello3 = firstname => `Hello ${firstname}`;

ES6增强了对象字面量,可以简写方式定义

const obj = {
hello4(firstname) {
return `Hello ${firstname}`;
}
}

关于ES6增强对象字面量

相对于ES5, ES6的对象字面量得到了很大程度的增强。这些改进我们可以输入更少的代码,同时语法更易于理解。

那就一起来看看对象增强的功能。增强功能包括:对象字面量简写(Object Literal Shorthand)、对象方法简写(Object Method Shorthand)、计算对象键(Object key)、对象解构(Object Destructuring)。
ES5对象字面量
var type = 'rock';
var heat = '50%';
var music = {
type: type,
heat: heat
};
ES6对象字面量

在ES6中如果你的对象属性名和当前作用域中的变量名相同,那么现在不必在把这个type或heat书写两次。ES6的对象会自动的帮你完成键到值的赋值。
var type = 'rock';
var heat = '50%';
var music = {
type,
heat
};

ES5返回一个对象

function getMusic() {
var type = 'rock';
var heat = '50%';
// 一些运算
return { type: type, heat: heat };
}

ES6返回一个对象
function getMusic() {
var type = 'rock';
var heat = '50%';
// 一些运算
return { type, heat };
}

ES5对象方法
var type = 'rock';
var heat = '50%';
var music = {
type: type,
heat: heat,
description: function() {
return '当前音乐风格为' + this.type + ',' + this.heat + '都喜欢';
}
}

ES6对象方法
使用ES6语法重写上面的music对象,不必写上对象键然后还要写上function关键字。只需要方法名和圆括号再跟上花括号即可。代码如下:
var type = 'rock';
var heat = '50%';
var music = {
type,
heat,
description() {
return '当前音乐风格为' + this.type + ',' + this.heat + '都喜欢';
}
}

ES6计算对象键
在ES5中对象可以理解为一个关联数组或一个hashmaps。在ES5中创建对象的键就三种object.xx、object[‘xx’]、Object.defineProperty可以用来构建对象的键。

var heat = '50%';
var music = {
rock: heat
};

ES6计算对象键
在ES6中可以使用变量作为对象键,比如field作为我们对象的键,heat作为这个键的值。代码如下:
var heat = '50%';
var field = 'rock';
var music = {
[field]: heat
}

ES6对象键计算表达式
在ES6中可以使用变量作为对象键,这个变量还可以是表达式,因为[]方式是返回[]里面表达式的结果作为对象键
var heat = '50%';
var field = 'Rock and Roll';
var music = {
[field.toLowerCase()]: heat
}

还可以使用不同的数组方法为我们的对象键赋值,使用[]将会计算对象的键值。代码如下:
let people = [20, 25, 30];
let music = {
people,
[people]: 'They all love rock and roll',
[people.length]: 'object key is 3',
[{}]: 'empty object'
}
console.log(music); // Object {3: "object key is 3", people: Array[3], 20,25,30: "They all love rock and roll", [object Object]: "empty object"}
console.log(music.people); // [20, 25, 30]
console.log(music['people']); // [20, 25, 30]
console.log(music[people]); // They all love rock and roll
console.log(music[people.length]); // object key is 3
console.log(music['[object Object]']); // empty object

ES6对象解构
把对象或者数组中的数据取出使用是我们经常要使用的功能,ES6有新的功能让我们快捷拆分对象和数组中的值。在=号右边是要解构的对象或数组,=号左边是要接收创建的变量。代码如下:
对象解构
=号左边的类型要和右边对应,比如右边是一个对象类型则左边也需要使用对象字面量包裹。右边是数组则左边也需要使用数组包裹。
let music = {
type: 'rock',
heat: '50%'
};
let { type, heat } = music;
console.log(type, heat); // rock 50%

数组解构
let people = [20, 25, 30]
let [young, oldYoung] = people;
console.log(young, oldYoung) // 20 25

对象解构重命名
有时候我们不想使用解构对象中的键来新创建变量,需要解构后重命名为新的变量名。这是可以使用重命名解构语法
let music = {
type: 'rock',
heat: '50%'
}
let { type: newType, heat: newHeat } = music;
console.log(newType, newHeat); // rock 50%

解构其他类型
如果在一个对象中的值包含其他的数据类型同样是可以解构出来的。比如值是数组,代码如下:
let music = {
type: ['rock', 'pop', 'jazz'],
heat: '50%',
}
let { type, heat } = music;
console.log(type, heat); // ["rock", "pop", "jazz"] "50%"

解构函数参数
这是一个非常实用的功能,可以将传递进来的函数对象参数直接解构为变量,在函数中可以方便调用。这只需要简单的对象解构函数即可完成。代码如下:
function getMusic({ type, heat }) {
console.log(type, heat);
}
getMusic({ type: ‘rock’, heat: ‘80%’}); // rock 80%

免责声明:文章转载自《ES6中的函数、对象定义》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇iOS企业级应用打包与部署逻辑回归模型预测股票涨跌下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Unsafe与CAS

Unsafe 简单讲一下这个类。Java无法直接访问底层操作系统,而是通过本地(native)方法来访问。不过尽管如此,JVM还是开了一个后门,JDK中有一个类Unsafe,它提供了硬件级别的原子操作。 这个类尽管里面的方法都是public的,但是并没有办法使用它们,JDK API文档也没有提供任何关于这个类的方法的解释。总而言之,对于Unsafe类的使用...

笔试题算法系列(八)百度有趣的排序

[编程题] 有趣的排序 时间限制:1秒 空间限制:32768K 度度熊有一个N个数的数组,他想将数组从小到大 排好序,但是萌萌的度度熊只会下面这个操作:任取数组中的一个数然后将它放置在数组的最后一个位置。问最少操作多少次可以使得数组从小到大有序? 输入描述: 首先输入一个正整数N,接下来的一行输入N个整数。(N <= 50, 每个数的绝对值小...

Java 数组 可变长参数 实例

可以把类型相同但个数可变的参数传递给方法,方法中的参数声明如下: typeName...parameterName (类型名...参数名) 在方法声明中,指定类型后紧跟着省略号...,只能给方法指定一个可变长参数。 Java将可变长参数当成数组对待。可以将一个数组或可变的参数个数传递给可变长参数。当用可变的参数个数调用方法时,Java会创建一个数组并把参数...

Java中MongoDB返回ObjectId的差异

  在Java中使用MongoDB时若是通过这样的方式查询,在swagger接口中收到的结果可能会与期望不一致。   1、检索语句 mongoTemplate.find(query, Object.class, collectionName);   注意了,上述语句中是直接采用Object的类型。   2、单步调试的结果   3、swagger接口的结果...

ES6 一些常用使用

1 //1、解构数组 2 let arr1 = ['apple', 'coffee', 'cake']; 3 let [fruit, drink, dessert] = arr1; 4 console.log(fruit, drink, dessert); 5 //2、解构...

redis 序列化存入对象

redis 序列化存入对象 //序列化 public static byte[] serialize(Object obj){ ObjectOutputStream obi=null; ByteArrayOutputStream bai=null; try{ ba...