网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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;

 

 

 

 

 

 

 

 

 


网站栏目:65ES6_函数
网页网址:http://bjjierui.cn/article/ijeced.html

其他资讯