JS基础知识01--初识JS、变量和数据类型本文详本文详尽地介绍了JavaScript的基础知识，涵盖了从初步认识Jav

一、初识JS

1.1.什么是JS？

JavaScript（简称JS）是一种具有函数优先的轻量级、解释型或即时编译型的高级编程语言。它最初由Netscape的Brendan Eich设计，用于为网页添加交互性和动态功能。JavaScript是Web开发中的核心技术之一，与HTML和CSS共同构成了现代Web应用的基础。

js就是运行在浏览器中的解释性语言,脚本语言,是单线程。

1.2.JavaScript组成

1.ECMA(European Computer Manufacture Association)：

ECMAScript是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。这是JavaScript的基础语法和语言特性的标准。它描述了JavaScript的语法、类型、变量、运算符、函数、对象等核心概念。

2.DOM-文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。它允许JavaScript访问和操作HTML文档的内容、结构和样式。通过DOM提供的接口，JavaScript可以动态地修改网页上的元素，响应用户的操作，并创建丰富的交互效果。

3.BOM-浏览器对象模型

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，BOM提供了与浏览器窗口进行交互的对象和方法。它允许JavaScript访问浏览器的功能，如控制浏览器窗口、导航历史记录、设置cookie等。BOM并不是JavaScript语言的一部分，而是由浏览器提供的。

1.3.js使用

1.基本用法：

区分大小写：JavaScript是严格区分大小写的语言。

忽略空白符：包括空格、换行和制表符。

语句结束符：语句通常以分号结束，但分号在JavaScript中是可选的，大多数情况下JavaScript会自动在行尾添加分号。

注释：单行注释使用“//”，多行注释使用“/* */”。

每句代码后最好添加一个分号，如果不加浏览器也会自动帮你添加

单引号和双引号没有任何区别，都表示字符串

2.页面输出

开发者工具输出

console.log()浏览器控制台打印输出信息，全拼应该是window.console.log()，window表示浏览器打开的窗口

console.warn()警告提示

console.error()报错提示

console.dir()输出具体内容，打印对象的所有属性

例

var getdir = document.querySelector('h1');
console.log(getdir);
consol.dir(getdir);

alert()弹出警示框

alert() 弹出警示框：全拼应该是window.alert()，会阻断程序运行，需要点击确定后才继续执行，一个按钮

confirm 用于显示一个带有指定消息和确认及取消按钮的对话框。如果访问者点击"确定"，此方法返回true，否则返回false。

例

var confirm1 = confirm('是否输入你的姓名')
console.log(confirm1);

prompt()浏览器弹出输入框

prompt() 浏览器弹出输入框，用户可以输入用于显示可提示用户进行输入的对话框。这个方法返回用户输入的字符串

var prompt1 = prompt('请输入您的密码');
console.log('您的密码是：' + prompt1);

输出到网页内容区域

document.write('document.write();');//里面内容可以是任何元素
document.write('<h1 style="color: pink;">123</h1>');
//注意：要注意
window.onload = function(){
    document.write('<h3 style="color: skyblue;"></h3>')
}

