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

JS数据类型与函数

程序员文章站 2022-06-02 18:51:36
...

数据类型

  • 原始类型/简单类型/ 基本类型: 不可再分, 是构成其它复合类型的基本单元,一个变量,存一个值;动态语言: 变量的类型, 由它的值的类型决定
  • 引用类型: 都是对象,typeof返回类型都是 object ,函数除外<function>;类似其它语言中的”复用类型”, 集合类型;由一个或多个, 相同, 或不同类型的”原始类型”的值构造,多值类型
STT 分类 类型 举例
1 原始类型 number 123
2 原始类型 string help
3 原始类型 boolean True/False
4 原始类型 undefined undefined
5 原始类型 null null
6 引用类型 array [、、、]
7 引用类型 object {、、、}
8 引用类型 function function

数组

  • 声明: const arr = ["macBook Pro", 2, 40000];
  • 查看数据类型: console.log(typeof arr);
  • 访问: console.log(arr[索引]);
  • 判断是否是数组类型: console.log(Array.isArray(arr));
  1. // 声明
  2. const arr = arr = ["macBook Pro", 2, 40000];
  3. console.log(arr);
  4. // 数组的索引是从0开始递增的正整数, 0, 1, 2
  5. console.log(arr[0]);
  6. console.log(arr[1]);
  7. console.log(arr[2]);
  8. // console.log(arr[3]);
  9. console.log(typeof arr);
  10. // 判断数组类型的正确方法
  11. console.log(Array.isArray(arr));

对象

  • 索引具有语义化的数组
  • 属性: 类似于变量
  • 声明: obj = {、、、}
  • 访问: console.log(obj[索引]); console.log(obj.属性名);,当属性名是非常标识符时, 必须使用数组的方式来访问对象的属性。

对象最吸引人的,不是数组的语义化封装, 而是对数据操作的封装, 方法(语法与函数是一样的)
本质上来说, 对象, 就是变量与函数的封装, 内部, 变量->属性, 函数 -> 方法 **

  1. // 对象 更像一个语义化的 数组
  2. // name, num , price : 属性,类似于变量
  3. let obj = { name: "手机", num: 2, price: 5000 };
  4. console.log(obj);
  5. console.log(obj["name"]);
  6. console.log(obj["num"]);
  7. console.log(obj["price"]);
  8. // 因为对象的属性名称都是合法的标识符,可以使用点来访问
  9. console.log(obj.name, obj.num, obj.price);
  10. // 当属性名是非常标识符时, 必须使用数组的方式来访问对象的属性
  11. obj = { "my email": "admin@php.cn" };
  12. console.log(obj["my email"]);
  13. // * 对象最吸引人的,不是数组的语义化封装, 而是对数据操作的封装, 方法(语法与函数是一样的)
  14. // 本质上来说, 对象, 就是变量与函数的封装, 内部, 变量->属性, 函数 -> 方法
  15. obj = {
  16. // name, num, price: 属性, 类似于变量
  17. name: "手机",
  18. num: 3,
  19. price: 7000,
  20. // total: 方法,实际上还是一个属性,只不过它的值是一个函数
  21. total: function () {
  22. // let str = obj.name + " 总计: " + obj.num * obj.price + " 元 ";
  23. // 模板字面量, 来简化, 内部有变量的字符串
  24. // let str = obj.name + " 总计: " + obj.num * obj.price + " 元 ";
  25. // 反引号声明的模板字符串, 可以插入变量/表达式, 这叫"插值"
  26. // 应该是对象内部, 使用 当前对象的一个引用, 这样才独立于外部对象
  27. // let str = `${obj.name} 总计 ${obj.num * obj.price} 元`;
  28. // this: 始终与当前对象绑定(执行环境 / 执行上下文 )
  29. // this = obj
  30. let str = `${this.name} 总计 ${this.num * this.price} 元`;
  31. return str;
  32. },
  33. };
  34. console.log(obj.total());
  35. console.log(typeof obj);
  36. console.log(obj instanceof Object);
  37. // 实际工作中, 而是将数组与对象组合起来一起用
  38. // obj是一个由三个对象构成的数组
  39. obj = [
  40. { name: "手机", num: 2, price: 5000 },
  41. { name: "电脑", num: 2, price: 5000 },
  42. { name: "相机", num: 2, price: 5000 },
  43. ];
  44. // 求三个商品的总和
  45. let res = obj.map(item => item.num * item.price).reduce((acc, cur) => acc + cur);
  46. console.log(res);

