Default Parameters —— 如何处理函数参数默认值?数组
Rest Parameter —— 怎么处理不肯定参数?app
Spread Operator(rest参数的逆运算)函数
Arrow Functions(箭头函数)学习
参数状况this
函数方法更新【默认值、不肯定参数、箭头函数】spa
判断函数有没有默认值不能使用a || b,只能判断其是否等于undefinedprototype
//x是必传值,y和z是没必要传值 function f (x, y, z) { if ( y === undefined) { y = 7 } if ( z === undefined) { z = 42 } return x + y + z } console.log(f(1)) // 50 console.log(f(1, 8)) // 51 console.log(f(1, 8, 43)) // 52
函数参数是从左到右解析,若是没有默认值会被解析成undefinedrest
//x是必传值,y和z是没必要传值 function f (x, y = 7, z = 42) { return x + y + z } console.log(f(1)) // 50 console.log(f(1, 8)) // 51 console.log(f(1, 8, 43)) // 52
如何让y只取默认值code
//有默认值的放最后 //能够看出来原理和ES5是相似的 console.log(f(1, undefined, 43))
默认值除了常量,还能够是其余参数的运算表达式对象
function f (x, y = 7, z = x + y) { return x * 10 + z } console.log(f(1, undefined, 2)) // 12--1 * 10 + 2 console.log(f(1)) // 18--1 * 10 + ( 1 + 7 ) console.log(f(1, undefined)) // 18--1 * 10 + ( 1 + 7 )
ES5使用arguments表示函数参数的伪数组,arguments.length表示参数的个数
function f (x, y, z) { return arguments.length } console.log(f(1)) // 1 console.log(f(1, undefined)) // 2 console.log(f(1, undefined, 2)) // 3
ES6中不支持arguments
// length是函数没有默认值的参数的个数,并非执行的时候传入参数的个数 function f (x, y = 7, z = x + y) { return f.length } console.log(f(1)) // 1 console.log(f(1, undefined)) // 1 console.log(f(1, undefined, 2)) // 1
使用arguments
function sum () { let num = 0 //两种方法进行遍历 // Array.prototype.forEach.call(arguments, function (item) { // num += item * 1 // }) Array.from(arguments).forEach( function (item) { num += item * 1 }) return num } console.log(sum(1, 2, 3)) // 6
使用Rest
function sum (...nums) { // ... —— Rest parameter 全部的参数都在三点后面的nums变量中 let num = 0 // 直接看成数组遍历 nums.forEach( function (item) { num += item * 1 }) return num } console.log(sum(1, 2, 3)) // 6 //将第一个参数 × 2 + 剩余参数 function sum (base, ...nums) { let num = 0 nums.forEach( function (item) { num += item * 1 }) return base * 2 + num } console.log(sum(1, 2, 3)) // 7 —— 1 * 2 + 5
Spread Operator和Rest Parameter是形似但相反意义的操做符,简单来讲Rest Parameter是把不定参数“收敛”成数组,而Spread Operator是把固定数组“打散”到对应的参数中
有一个数组,要总体当成参数
//计算三角形周长 function sum (x = 1, y = 2, z = 3) { return x + y + z } let data = [4, 5, 6] console.log(sum(data[0], data[1], data[2])) // 15 console.log(sum.apply(this, data)) // 15 // apply()方法:接受两个参数,一个是在其中运行函数的做用域,另外一个是参数数组(能够是Array的实例,也能够是arguments对象),它将做为参数传给Function(data–>arguments) // 定义:方法调用一个具备给定this值的函数,以及做为一个数组(或相似数组对象)提供的参数。 // call()方法与apply()方法的区别在于接受参数的方式不一样,使用call方法是传递给函数的参数必须逐个例举出来 console.log(sum.apply(null, [4, 5, 6])) // 15
console.log(sum(...data)) // 15
() => {}
左边括号里面是参数,后边括号里面是函数体
// ES5声明函数 function hello () {} let hello = function () {} //ES6 let hello = () => { console.log('hello world') } hello() //hello world
let hello = (name) => { console.log('hello world ' + name) } hello('beijing') //hello world beijing
let hello = name => { console.log('hello world ' + name) } hello('beijing') //hello world beijing
let sum = (z, y, z) => x + y + z console.log(sum(1, 2, 3)) // 6 //return 和花括号均可以省略
let sum = (x, y, z) => ({ x: x, y: y, z: z }) // 小括号是函数表达式的意思,这个时候的花括号表示对象
换句简单的话说,箭头函数不改变this的指向
// ES5 let test = { name: 'test', say: function () { console.log(this.name) } } test.say() // test // ES6 let test = { name: 'test', say: () => { console.log(this.name) } } test.say() // undefined // 由于箭头函数中对this的处理是定义时,this的指向也就是test外层所指向的window,而window没有name属性,因此是undefined