博客列表 >细说JS函数、数据类型、数组、对象

细说JS函数、数据类型、数组、对象

cool442
cool442原创
2022年01月02日 19:58:45382浏览

1. 命名函数

  • 有函数名的函数
  • 命名:动词+名词
    1. function getAdd(Add) {
    2. return "我家在" + Add;
    3. }
    4. console.log(getAdd(香港));

2. 匿名函数

  • 没有函数名的函数
    function (){…..语句}
  1. // 1. 命名函数
  2. // - 有函数名的函数
  3. // - 命名:动词+名词
  4. function getAdd(Add) {
  5. return "我家在" + Add;
  6. }
  7. console.log(getAdd("香港"));
  8. // 2. 匿名函数
  9. // 执行方式一:立即执行( IIFE ),在函数后面加()直接调用
  10. // IIFE: 阅后即焚, 不会给全局环境带来任何的污染,用来创建临时作用域
  11. (function (Add) {
  12. console.log("我最喜欢的城市是" + Add + "!");
  13. })("南宁");
  14. // 执行方式二:保存到变量(常量)中
  15. const getHome = function (Add) {
  16. return "我住在" + Add;
  17. };
  18. console.log(getHome("广西"));
  19. // 3.箭头函数:使用箭头函数来简化匿名函数
  20. // 用法:支掉function,在括号与大括号之间用=>连接
  21. let getMyAdd = (Add) => {
  22. return "我是" + Add + "人。";
  23. };
  24. console.log(getMyAdd("北京"));
  25. // 只有一个参数时括号可以不用,上面可写为:
  26. // let getMyAdd = Add => {return "我是" + Add + "人。"};
  27. // 如果只有一条语句,默认就是return ,所以 return 也可以不写的,如下:
  28. let m3 = (a) => a * a * a;
  29. console.log(m3(15));
  30. // 没有参数时,要写括号,如下:
  31. let Home = () => "上海";
  32. console.log(Home());
  33. Home = (_) => "天津";
  34. console.log(Home());

3. 函数使用场景

  1. 如果函数需要多次调用, 用命名, 函数表达式, 都可以
  2. 如果代码要求,必须遵循”先声明, 再调用”的规则, 那就必须用”函数表达式”
  3. 如果只有完成一些特定的,一次性的工作, 不想留下任何痕迹, 用”IIFE”, 模块
  4. 如果调用函数时,需要一个函数充当参数,例如:回调, 就可以使用箭头函数来简化 匿名函数的 声明

4. 数据类型

  • (1)原始类型
    • number:数字
    • string:字符
    • boolean:布尔
    • undefined:未定义
    • null:空
      原始类型是构成其它复合类型的基本单元。
  • (2)引用类型
    • 都是对象,函数除外
    • 其数据由一个或多个相同或不同的原始类型数据值构成。

      4.1 数组

      1. // 声明数组,数组用[]符号
      2. const Add = ["南宁", "北京", "上海", "重庆"];
      3. // 数组的索引从0开始
      4. console.log(Add[0]);
      5. console.log(Add[1]);
      6. console.log(Add[2]);
      7. console.log(Add[3]);
      8. // 判断数组类型
      9. console.log(Array.isArray(Add));

4.2 对象

  1. // 为了更直观的表示数据之间的关联,可将数字索引换为有意义的字符串。
  2. // 对象:更像一个语义化的数组。用{}符号
  3. let wang = { Name: "王小二", Age: 18, Height: 185, Weight: 135 };
  4. // Name, Age等叫对象的属性
  5. console.log(wang); // 显示:{ Name: '王小二', Age: 18, Height: 185, Weight: 135 }
  6. console.log(
  7. wang["Name"] +
  8. "今年" +
  9. wang["Age"] +
  10. "岁,身高" +
  11. wang["Weight"] +
  12. "cm,体重" +
  13. wang["Weight"] +
  14. "KG。"
  15. );
  16. // 对象的属性是合法的标识符时,可用“.”符号来访问
  17. console.log(wang.Name + wang.Age + "岁");
  18. // 对象的属性是非法标识符时,必须用数组方式访问
  19. wang["Home Email"] = "abc@163.com";
  20. // wang = { "Home Email": "abc@163.com" };
  21. console.log(wang["Home Email"]);
  22. wang.driver = function (mobile) {
  23. return wang.Name + "在开" + mobile;
  24. };
  25. console.log(wang.driver("飞机"));

穿插介绍知识点:模板字面量(重要!以后常用)

  • 语法:用反引号包含字符串,要引入变量时使用插值。
  • 插值:语法${变量名}
    1. // 模板字面量:用来简化要带入变量的字符串
    2. // 用反引号包含字符串,变量用插值${变量名}
    3. console.log(`${wang.Name}已经${wang.Age}岁了,他${wang.driver("歼20")}。`);

5. 再次复习函数

  • 函数是一种数据类型,并且还是对象
  • 函数是数据类型的好处?
    • 可以当成普通值来使用, 例如充当函数的参数,或者函数的返回值。我的理解是只要是普通值可用的地方,就可用函数。
    • 这个很重要, 当参数,就是回调函数, 当返回值,可以创建一个闭包。(还不够理解)
    • js中很多高级应用, 都严重依赖这二个功能, 这也是”高阶函数”的基本特征
    • 函数是js的一等公民, 就是通过这个体现的
  • 函数像对象一样,有属性和方法
  1. // 函数
  2. // 应用场景一:作为参数使用,即回调函数
  3. // 定义函数,其参数是函数
  4. function f1(f2) {
  5. console.log(f2());
  6. }
  7. // 调用函数f1,传入匿名函数
  8. f1(function () {
  9. return "我在学习php。";
  10. });
  11. // 应用场景二:当成返回值,即闭包
  12. function n() {
  13. let a = 1;
  14. return function () {
  15. return a++;
  16. };
  17. }
  18. console.log(n()); // 返回的是匿名函数function () { return a * 2; }
  19. console.log(n()()); // 执行返回的函数
  20. let f = n();
  21. console.log(f());
  22. console.log(f());
  23. console.log(f());
  24. // 函数当成对象使用,即可用“.”符号调用
  25. function z(Add, Age) {
  26. return `小王住在${Add},他${Age}岁了。`;
  27. }
  28. // 查看函数名
  29. console.log(z.name);
  30. // 查看函数有几个参数
  31. console.log(z.length);
  32. // 给函数添加数据
  33. z.Height = 193;
  34. console.log(z.Height);
  35. // 函数也是对象
  36. console.log(z.prototype);

函数当成对象有啥用呢?

  • 用处太大了, 整个JS语言体系就靠它撑着了。
  • 函数就是对象。
  • 后面要学到的类class,构造函数, 他们都是基于”函数是对象”这个前提的
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议