ES6学习之函数扩展

函数默认参数

function test(x = 1, y = 2) {
    return x + y
}
test(5, 6) //11
test() //3

若默认参数在必须参数之前,要想取得默认参数,只有当传入的值为undefined才能取到

function test(x = 1, y) {
    console.log(x,y)
}
test(5, 6) //5,6
test(1) //3 undefined
test(null,1)    //null 1
test(undefined,1)   //1,1

参数默认值是惰性求值

let x = 99;
//每次调用函数,默认值x+1都会重新计算,而不是默认等于100
function foo(p = x + 1) {
    console.log(p)
}
foo()   //100
x = 105;
foo()   //106

解构赋值与默认值联合使用

function test({x,y=5}={}){
    console.log(x,y)
}
test({x:2,y:6}) //2 6
test({})    //undefined 5

上面代码:如果没有传参数,优先使用默认值,若没有默认值,再使用解构赋值

函数的length属性length属性的含义是,该函数预期传入的参数个数。指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。)

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

作用域(一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的。)

var x = 1;
var z = 2;
//函数默认参数的变量优先取函数参数内向同名称变量的值,若函数参数内部存在同名变量,则取父及变量
function f(x, y = x, m = z) {
    console.log(y);
    console.log(m)
}

f(2) // 2 2

rest参数( rest 参数(形式为...变量名),用于获取函数的多余参数。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。)

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}

add(2, 5, 3) // 10

rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错

//error
function f(a, ...b, c) {
  // ...
}

严格模式(函数内可以使用严格模式,但是只要函数参数使用了默认值、解构赋值、或者扩展运算符,就不能在函数内使用严格模式)

function doSomething(a, b) {
  ‘use strict‘;
  // code
}

可以使用全局声明严格模式或把函数包裹在一个无参数的立即执行的函数里可以规避严格模式的限制

‘use strict‘;

function doSomething(a, b = a) {
  // code
}
const doSomething = (function () {
  ‘use strict‘;
  return function(value = 42) {
    return value;
  };
}());

name属性(返回函数名)

var f = function(){}
f.name;    //f
function test(){}
test.name  //test

箭头函数

var f = v => v;
//相当于
var f = function (v) {
    return v
}

对于没有参数或有多个参数的箭头函数,参数部分用括号括起来。如果返回的代码块部分多以一条语句,也要用括号括起来且必须使用return语句

var f = () => 5
f(); //5
var fn = (x, y) => x + y
fn(2, 3) //5
var f = ()=>{
    console.log("hello,ES6");
    return 2;
}
f() //hello,ES6 2

如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

使用箭头函数请注意:

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

