JS数据类型与函数

数据类型

• 原始类型/简单类型/ 基本类型: 不可再分, 是构成其它复合类型的基本单元,一个变量,存一个值;动态语言: 变量的类型, 由它的值的类型决定
• 引用类型: 都是对象,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));

// 声明
const arr = arr = ["macBook Pro", 2, 40000];
console.log(arr);
// 数组的索引是从0开始递增的正整数, 0, 1, 2
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
// console.log(arr[3]);

console.log(typeof arr);
// 判断数组类型的正确方法
console.log(Array.isArray(arr));

对象

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

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

// 对象 更像一个语义化的  数组
// name, num , price : 属性,类似于变量
let obj = { name: "手机", num: 2, price: 5000 };
console.log(obj);
console.log(obj["name"]);
console.log(obj["num"]);
console.log(obj["price"]);

// 因为对象的属性名称都是合法的标识符,可以使用点来访问
console.log(obj.name, obj.num, obj.price);

// 当属性名是非常标识符时, 必须使用数组的方式来访问对象的属性
obj = { "my email": "[e-mail]" };
console.log(obj["my email"]);

// * 对象最吸引人的,不是数组的语义化封装, 而是对数据操作的封装, 方法(语法与函数是一样的)
// 本质上来说, 对象, 就是变量与函数的封装, 内部, 变量->属性, 函数 -> 方法
obj = {
  // name, num, price: 属性, 类似于变量
  name: "手机",
  num: 3,
  price: 7000,

  // total: 方法,实际上还是一个属性,只不过它的值是一个函数
  total: function () {
    // let str = obj.name + " 总计: " + obj.num * obj.price + " 元 ";
    // 模板字面量, 来简化, 内部有变量的字符串
    // let str = obj.name + " 总计: " + obj.num * obj.price + " 元 ";
    // 反引号声明的模板字符串, 可以插入变量/表达式, 这叫"插值"
    // 应该是对象内部, 使用 当前对象的一个引用, 这样才独立于外部对象
    // let str = `${obj.name} 总计 ${obj.num * obj.price} 元`;
    // this: 始终与当前对象绑定(执行环境 /  执行上下文 )
    // this = obj
    let str = `${this.name} 总计 ${this.num * this.price} 元`;
    return str;
  },
};

console.log(obj.total());

console.log(typeof obj);
console.log(obj instanceof Object);

// 实际工作中, 而是将数组与对象组合起来一起用
// obj是一个由三个对象构成的数组
obj = [
  { name: "手机", num: 2, price: 5000 },
  { name: "电脑", num: 2, price: 5000 },
  { name: "相机", num: 2, price: 5000 },
];

// 求三个商品的总和
let res = obj.map(item => item.num * item.price).reduce((acc, cur) => acc + cur);
console.log(res);

函数

• 函数是一种数据类型 , 也是对象的一种
• 可以当成普通值来使用, 例如充当函数的参数,或者函数的返回值
• 也可以当参数,就是回调函数, 当返回值,可以创建一个闭包
• 函数是 js 的一等公民, 就是通过这个体现的

// ! 3. 函数
// 函数是一种数据类型 , 并且 还是 对象

console.log(typeof function () {});
// 函数即是函数, 也是对象
console.log(function () {} instanceof Object);

// (一) 函数是数据类型的优点
// 可以当成普通值来使用, 例如充当函数的参数,或者函数的返回值
// 这个很重要, 当参数,就是回调函数, 当返回值,可以创建一个闭包
// js中很多高级应用, 都严重依赖这二个功能, 这也是"高阶函数"的基本特征
// 函数是js的一等公民, 就是通过这个体现的

// 应用场景1: 函数做为参数使用, 回调
function f1(callback) {
  // 参数 callback 是一个函数
  console.log(callback());
}

// 调用f1, 匿名函数当成f1的参数
f1(function () {
  return "Hello 朱老师";
});

// 应用场景2: 函数当成返回值, 闭包
function f2() {
  let a = 1;
  return function () {
    return a++;
  };
}

// f2()返回值是一个函数
console.log(f2());
const f = f2();
console.log(f);
console.log(f());
console.log(f());
console.log(f());
console.log(f());
console.log(f());
console.log(f());

// 函数当成对象来用
// 对象有属性和方法, 当然函数也有属性有方法

function func(a, b) {
  return a + b;
}
// 查看函数名
console.log(func.name);
// 查看函数需要几个参数
console.log(func.length);

func.email = "[e-mail]";

console.log(func.email);

细说函数

命名函数

• 有名字的函数
• 名字命名规则：动词 + 名词

function getName(username) {
    return "Hello " + username;
  }
// 调用
console.log(getName("猪老师"));

匿名函数

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

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

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

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

• 表达式: 任何一个可以计算出确定 “值” 的过程

// * 执行方式1: 立即执行

  // 立即执行函数( IIFE ):  声明 + 执行 2合1
  // 2.1 IIFE
  // IIFE: 阅后即焚, 不会给全局环境带来任何的污染,用来创建临时作用域
  // node 模块, 就是用 IIFE 来写的
  (function (username) {
    console.log("Hello " + username);
  })("灭绝老师");

  console.log(
    (function (username) {
      return "Hello " + username;
    })("灭绝老师")
  );

  // 执行方式2: 保存到一个变量中,
  // 2.2 函数表达式
  // 表达式: 任何一个可以计算出确定 "值"  的过程, 100, 12+45, 'a'+'c',

  // 现在, "函数声明", 就变成了"变量声明", 只不过, 变量的值,是一个函数声明
  const getUserName = function (username) {
    return "Hello " + username;
  };

  console.log(getUserName("马老师"));
  console.log(getUserName);

箭头函数

• 用来简化匿名函数的声明
• 箭头函数的语法：: 1. 去掉 function; 2. 在参数括号(…) 与 大括号{…} 之间使用 胖箭头 => 连接
• 如果只有一条语句,return ,可以不写大括号

// 3. 箭头函数

// 匿名函数: 函数表达式, 将函数声明保存到一个变量中, 以后使用这个变量来引用这个函数
let f1 = function (a, b) {
  return a + b;
};
console.log(f1(10, 20));

// 使用 箭头函数 来简化匿名函数的声明
// 匿名函数 --> 箭头函数的语法
// 1. 去掉 function
// 2. 在参数括号(...) 与 大括号{...} 之间使用 胖箭头 => 连接
f1 = (a, b) => {
  return a + b;
};
console.log(f1(8, 9));

// 只有一个参数的时候, 括号可以不要了
f1 = (username) => {
  return "Hello " + username;
};

// 如果只有一条语句,return ,可以不写大括号
// 因为只有一条语句,默认就是return ,所以 return 也可以不写的
f1 = (x) => {
  return x * 2;
};

f1 = (x) => x * 2;
console.log(f1(40));
console.log(f1(90));

// 没有参数时, 括号一定要写上
f1 = () => "今天天气很好";
console.log(f1());

f1 = ($) => 100 + 200;
console.log(f1());

f1 = (_) => 100 + 200;
console.log(f1());