JavaScript 常用的函数类型和数据类型

JavaScript 常用的函数类型和数据类型

（1）函数

• 命名函数：function

  函数声明：
  function sum(a,b){
      return a + b;
  }
  含税调用
  console.log(sum(1,2));    // 输出：3
  // 可以使用模板字面量，自定义输出格式，让结果更直观
  // php：双引号中的变量会被解析
  // js：反引号中的变量会被解析
  // js：字符串拼接用：+
  function sum2(a,b){
      return `${a} + ${b} = ` + (a +b);
      // 模板字面量还支持表达式
      // return `${a} + ${b} = ${a + b} `; 这样写结果一样
  }
  console.log(sum2(2,5));    // 输出：2 + 5 = 7
  // 注意，命名函数存在声明提升现象，即在命名含税声明前可以使用。
  // 如果要遵循“先声明后再调用”的编程规格，可以使用匿名函数来解决

• 匿名函数：fn = function (){}

  // 匿名函数不存在声明提升，可以将一个匿名函数赋值给一个 let / const 声明的变量/常量。
  // let / const 不存在声明提升，所以它引用的函数也不会声明提升
  // 函数声明
  const sum = function (a,b){
      return `${a} + ${b} = ${a + b}`;
  }
  // 函数调用
  console.log(sum(2,5));    // 输出：2 + 5 = 7

• 箭头函数：fn = ()=>{}

  // 箭头函数是匿名函数的简写
  // 1，删除 function
  // 2，(){} 简化为 () => {}
  let sum = (a,b) => {
      return `${a} + ${b} = ${a + b}`;
  }
  console.log(sum(2,6));    // 输出：2 + 6 = 8
  // 参数简化
  // 1，单参数，可以省略括号
  let userName = (uname) => {
      return `Hello ${uname}`;
  }
  // 可以简化为
  let userName = uname => {
      return `Hello ${uname}`;
  }
  console.log(userName('Tom'));    // 输出：Hello Tom
  // 2，无参数，一定要加括号
  let greeting = () =>{
      return "Hello World!";
  }
  console.log(greeting());    // 输出：Hello World!
  // 返回值简化
  // 如果只有一条 return 语句，可以不写{} 和 return
  let sum = (a,b) => `${a} + ${b} = ${a + b}`;
  console.log(sum(1,2));    // 输出：1 + 2 = 3
  // 注意事项
  // 1，箭头函数没有自己的 this，不能用于构造函数
  // 2，它的 this 由它的上下文确定（执行环境）

• 立即执行函数：(function(){})()

  // 声明与调用二合一（声明时立即调用）：IIFE
  // 写完就执行完了，所以时一次性的，肯定时匿名函数
  let result = (function (a,b){
      return `${a} + ${b} = ${a + b}`;
  })(1,2);
  console.log(result);    // 输出：1 + 2 = 3

（2）数据类型

• 原始类型：string，number，boolean，null，undefined

  // 原始类型：原子类型、基本类型，单值
  // 1，number 数值，不区分整数、浮点 （10-4，15：50）
  console.log(123, typeof 123);    // 输出：123 'number'
  console.log(3.14, typeof 123);   // 输出：3.14 'number'
  // number 类型中有一个特殊的值：NaN（Not a Number），表示不是一个数字的值
  console.log(NaN, typeof NaN);    // 输出：NaN 'number'
  // 2，string 字符串
  console.log('php.cn', typeof 'php.cn');   // 输出：php.cn string
  // 3，boolean 布尔型，true / false
  console.log(true, typeof true);    // 输出：true 'boolean'
  // 4，null 空值，返回的是 object，这是一个千年 bug，不会再改了。
  // 可以用于将变量置空等操作
  stuName = null;
  console.log(stuName, typeof stuName);    // 输出：null 'object'
  // 5，undefined 未定义型，变量声明后未赋值，则默认为 undefined
  let admin;
  console.log(admin, typeof admin);    // 输出：undefined 'undefined'

• 引用类型（对象）：array，object，function

  /* 1，数组 */
  // 一组数据集合，每个数据称为数组元素。
  // 数组元素由键（索引）、值组成，键默认为数字（0、1、2...)
  // 数组的元素个数成为数组长度（length）
  const arr = [10, 'admin', true];
  console.log(arr);
  /* 输出如下：
   * (3) [10, 'admin', true]
   * 0: 10
   * 1: "admin"
   * 2: true
   * length: 3
   */
  // 访问数组元素：[key]
  console.log(arr[1]);    // 输出：admin
  // 如何判断是否为数组：Array.isArray()
  console.log(typeof arr);    // 输出：object，无法判断为数组
  console.log(Array.isArray(arr));    // 返回 true：是数组；返回 false：不是数组
  /* 2，对象 */
  // 与数组是由区别的，可以视为键为语义化的数组，类似 php 中的关联数组
  // 对象元素包括属性和方法
  let user ={
      // 属性
      id: 10,
      uname: 'admin',
      isMarried: true,
      'my email': 'email@qq.com'
  }
  // 访问对象元素，同数组访问方式：['key']
  console.log(user['id']);
  // 如果键名都是合法标识符，可用"."来访问元素
  console.log(user.uname);
  // 如果键名是非法标识符，则必须用数组访问方式：['key']
  console.log(user['my email']);
  // 对象可用将一个方法（函数）进行封装
  let user ={
      // 属性
      id: 10,
      uname: 'admin',
      // 方法
      show: function (){
          return `id = ${this.id}, uname = ${this.uname}`;
      }
  }
  console.log(user.show());    // 输出：id = 10, uname = admin
  // 注意，定义方法的匿名函数不能简化为箭头函数，因为箭头函数没有自己的 this。
  /* 3，函数 */
  // 定义一个空的匿名函数 fn
  let fn = function (){};
  console.log(fn);    // 输出：ƒ (){}
  // 因为函数也是对象，所以可用添加属性
  fn.price = 18;
  fn.uname = 'admin';
  console.log(fn.price);    // 输出：18
  // 也可以添加方法
  fn.greet = function (uname){
      return 'Hello, ' + uname;
  }
  console.log(fn.greet('Tony'));    // 输出：Hello, Tony