JS.1-JS基础知识_.1 js-CSDN博客

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

(2)DOM

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

(3)BOM

BOM(Browser Object Model，简称BOM)是指浏览器对象模型,它提供了独立于内容的,可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

二.书写位置

(1)行内式

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读；
引号易错，引号多层嵌套匹配时，非常容易弄混；
特殊情况下使用

(2)内嵌式

可以将多行JS代码写到 <script> 标签中
内嵌 JS 是学习时常用的方式

(3)外部js文件

生成js文件,在其中写代码, 在html中引入即可
利于HTML页面代码结构化,把大段JS代码独立到页面之外,既美观,也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码
适合于JS 代码量比较大的情况

三.注释

单行注释: // 快捷键: ctrl + /
多行注释: /* */ 快捷键: ctrl + shift + /

四.输入输出语句

五.变量

1.概述

变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。变量就是一个装东西的盒子。
本质：变量是程序在内存中申请的一块用来存放数据的空间。
变量: 变量名+空间

2.使用

(1)声明变量

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

(2)赋值

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

(3)变量初始化

声明一个变量并赋值

3.语法扩展

(1)更新变量

同一个变量被重新复赋值后，原有的值就会被覆盖，变量值将以最后一次赋的值为准。

(2)同时声明多个变量

同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开。

(3)声明变量特殊情况

4.命名规范