如果等加载完在执行document.write('

');write里面的内容会覆盖原来的内容

window.onload是文档完全加载完在去执行，这是文档流已经关了，在执行document.write就会用document.open()函数创建一个新的文档流，这个时候就会覆盖原来文档的内容

document，表示的是给定的浏览器窗口的html文档，其实是window的一个对象属性console.log(window)

document.write('<h1 style="color: pink;">123</h1>');
window.onload = function(){
  document.write('<h1 style="color: skyblue;"></h1>')
}

注意：

浏览器默认情况下是从上到下解析，js放到head里面，如果要通过js操作页面上的元素，是获取不到元素的，如果要写到head里，需要使用Windows.onload = function(){}函数

在页面未加载完之前获取不到，需要添加window.onload = function(){}函数，让页面先加载完

// querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
var getdiv = document.querySelector('div');
console.log(getdiv);
window.onload = function(){}页面加载完之后在执行内部代码
window.onload = function(){
  var getdiv = document.querySelector('div');
  console.log(getdiv);
}

1.4.JS书写位置

1、内联脚本

将JavaScript代码直接写在HTML标签的事件属性中，如

<button onclick="alert('Hello!')">Click me</button>

这种方式虽然简单，但不利于代码的维护和可重用性，通常不推荐使用。

2、内部脚本

将JavaScript代码放在HTML文档的<script>标签内，通常放在<head>或<body>部分。

这种方式适用于小型项目或简单的示例，但同样不利于代码的维护和可重用性。

<head>
    <script>
        // JavaScript代码
    </script>
</head>
<!--或者-->
<body>
    <script>
        // JavaScript代码
    </script>
</body>

3、外部脚本文件

将JavaScript代码写在独立的.js文件中，并通过<script>标签的src属性引入HTML文档。

这种方式最适用于大型项目，因为它有助于代码的复用、维护和调试。

<head>
    <script src="path/to/your/script.js"></script>
</head>

在外部脚本文件中，只需编写JavaScript代码，无需包含<script>标签。

4、最佳实践：

通常建议将外部脚本文件放在<body>部分的底部，以确保在脚本执行之前页面的HTML内容已经完全加载。

这有助于避免页面渲染的阻塞和性能问题。

然而，如果脚本需要在页面加载之前执行（如设置全局变量或初始化DOM元素），则可以将其放在<head>部分。

二、变量

2.1.自变量

就是一个值，代码的含义就是字面的意思，也就是等号右边的值

2.2.变量

白话：变量就是一个放东西的盒子。

通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。

本质：变量是程序在内存中申请的一块用来存放数据的空间。

2.3.变量声明

1、变量声明步骤

变量在使用时分为两步： 1. 声明变量 2. 赋值

var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

如果不声明就调用，会报错（is not defined）

一条语句声明多个变量 var x = 1,y = 2,z = 3;

赋值：= 用来把右边的值赋给左边的变量空间中此处代表赋值的意思

变量值是程序员保存到变量空间里的值

变量的初始化：声明一个变量并赋值，我们称之为变量的初始化。

变量的重新赋值：

x = 1;

x = 2;

变量的提升（var）：

console.log(x);

x = 1;

这样会打印出undefined，并不会报错，其中发生了以下变化

var x;

console.log(x);

x = 1;

变量声明提升（变量提升）（重要）：在es6以前的版本中，js是可以先使用变量，再定义变量，不会报错。

2、三种变量声明方式

var

var是ES5及之前版本中声明变量的方式。

var声明的变量具有函数作用域或全局作用域，并且存在变量提升（hoisting）现象，即变量声明会被提升到其作用域的顶部。

let

let是ES6（ES2015）中引入的，用于声明块级作用域的变量。

let声明的变量只在其声明的块或子块中可用，并且不会提升到作用域的顶部（但会存在“暂时性死区”Temporal Dead Zone，在变量声明之前的区域无法访问该变量）。

const

const也是ES6中引入的，用于声明必须被赋值的常量。

一旦const变量被赋值，其值就不能被重新赋值（但如果是对象或数组，其内容仍然可以被修改，因为变量指向的是数据的引用）。

const声明的变量也具有块级作用域。

3、预解析

js是解释性语言，也就是边解析边执行，浏览器在解析之前不是直接解析，而是对代码进行一个预解析或者预处理。

预解析的过程：

对当前的js代码定义的所有变量（和函数），放到所有代码的前面，即script开始标签后。

var x = 1;
var y = 2;
var z = 3;

预解析：

var x;
var y;
var z;
x =1 ;
y =2 ;
z =3 ;

js只能提升变量的声明，并不提升变量赋值

2.4.变量命名规则及特点

1.命名规则

1.由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name

2.严格区分大小写。var app; 和 var App; 是两个变量

3.不能以数字开头。 18age 是错误的

4.不能是关键字、保留字。例如：var、for、while

5.变量名必须有意义。 MMD BBD nl → age

6.遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

2.特点

1.大部分编译器是有特殊颜色

2.不能用作变量名或者函数名

3.严格区分大小写

4.js中所有关键字都是小写

5.可以把alter当作变量名，但是会把原来的顶替掉，这时候用alert就会报错

2.5.关键字和保留字

1、关键字

关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。

break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with

2、保留字

保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

练习：交换变量

三、数据类型

JavaScript的数据类型可以分为两大类：基本数据类型和复杂数据类型

3.1.基本数据类型

基本数据类型又称”简单数据类型“，包括Number（数字类型），String（字符串类型）、Boolean（布尔型）、Null（空类型）、Undefined（未定义类型）、Symbol（符号类型）

其中特殊数据类型为、Null、undefined、NaN

Number（数值类型）

JavaScript不区分整数和浮点数，所有的数字都是以64位浮点数形式存储的。

支持多种进制表示法，包括二进制（以0b或0B开头）、八进制（以0开头）、十进制（默认）和十六进制（以0x或0X开头）。

特殊值NaN（Not-a-Number）表示一个非数字值，通常出现在无效的算术运算中。例如，尝试将字符串与数字相加，或者0除以0等。

Infinity（无穷大）表示超出了JavaScript能表示的数字范围的极大或极小的值。当超出时，会返回Infinity。

拓展：

0.1+0.2 是小于、等于还是大于 0.3呢？本文最后解答

String（字符串类型）

字符串是不可变的，即创建后无法更改其内容。但可以通过字符串方法生成新的字符串。

字符串字面量可以使用单引号（'）、双引号（"）或反引号（``）表示。反引号用于创建模板字符串，允许在字符串中嵌入变量或表达式。

字符串索引从0开始，可以使用方括号（[]）或charAt()方法来访问字符串中的字符。

Boolean（布尔类型）

布尔类型只有两个值：true（真）和false（假）。

在JavaScript中，布尔值通常用于条件判断和控制流语句，如if...else、while等。

除了false、0、""（空字符串）、null、undefined和NaN被转换为false外，其他所有值都被转换为true。这种转换规则被称为“松散相等”（==）或“类型转换”。

Null（空类型）

Null类型表示一个空值或不存在的值。

在JavaScript中，null是一个特殊的值，表示一个空对象引用。

使用typeof运算符检测null时，会返回"object"，这是一个历史遗留问题。但严格相等运算符（===）可以区分null和其他类型。

Undefined（未定义类型）

Undefined类型表示一个变量未被赋值时的默认值。

当使用var或let声明了一个变量但未初始化时，该变量的值就是undefined。

如果一个函数没有返回值，那么调用该函数也会得到undefined。

undefined是一个预定义的全局变量，用于表示值的空缺。

Symbol（符号类型，ES6新增）

Symbol类型用于生成一个全局唯一的标识符。

每个通过Symbol()函数生成的符号都是唯一的，因此可以作为对象的唯一属性键。

Symbol类型的值不能与其他类型的值进行运算或比较。但可以使用===运算符来比较两个Symbol值是否相等。

3.2.复杂数据类型

复杂数据类型又称“引用数据类型“，包括Object（duixiang）、Array（数组）、function（函数）

1、Object（对象类型）

JavaScript中的对象是一种复合值，用于存储键值对。一般放在堆内存里面储存

对象可以是普通对象、数组、函数、日期等。数组是一种特殊的对象类型，用于存储有序的元素集合。

对象具有属性和方法，属性用于存储数据，方法用于执行操作。

对象的值是保存在内存中的，因此复杂类型的值是按引用访问的。

可以通过点（.）或方括号（[]）来访问对象的属性和方法。

支持原型链继承，允许对象继承其他对象的属性和方法。原型链是JavaScript实现继承的一种机制。

var obj = {
  // 属性名：属性值
    name:"张三";
age:"18";
}

2、数组Array

数组Array使用单独的变量名来存储一系列的值。

var arr = [1, true, 'hello', null, undifined , {name:"张三"}]

访问数组：通过指定数组名以及索引号码，你可以访问某个特定的元素。

判断是否为数组：console.log(Array.isArray(arr))

返回true false

3、判断变量数据类型的方法

typeof运算符：用于检测变量的数据类型。但需要注意的是，typeof运算符在检测null时会返回"object"，这是一个需要注意的特殊情况。

instanceof运算符：用于判断一个对象是否是某个构造函数的实例。它检查对象的原型链中是否存在构造函数的prototype属性。

Array.isArray()方法：用于判断一个值是否为数组。这是一个专门用于检测数组的方法。

Object.prototype.toString.call()方法：可以获取一个对象的内部[[Class]]属性，并返回一个字符串，该字符串表示对象的类型。这是一种比较准确的数据类型检测方法。

4、堆栈空间分配区别

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面。

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面。

5、栈内存和堆内存优缺点

在js中，

基本数据类型：变量大小是固定的，而且操作容易简单，所以放到栈内存中（先进后出）

引用数据类型：大小不是固定的，所以把他们分配到堆内存中，他们会根据自己的大小去申请内存空间

引用数据类型的值保存在堆内存中，也就是栈内存中实际上是存放的是一个指针，这个指针指向内存中的一个位置，这个位置保存的是引用数据类型。

栈内存的系统效率比较高，堆内存因为还需要分配空间和地址，还需要将地址存放在栈上，效率要低于栈。

3.3.数据类型的转换

1、强制转换

其他数据类型转换为数字类型

1、parseInt()

转整数

let str = "789";
let intFromStr = parseInt(str); // 789

let invalidIntStr = "123abc";
let intFromInvalidStr = parseInt(invalidIntStr); // 123

2、parseFloat()

转浮点

let floatStr = "123.45";
let floatFromStr = parseFloat(floatStr); // 123.45

let invalidFloatStr = "abc.123";
let floatFromInvalidStr = parseFloat(invalidFloatStr); // NaN

这两个函数会从字符串的开头开始解析，直到遇到第一个无法转换为数字的字符为止。如果字符串以非数字字符开头，则解析结果为NaN。

3、Number()

可以将几乎任何数据类型转换为数字

如果是字符串是纯数字，则转为对应数字，不是纯数字则转为NaN

如果字符串为空（‘’），或者为空格（‘’）都转为0；

如果是布尔值，true = 1，false = 0；

如果是null，则为0；

如果是undefined，则为NaN

let bool = true;
let numFromBool = Number(bool); // 1

let str = "123";
let numFromStr = Number(str); // 123

let invalidStr = "abc";
let numFromInvalidStr = Number(invalidStr); // NaN

4.一元加号+操作符

是Number（）函数的简写形式，用于将字符串或布尔值转换为数字

let str = "456";
let numFromStrWithPlus = +str; // 456

let bool = false;
let numFromBoolWithPlus = +bool; // 0

5.隐式转换（- * /）：利用算式隐式转换为数值型；

如果转数字比较严格用Number();

注意 parseInt 和 parseFloat 单词的大小写

隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

其他数据类型转为字符串

1.toString();

变量.toString(); 除了null和undefined会报错，其它均会转为字符串

可以转进制（二、八、十、十六）

变量.toString(2);

变量.toString(8);

变量.toString(10);

变量.toString(16);

null.toString(); 报错

undefined.toString(); 报错

true.toString(); 将true转为字符串true

2.String();

String(); 所有数据类型都能转字符串，不能转进制

对象为null或undefined，则String()函数会分别返回字符串"null"和"undefined"。

3.加上（+）拼接字符串

和字符串拼接的结果都是字符串

toString() 和 String() 使用方式不一样。

三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

其他数据类型转为布尔

1.Boolean();

代表空、否定的值会被转换为 false ，如 '' 、 0 、 NaN 、 null 、 undefined

其余值都会被转换为 true

console.log(Boolean(false));//false
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(-0)); // false
console.log(Boolean(0n)); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

数字：0 ，NaN 为false

字符串：''空串为false

undefined和null为false

2.使用双重否定!!操作符

双重否定!!操作符是Boolean()函数的简写形式。它通过将值转换为布尔值并再次取反（实际上第二次取反会恢复为原始布尔值），从而得到最终的布尔结果。这种方法在处理复杂表达式时特别有用，因为它可以简洁地将表达式的结果转换为布尔值。

2、NaN

NaN：Not a Number，不是一个数字，但他又是数字类型的一个特类型

问题1 什么时候能产生NaN

1.强制类型转换，直接将一个非数字通过Number()、parseInt()、parseFloat()

2.运算表达式计算式产生

 var str = 'str123';
 var res = str - '10';
 console.log(res);

问题2 如何判断一个数字是不是NaN

isNaN();用来判断一个变量是否为非数字的类型，返回 true 或者 false

如果不是一个纯数字的字符串或者不是一个纯数字返回true

如果是一个纯数字的字符串或者是一个纯数字返回false

答案：0.1 + 0.2 的结果大于 0.3 小白想知道吗欢迎留言，大佬们不要说哦拜托拜托编辑

感谢点点赞哦