一、基本用法
箭头函数的基本语法是:
var 函数名=(参数1,参数2)=>{要执行的函数操作};
例如一下两端代码进行函数声明的功能是一样的:
var f1=(num1,num2)=>{ console.log(num1+num2); } var f2=function(num1,num2){ console.log(num1+num2); } f1(1,2);//3 f2(3,4);//7
箭头函数也可以与对象混合使用。注意变量的属性需要用花括号括起来。基本语法如下:
var 变量名=({变量属性1,变量属性2})=>{对变量属性的操作};
var person={ name:'Alice', age:18, } var f1=({name,age})=>{console.log('f11-->'+name+age);} function f2(person){ console.log('f2-->'+person.name,person.age); } f1(person);//f11-->Alice18 f2(person);//f2-->Alice 18
二、箭头函数的作用
箭头函数的作用就是简化回调函数。
var arr=[1,2,3]; arr.map(function(x){ console.log(x*x);//1,4,9 }) arr.map(x=>{console.log(x*x)});//1,4,9
三、rest参数
虽然叫做reset参数,但实际上写法是...变量名。作用是获取函数的多余参数。比如下面这段代码,要加的数值全都用...values代替了。而values的数量可以是任意数量,values是一个数组。
function add(...values){ let sum=0; for(let val of values){ sum=sum+val; } console.log(sum); } add(1,2,3);//6
注意,reset参数只能作为最后一个参数传入方法中,也就是说reset参数后面不能再有其他的参数了。否则会报错。
这里还有一个要注意的地方,就是for of 与 for in的区别。
for in 主要是操作对象的。
四、箭头函数与rest参数的混合使用
var object1=(head,...tail)=>{ console.log([head,tail]); } object1(1,"one","two","three");//[1, Array(3)]
五、扩展运算符
1、对象的扩展运算符
对象中的扩展运算符 用于 取出参数对象中的所有可遍历属性,拷贝到当前对象之中。
let bar = {a: 1, b: 2} let baz = {...bar} //等同于 let bar = {a: 1, b: 2} let baz = Object.assign({}, bar)
如果有同名属性,会被覆盖
let bar = {a: 1, b: 2} let obj = {a: 3, b: 4} let baz = {...bar, ...obj} console.log("baz-->>", baz) //{a: 3, b: 4} console.log("bar-->>", bar) //{a:1, b: 2}
扩展运算符对于对象实例的拷贝是浅拷贝。JS中有两种数据类型:基础数据类型和引用数据类型。
基础数据类型是按照值来进行访问的,常见的基础数据类型有Number、Sting、Boolean、Null和Undefined,这类变量拷贝的时候会完整的复制一份。
引用数据类型,如Array,在拷贝的时候拷贝的是对象的引用,当原对象发生变化的时候,拷贝对象也跟着变化。
这个例子,扩展运算符拷贝的对象是基础数据类型,因此对obj2的修改并不会影响到obj1。但如果改成这样:
let obj1 = { a: 1, b: 2, c: {nickName: 'd'}}; let obj2 = { ...obj1}; obj2.c.nickName = 'd-edited'; console.log(obj1); // {a: 1, b: 2, c: {nickName: 'd-edited'}} console.log(obj2); // {a: 1, b: 2, c: {nickName: 'd-edited'}}
由于拷贝的是对象的引用,当原对象发生变化的时候,拷贝对象也跟着变化。 obj1中的对象c是一个引用数据类型,拷贝的时候,拷贝的是 对象的引用。
2、数组的扩展运算符
(1)将数组转化为参数序列:
function add(x, y) { return x + y; } const numbers = [4, 38]; add(...numbers) // 42
(2)由于浅复制的原因,直接复制数组是难以实现的,因为会影响拷贝对象,比如:
var arr1 = [1,2] var arr2 = arr1 console.log("arr2-->>", arr2) //[1, 2] arr2[0] = '改变第一项' console.log("arr1-->>", arr1) //['改变第一项', 2]
但是用扩展运算符就能是实现:
var arr1 = [1, 2] var arr2 = [...arr1]
因为 扩展运算符用于 取出参数对象中的所有可遍历属性,拷贝到当前对象之中。 由于该数组里面的所有对象都是基础数据类型,因此不存在浅拷贝的现象。
但如果这样,浅复制了一个引用数据类型,并对引用数据类型进行操作,就会影响原来的数组了。
var arr1 = [1, [3,4]] var arr2 = [...arr1] arr2[1] [0]= '第二项改变' console.log("arr1-->>", arr1, arr1[1]) //[1, ['第二项改变',4]]
(3)扩展运算符与解构赋值结合起来,可以生成数组
let [first, ...rest] = [1,2,3,4,5] console.log("first-->>", first, typeof first) //1 number console.log("rest-->>", rest) //[2,3,4,5] array
注意,rest参数只能放在最后一位。否则报错。
(4)字符串转数组
[...'hello'] // [ "h", "e", "l", "l", "o" ]