ES6剪头函数及对象表达式

 

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。本章来介绍一下SE6在函数中的特性。

一、箭头函数–Arrow Fuctions

ES6使用了新的函数语法——剪头函数,简化了函数的书写方法。如下,我们每写一个函数都要function一次。如果使用剪头则简化了很多。剪头表示返回的内容,就是一系列函数的操作都放在 { } 里面,如果函数不是带参函数,括号()依然不能省略,如果是一个参数则可以省略,建议还是不要省略(),以免给自己带来不必要的麻烦。

// 函数的名字
function fun(){}
let func = function (){} // 匿名函数赋值给函数func
let funct = function Func(){}
console.log(fun.name) // fun
console.log(func.name) // func
console.log(funct.name) // Func 有名函数的优先级大于匿名函数

let fun = (name,age) => {
return name + age
};
console.log(fun("Lucy",12))

二、对象表达式

ES6引入了新的对象定义属性的方法,在一个对象中,如果对象的值是已经定义好的变量,那只需要把对象的属性名写成该变量的变量名称就可以了,在输出对象的时候,其实输出的是变量的值,不仅提高效率还省内存。定义对象的方法也是,只需要把函数的名称即可,不需要再写function关键字,ES6在语法方面简化了不少。其实这都是换汤不换药,要的还是JS的基础要扎实。

例如:

// 对象表达式
let username = 'Sily',
password = '1212';
let user = {
// username1:username, ES5的写法
username, // 只需要直接使用变量的名称就可以了,不需要再定义变量属性名然后复制
password,
// func :function(){}, ES5定义对象方法的时候
func(){ // ES6定义对象方法的新写法,直接使用函数名,不需要书写function
return username + password
}
}
console.log(user) // {username: "Sily", password: "1212"}

SE6确实给前端带来了很多方便,甚至简化了其中的操作步骤,比如请求数据直接提取json中的属性字段({字段名})=>{} ,返回的就是字段啦。

学习更多JavaScript请移步:

JavaScript引用类型及使用方法详细说明

JavaScript操作DOM元素API大全

JavaScript递归函数和闭包——简单易理解

一篇搞定JavaScript语法、语句和数据类型

本文为博主原创文章,知识共享,开源精神,转载注明出处。