JavaScript基础——JavaScript数据及数据类型

JavaScript中数据的分类

数据是指设备、浏览器可以识别的内容。在JavaScript中，数据可分为基本数据类型（值数据类型）和引用数据类型。

console.log()函数

浏览器中按下F12或者右击检查，可以打开控制台。

在JavaScript中，经常利用console.log()在控制台观察数据的输出，检查代码是否执行，变量是否有值等。

typeof

在JavaScript 中，typeof是一个一元操作符，用于返回一个值的数据类型。当想知道一个变量或表达式的数据类型时，可以使用typeof来获取。

基本数据类型

JavaScript是一种动态类型语言，它提供了几种基本数据类型，用于存储原始数据，要注意，数据类型是首字母小写的，因为大写的表示的是构造函数，基本数据类型如下表：

数据类型	含义
string	字符串类型，用于表示文本数据，由16位的UTF-16编码单元组成。
number	数字类型，包括整数和浮点数。JavaScript的`Number`类型是64位浮点数，遵循IEEE 754标准。
boolean	表示逻辑实体，只有两个值：`true`和`false`。
undefined	表示未定义的值。当变量声明了但未被赋值时，默认就是`undefined`。
null	表示空值。它表示一个变量没有指向任何对象。
bigInt	表示大于`2^53 - 1`的整数。`BigInt`可以安全地表示和操作大整数。
symbol	ES6引入的新类型，表示一个唯一的、不可变的、原始值。

string

string表示文本数据，用引号（英文状态下的单引号''、双引号""、反单引号``。反单引号在键盘第二列第一个按键）包裹的字符。

默认情况下，浏览器不能直接识别abc，直接输出会报错ReferenceError: abc is not defined，用引号包裹，'abc'，成为字符串后才能被浏览器识别。

用typeof语句检测，可以发现'abc'是字符串string类型。

number

number类型就是平时的数字，浏览器可以直接识别

用typeof语句检测，可以发现123是数字number类型。

boolean

boolean表示逻辑实体，只有两个值：true和false。

用typeof语句检测，可以发现true和false是布尔boolean类型。

undefined

undefined表示未定义的值。

用typeof语句检测，可以发现undefined是undefined类型。

当变量声明了但未被赋值，或者变量不存在时，默认就是undefined。

声明一个变量a，用typeof语句检测，可以发现a是undefined类型。

未声明变量，直接console.log输出，用typeof语句检测，可以发现a是undefined类型。

null

null表示空值。它表示一个变量没有指向任何对象。用typeof语句检测，可以发现null是object类型。

整体代码

    <script>
        // 1）'a' "a" `a` 字符串
        // console.log(abc); //报错ReferenceError: abc is not defined
        console.log('abc'); // abc
        console.log(typeof abc); // string

        // 2）（0-9）组成的数字
        console.log(123);   // 123
        console.log(typeof 123); // number

        // 3）true false 布尔值
        console.log(true); // true
        console.log(false); // false

        // 4） undefined 未定义 （缺少值）
        console.log(typeof true); // boolean
        console.log(typeof false);  // boolean

        console.log(undefined); // undefined
        console.log(typeof undefined); // undefined

        var a;
        console.log(a); // undefined
        console.log(typeof a);  // undefined

        // 5）null 空值
        console.log(null); // null
        console.log(typeof null);   // object
    </script>

引用数据类型

引用数据类型存储的是指向数据的引用（内存地址），包括：

数据类型	含义
object	对象类型，可以包含属性和方法。
array	数组类型，是特殊类型的对象，用于存储有序的数据集合。
function	函数类型，可以被调用执行一段代码。

object

在JavaScript中，object是所有其他对象的基类型，它是一个引用数据类型，是以键值对形式出现的数据集合，对象可以包含属性和方法，属性可以是基本数据类型，也可以是其他对象或函数。

对象的创建

有几种方式可以创建对象：

对象字面量：使用花括号 {} 来定义对象。

let person = {
    name: "Xiaoming",
    age: 25,
    greet: function() {
        console.log("Hello!");
    }
};

构造函数：使用函数来创建对象，构造函数通常以大写字母开头。

function Person(name, age) {
    this.name = name;
    this.age = age;
}
let person = new Person("Xiaoming", 25);

Object 构造函数：使用 new Object() 来创建一个新对象。

let person = new Object();
person.name = "Xiaoming";
person.age = 25;

ES6 类：使用 class 关键字定义类，然后创建类的实例。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
let person = new Person("Xiaoming", 25);

对象的属性和方法

对象的属性可以是任何数据类型，包括基本数据类型、其他对象或函数。属性可以通过点符号（.）或方括号（[]）来访问或设置。

