65ES6_函数

为绥滨等地区用户提供了全套网页设计制作服务，及绥滨网站建设行业解决方案。主营业务为网站制作、成都网站建设、绥滨网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

目录

语法：...1

函数：...1

函数参数：...2

函数参数-普通参数：...2

函数参数-可变参数，rest parameters剩余参数：...3

arguments对象：...3

参数解构：...5

函数返回值：...5

作用域：...7

函数表达式：...9

函数、匿名函数、函数表达式的差异：...10

高阶函数：...11

箭头函数：...13

语法：

函数：

function 函数名(参数列表) {

         函数体;

         return 返回值;

}

例：

function add(x,y) {   //没有逻辑

   return x+y;

}

console.log(add(4,5));   //函数调用

函数参数：

函数参数-普通参数：

一个参数占一个位置，支持默认参数；

js中没有py中的关键字传参，即缺省值不用像py那样往后放，建议默认参数写到后面；

js中只是作位置参数的对应；

js不限制位置参数的位置；

注：C、C++、java都是这样；

例：

const add = (x,y)=> x+y;

const add1 = (x,y=6)=> x+y;

const add2 = (x=8,y)=> x+y;   //js中缺省值不用像py那样往后放（js中没有py中的关键字传参），建议像py那样默认参数写到后面；js只是作位置参数的对应；js不限制默认参数的位置；

console.log(add(4,5));

console.log(add(y=3,x=2));

console.log(add(aaa=1,bbb=2));   //V，相当于add(1,2)，js中没有关键字传参，但是它的赋值表达式有值，aaa=1就是1

console.log(add());   //NaN，相当于add(undefined,undefined)

console.log(add1(4));   //相当于add(4,undefined)

console.log(add1(y=5,x=6));

console.log(add1());   //NaN，相当于add(undefined,6)

console.log(add2(2,2));

console.log(add(a1=5,(a2=6,a3=5)));   //括号中表达式值为5

输出：

9

5

3

NaN

10

11

NaN

4

10

函数参数-可变参数，rest parameters剩余参数：

用...表示可变参数，py中用*收集多个参数；

例：

const add =function (...args) {

   result =0;

   for (let i in args) {

       result +=args[i];

    }

   return result;

}

const sum = (...args)=> args;

console.log(add(3,6,9));

console.log(sum(2,4,6));

let arr = [1,2,3,4,5];

console.log(add(arr));   //X，这样返回的是字符串

console.log(typeof(add(arr)));

console.log(add(...arr));   //V，将arr解构

输出：

18

[ 2, 4, 6 ]

01,2,3,4,5

string

15

arguments对象：

函数的所有参数会被保存在arguments的键值对字典对象中，py中的dict对应js中的对象；

ES6之前，arguments是唯一可变参数的实现；

ES6开始，不推荐，建议使用可变参数，arguements只是为兼容而保留；

例：

(function (p1, ...args) {   //简写，函数定义+调用

   console.log(p1);

   console.log(args);

   console.log(arguments);

   for (let i of arguments)

       console.log(i);

}) ('abc',1,3,5)

输出：

abc

[ 1, 3, 5 ]

{ '0': 'abc', '1': 1, '2': 3, '3': 5 }

abc

1

3

5

例：

((x,...args)=> {   //简写，函数定义+调用

   console.log(args);

   console.log(x);

   console.log(arguments);

}) (...[2,4,6,8,10])

输出：

[ 4, 6, 8, 10 ]

2

{ '0': {},

  '1':

   { [Function: require]

     resolve: { [Function: resolve] paths: [Function: paths] },

     main:

      Module {

        id: '.',

        exports: {},

        parent: null,

        filename: 'e:\\git_practice\\js\\node_833b816d371f0.tmp',

        loaded: false,

        children: [],

        paths: [Array] },

     extensions: { '.js': [Function], '.json': [Function], '.node': [Function] },

     cache: { 'e:\git_practice\js\node_833b816d371f0.tmp': [Object] } },

  '2':

   Module {

     id: '.',

     exports: {},

     parent: null,

     filename: 'e:\\git_practice\\js\\node_833b816d371f0.tmp',

     loaded: false,

     children: [],

     paths:

      [ 'e:\\git_practice\\js\\node_modules',

        'e:\\git_practice\\node_modules',

        'e:\\node_modules' ] },

  '3': 'e:\\git_practice\\js\\node_833b816d371f0.tmp',

  '4': 'e:\\git_practice\\js' }