由字母(A-Z,a-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。
不能以数字开头。
不能是关键字、保留字。例如：var、for、while
变量、函数的命名必须要有意义变量的名称一般用名词 ,函数的名称一般用动词, 尽量使用英文单词,不用中文缩写
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
尽量不使用name作为变量名, 浏览器默认有含义不报错,输出空的内容

5.交换变量案例

			// 案例3   交换变量  使用临时变量
			var a1 = "红苹果";
			var a2 = "绿苹果";
			var temp = a2;
			a2 = a1;
			a1 = temp;
			console.log('a1:',a1,'a2:',a2);   //a1: 绿苹果 a2: 红苹果

六.数据类型

在计算机中，不同的数据所需占用的存储空间不同，便于把数据分成所需内存大小不同的数据，充分利用存储空间，定义了不同的数据类型。简单来说，数据类型就是数据的类别型号。

1.变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
弱类型或者动态语言。不用提前声明变量的类型，在程序运行过程中，根据等号右边的值来自动确定数据类型。
动态类型，相同的变量可用作不同的类型

2.简单数据类型

(1)数字型Number

①进制

常见二, 八(数字前加0), 十, 十六(0x)进制

②数值范围:

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

③特殊值:

Infinity 无穷大，大于任何数值
-Infinity 无穷小，小于任何数值
NaN Not a number，非数值

④isNaN() 方法

判断非数字, 是数字返回false, 不是数字返回true

(2)字符串型String

①字符串型

引号中的任意文本，其语法为双引号 "" 和单引号'', 引号嵌套(外双内单，外单内双)

②转义字符

须写在引号内部

③字符串长度

字符数量, length属性获取整个字符串长度

④字符串拼接

字符串 + 任何类型 = 拼接之后的新字符串 + 号总结口诀：数值相加，字符相连
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

页面交互步骤: 输入框, 页面内部处理, 返回结果

(3)布尔型Boolean

true 真, false 假
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0 e.g: true + 1 //2

(4)未定义型Undefined

变量声明未赋值

(5)空型Null

3.获取数据类型

(1)typeof

可用来获取检测变量的数据类型

prompt 取来的值是字符型

(2)控制台

颜色判断数据类型

(3)字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

数字字面量：8, 9, 10
字符串字面量：'黑马程序员', "大前端"
布尔字面量：true，false

4.数据类型转换

把一种数据类型的变量转换成另外一种数据类型。

(1)转换为字符串类型

(2)转换为数字型

(3)转换为布尔型

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

七.运算符(操作符)

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

1.算数运算符

(1)概念

算术运算使用的符号，用于执行两个变量或值的算术运算。

+ - * / %(取余,取模 e.g: 5%3 结果为:2 3%5 结果:3)

(2)浮点数的精度问题

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。
不要直接判断两个浮点数是否相等

(3)表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合简单理解：是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果，返回给我们，称为返回值

2.递增和递减运算符

反复+/-1 递增（++）递减（ -- ）
前置递增（递减）运算符，放在变量前面 num=num+1 ---> ++num 先自加,后返回值
后置递增（递减）运算符,放在变量后面 num++ 先返回原值,在自加

注意：递增和递减运算符必须和变量配合使用。

3.比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

== 默认转换数据类型, 会把字符串型的数据转换为数值型两侧值相等均可

=== 全等两侧值以及数据类型均必须一致

4.逻辑运算符

(1)概念

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。常用于多个条件的判断

&& 与逻辑与 and 全真才真
|| 或逻辑或 or 全假才假
! 非逻辑非 not

(2)短路运算(逻辑中断):

当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值

逻辑与: 表达式1&&表达式2 第一个表达式值为真,则返回表2 ;第一个表达式值为假,则返回表1
逻辑或: 表达式1||表达式2 第一个表达式值为真,则返回表1;第一个表达式值为假,则返回表2

5.赋值运算符

6.三元运算符

条件表达式 ? 表达式1 : 表达式2

条件表达式式为真, 则返回表达式1的值, 否则输出表达式2的值

7.运算符优先级

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

八.流程控制

1.顺序结构

程序中最简单、最基本的流程控制，没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

2.分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

(1)if语句

if-else双分支语句

else后直接跟{} ,无(条件)

if-else if多分支语句

(2)switch多分支语句

用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。要求表达式的值===value

switch语句和if-else if 语句区别

一般情况下，它们两个语句可以相互替换
switch...case 语句通常处理 case为比较确定值的情况，而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
当分支比较少时，if… else语句的执行效率比 switch语句高。
当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

3.循环结构

重复执行某些代码

(1)for循环

for 循环主要用于把某些代码循环若干次，通常跟计数有关系。

for ( 初始化变量; 条件表达式; 操作表达式 ){ 循环体 }

初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行。若结果是 true 就继续循环,否则退出循环。
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。

断点调试:

(2)while循环

while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。 while( 条件表达式 ){ 循环体 }

先判断,在执行循环体, 可能一次也不会执行

(3)do while循环

do { 循环体}while( 条件表达式 ) 先执行一次循环体,再判断,成立则继续执行循环体,否则结束

至少执行一次

(4)continue, break, return

continue: 退出当次循环,继续执行下一次循环

break: 退出整个循环

return:不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码

九.Array数组

1.概念

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。
数组是一种将一组数据存储在单个变量名下的方式。

2.创建

(1)new创建

(2)数组字面量创建

3.访问

索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）数组名[下标]

没有该下标则返回undefined

4.遍历

遍历: 把数组中的每个元素从头到尾都访问一次。可以通过 for 循环索引遍历数组中的每一项
数组长度: length 数组元素个数数组名.length
数组转为字符串: 遍历输出结果,添加分割符

5.数组中新增元素

(1)修改length长度

数组名.length = 数字; 将数组长度修改为几

(2)修改数组索引

追加数组元素, 数组名[下标] = 值;

如果索引号没有被占用,则追加; 如果占用就替换原有元素
不能直接给数组名赋值，否则会覆盖掉以前的数据

删除指定元素(数组去重): 遍历,按条件筛选,将符合条件的元素存入新数组

翻转数组: i-- 索引号i=arr.length-1给新数组索引号第0个元素

6.冒泡排序

是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小）

第一个元素,挨个两两比较,顺序不对就交换

十.函数

1.概念

函数：封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

2.使用

(1)声明

①函数关键字自定义函数(命名函数)

function 函数名() { 函数体 }

function声明函数的关键字, 函数名一般为动词,
函数不调用,自己不执行. 声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码

②函数表达式(匿名函数)

var 变量名 = function(){ } 变量里边存值,函数表达式中存函数

函数表达式不能先调用,再声明

(2)调用

函数名(); 调用函数时,注意()\

函数可以调用另一个函数,相互调用

(3)函数的封装

把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

3.参数

形参: function 函数名(形参1,形参2...) { } 在声明函数的()里
实参: 函数名(实参1,实参2...); 函数调用的()里
函数参数可有可无, 个数不限

参数个数匹配:

4.返回值

function 函数名（）{ ... return 需要返回的值； }
函数将值返回给调用者，使用 return 语句实现 ,函数只实现某种功能
return 终止函数, 并且只能返回一个值(数组也看作一个值)
如果函数没有 return ，返回的值是 undefined

5.arguments的使用

不确定有多少个参数传递的时候，可以用 arguments 来获取。
在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。arguments 对象中存储了传递的所有实参。只有函数才有arguments对象,而且每个函数都已经内置好了
arguments展示形式是一个伪数组，因此可以进行遍历。

伪数组具有以下特点：

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

十一.js作用域

1.作用域

(1)概念

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。代码名字(变量)在某个范围内起作用和效果
作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了命名冲突。

(2)分类

作用域(es6前)的有两种：全局作用域局部作用域（函数作用域）

全局作用域: 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
局部作用域: 作用于函数内的代码环境，就是局部作用域. 因为跟函数有关系,也称函数作用域。

(3)块级作用域(无)

js中没有块级作用域{ } e.g: if{ }, for{ }

es6版本时,新增的块级作用域

2.变量的作用域

根据作用域的不同,变量分为:

全局变量: 全局域下声明的变量(函数外部定义的变量),任何位置都能使用注: 如果函数内部未声明直接赋值的也为全局变量
局部变量: 只能该函数内部使用, 函数内部声明的变量注: 函数的形参也可看作局部变量

从执行效率来看全局和局部变量:

全局变量:只有浏览器关闭时才会销毁, 比较占用内存资源
局部变量:执行完毕就会销毁, 比较节约内存资源

3.作用域链

只要是代码，就至少有一个作用域
写在函数内部的局部作用域 (e.g: 函数套函数)
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链, 就近原则

十二.预解析

1.概念

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

2.预解析

(1)概念

在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
js引擎会把js里面所有的var和function提升到当前作用域的最前面

(2)分类

变量预解析(变量提升): 把所有的变量声明提升到当前作用域最前面, 不提升赋值操作.
函数预解析(函数提升): 把所有的函数声明提升到当前作用域最前面, 不调用函数. 关键字声明的函数整个提升,函数内部在局部提升,可以先调用在声明. 函数表达式声明的函数必须先声明在调用

案例:

3.代码执行

从上到下执行JS语句。预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。按照代码书写的顺序从上往下执行

十二.对象

1.概念

现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的。

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

2.创建对象

(1)字面量创建

对象字面量：花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。

{ } 里面采取键值对的形式表示属性名 :　＇属性值＇，　　（每个键值之间，隔开）

键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

(2)new Object创建

var 对象名 = new Object(); 对象名.属性名 = 属性值 ;

(3)构造函数创建

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在 js 中，使用构造函数要时要注意以下：

用于创建某一类对象，其首字母要大写
要和 new 一起使用才有意义 new 构造函数名(实参1,实参2...);
不需要return就可以返回结果

function 构造函数名(形参1,形参2...){ this.属性名 = 属性值; this.方法名 = function(){ } }

3.对象的调用

属性调用: 对象名.属性名或对象名['属性名']
方法调用: 对象名.方法名()

变量,属性,函数,方法的比较:

变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
函数：单独存在的，通过“函数名()”的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

构造函数和对象的比较:

构造函数: 泛指某一大类 Star()
对象: 特指某一个, new关键字创建过程为对象实例化 new Star();

4.new关键字

执行过程:

new 构造函数可以在内存中创建一个空的对象
this 就会指向刚刚创建的空对象
执行构造函数内部代码, 给这个空对象添加属性和方法
返回这个对象(不需要return也可以返回)

5.遍历对象

for...in 语句用于对数组或者对象的属性进行循环操作。 for (变量 in 对象名字) { }

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

十三.内置对象

1.概念

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象
前两种对象是JS 基础内容,属于 ECMAScript；第三个浏览器对象属于JS 独有的
内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）,最大的优点就是帮助快速开发
JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

2.查文档MDN

Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。 MDN: https://developer.mozilla.org/zh-CN/

查阅该方法的功能
查看里面参数的意义和类型
查看返回值的意义和类型
通过 demo 进行测试

3.Math对象

Math 不是一个构造器(构造函数)。不需要new来调用,直接使用里边的属性和方法即可。Math 的所有属性与方法都是静态的。 e.g:

PI 圆周率
max/min(参数) 求最大/小值如果参数含有非数字则返回NaN; 如果没有参数,返回-Infinity
abs(参数) 绝对值会将字符串(为数字)类型隐式转换为数字型 , 如果非数字返回NaN
floor(参数) 向下取整 ceil()向上取整
round(参数)四舍五入 5特殊, 往大取,e.g: Math.round(-1.5); --> -1
random() 随机数[0,1)
Math.floor(Math.random()*(max - min +1))+min; 得到两个数之间的随机整数,且包含这两整数

4.Date对象

处理日期和时间, 是构造函数,必须通过new调用创建日期对象

var date = new Date(); 没有参数,返回系统当前时间
var date1 = new Date('2022-6-16 21:40'); 写参数，就返回括号里面输入的时间

参数常用写法:

数字型 2022, 6, 16
字符串型: '2022-6-16 21:40'

日期格式化:

获取日期总的毫秒数:

计算机起始时间1970年 1月1日

valueOf(); / getTime(); 现在时间距离1970年 1月1日总毫秒数
var date = +new Date() 返回总毫秒数

5.Array对象

(1)创建数组

(2)检测数组

instanceof 运算符判断一个对象是否属于某种类型 console.log(obj instanceof Array);
isArray(参数); 判断一个对象是否为数组，isArray() 是 HTML5 中新增方法 ie9以上版本支持 console.log(Array.isArray(arr));

(3)增删数组元素

(4)数组排序

翻转排序reverse(); 颠倒数组中的元素顺序,无参数, 改变原数组,返回新数组
数组排序(冒泡排序): sort(); 改变原数组,返回新数组

(5)索引

indexOf() 查找指定元素的第一个索引返回索引号,没有则返回-1
lastIndexOf() 查找指定元素的最后的一个索引返回索引号,没有则返回-1

(6)数组转为字符串

toString(); 逗号分隔每一项
join('分隔符'); 指定分隔符分隔

其他:

6.字符串对象

(1)基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

(2) 字符串的不可变

指里面的值不可变,虽然看上去可以改变内容,但其实是地址变了，内存中新开辟了一个内存空间。

当重新给变量赋值的时候，值不会被修改，依然在内存中,
重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
由于字符串的不可变，在大量拼接字符串的时候会有效率问题

(3)返回字符位置

indexOf('要查找的字符',[开始位置]) []可有可无返回指定元字符串的位置,没有就返回-1,开始位置为索引号

lastIndexOf(); 从后往前找,只找第一个匹配的

(4)位置返回字符

(5)字符串操作

(6)替换及转换为数组

replace(被替换的字符串，要替换为的字符串)；用一些字符替换另一些字符
split() 切分字符串，它可以将字符串切分为数组。在切分完毕,返回的是一个新数组

十五.简单数据类型与复杂数据类型

1.概念

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null(特殊:返回Object 空的对象)
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型 , 通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

2.堆和栈

堆栈空间分配区别：

栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面(直接在栈里存值)
堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面(栈空间里存放的是地址，真正的对象实例存放在堆空间中)

3.传参

简单数据类型传参: 函数的形参也可以看做是一个变量, 把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，在方法内部对形参做任何修改，都不会影响到的外部变量。
复杂数据类型传参: 函数的形参也可以看做是一个变量，把简单类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。