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

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
JavaScript 常用的函数类型和数据类型(1)函数
  • 命名函数:function

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

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

    1. // 箭头函数是匿名函数的简写
    2. // 1,删除 function
    3. // 2,(){} 简化为 () => {}
    4. let sum = (a,b) => {
    5. return `${a} + ${b} = ${a + b}`;
    6. }
    7. console.log(sum(2,6)); // 输出:2 + 6 = 8
    8. // 参数简化
    9. // 1,单参数,可以省略括号
    10. let userName = (uname) => {
    11. return `Hello ${uname}`;
    12. }
    13. // 可以简化为
    14. let userName = uname => {
    15. return `Hello ${uname}`;
    16. }
    17. console.log(userName('Tom')); // 输出:Hello Tom
    18. // 2,无参数,一定要加括号
    19. let greeting = () =>{
    20. return "Hello World!";
    21. }
    22. console.log(greeting()); // 输出:Hello World!
    23. // 返回值简化
    24. // 如果只有一条 return 语句,可以不写{} 和 return
    25. let sum = (a,b) => `${a} + ${b} = ${a + b}`;
    26. console.log(sum(1,2)); // 输出:1 + 2 = 3
    27. // 注意事项
    28. // 1,箭头函数没有自己的 this,不能用于构造函数
    29. // 2,它的 this 由它的上下文确定(执行环境)
  • 立即执行函数:(function(){})()

    1. // 声明与调用二合一(声明时立即调用):IIFE
    2. // 写完就执行完了,所以时一次性的,肯定时匿名函数
    3. let result = (function (a,b){
    4. return `${a} + ${b} = ${a + b}`;
    5. })(1,2);
    6. console.log(result); // 输出:1 + 2 = 3
(2)数据类型
  • 原始类型:stringnumberbooleannullundefined

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

    1. /* 1,数组 */
    2. // 一组数据集合,每个数据称为数组元素。
    3. // 数组元素由键(索引)、值组成,键默认为数字(0、1、2...)
    4. // 数组的元素个数成为数组长度(length)
    5. const arr = [10, 'admin', true];
    6. console.log(arr);
    7. /* 输出如下:
    8. * (3) [10, 'admin', true]
    9. * 0: 10
    10. * 1: "admin"
    11. * 2: true
    12. * length: 3
    13. */
    14. // 访问数组元素:[key]
    15. console.log(arr[1]); // 输出:admin
    16. // 如何判断是否为数组:Array.isArray()
    17. console.log(typeof arr); // 输出:object,无法判断为数组
    18. console.log(Array.isArray(arr)); // 返回 true:是数组;返回 false:不是数组
    19. /* 2,对象 */
    20. // 与数组是由区别的,可以视为键为语义化的数组,类似 php 中的关联数组
    21. // 对象元素包括属性和方法
    22. let user ={
    23. // 属性
    24. id: 10,
    25. uname: 'admin',
    26. isMarried: true,
    27. 'my email': 'email@qq.com'
    28. }
    29. // 访问对象元素,同数组访问方式:['key']
    30. console.log(user['id']);
    31. // 如果键名都是合法标识符,可用"."来访问元素
    32. console.log(user.uname);
    33. // 如果键名是非法标识符,则必须用数组访问方式:['key']
    34. console.log(user['my email']);
    35. // 对象可用将一个方法(函数)进行封装
    36. let user ={
    37. // 属性
    38. id: 10,
    39. uname: 'admin',
    40. // 方法
    41. show: function (){
    42. return `id = ${this.id}, uname = ${this.uname}`;
    43. }
    44. }
    45. console.log(user.show()); // 输出:id = 10, uname = admin
    46. // 注意,定义方法的匿名函数不能简化为箭头函数,因为箭头函数没有自己的 this。
    47. /* 3,函数 */
    48. // 定义一个空的匿名函数 fn
    49. let fn = function (){};
    50. console.log(fn); // 输出:ƒ (){}
    51. // 因为函数也是对象,所以可用添加属性
    52. fn.price = 18;
    53. fn.uname = 'admin';
    54. console.log(fn.price); // 输出:18
    55. // 也可以添加方法
    56. fn.greet = function (uname){
    57. return 'Hello, ' + uname;
    58. }
    59. console.log(fn.greet('Tony')); // 输出:Hello, Tony
【文章原创作者:阿里云代理 http://www.558idc.com/aliyun.html 复制请保留原URL】