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不限制位置参数的位置;

 

注:CC++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]);   //++xreturn的值

 

箭头函数参数:

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

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

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

 

箭头函数返回值:

若函数体部分有多行,就要用{},如果有返回值使用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

 

 

 

 

 

 

 

 

 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章