首页 > 编程语言 >揭秘JavaScript数据世界:一文通晓基本类型和引用类型的精髓!

揭秘JavaScript数据世界:一文通晓基本类型和引用类型的精髓!

时间:2024-04-28 11:56:30浏览次数:40  
标签:函数 Symbol JavaScript 数据类型 let 数组 类型 揭秘 undefined

在编程的世界里,数据是构建一切的基础。就像建筑师需要了解不同材料的强度和特性一样,程序员也必须熟悉各种数据类型。

今天,我们就来深入探讨JavaScript中的数据类型,看看它们如何塑造我们的代码世界。

一、JavaScript数据类型简介

数据类型是计算机语言的基础知识,数据类型广泛用于变量、函数参数、表达式、函数返回值等场合。JavaScript语言的每一个值,都属于某一种数据类型。

JavaScript的数据类型主要分为两大类:基本数据类型和引用数据类型。下面就来详细介绍这两类数据类型中都包含哪些及如何使用它们。

二、基本(值类型)数据类型

首先,让我们从最基本的数据类型开始。JavaScript的基本数据类型包括:字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、符号(Symbol)。

1、字符串(String)

tring类型用于表示由零或多个16位的Unicode字符组成的字符序列,即字符串。至于用单引号,还是双引号,在js中还是没有差别的。记得成对出现。

let name1 = '张三'
let name2 = "李四"
let name3 = `王五`

1.转换为字符串有2个方法:toString()、String()
  let n = 100
  n.toString() // '100' 数值类型转换为字符串类型
  String(200) // '200' 数值类型转换为字符串类型

2.模板字符串相当于加强版的字符串,可以定义多行字符串。还可以利用${}在字符串中插入变量和表达式
  let name = '张三丰'
  let age = 180
  `我叫${name},今年${age}岁啦!`  // 我叫张三丰,今年180岁啦!

2、数字(Number)

该类型的表示方法有两种形式,第一种是整数,第二种为浮点数。整数:可以通过十进制,八进制,十六进制的字面值来表示。

浮点数:就是该数值中必须包含一个小数点,且小数点后必须有一位数字。

let num = 100  // 整数
let floatNum = 3.14  // 浮点数
// toFixed() 方法可以对计算结果进行四舍五入
let pi = Math.PI // 3.141592653589793
pi.toFixed(2) // 3.14  保留2位小数

// 八进制的值第一位必须是零0,后面每一位数的范围在0~7。如果某一位数超出范围,首位的0会被忽略,后面的数值会按照十进制来解析
let octalNum1 = 076  // 八进制的 63
let octalNum2 = 083  // 八进制 83
let octalNum3 = 06  // 八进制 6

// 十六进制的值前两位必须是0x,后面每一位十六进制数字的范围在0~9及A~F,字母A~F可以大写也可以小写。
let hexNum1 = 0xA  // 十六进制 10
let hexNum2 = 0x3f  // 十六进制 63

// 数值转换的三个方法 Number()、parseInt()、parseFloat()

1.Number()  // 可以将字符串、布尔值、null、undefined 等转换为对应的数值,如果无法转换返回NaN
  Number("123") // 输出123
  Number("hello") // 输出NaN


2.parseInt() // 可以将字符串转换为整数,如果无法转换返回NaN
  parseInt("123") // 输出123
  parseInt("123.45") // 输出:123
  parseInt("hello") // 输出NaN


3.parseFloat() // 可以将字符串转换为浮点数,如果无法转换返回NaN
  parseFloat("123.45") // 输出123.45
  parseFloat("hello") // 输出NaN

3、布尔(Boolean)

Boolean 数据类型只有两个值:true 和 false,分别代表真和假。很多时候我们需要将各种表达式和变量转换成 Boolean 数据类型来当作判断条件。

1.数值运算判断

  1 + 2 === 3 // true
  1 + 1 > 3 // false


2.数值类型转换
  let bool1 = Boolean(0);         // 数值转换为布尔值
  let bool2 = Boolean("");        // 字符串转换为布尔值
  let bool3 = Boolean(null);      // null 转换为布尔值
  let bool4 = Boolean(undefined); // undefined 转换为布尔值
  let bool5 = Boolean(NaN);       // NaN 转换为布尔值
  let bool6 = Boolean([]);        // 空数组转换为布尔值
  let bool7 = Boolean({});        // 空对象转换为布尔值

