博客列表 >高阶函数、模板字面量、标签函数、解构赋值

高阶函数、模板字面量、标签函数、解构赋值

逆旅行人
逆旅行人原创
2021年07月11日 19:26:28696浏览

一、高阶函数

定义:使用函数作为参数或者将函数做为返回值

  1. //定义一个函数
  2. //作为参数的函数
  3. let a=()=>console.log("作为参数的函数调用了");
  4. //需要调用的函数
  5. function demo(f){
  6. f();
  7. console.log("demo函数调用");
  8. return ()=>console.log("返回的函数调用了");
  9. }
  10. // 调用函数
  11. demo(a)();

1.回调函数

定义:函数的名字作为另外一个函数的参数传入,叫做回调函数

  1. function hello()
  2. {
  3. console.log("作为参数的函数调用了");
  4. }
  5. function demo(f){
  6. f();
  7. console.log("demo函数调用");
  8. }
  9. demo(a);//回调函数
  1. function hello()
  2. {
  3. console.log("作为参数的函数调用了");
  4. }
  5. function demo(){
  6. hello();
  7. console.log("demo函数调用");
  8. }
  9. demo();//这只是在一个参数内调用另一个参数

2.偏函数

定义:将一个函数的多个参数,分多次传入,每次传入都返回一个函数已来接受多个参数,循环往复,直到接受完所有的参数

  1. //常规函数接收多个参数
  2. function sum(a,b,c,d,e){
  3. return a+b+c+d;
  4. }
  5. //利用偏函数,这里以每次接受两个为例
  6. let sum_1 = function(a,b){
  7. return function(c,d){
  8. return a+b+c+d;
  9. }
  10. }
  11. console.log(sum_1(10,20)(30,40));
  12. //上述例子利用箭头函数简化
  13. let sum_2 =(a,b)=>(c,d)=>a+b+c+d;
  14. console.log( sum_2(10,20)(30,40));

3.函数柯里化

定义:将函数的参数传入时,每次只能传入一个参数,也就是特殊的偏函数

  1. sum =function sum(a){
  2. return function(b){
  3. return function(c){
  4. return function(d){
  5. return a+b+c+d;
  6. }
  7. }
  8. }
  9. }
  10. console.log(sum(10)(20)(30)(40));
  11. //箭头函数
  12. sum_1 = a => b=>c => d => a+b+c+d;
  13. console.log(sum_1(10)(20)(30)(40));

4.纯函数

定义:函数内部只是用形参,不使用函数外的参数

  1. let [a,b,c,d]=[10,20,30,40];
  2. //这个纯函数
  3. function sum(a1,b1){
  4. console.log(a1+b1);
  5. }
  6. sum(a,b);
  7. //这个不是纯函数,这个是用来了函数外部的变量
  8. function sum_1(a1,b1){
  9. console.log(a1+b1+d);
  10. }
  11. sum_1(a,b);

二、值传递与引用传递

1.值传递(适用于基本数据类型)

  1. let a =10;
  2. let b =a;
  3. console.log(a,b);
  4. a = 20;
  5. console.log(a,b);

2.引用传递(适用于对象、数组)

a.数组

  1. //与上面的例题进行对比,一道迷惑的题目
  2. var a = [1,2,3];
  3. var b = a;
  4. a = [4,5,6];
  5. alert(b);

看完下面可能有所了解:

  1. let a=[10,20,30,40];
  2. let b=a;//将a的地址赋值给b,引用传递
  3. console.log(a,b); //[10,20,30,40] [10,20,30,40]
  4. let c=[10,20,30,40];
  5. let d=c;
  6. c = [10,30];//将c指向了[10,30]所在的地址
  7. console.log(c,d);//c:[10,30] d:[10,20,30,40]
  8. let e =[10,20,30,40];
  9. let f =e;
  10. e.pop();
  11. console.log(e,f);//e,f:[10,20,30]

b.对象

  1. let obj1 ={name:"张三",age:18};
  2. // 访问方式
  3. console.log(obj1.name,obj1.age);
  4. console.log("%o",obj1);
  5. //引用传递
  6. let obj2 =obj1;
  7. console.log("%o",obj2);//{name: "张三", age: 18}
  8. obj1.name="王五";
  9. console.log("%o",obj1);//{name: "王五", age: 18}
  10. console.log(obj1 === obj2);//true

函数传参

传参永远都是值传递

  1. let a =10;
  2. function sum(abc){
  3. console.log(abc);
  4. abc=20;
  5. console.log(abc);
  6. }
  7. sum(a);// 10 20
  8. console.log(a);//10

注意:

  1. // 深拷贝: 值传递
  2. // 浅拷贝: 引用传递

三、模板字面量

1.模板字符串语法

  1. 编写字符串时,通常使用 ' )或者 "
  2. const str1 ='hello world';
  3. const str2 ="hello world";
  4. 使用模板字符串的语法是:
  5. const str3 =`hello world`;

2.字符串拼接

  1. 普通字符串:
  2. var p = {
  3. name: 'Alfred',
  4. nn: 'Alfy',
  5. };
  6. console.log('Hi, I\'m ' + p.name + '! Call me "' + p.nn + '".');
  7. 模板字符串写法可以直接使用 ${value} 嵌入表达式:
  8. console.log(`Hi, I'm ${p.name}! Call me "${p.nn}".`);

3.换行

  1. 普通字符串:
  2. console.log("Dear Mom,\n" +
  3. "Hope you are well.\n" +
  4. "\tLove, your son");
  5. 模板字符串:
  6. console.log(`Dear Mom,
  7. Hope you are well.
  8. Love, your son`);

1.标签函数

第一个参数是被嵌入表达式分隔的文本的数组。
第二个参数开始是嵌入表达式的内容。

  1. 1.
  2. let a = 1;
  3. let b = 2;
  4. function tagFunction(strings, aVal, bVal, sumVal) {
  5. console.log(strings);
  6. console.log(aVal);
  7. console.log(bVal);
  8. console.log(sumVal);
  9. return 'hahah';
  10. }
  11. let tag = tagFunction`${a} + ${b} = ${a+b}`;
  12. // ['', "+", "=", ''],标签函数接收的参数依次是原始字符串数组,每个表达式求值的结果
  13. // 1
  14. // 2
  15. // 3
  16. console.log(tag); // hahah
  17. 2.
  18. function hello(a){
  19. console.log("hee"+a);
  20. }
  21. hello("宁皓");
  22. hello`宁皓`;

四、解构赋值

  1. //多次赋值
  2. let [a,b,c]=[10,20,30];
  3. console.log(a);//10
  4. console.log(b);//20
  5. console.log(c);//30
  6. //两个值交换
  7. [a,b]=[b,a];
  8. console.log(a);//20
  9. console.log(b);//10
  1. //对象解构
  2. let item={name:"李四",age:15};
  3. let {name,age}=item;
  4. console.log(name);
  5. console.log(age);

五、对象字面量的简化

  1. let person ={
  2. name:"张三",
  3. age:18,
  4. getInfo:function(){
  5. return `${this.name} : ${this.age}`;
  6. }
  7. };
  8. let {name,age} =person;
  9. // console.log(name,age);
  10. //属性与变量保持一致时,属性直接简化
  11. let one={
  12. name,
  13. age,
  14. getInfo:function(){
  15. return `${this.name} : ${this.age}`;
  16. }
  17. };
  18. //对象的方法进行简化,删除:function()
  19. let two={
  20. name,
  21. age,
  22. getInfo(){
  23. return `${this.name} : ${this.age}`;
  24. }
  25. };
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议