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 definedconsole.log('abc'); // abcconsole.log(typeof abc); // string// 2）（0-9）组成的数字console.log(123);   // 123console.log(typeof 123); // number// 3）true false 布尔值console.log(true); // trueconsole.log(false); // false// 4） undefined 未定义 （缺少值）console.log(typeof true); // booleanconsole.log(typeof false);  // booleanconsole.log(undefined); // undefinedconsole.log(typeof undefined); // undefinedvar a;console.log(a); // undefinedconsole.log(typeof a);  // undefined// 5）null 空值console.log(null); // nullconsole.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是一种特殊的对象，用于存储有序的数据集合。数组中的每个元素可以是任何类型，包括数字、字符串、对象，甚至是函数或其他数组。

数组的特点

1. 有序：数组中的元素按照特定的顺序排列，可以通过索引访问。
2. 可变：数组的大小可以动态变化，可以添加或删除元素。
3. 索引：数组元素可以通过索引访问，索引从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>

 引用数据类型修改值

        假设现在定义一个数组c，存储一个数据为100，定义一个数组d等于数组c，修改数组d的值，代码和运行效果如下：​​​​​​​ ​​​​​​​​​​​​​​

        在进行d的赋值操作时，d并没有开辟新的内存空间，直接指向了c的地址，所以修改d的值时，c的值也会被修改

        为了避免这种情况，在创建d变量时，也要开辟一片内存空间，指向一个新的引用地址，将两个变量独立，这种思想也叫做拷贝。

        假设现在定义一个数组d，开辟一片新的内存空间，定义一个数组d[0]等于数组c[0]，修改数组d[0]的值，代码和运行效果如下：​​​​​​​​​​​​​​​​​​​​​ ​​​​​​​​​​​​​​