欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-13 12:37:29
...

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,构造函数, 他们都是基于”函数是对象”这个前提的