参数解构：

和py类似，使用...来解构；

另，js的参数解构，不需要解构后的值的个数和参数个数对应；

例：

const add = (x,y)=> {console.log(x,y);return x+y};

console.log(add(...[1,2]));

console.log(add(...[1,2,3,4,5]));

console.log(add(...[100]));

输出：

1 2

3

1 2

3

100 undefined

NaN

函数返回值：

类C的语言，都有一个概念——表达式的值，类C语言都支持逗号表达式的值；

赋值表达式的值，是等号右边的值；

逗号表达式的值，是最后一个表达式的值；

js的函数返回值即使写的是多个，实际依然是单值；

另，py中，return 1,2，实质是返回一个tuple；

高级语言，基本都是多个入一个出；

例：

const add = (x,y)=> {return x,y};

console.log(add(4,100));

输出：

100

例：

const add = (x,y)=> {return x,y};

res =add(4.0,50);

console.log(res,typeof(res));

b = (x=5,y=6,true);

console.log(b);

a = (123,true,z='test');

console.log(a);

function c() {

   return x=5,y=6,true,'ok'

}

console.log(c());

输出：

50 'number'

true

test

ok

例：

function a(obj) {   //实际应用中，用来解决传参问题

   obj.x =5;

   return obj;

}

var o = {

   x:100

}

console.log(a(o));

console.log(a(o).x);

输出：

{ x: 5 }

5

作用域：

函数内定义的变量在函数外不可见；

var b = 200;，可提升声明，也可突破非函数的块作用域；

a = 100;，隐式声明不能提升声明，在严格模式下会报错，但可把变量隐式声明为全局变量，建议少用；

let c = 300;，不能提升声明，且不能突破任何块作用域，推荐使用；

例，函数中变量的作用域：

function test() {

   a =100;

   var b =200;

   let c =300;

}

// console.log(a);

// console.log(b);

// console.log(c);   //a,b,c均不可见

test();

console.log(a);   //函数在调用后才会把a放到全局中

例，块作用域中变量的作用域：

"use strict";   //严格模式，此模式开启后，a = 100;不被允许；此句要么在文件首行，要么在函数首行

if (1) {

   // a = 100;   //X

   var b =200;

   let c =300;

}

// console.log(a);

console.log(b);

// console.log(c);   //不可见

例：

function show(i,arg) {

   console.log(i,arg);

}

x =500;

function fn() {

   let z =400;

    {

       var o =100;

       show(1,x);

       t ='free';   //严格模式下会报错

       let p =200;

    }

   var y =300;

   show(2,z);

   show(3,x);

   show(4,o);

   show(5,t);

   // show(6,p);   //let不能突破块作用域

    {

       show(7,y);

       show(8,o);

       show(9,t);

        {

           show(10,o);

           show(11,t);

           show(12,z);

        }

    }

}

fn();

// show(13,y);

show(14,t);   //global,不要这样用

// show(15,o)   //y,o函数外不可见

show(16,z);   //var声明提升,此时还没有赋值

var z =10;

const m =2;

// m = 3;   //常量不可以重新赋值

输出：

1 500

2 400

3 500

4 100

5 'free'

7 300

8 100

9 'free'

10 100

11 'free'

12 400

14 'free'

16 undefined

函数表达式：

使用表达式来定义函数，表达式中的函数可以省略，如果这个函数名不省略，也只能用在此函数内部；

例，有名字的函数表达式：

const add =function _add(x,y) {   //定义函数和常量时常用const，之后不可改；_add只能用在该函数内部

   console.log(_add);

   console.log(add);

   return x+y;

};   //表达式后要有分号

