揭开JavaScript数据类型的神秘面纱

🧑?🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》?、《JavaScript保姆级教程》、《krpano》

??

? 前言

????????JavaScript作为一门动态类型语言,其数据类型一直是开发者们关注的话题。本文将深入探讨JavaScript中的数据类型,揭开这块神秘的面纱。

JavaScript中主要有以下几种数据类型:

1. 基本类型(Primitive Types):包括Undefined、Null、Boolean、Number、String、Symbol这6种原始类型。
2. 引用类型(Reference Types):包括Object、Array、Function等引用类型。

????????这些不同类型的数据在存储方式、传参方式上都有区别,合理运用不同的数据类型可以编写出更优雅的代码。例如基本类型传递的是值,引用类型传递的是地址。

????????本文将详细介绍各数据类型的特征、使用场景和注意事项,帮助读者深入理解JavaScript中的数据类型,避免在开发中出现问题。

通过本文,读者可以学习到:

• 每种数据类型的定义及基本特征
• 不同数据类型的内存分配方式
• 基本类型和引用类型的区别
• 数据类型转换的规则
• 如何正确判断数据类型
• 每种数据类型的常见错误及解决方法

准备好了吗,让我们开始探索JavaScript这片神秘的数据类型之地吧!

?

Undefined

• 定义:是一个表示"无"的值。
• 特征:只有一个值undefined,类型转换为字符串会变成"undefined"。

let x; //变量声明但未初始化,默认为undefined
let y = undefined; //直接赋值为undefined

console.log(x); //undefined
console.log(y); //undefined
console.log(typeof x); //"undefined"

让我再详细解读一下Undefined类型:?

• Undefined类型只有一个值,即undefined。
• 当声明一个变量但未对其进行初始化时,该变量的值就是undefined。

  let x;
  console.log(x); // undefined

• 定义一个函数时,如果不设置返回值,则该函数的默认返回值是undefined。

  function f() {
    // no return statement 
  }
  
  let x = f(); // x is undefined

• 对一个未初始化的对象访问不存在的属性时,也会返回undefined。

  let obj = {};
  console.log(obj.name); // undefined

• void操作符会使任何表达式返回undefined。

  let x = void(0); // x is undefined

• 函数参数未传入时,该参数等于undefined。

  function f(x) {
    console.log(x); // undefined
  }
  
  f();

• 任何数据类型与undefined进行运算时,结果都为NaN。

  undefined + 1 // NaN
  undefined - 1 // NaN

?????????综上所述,Undefined类型表示"无"的值,在变量未初始化、函数没有返回值等场景下会返回undefined。需要注意undefined与null的区别,null表示空值,需要手动设置,而undefined由系统自动初始化。

NULL

• 定义:表示一个空值。
• 特征:只有一个值null,类型转换为字符串会变成"null"。

let x = null;

console.log(x); //null
console.log(typeof x); //"object"

让我来详细解读一下Null类型:

• Null类型只有一个值,即null。它代表空值。
• null需要由开发者手动设置,表示一个空对象引用。

  let x = null;

• 和undefined不同,null是一个有意义的空值,而undefined是一个未定义的值。
• 当想表示一个变量将来用于保存对象,还不知道会保存哪个对象时,可以将该变量初始化为null。

  let obj = null; // 后面会给obj赋值为对象

• null的类型为object,这是JS存在的怪癖之一。

  typeof null // "object"

• null通常用来表示不存在的对象,作为函数的参数表示对象不合法。

  function setName(obj) {
    obj.name = "Jack"; 
  }
  
  setName(null); // obj不合法,会报错

• null与undefined的相等运算结果为true。

  null == undefined // true

????????总之,null是一个特殊的空值,需要开发者手动设置,主要用于表示不存在的对象引用,与undefined的区别需要牢记。

?Boolean

• 定义:表示逻辑上的真或假的值。
• 特征:只有true和false两个值。

let x = true;
let y = false;

let a = Boolean(1); //true
let b = Boolean(0); //false

关于Boolean类型,让我详细解读如下:

• Boolean表示逻辑上的值true和false。
• 它有两个字面值:true和false。
• 布尔值常用于逻辑表达式和流程控制。

  let a = true;
  let b = false;
  
  if (a) {
    // 执行代码
  }

• 调用Boolean函数可以将其他类型的值转换为布尔值。

  Boolean(1); // true
  Boolean(0); // false
  Boolean("hello"); // true
  Boolean(""); // false

• 以下值转换为false:0、NaN、null、undefined、空字符串。其他值都转换为true。
• 逻辑运算符如&&、||、!可以对布尔值进行运算。

  true && false // false
  true || false // true 
  !true // false

• 条件表达式会隐式进行布尔转换。

  if (score) { } // score不为0都会执行

• Boolean是基于二进制的,但JS不支持Bit运算。

????????Boolean有true和false两个值,用于逻辑判断和流程控制。可以用Boolean函数将其他类型转换为布尔值,并支持逻辑运算。正确使用布尔类型可以使代码更简洁。