function foo() {
  setTimeout(() => {
    console.log(‘id:‘, this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

尾调用及尾调用优化

  • 尾调用(某个函数的最后一步是调用另一个函数)
function f(x){
  return g(x);
}  //注意这里一定要写return才能表示尾调用
  • 尾调用优化(只保留内层函数的调用帧,注意:只有内层函数不再用到外部函数的变量时才能用尾调用优化)
function f() {
  let m = 1;
  let n = 2;
  return g(m + n);
}
f();

// 等同于
function f() {
  return g(3);
}
f();

// 等同于
g(3);

尾递归(函数调用自身,称为递归。如果尾调用自身,就称为尾递归)

//普通递归函数,容易发生栈溢出
function factorial(n) {
    if (n === 1) return 1;
    return n * factorial(n - 1);
}
factorial(5) // 120
//尾递归函数,内存中永远只保留最后一帧,永远不会发生栈溢出
function factorialV2(n, total) {
    if (n === 1) return total;
    return factorialV2(n - 1, n * total)
}
factorialV2(5, 1) //120

尾递归的调用方式优化(使用默认参数或者再使用另外一个函数包裹)

function factorialV2(n, total = 1) {
    if (n === 1) return total;
    return factorialV2(n - 1, n * total)
}

function factorial(n){
    return factorialV2(n, 1)
}

factorialV2(5) //120
时间: 2024-11-06 03:56:33

ES6学习之函数扩展的相关文章

ES6学习之对象扩展

简介表示法(直接写入变量和函数,作为对象的属性和方法) let x = "test" let obj={ x, //属性名为变量名,属性值为变量值 y(){console.log("hello")} } //以上相当于 let obj = { x:'test', y:function(){ console.log("hello") } } 属性名表达式(表达式作为对象的属性名,把表达式放在方括号内.) let aa = "hello&q

ES6学习--箭头函数

1. 箭头函数基本形式 let func = (num) => num; let func = () => num; let sum = (num1,num2) => num1 + num2; [1,2,3].map(x => x * x); 2. 箭头函数基本特点 (1). 箭头函数this为父作用域的this,不是调用时的this 箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind.普通函数的this指向调用它的那个对象. let pe

深入理解javascript函数系列第四篇——ES6函数扩展

× 目录 [1]参数默认值 [2]rest参数 [3]扩展运算符[4]箭头函数 前面的话 ES6标准关于函数扩展部分,主要涉及以下四个方面:参数默认值.rest参数.扩展运算符和箭头函数 参数默认值 一般地,为参数设置默认值需进行如下设置 function log(x, y) { y = y || 'World'; console.log(x, y); } 但这样设置实际上是有问题的,如果y的值本身是假值(包括false.undefined.null.''.0.-0.NaN),则无法取得本身值

ES6学习(二):函数的扩展

chapter07 函数的扩展 7.1 函数默认值 7.1.1 参数默认值简介 传统做法的弊端(||):如果传入的参数相等于(==)false的话,仍会被设为默认值,需要多加入一个if判断,比较麻烦. 参数变量是默认声明的,不可在函数体内部重复声明. 参数的默认值会在每次调用的时候重新计算 7.1.2 和解构赋值默认值结合使用 用两个例子来说明 Example1 function foo({x, y=5}) { console.log(x, y); } foo({}) // undefined,

ES6新语法之---函数扩展(7)

这节学习ES6中对函数新增的方法和属性. 1.新增函数的参数默认值 参考S6系列第二篇:http://www.cnblogs.com/diweikang/p/8976854.html 2.新增了函数的rest参数 参考ES6系列第二篇:http://www.cnblogs.com/diweikang/p/8976854.html 3.length属性 作用:获取函数预期传入的参数个数. 指定默认值后,length属性将返回没有指定默认值参数的个数. (function (a) {}).lengt

ES6函数扩展

前面的话 函数是所有编程语言的重要组成部分,在ES6出现前,JS的函数语法一直没有太大的变化,从而遗留了很多问题和的做法,导致实现一些基本的功能经常要编写很多代码.ES6大力度地更新了函数特性,在ES5的基础上进行了许多改进,使用JS编程可以更少出错,同时也更加灵活.本文将详细介绍ES6函数扩展 形参默认值 Javascript函数有一个特别的地方,无论在函数定义中声明了多少形参,都可以传入任意数量的参数,也可以在定义函数时添加针对参数数量的处理逻辑,当已定义的形参无对应的传入参数时为其指定一个

ES6新特性:Function函数扩展, 扩展到看不懂

本文所有Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 函数的默认值: 如果有参数 ,那就用参数, 如果没有参数, 那就用默认的参数: ajax的请求经常要做这些判断, ES6规定了新的表达式, 让判断参数的逻辑更加简单: function fn(a = 1, b = 2, c = 3) { console.log(a,b,c); } fn(); //输出 1, 2, 3; fn(4,5,6); //输出 4, 5, 6 如果调用函数的

ES6小实验-函数的扩展

函数参数默认值 ES6允许为函数的参数直接设置默认值,即直接写在参数定义的后面 function log (x, y = "world") { console.log(x, y) } log("Hello")//Hello world 上面代码中,y是默认声明的,参数默认值可以与解构赋值的默认值,结合使用 function log ({x, y = "world"}) { console.log(x, y) } log({x: "Hel

ES6 入门系列 - 函数的扩展

1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World 上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World.这种写法的