console.log(add(4,5));

// console.log(_add(4,5));   //X

输出：

[Function: _add]

[Function: _add]

9

例，有名字的函数表达式：

const add =function fn(x,y) {   //fn只能用在该函数内部

   return x-y;

};

console.log(add(4,5));

// console.log(fn(4,5));   //X

例，匿名函数：

const add =function(x,y) {

   console.log(add);

   return x+y;

};

console.log(add(4,5));

例，递归：

const sum =function _sum(n) {

   let result =0;

   if (n==1)return 1;

   return result +=n +_sum(--n);

};

console.log(sum(5));

输出：

15

函数、匿名函数、函数表达式的差异：

函数 VS 匿名函数，本质上都一样，都是函数对象（变量指向一个函数对象），只不过函数有自己的标识符——函数名，匿名函数需要借助其它的标识符而已；

（函数、匿名函数） VS 函数表达式，区别在于：函数会声明提升（即调用可在声明之前），函数表达式不会（即调用必须在声明之后）；

一般用，都是先声明再调用；

例：

console.log(show);   //V，函数会声明提升

console.log(add);   //X，函数表达式不会声明提升，即，const add不会上移，必须先声明再调用

const add =function(x,y) {

   return x+y;

};

function show() {

   console.log(add);

}

高阶函数：

函数作为参数，或返回一个函数；

例：

function a() {

   console.log('a func');

   return function b() {

       console.log('b func');

    };

}

let func =a();   //返回值指向b函数的定义

func();

输出：

a func

b func

例：

function b() {

   console.log('b func');

}

function a(fn) {

   console.log('a func');

   return fn;

}

let func =a(b);

func();

输出：

a func

b func

例，计数器：

let counter =function() {

   let i =0;

   // function inc() {   //方式1

   //     return ++i;

   // }

   // return inc;

   // return function() {   //方式2，内部用不需要函数名

   //     return ++i;

   // }

   return ()=> ++i;   //方式3，箭头函数

}

const c =counter();

console.log(c());

console.log(c());

console.log(c());

输出：

1

2

3

例，map函数：

function map(fn,arr) {

   let newarr = [];

   for (i in arr) {

       newarr[i] =fn(arr[i]);

    }

   return newarr;

}

// let newarr = map(function (x) {return ++x}, [1,2,3,4,5]);   //方式1

// let newarr = map((x) => {return ++x}, [1,2,3,4,5]);   //方式2，若只留返回值（正确为++x），必须把{}和return一起脱掉，若为{++x}则没有返回值，返回的是[ undefined, undefined, undefined, undefined, undefined ]

let newarr =map((x)=> ++x, [1,2,3,4,5]);   //方式3

console.log(newarr);

输出：

[ 2, 3, 4, 5, 6 ]

例，map函数，生成器实现：

var map =function* (fn,arr) {   //生成器函数

   for (i in arr)

       yield fn(arr[i]);

};

let newarr =map(x => ++x, [1,2,3,4,5]);   //生成器对象

for (i of newarr)   //迭代

   console.log(i);

输出：

2

3

4

5

6

箭头函数：

是匿名函数，是一种更加精简的格式；

let newarr = map(x => ++x, [1,2,3,4,5]);   //++x为return的值

箭头函数参数：

如果一个函数没有参数，使用()；

如果只有一个参数，参数列表可省略小括号；

多个参数不能省略小括号，且使用逗号间隔；

箭头函数返回值：

若函数体部分有多行，就要用{}，如果有返回值使用return；

若只有一行语句，可同时省略{}和return；

若只一条return语句，不能省略大括号，即有return关键字必须要有{}，如let newarr = map(x => {return ++x},[1,2,3,4,5]);；

若只一条非return语句，加上{}则无返回值；

因此，记住最简形式x => x+2即可；

注：

windows.alert()   //弹窗，browser对象，是全局对象，而js代码中的全局对象是在nodejs上；弹窗测试时用，现都用遮罩层

browser新版本支持生成器、箭头函数；

() => {}，最简单的箭头函数，返回undefined；