ECMAScript 类型的值都有与布尔值等价的形式。可以调用 Boolean() 函数来将其他类型转换为布尔值。不同类型转换为布尔值的规则如下表

4、未定义(Undefined)

在 JavaScript 中,undefined 是一个特殊的值和数据类型。当一个变量声明但未赋值时,该变量的值就是 undefined。它表示一个未定义或未初始化的值。

1.声明但未赋值的变量
  
  // 当使用 var、let 或 const 声明一个变量但未对其赋值时,该变量的初始值为 undefined。
  let n;
  console.log(n) // 输出 undefined


2.未定义的属性
  
  // 当访问一个不存在的属性时,该属性的值为undefined 
  let obj = { name: '张三丰' }
  console.log(obj.age) // 输出 undefined


3.函数没有返回值
  
  // 如果函数没有明确返回值或者使用 return 语句返回一个未定义的值,函数的返回值将是 undefined
  function getName() {
      // 没有返回值
  }
  console.log(foo()) // 输出 undefined


4.函数参数未传递
  
  // 如果函数定义了参数但未传递相应的值,那么该参数的值将是 undefined
  function getName(name) {
      console.log("Hello, " + name)
  }
  getName() // 输出:Hello, undefined

5、空(Null)

在 JavaScript 中,null 是一个特殊的值和数据类型。它表示一个空值或者不存在的对象。

与undefined不同,null是JavaScript 保留关键字,而 undefined 只是一个常量。也就是说可以声明名称为 undefined 的变量,但将 null 作为变量使用时则会报错。

1.空值
  
  // null 表示一个空值,用于表示变量的值为空
  let name = null
  console.log(name) // 输出 null


2.不存在的对象
 
  // 当使用 typeof 运算符检测一个值为 null 的对象时,会返回 "object"
  let obj = null
  console.log(typeof obj)  // 输出:object

null 与 undefined 区别

undefined 是表示一个未定义或未初始化的值,常用于声明但未赋值的变量,或者访问不存在的属性。

null 是一个被赋予的值,用于表示变量被故意赋值为空。

在判断变量是否为空时,使用严格相等运算符(===),因为 undefined 和 null 在非严格相等运算符(==)下会相等。

let x;
let y = null;
console.log(x === undefined)  // 输出:true
console.log(x === null)       // 输出:false
console.log(y === null)       // 输出:true
console.log(y === undefined)  // 输出:false

6、符号(Symbol)

符号 (Symbols) 是 ECMAScript 第 6 版新定义的。符号类型是唯一的并且是不可修改的。

1.创建Symbol

  // 使用全局函数 Symbol() 可以创建一个唯一的 Symbol 值
  let s = Symbol()
  console.log(typeof s) // 输出 symbol


2.唯一性
  
  // 每个通过 Symbol() 创建的 Symbol 值都是唯一的,不会与其他 Symbol 值相等,即使它们的描述相同
  let s1 = Symbol()
  let s2 = Symbol()
  console.log(s1 == s2) // 输出 false
  let s3 = Symbol('hello')
  let s4 = Symbol('hello')
  console.log(s3 == s4) // 输出 false


3.Symbol 常量

  // 通过 Symbol.for() 方法可以创建全局共享的 Symbol 值,称为 Symbol 常量
  let s5 = Symbol.for('key')
  let s6 = Symbol.for('key')
  console.log(s5 === s6)  // 输出 true

Symbol 的主要作用是创建独一无二的标识符,用于定义对象的属性名或者作为一些特殊的标记。它在一些特定的应用场景中非常有用,如在迭代器和生成器中使用 Symbol.iterator 标识可迭代对象。

三、引用数据类型

除了基本数据类型,JavaScript还有引用数据类型:对象(Object)、数组(Array)和函数(Function)

1、对象(Object)

Object 是一个内置的基本数据类型和构造函数。是一组由键、值组成的无序集合,定义对象类型需要使用花括号{ },它是 JavaScript 中最基本的对象类型,也是其他对象类型的基础。

1.创建对象
  
  // Object 类型可以用于创建新的对象。可以使用对象字面量 {} 或者通过调用 Object() 构造函数来创建对象
  let obj1 = {} // 使用对象字面量创建空对象
  let obj2 = new Object() // 使用 Object() 构造函数创建空对象


2.添加、修改、删除属性

  let obj = {}
  obj.name = '张三丰'  // 添加属性
  obj.age = 30        // 添加属性
  obj.name = '张无忌' // 修改属性
  delete obj.age     // 删除属性