Number

• 定义:用于表示数值,如整数和浮点数。
• 特征:支持各种运算,可以表示正数、负数、0。

let x = 3; 
let y = 3.14;

let a = x + y;

让我来详细解读下JavaScript中的Number类型:

????????Number类型可以表示整数和浮点数,但有精度限制。支持各种运算方法,但也有最大和最小表示范围。需要注意其中特殊值的含义。

String

let s = 'hello';
let s2 = "world"; 

let s3 = s + ' ' + s2; //连接
console.log(s3[0]); //访问单个字符

让我来详细解读下JavaScript中的String类型:

????????String用于文本数据,可以拼接、查找子串、大小写转换等,模板字符串提供高级语法。需要注意String是不可变的。

Symbol

let x = Symbol('demo');
let y = Symbol('demo'); 

console.log(x === y); //false,值唯一

让我来详细解读下JavaScript中新增的Symbol类型:

????????Symbol可以创建唯一的值,不会发生冲突,用于解决命名问题,也可以用于定义对象的属性名。但不能进行运算,需要转成字符串才能输出。

?

? 结语? ?

????????JavaScript作为一门动态类型语言,其丰富的数据类型是其极大优势之一。通过本文的详细介绍,相信大家对各种数据类型已经有了更深入的了解。

????????我们重点探讨了六种基本数据类型的定义、特征、使用场景和注意事项,并辅以大量代码实例加深理解。此外,我们还对基本类型和引用类型的区别进行了概述。

????????数据类型的运用贯穿整个JavaScript程序开发。合理选择和使用数据类型,对编写简洁优雅的代码 big必须。同时,深入理解数据类型也是避免潜在问题的重要一步。

????????本文内容仅是JavaScript数据类型这个宏大主题的一瞥。如果大家对某些数据类型还有疑问,欢迎在评论区留言讨论。我们会持续关注数据类型相关的新特性,并带来更多高质量的内容。

????????再次感谢大家的阅读!希望本文可以成为你JavaScript数据类型学习的知识体系指南。让我们继续探索JavaScript的世界,发现更多精彩。

?

• Number用于表示数字,包括整数和浮点数。
• JavaScript不区分整数和浮点数,都使用Number类型。

  let a = 123; //整数
  let b = 3.14; //浮点数 
  
  typeof a; //"number"
  typeof b; //"number"

• Number类型使用IEEE 754标准表示,可以表示正数、负数和0。
• 但Number类型的整数精度有限,大于2^53-1的整数无法精确表示。

  Math.pow(2, 53); //精确的值
  Math.pow(2, 53) + 1; //无法精确表示,会舍入

• Number提供各种运算方法,如isNaN(), toFixed(), toPrecision()等。
• Number可以表示的最大值约为1.79e+308,最小值约为-1.79e+308。超出此范围无法表示。
  • 特殊的Number值:
    • Infinity代表无穷大
    • -Infinity代表无穷小
    • NaN代表非数值
  • Number可以通过parseInt(), parseFloat()进行转换。
  • 定义:用于表示文本类型的数据。
  • 特征:用单引号或双引号包裹起来,支持连接、访问单个字符等。
  • String用于表示文本的数据,需要使用单引号或双引号包裹。

    let s = 'hello';
    let s2 = "world";

  • 可以使用+进行字符串拼接。

    let s3 = s + ' ' + s2; // "hello world"

  • 可以通过索引访问字符串中的单个字符。

    let s = 'hello';
    s[0]; // 'h'

  • 常用的字符串方法:
    • length属性
    • indexOf()/lastIndexOf()
    • slice()/substring()/substr()
    • toUpperCase()/toLowerCase()
    • split()/join()
  • 可以使用\进行转义,像\n、\t等。
  • 模板字符串使用反引号,可以内嵌表达式。

    let n = 123;
    `${n} is a number`; // "123 is a number"

  • String是不可变的(immutable),方法不会改变原字符串。
  • 定义:一种唯一且不可变的数据类型,可以作为对象属性的标识符。
  • 特征:每次调用会返回一个唯一的值。
  • Symbol是ES6中新增的一种基本数据类型。
  • Symbol的值是唯一的,每个从Symbol()返回的值都不相等。

    let s1 = Symbol('foo');
    let s2 = Symbol('foo');
    
    s1 === s2; // false

  • Symbol主要用于解决命名冲突问题。
  • 可以给Symbol附加一个描述,便于调试。

    let s1 = Symbol('foo');

  • Symbol不能与其他类型的值进行运算。

    let sym = Symbol('a');
    sym + 'x'; // TypeError

  • Symbol可以显式转为字符串或者Boolean值。

    let sym = Symbol('a');
    String(sym); // "Symbol(a)"  
    Boolean(sym); // true

  • Symbol值可以作为对象属性的标识符,该属性是公有属性而非私有属性。

    let sym = Symbol('a');
    let obj = {
      [sym]: function() {} 
    };