console.log(person.name); // 使用点符号访问属性
console.log(person['age']); // 使用方括号访问属性

person.greet(); // 调用对象的方法

array

在JavaScript中，array是一种特殊的对象，用于存储有序的数据集合。数组中的每个元素可以是任何类型，包括数字、字符串、对象，甚至是函数或其他数组。

数组的特点

有序：数组中的元素按照特定的顺序排列，可以通过索引访问。
可变：数组的大小可以动态变化，可以添加或删除元素。
索引：数组元素可以通过索引访问，索引从0开始。

数组的创建

数组字面量：使用方括号 [] 来创建数组。

let fruits = ["Apple", "Banana", "Cherry"];

Array构造函数：使用 new Array() 来创建数组。

let fruits = new Array("Apple", "Banana", "Cherry");

数组的属性和方法

属性：Array.length：数组元素的数量。

方法：

方法	含义
`push(element)`	向数组末尾添加一个或多个元素，并返回新的长度。
`pop()`	移除数组的最后一个元素，并返回该元素。
`shift()`	移除数组的第一个元素，并返回该元素。
`unshift(element)`	在数组的开头添加一个或多个元素，并返回新的长度。
`splice(index, howMany, elementN...)`	添加或删除数组元素。
`slice(start, end)`	返回一个新数组，包含从开始到结束（不包括结束）的数组的一部分。
`indexOf(element)`	返回数组中元素第一次出现的索引，如果未找到则返回-1。
`find(callback)`	返回数组中满足提供的测试函数的第一个元素的值。
`map(callback)`	创建一个新数组，其元素是调用 `callback` 函数后的返回值。
`filter(callback)`	创建一个新数组，包含通过 `callback` 函数测试的所有元素。
`reduce(callback)`	将数组中的所有元素从左到右累加，返回累加的结果。

function

在JavaScript中，function是一种引用数据类型，它允许你定义可执行的代码块。函数可以接收输入（称为参数），执行代码，并且可以返回输出。

函数的创建

函数声明：使用 function 关键字定义函数。

function greet(name) {
    console.log("Hello, " + name + "!");
}

函数表达式：将函数赋值给变量。

const greet = function(name) {
    console.log("Hello, " + name + "!");
};

构造函数：使用 new Function() 创建一个动态函数。

const greet = new Function('name', 'console.log("Hello, " + name + "!");');

箭头函数（ES6引入）：使用 => 语法定义函数。

const greet = (name) => console.log("Hello, " + name + "!");

函数的参数和返回值

参数：函数可以有零个或多个参数，它们是函数调用时传递给函数的值。

返回值：使用 return 语句从函数返回一个值。如果没有 return 语句，函数默认返回 undefined。

函数的作用域

函数有自己的局部作用域，其中定义的变量在函数外部是不可见的。

函数的调用

使用函数名后跟圆括号 () 来调用函数，圆括号内可以包含传递给函数的参数。

函数的方法

call() 和 apply()：允许你在特定的作用域中调用函数，并且可以传递参数。

bind()：创建一个新的函数，在该函数被调用时，this 被绑定到提供的值。

基本数据类型和引用数据类型的区别

基本数据类型和引用数据类型在JavaScript中是两种不同的数据存储方式。简单数据类型叫做基本数据类型或值类型，复杂类型叫做引用类型。

基本数据类型（值类型），简单数据类型/基本数据类型，如数字、字符串、布尔值等，在存储变量中存储的是值本身，赋值或函数参数传递时会复制值，通常存储在内存的栈上，操作速度快，但没有方法和属性。

复杂数据类型（引用数据类型），如对象、数组和函数则存储指向实际数据的内存地址，赋值或函数参数传递时复制的是内存地址的引用，因此多个变量可能指向同一个数据实体，它们存储在堆上，可能涉及更复杂的内存管理，拥有方法和属性，并且可以通过原型链继承特性。

如图所示，假设有一个基本数据类型number类型的数据，一个引用数据类型object的数据，此时基本数据类型的值20存储在栈，引用数据类型的内存0x11233存储在栈，值存储在堆。

基本数据类型和引用数据类型修改值的问题

基本数据类型修改值

假设现在定义一个变量a值为10，定义一个变量b等于变量a，修改b的值，代码和运行效果如下：

在进行b的赋值操作时，a和b都开辟了内存空间，b只是得到了a的值，并没有指向a的地址，所以他们之间修改值互相不影响。

代码：

    <script>
        var a = 10;
        var b = a;
        console.log(b);
        b = 20;
        console.log(a);
        console.log(b);
    </script>