2、数组(Array)

JavaScript 中,数组(Array)是一组按顺序排列的数据的集合,数组中的每个值都称为元素,而且数组中可以包含任意类型的数据。

在 JavaScript 中定义数组需要使用方括号[ ],数组中的每个元素使用逗号进行分隔。

数组的特点有哪些?

有序集合: 数组是一种有序的数据集合,每个元素在数组中都有一个对应的索引,通过索引可以访问和操作数组中的元素。

可变长度: 数组的长度是可变的,可以根据需要动态添加或删除元素,或者修改数组的长度。可以使用 push()、pop()、shift()、unshift() 等方法来添加或删除元素,也可以直接修改数组的 length 属性来改变数组的长度。

存储不同类型的值: 数组可以存储任意类型的值,包括基本类型和对象类型。同一个数组中可以混合存储不同类型的值。

索引访问: 通过索引来访问数组中的元素,索引从 0 开始。可以使用方括号语法 [] 或者点号语法 . 来访问数组的元素。

内置方法: 数组提供了许多内置的方法,用于对数组进行常见的操作和处理,如添加、删除、查找、排序、遍历等。常用的数组方法包括 push()、pop()、shift()、unshift()、concat()、slice()、splice()、indexOf()、forEach()、map()、filter()、reduce() 等。

可迭代性: 数组是可迭代的,可以使用 for…of 循环或者 forEach() 方法遍历数组中的元素。

1.创建数组
  
  // 可以使用数组字面量 [] 或者通过调用 Array() 构造函数来创建数组。
  let arr1 = []  // 使用数组字面量创建空数组
  let arr2 = new Array() // 使用 Array() 构造函数创建空数组
  let arr3 = [1, 2, 3]  // 使用数组字面量创建包含初始值的数组


2.访问和修改数组元素

  // 数组的元素通过索引访问,索引从 0 开始。可以使用索引来读取或修改数组的元素。
  let arr = [1, 2, 3]
  console.log(arr[0]) // 访问数组的第一个元素,输出:1
  arr[1] = 5 // 修改数组的第二个元素
  arr.length // 获取数组长度,输出:3

3、函数(Function)

ECMAScript中的函数是对象,与其他引用类型一样具有属性和方法。因此,函数名实际是一个指向函数对象的指针。

1.创建函数
  
  // 可以使用函数声明或函数表达式来创建函数。函数声明使用 function 关键字,后面跟着函数名称和函数体,而函数表达式将函数赋值给一个变量。
  // 函数声明
  function add(a, b) {
    return a + b
  }

  // 函数表达式
  let multiply = function(a, b) {
    return a * b
  }


2.函数调用

  // 函数可以通过函数名后面加括号 () 进行调用。调用函数时,可以传递参数给函数,函数可以接收参数并进行相应的处理。
  let result = add(3, 5) // 调用 add 函数并传递参数
  console.log(result)   // 输出:8


3.函数返回值

  // 函数可以使用 return 语句返回一个值,也可以不返回任何值。当函数执行到 return 语句时,会立即停止执行,并将返回值传递给函数调用者。
  function calculateSum(a, b) {
    return a + b
  }
  let result = calculateSum(2, 3)
  console.log(result) // 输出:5


4.函数作用域

  // 函数作用域是指函数内部声明的变量在函数内部有效,外部无法访问。函数内部定义的变量只能在函数内部被访问和使用,在函数外部是不可见的。

  function myFunction() {
     var x = 10       // 局部变量
     console.log(x)  // 在函数内部可见
  }
  myFunction()     // 输出:10
  console.log(x)  // 报错:x is not defined

此外,JavaScript还有一些特殊的数据类型,如Date(表示日期和时间)、RegExp(表示正则表达式),以及ES6新增的Map、Set、WeakMap和WeakSet,用于存储特定类型的数据。

想要快速入门前端开发吗?推荐一个前端开发基础课程,这个老师讲的特别好,零基础学习无压力,知识点结合代码,边学边练,可以免费试看试学,还有各种辅助工具和资料,非常适合新手!点这里前往学习哦!

四、数据类型检测

检测数据类型可以使用typeof操作符,它可以检测基本数据类型和function,但无法区分不同的引用数据类型。

var arr = [
    null,      // object
    undefined, // undefined
    true,      // boolean
    12,        // number
    'haha',    // string
    Symbol(),  // symbol
    20n,       // bigint
    function(){}, // function
    {},        // object
    [],        // object
]
for (let i = 0; i < arr.length; i++) {
    console.log(typeof arr[i])
}