函数

  • 函数是一种数据类型 , 也是对象的一种
  • 可以当成普通值来使用, 例如充当函数的参数,或者函数的返回值
  • 也可以当参数,就是回调函数, 当返回值,可以创建一个闭包
  • 函数是 js 的一等公民, 就是通过这个体现的
  1. // ! 3. 函数
  2. // 函数是一种数据类型 , 并且 还是 对象
  3. console.log(typeof function () {});
  4. // 函数即是函数, 也是对象
  5. console.log(function () {} instanceof Object);
  6. // (一) 函数是数据类型的优点
  7. // 可以当成普通值来使用, 例如充当函数的参数,或者函数的返回值
  8. // 这个很重要, 当参数,就是回调函数, 当返回值,可以创建一个闭包
  9. // js中很多高级应用, 都严重依赖这二个功能, 这也是"高阶函数"的基本特征
  10. // 函数是js的一等公民, 就是通过这个体现的
  11. // 应用场景1: 函数做为参数使用, 回调
  12. function f1(callback) {
  13. // 参数 callback 是一个函数
  14. console.log(callback());
  15. }
  16. // 调用f1, 匿名函数当成f1的参数
  17. f1(function () {
  18. return "Hello 朱老师";
  19. });
  20. // 应用场景2: 函数当成返回值, 闭包
  21. function f2() {
  22. let a = 1;
  23. return function () {
  24. return a++;
  25. };
  26. }
  27. // f2()返回值是一个函数
  28. console.log(f2());
  29. const f = f2();
  30. console.log(f);
  31. console.log(f());
  32. console.log(f());
  33. console.log(f());
  34. console.log(f());
  35. console.log(f());
  36. console.log(f());
  37. // 函数当成对象来用
  38. // 对象有属性和方法, 当然函数也有属性有方法
  39. function func(a, b) {
  40. return a + b;
  41. }
  42. // 查看函数名
  43. console.log(func.name);
  44. // 查看函数需要几个参数
  45. console.log(func.length);
  46. func.email = "498668472@qq.com";
  47. console.log(func.email);

细说函数

命名函数

  • 有名字的函数
  • 名字命名规则:动词 + 名词
  1. function getName(username) {
  2. return "Hello " + username;
  3. }
  4. // 调用
  5. console.log(getName("猪老师"));

匿名函数

  • 没有名字的函数
  • 函数表达式, 将函数声明保存到一个变量中, 以后使用这个变量来引用这个函数

执行方式 1: 立即执行,立即执行函数( IIFE ): 声明 + 执行 2 合 1

  • 阅后即焚, 不会给全局环境带来任何的污染,用来创建临时作用域
  • node 模块, 就是用 IIFE 来写的

执行方式 2: 保存到一个变量中,函数表达式

  • 表达式: 任何一个可以计算出确定 “值” 的过程
  1. // * 执行方式1: 立即执行
  2. // 立即执行函数( IIFE ): 声明 + 执行 2合1
  3. // 2.1 IIFE
  4. // IIFE: 阅后即焚, 不会给全局环境带来任何的污染,用来创建临时作用域
  5. // node 模块, 就是用 IIFE 来写的
  6. (function (username) {
  7. console.log("Hello " + username);
  8. })("灭绝老师");
  9. console.log(
  10. (function (username) {
  11. return "Hello " + username;
  12. })("灭绝老师")
  13. );
  14. // 执行方式2: 保存到一个变量中,
  15. // 2.2 函数表达式
  16. // 表达式: 任何一个可以计算出确定 "值" 的过程, 100, 12+45, 'a'+'c',
  17. // 现在, "函数声明", 就变成了"变量声明", 只不过, 变量的值,是一个函数声明
  18. const getUserName = function (username) {
  19. return "Hello " + username;
  20. };
  21. console.log(getUserName("马老师"));
  22. console.log(getUserName);

箭头函数

  • 用来简化匿名函数的声明
  • 箭头函数的语法:: 1. 去掉 function; 2. 在参数括号(…) 与 大括号{…} 之间使用 胖箭头 => 连接
  • 如果只有一条语句,return ,可以不写大括号
  1. // 3. 箭头函数
  2. // 匿名函数: 函数表达式, 将函数声明保存到一个变量中, 以后使用这个变量来引用这个函数
  3. let f1 = function (a, b) {
  4. return a + b;
  5. };
  6. console.log(f1(10, 20));
  7. // 使用 箭头函数 来简化匿名函数的声明
  8. // 匿名函数 --> 箭头函数的语法
  9. // 1. 去掉 function
  10. // 2. 在参数括号(...) 与 大括号{...} 之间使用 胖箭头 => 连接
  11. f1 = (a, b) => {
  12. return a + b;
  13. };
  14. console.log(f1(8, 9));
  15. // 只有一个参数的时候, 括号可以不要了
  16. f1 = (username) => {
  17. return "Hello " + username;
  18. };
  19. // 如果只有一条语句,return ,可以不写大括号
  20. // 因为只有一条语句,默认就是return ,所以 return 也可以不写的
  21. f1 = (x) => {
  22. return x * 2;
  23. };
  24. f1 = (x) => x * 2;
  25. console.log(f1(40));
  26. console.log(f1(90));
  27. // 没有参数时, 括号一定要写上
  28. f1 = () => "今天天气很好";
  29. console.log(f1());
  30. f1 = ($) => 100 + 200;
  31. console.log(f1());
  32. f1 = (_) => 100 + 200;
  33. console.log(f1());