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

首页 > 博客列表 > JavaScript 常用的函数类型和数据类型

博主信息

博文 29

粉丝 0

访问量 17059

专题推荐

更多>

（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