掌握JavaScript数据类型是成为一名高效开发者的关键。它们是构建程序的砖石,理解它们的用法和限制将使你能够构建更稳健、更可维护的代码。

现在,你已经了解了JavaScript的数据类型,是时候在你的代码中运用这些知识了。记住,实践是学习的最佳方式,所以动手尝试吧!

如果觉得本文对你有所帮助,别忘了点赞和分享哦!

标签:函数,Symbol,JavaScript,数据类型,let,数组,类型,揭秘,undefined
From: https://www.cnblogs.com/ydyxcode/p/18163412

相关文章

  • openGauss 数据类型
    数据类型数值类型表1列出了所有的可用类型。表1整数类型名称描述存储空间范围TINYINT微整数,别名为INT1。1字节0~255SMALLINT小范围整数,别名为INT2。2字节-32,768~+32,767INTEGER常用的整数,别名为INT4。4字节-2,147,483,648~+2,14......
  • 加速博客体验:静态资源优化技巧大揭秘!
    如今有许多人涉足博客写作,其中大多数正处于博客创作的旅程中。每位程序员都梦想拥有自己的服务器,理想情况下,服务器配置越高越好,价格越实惠越好。购买一台基础款服务器用于建立博客是一个不错的选择,因为并不需要处理大流量。这完全是出于个人兴趣和坚持写作的良好习惯。当然了写博......
  • 在html中应用JavaScript
    1.在html中调用jsjs需要用<script>脚本写入位置</script>声明;也可以用外部文件引入,如<scripttype="text/javascript"src="script1.js"></script>。当js位于html的<head>内:这些脚本在选择触发它的时候被触发当js位于html的<body>内:这些脚本在页面加载时触发2.js的数据类......
  • 在JavaScript中,DOM对象与jQuery对象的区别与转换
    Dom原生对象和jQuery对象的区别:jQuery选择器得到的jQuery对象和标准的js中的document.getElementById()取得的dom对象是两种不同类型,两者不等价。注:js原生获取的dom是一个对象;jQuery对象就是一个数组对象。JQuery无法使用DOM对象的任何方法,同样的DOM对象也不能使用JQuery里......
  • DOM的节点类型和新增节点
    nodeType:nodeNamenodeTypenodeValue元素1标签元素文本3标签内的文本注释8注释新增节点:vartest=function(){vardiv=document.creatElement("div");div.setAttribute=("style","color:red");div.innerHTML="这是d......
  • 初中中考阅读理解难题一网打尽!句子结构深度解析+答案揭秘,助你轻松冲刺高分!-012
    PDF格式公众号回复关键字:ZKYDT012原文1Richardfoundthebirdintheforest,didn’the?解析1Richard,found发现了,thebird这只鸟,intheforest在森林里,didn’the?不是吗理查德在森林里发现了这只鸟,不是吗?2Hesawastrangebirdinabush.他在灌木丛......
  • 探索 DTD 在 XML 中的作用及解析:深入理解文档类型定义
    DTD是文档类型定义(DocumentTypeDefinition)的缩写。DTD定义了XML文档的结构以及合法的元素和属性。为什么使用DTD通过使用DTD,独立的团体可以就数据交换的标准DTD达成一致。应用程序可以使用DTD来验证XML数据的有效性。内部DTD声明如果DTD在XML文件内声......
  • javascript高级编程系列 - 使用fetch发送http请求
    fetch采用模块化设计,api分散在多个对象上(Response对象,Request对象,Header对象),fetch通过数据流(stream对象)处理数据可以分块读取,有利于提高网站性能。发送GET请求fetch函数只传递一个url,默认以get方法发送请求。promisefetch(url).then(response=>response.json()).......
  • JavaScript---FileReader、Blob、File对象
    ArrayBuffer对象,Blob对象ArrayBuffer对象ArrayBuffer对象表示一段二进制数据,用来模拟内存里面的数据。通过这个对象,JavaScript可以读写二进制数据。这个对象可以看作内存数据的表达。这个对象是ES6才写入标准的,普通的网页编程用不到它,为了教程体系的完整,下面只提供一......
  • 支付宝JavaScript跳转领取红包
    代码如下<!DOCTYPEhtml><html><head> <title>赚钱红包</title> <metacharset="utf-8"> <metaname="wechat-enable-text-zoom-em"content="true"> <metahttp-equiv="Content-Type"......