本文详细介绍了JavaScript的基础知识，包括编程语言的概念、断点调试的使用、JavaScript的组成（ECMAScript、DOM、BOM）以及变量、数据类型、运算符、流程控制（如if、for、while、switch）等核心概念。此外，还讲解了数组、函数、作用域、对象的创建和遍历，以及内置对象如Math、Date、Array和String的使用。
计算机基础
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PcwR7M7t-1669642870428)(1667096270239.png)]
1.计算机内部使用二进制0和1来表示数据.
2．所有数据，包括文件、图片等最终都是以二进制数据（0和1)的形式存放在硬盘中的.
3．所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文性复制到硬盘中。
4、硬盘、内存都是保存的二进制数据。
注意∶之所以要内存的一个重要原因，是因为cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所以，才使用存取速度更快的内存来保存运行时的数据。(内存是电，硬盘是机械)
编程语言
编程∶就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程
计算机程序∶就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
从事编程的人员，就是程序员。
注意∶上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、服务器等。
计算机语言指用于人与计算机之问通讯的语言，它是人与计算机之问传递信息的媒介.
计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类.
实际上计算机最终所执行的都是机器语言，它是由“0”和“1”组成的二进法数，二进制是计算机语言的基础。
可以通过类似于人类语言的”语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言(ProgrammingLanguage ) .
编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇(不同编程语言的格式和词汇不一样），必须遵守，
如今通用的编程语言有两种形式:汇编语言和高级语言.
汇编语言和机器语言实质是相同的，都是直接对硬件损作，只不过指令采用了英文缩写的标识符，容易识别和记忆.
高级语言主要是相对于低极语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等.
编程语言、标记语言 区别
编程语言有很强的逻辑和行为能力。在编程语言里你会看到很多if else 、 for 、while等具有逻辑性和行为能力的指令，这是主动的.
标记语言( html )不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的,他是被动的。
断点调试
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下.
断点调试可以帮我们观察程序的运行过程
浏览牺中按F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点Watch:监视，通过watch可以监视变量的值的变化，非常的常用。
F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。
javaScript初识
1、js简介
布兰登·艾奇在1995年利用10天完成JavaScript设计.
JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言(Script是脚本的意思)
脚本语言:不需要编译，运行过程中由js解释器( js引擘）逐行来进行解程并执行
现在也可以基于Node.js技术进行服务器端编程
**JavaScript的作用：**表单动态校验(密码强度检测)(JS产生最初的目的)、网页特效、服务端开发(Node.,js)、桌面程序(Electron)App(Cordova)、控制硬件-物联网(Ruff)、游戏开发(cocos2d-js)
浏览器执行JS简介
浏览器分成两部分：渲染引擎、js引擎
渲染引擎∶用来解析HTMML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
**JS引擎:**也称为JS解程器。用来读取网页中的JavaScriptt码，对其处理后运行，比如chrome浏览器的V8
浏资器本身并不会执行IS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码，jS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行.
2、js组成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DE7qJxOz-1669642870431)(1667112561995.png)]
（1）ECMAScript
ECMAScript是由ECMA国际（原欧浙洲计算机制造商协会）进行标准化的一门编语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或 Script，但实际上后两者是ECMAScript语言的实现和扩展。ECMAScript规定了IS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
（2）DOM—文档对象模型
文档对象模型.( Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口.通过 DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等).
（3）BOM—浏览器对象模型
BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨都等.
3、js书写位置
<!-- 2、内嵌式js-->
<script>
alert('内嵌式js');
</script>
<!-- 3、外部js写法,双标签，双标签中间不能写代码-->
<script src="my.js"></script>
</head>
<body>
<!--1、行内式js 直接写到元素内部-->
<!--<input type="button" value="唐伯虎" οnclick="alert('秋香')">-->
</body>
4、注释
//单行注释 ctrl+/
/* * 多行注释
* ctrl+shift+/
* */
5、标识符、关键字、保留字
**标识符：**就是指开发人员为变量、属性、经数、参数取的名字。标识符不能是关健字或保留字。
关键字∶是指S本身已经使用了的字，不能再用它们充当变量名、方法名。
包括： 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等.
保留字∶实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名.
包括： boolean、byte、char、class、const、debugger、double、enum、export、extends、fima1、float、goto、implenments、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、 throws、transient、volatile等.
6、js输入输出语句
为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下:
| 方法 | 说明 | 归属 |
|---|---|---|
| alert（msg） | 浏览器弹出警示框 | 浏览器 |
| console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(info) | 浏览器弹出输入框，用户可以输入 | 浏览器 |
<script>
//这是一个输入框
prompt('请输入您的年龄');
// alert弹出警示框 输出的 展示给用户的
alert('计算的结果是');
//console.log()控制台输出 给程序员测试用的
console.log('我是程序员测试能看到的');
</script>
7、命名规范
**标识符：**变量、函数的命名必须要有意义、变量的名称一般用名词、函数的名称一般用动词
**操作符：**操作符的左右两侧各保留一个空格
**单行注释：**单行注释前面注意有个空格
变量（用于存放数据的容器）
变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改。
本质：变量是程序在内存中申请的一块用来存放数据的空问。
1、变量的使用（声明、赋值）
（1）声明变量
var是一个JS关键字，用来声明变量( variable变量的意思)，使用该关键字声明变量后，计算机会自动为变量分配内存空问，不需要程序员管
age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
（2）赋值
<script>
//1、声明一个变量
var age;
//2、赋值 给age赋值
age = 18;
//3、输出结果
console.log(age);
//变量的初始化 声明变量的同时之间赋值
var myname = '李娟妮';
console.log(myname);
</script>
（3）变量的语法扩展
<script>
//1、更新变量
var myname = '李娟妮'
console.log(myname)
//一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次的值为准。
myname = '李明'
console.log(myname)
//2、声明多个变量
// var address = '火影村';
// var age = 30;
// var email = 'kakaxi@qq.com';
// var gz = 2000;
//同时声朗多个变量时，只需要写一个var，多个变量名之问使用英文逗号隔开。
var age = 18,
address = '火影村',
gz = 18;
//3、声明变量的特殊情况
//（1）只声明，不赋值，程序也不知道里面存的是什么，所以结果是undefined 未定义的
var sex;
console.log(sex); //undefined
//(2) 不声明 不赋值，直接输出变量 会报错,报错的不会再往下执行
// console.log(tel); //报错
//（3）不声明 直接赋值使用 可以使用，但不提倡
qq = 2227638;
console.log(qq);
</script>
（4）变量的命名规范
由**字母(A-Za-z)、数字(0-9)、下划效划( -）、美元符号($)**组成，如: usrAge, num01,_name严格区分大小写。var app;和var App;是两个变量
不能以数字开头。18age是错误的
不能是关键字、保留字。例如: var、for、while
变量名必须有意义。
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
数据类型
1、简介
**原因：**在计算机中，不同的数据所需占用的存猪空问是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空问，于是定义了不同的数据类型。
2、变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
JavaScript是一种弱类型成者说动态语言。这意味着不用提前声明变量的奥型，**在程序运行过程中，类型会被自动确定。**给变量赋值之后，根据=右边的值才能确定数据类型。变量的数据类型可以变化。
3、分类
简单数据类型( Number, string,Boolean, Undefined,Null ) 又叫做值类型
值类型∶简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
复杂数据类型( object)，又叫做引用类型
引用类型∶复杂数据类型，在存储时变量中存储的仅仅是地址(引用)，因此叫做引用数据类型
通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
<script>
// 简单数据类型 null 返回的是一个空的对象 object
var timer = null;
console.log(typeof timer);
// 如果有个变量我们以后打算存储为对象，暂时没想好放啥， 这个时候就给 null
// 1. 简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
// 2. 复杂数据类型 首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据
</script>
（1）简单数据类型
| 简单数据类型 | 说明 | 默认值 |
|---|---|---|
| number | 数字型，包含整型值和浮点型值，如21,0.21 | 0 |
| boolean | 布尔值类型，如true、false，等价于1、0 | false |
| string | 字符串类型，如‘张三’ 字符串都要带引号‘’ | “” |
| undefined | var a；声明了变量a但没赋值，此时a=undefined | undefined |
| null | var a = null，声明了变量为控制 | null |
1）数字型Number
<script>
var num = 10;//数字型
var pi = 3.14;//数字型
//1、八进制 数字前面加0 表示八进制
var num1 = 010; //八进制转10进制 就是8
console.log(num1)
var num2 = 012;
console.log(num2)
//2、十六进制 数字前面加0x 表示十六进制
var num3 = 0x9;
console.log(num3)
var num4 = 0xa;
console.log(num4)
//3、数字中的最大、最小值
console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALUE)
//4、无穷大infinity、无穷小-infinity
console.log(Number.MAX_VALUE * 2)//输出结果为infinity，意为无穷大
console.log(-Number.MAX_VALUE * 2)//输出结果为-infinity，意为无穷小
//5、NaN 非数字
console.log('李明' - 100);//NaN
</script>
2）字符串型String
**转义符（都是\开头）**要写在引号里面
| 转义符 | 说明 |
|---|---|
| \n | 换行符 |
| \\ | 斜杠\ |
| ’ | ‘单引号 |
| " | “双引号 |
| \t | tab缩进 |
| \b | 空格 |
<script>
//字符串需要加引号，单引号，双引号都行，最好单引号
var str = '我是李明'
//嵌套 外单内双 或 外双内单 都可以
var qt = '我是"一"个人'
var qt1 = "我是'一'\n个人"
console.log(qt)
console.log(qt1)
</script>
字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符的长度。通过字符串的length属性可以获取整个字符串的长度。
字符串拼接
多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串拼接前会把与字符串相加Q的任何类型转成字符串，再拼接成一个新的字符串
<script>
// 字符串长度
// 1、检测获取字符串长度length
var str2 = 'my name is andy';
console.log(str2.length)//15
//字符串拼接 + 数字相加、字符相连
console.log('沙漠' + '骆驼')
console.log('pink老师'+18)//pink老师18
console.log('pink'+true)//pinktrue
//数字型相加得24
console.log(12 + 12)//数字24
console.log('12'+12)//字符串1212
//字符串加强
console.log('pink老师' + 18 + '岁')
var age = 18;
//变量不要写到字符串里面，是通过和字符串相连的方式实现的
console.log('pink老师' + age + '岁')
</script>
3）布尔型Boolean
<script>
var flag = true;
var flag1 = false;
console.log(flag + 1)//true参与加法运算当1来看
console.log(flag1 + 1)//false参与加法运算当0来看
</script>
4）Undefined、Null
<script>
// 声明变量未赋值---undefined未定义数据类型
var str;
console.log(str)
var variable = undefined;
console.log(variable)
console.log(variable + 'pink')//undefinedpink
console.log(variable + true)//NaN
console.log(variable + 1)//NaN
//null 空值
var space = null;
console.log(space + 'pink')//nullpink
console.log(space + false)//0
console.log(space + 1)//1
</script>
（2）传参
<script>
// 简单数据类型传参
//函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，
// 其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量,
function fn(a) {
a++;
console.log(a); //11
}
var x = 10;
fn(x);
console.log(x); //10
</script>
<script>
// 复杂数据类型传参
/*函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里
保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。*/
function Person(name) {
this.name = name;
}
function f1(x) { // x = p
console.log(x.name); // 2. 这个输出什么 ? 刘德华
x.name = "张学友";
console.log(x.name); // 3. 这个输出什么 ? 张学友
}
var p = new Person("刘德华");
console.log(p.name); // 1. 这个输出什么 ? 刘德华
f1(p);
console.log(p.name); // 4. 这个输出什么 ? 张学友
</script>
4、获取变量数据类型（typeof）
<script>
var num = 10;
console.log(typeof num)//number
var str = 'pink';
console.log(typeof str)//string
var flag = true;
console.log(typeof flag)//boolean
var vari = undefined;
console.log(typeof vari)//undefined
var timer = null;
console.log(typeof timer)//object
//prompt取过来的值是字符型
var age = prompt('请输入年龄');
console.log(age)
console.log(typeof age)//string
</script>
字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值
数字字面量：8,9，10
字符串字面量："黑马程序员“ 、"大前端”
布尔字面量： true , false
5、数据类型转换
使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能查接简单的进行加法运算，而需要转换变量的效据类型。通俗地说，就是把一种数据类型的变量转换成另外一种数据类型,
（1）转换为字符串
| 方式 | 说明 |
|---|---|
| toString（） | 转成字符串 |
| String强制转换 | 转成字符串 |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 |
（2）转换为数字型（重点）
| 方式 | 说明 |
|---|---|
| parseInt（string）函数 | 将string类型转换成整数数值型 |
| parseFloat（string）函数 | 将string类型转换成浮点数数值型 |
| Number（）强制转换函数 | 将string类型转换成数值型 |
| js隐式转换- * / | 利用算术运算隐式转换为数值型 |
<script>
// var age = prompt('请输年龄')
// console.log(age)
// 1、parseInt(变量) 可以把字符型转换为数字型 得到的是整数
// console.log(parseInt(age))
console.log(parseInt(3.14))//3 整数
console.log(parseInt(3.98))//3 整数 不进位
console.log(parseInt('120px'))//120 会去掉单位
console.log(parseInt('rem120px'))//NaN
console.log(parseInt('rempx'))//NaN
console.log(parseInt('true'))//NaN
// 2、parseFloat(变量) 可以把字符型转换为数字型 是小数 浮点数
console.log(parseFloat(3.14))//3.14 小数
console.log(parseFloat('120px'))//120 会去掉单位
console.log(parseFloat('rem120px'))//NaN
//3、利用Number（变量） 强制转换
var str = '123';
console.log(Number(str))//123 数字型
console.log(Number('123'))//123 数字型
//4、利用算术运算 - * / 隐式转换
console.log('12' - 0)//12 数字型
console.log('123' - '83')//40 数字型
console.log('123' * 1)//123 数字型
console.log('123' / 1)//123 数字型
</script>
（3）转换为布尔型
| 方式 | 说明 |
|---|---|
| Boolean（）函数 | 其他类型转换为布尔型 |
代表空、否定的值会被转换为false ,如""、0、NaN、 null、undefined
其余值都会被转换为true
<script>
//代表空、否定的值会被转换为false ,如""、0、NaN、 null、undefined
console.log(Boolean(''))//false
console.log(Boolean(0))//false
console.log(Boolean(NaN))//false
console.log(Boolean(null))//false
console.log(Boolean(undefined))//false
//其余值都会被转换为true
console.log(Boolean(112))//true
console.log(Boolean('112'))//true
console.log(Boolean('老师'))//true
</script>
运算符
运算符( operator ) 也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号.
1、算术运算符
概念:算术运算使用的符号，用于执行两个变量或值的算术运算。
| 运算符 | 描述 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取余数（取模）例： 9%2=1 |
<script>
<!-- 算数运算-->
//算术运算符优先级的，先乘除，后加减，有小括号先算小括号里面的
console.log(1 + 1)//2
console.log(1 - 1)//0
console.log(1 * 1)//1
console.log(78 / 5)//15.6
console.log(1+2*3)//7 先乘除后加减
//1、取余数% 可以用来判断一个数能被整除
//它的余数是0求说明这个数能被整除，这就是%取余运算符的主要用途
console.log(78 % 5)//3
console.log(3 % 5)//3
// 2、浮点数在算术运算里面会有问题
// 浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。
console.log(0.1 + 0.2)//0.30000000000000004
console.log(0.07 * 100)//7.000000000000001
//3、我们不能直接拿着浮点数来进行相比较是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3)//false
</script>
表达式和返回值
<script>
//是由数字、运算符、变量等组成的式子我们称为表达式 1+1
console.log(1 + 1)//2就是返回值
//在程序里面 2=1+1 把右边的表达式计算完毕 把返回值给左边
var num = 1 + 1
</script>
2、递增递减运算符
如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减(–)运算符来完成.
在JavaScript中，递增（++)和递减(-- )既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减)运算符，放在变量后面时，我们可以称为后霣递增（递减）运算符。
<script>
<!-- 前置递增运算符-->
//1、想要一个变量自己加1 下面的方法比较麻烦
var num = 1;
num = num + 1
console.log(num)//2
//2、前置递增运算符 ++写在变量前面
var age = 10
++age;//类似于age=age+1
console.log(age)//11
//3、前置递增运算符 先自加，后返回值
var p = 10
console.log(++p + 10)//21
//后置递增运算符
var num1 = 10;
num1++;//num=num+1
console.log(num1)//11
//1、前置自增和后置自增如果单独使用，效果是一样的
//2、后置自增：先返回原值，再自增
var age1 = 10;
console.log(age1++ + 10)//20
console.log(age1)//11
</script>
3、比较运算符
概念∶比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值==( true / false )==f作为比较运算的结果.
| 运算符名称 | 说明 |
|---|---|
| > | 大于号 |
| < | 小于号 |
| >= | 大于等于 |
| <= | 小于等于 |
| == | 判等号（会转型） |
| != | 不等号 |
| === / != = | 全等，要求值和数据类型都一致 |
<script>
console.log(3 >= 5)//false
console.log(2 <= 4)//true
//等于：==只要求值相等， 默认转换数据类型，会把字符串型的数据转换为数字型
console.log(3 == 5)//false
console.log('pink' == 'green')//false
console.log(18 == 18)//true
console.log(18 == '18')//true
console.log(18 != 18)//false
//全等===，要求值和数据类型都一致
console.log(18 === 18)//true
console.log(18 === '18')//false
</script>
4、逻辑运算符
概念∶逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断
| 逻辑运算符 | 说明 |
|---|---|
| && | 逻辑与，and |
| || | 逻辑或，or |
| ！ | 逻辑非，not |
<script>
//1、逻辑与，两侧都为true，结果才是true，只要有一侧为false，结果就是false
console.log(3 > 5 && 3>2)//false
console.log(3 < 5 && 3>2)//true
//2、逻辑或， 两个都为false，结果才是false，
console.log(3 >5 || 3 > 2)//true
console.log(3 >5 || 3 < 2)//false
// 3、逻辑非！
console.log(!true)//false
</script>
**短路运算的原理︰**当有多个表达式(值)时,左边的表达式值可以确定结果时就不再继续运算右边的表达式的在
<script>
// 1. 用我们的布尔值参与的逻辑运算 true && false == false
// 2. 123 && 456 是值 或者是 表达式 参与逻辑运算？
// 3. 逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1
console.log(123 && 456); // 456
console.log(0 && 456); // 0
console.log(0 && 1 + 2 && 456 * 56789); // 0
console.log('' && 1 + 2 && 456 * 56789); // ''空
// 如果有空的或者否定的为假 其余是真的 0 '' null undefined NaN
// 4. 逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
console.log(123 || 456); // 123
console.log(123 || 456 || 456 + 123); // 123
console.log(0 || 456 || 456 + 123); // 456
// 逻辑中断很重要 它会影响程序运行结果
var num = 0;
console.log(123 || num++);//123
console.log(num); // 0 因为上面发生短路中断，num++没有运行，故num依然等于0
</script>
5、赋值运算符
用来把数据赋值给变量的运算符
| 赋值运算符 | 说明 |
|---|---|
| = | 直接赋值 |
| +=、-= | 加、减一个数后再赋值 |
| *=、/=、%= | 乘、除、取模后再赋值 |
<script>
var num = 10;
// num = num + 2;//相当于num+=2
num += 2
console.log(num)//12
var age = 2;
age *= 3;//相当于age*3
console.log(age)//6
</script>
运算符优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | （） |
| 2 | 一元运算符 | ++、 – 、！ |
| 3 | 算数运算符 | 先*、/ 后+ 、- |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === != = |
| 6 | 逻辑运算符 | 先&& 后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
—元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
<script>
// ++num !num 2 + 3
console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true)//true
var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');//true
console.log('-------------------');
var a = 3 > 5 && 2 < 7 && 3 == 4;//false
console.log(a);
var b = 3 <= 4 || 3 > 1 || 3 != 2;//true
console.log(b);
var c = 2 === "2";//false
console.log(c);
var d = !c || b && a;//true 这里！c因为c是true，故！c是false，先&&再||
console.log(d);
</script>
流程控制
在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能
简单理解：流程控制就是来控制我们]的代码按照什么结构顺序来执行
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P58A0FlV-1669642870436)(1667204656845.png)]
1、顺序结构
顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照**代码的先后顺序，依次执行，**程序中大多数的代码都是这样执行的。
2、分支流程控制（判断）
由上到下执行代码的过程中，根据不同的条件执行不同的路径代码(执行代码多选一的过程)从而得到不同的结果。
（1）if语句
<script>
//1、if的语法结构
/*2、如果条件表达式为真，则执行大括号里的执行语句；
若为假，则不执行大括号里的语句，执行if语句后面的代码*/
/*if (条件表达式){
执行语句
}*/
if (3 < 5){
alert('3<5为真')
}
</script>
（2）if else语句 双分支
<script>
//1、if else双分支语法结构
//2、若条件表达式为真，执行语句1，若为假，执行语句2
/*if (条件表达式){
执行语句1
}else{
执行语句2
}*/
var age = prompt('请输入你的年龄')
if (age >= 18){
alert('已成年，允许进入网吧')
}else{
alert('未成年，不允许进入网吧')
}
</script>
（3）if else if语句 多分支
<script>
// 1. 多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1 的过程
// 2. if else if语句是多分支语句
// 3. 语法规范
/*if (条件表达式1) {
语句1;
} else if (条件表达式2) {
语句2;
} else if (条件表达式3) {
语句3;
} else {
最后的语句;
}*/
// 4. 执行思路
// 如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句
// 如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2 以此类推
// 如果上面的所有条件表达式都不成立，则执行else 里面的语句
// 5. 注意点
// (1) 多分支语句还是多选1 最后只能有一个语句执行
// (2) else if 里面的条件理论上是可以任意多个的
// (3) else if 中间有个空格了
var count = prompt('请输入成绩')
if (count >= 90){
alert('优秀')
}else if (count >= 80){
alert('良好')
}else if (count >= 70){
alert('中等')
}else if (count >= 60){
alert('及格')
}else{
alert('继续努力吧')
}
</script>
（4）switch语句
switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch.
// 1. 我们开发里面 表达式我们经常写成变量
// 2. 我们num 的值 和 case 里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
// 3. break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
<script>
//switch语句也是多分支语句，可以实现多选一
//语法结构
//利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句
// 如果都没有匹配上，那么执行 default里面的语句
/*switch (表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
default:
执行最后的语句;
}*/
var num = prompt('请输入要匹配的数字')
switch (parseInt(num)) {
case 1:
console.log('这是1');
break;
case 2:
console.log('这是2');
break;
case 3:
console.log('这是3');
break;
default:
console.log('没有匹配结果')
}
</script>
（5）if else if 和 switch 的区别
一般情况下，它们两个语句可以相互替换
switch…case语句通常处理case为比较确定值的情况，而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范图)
switch语句进行条件判断后直接执行到程序的条件语句，效率更高。i而if…else语句有几种条件，就得判断多少次.
当分支比较少时，if…else语句的执行效率比 switch语句高.
当分支比较多时,switch语句的执行效率比较高，而且结构更清晰,
（6）三元表达式
三元表达式也能做一些简单的条件选择。有三元运算符组成的式子称为三元表达式
<script>
//语法结构
//条件表达式 ？ 表达式1 ： 表达式 2
//若条件表达式为真，返会表达式1的值，为假，返回表达式2的值
var num = 10;
var result = num > 5 ? '是的' : '不是';
console.log(result)//是的
//相当于底下的代码
/*if (num > 5) {
result = '是的';
} else {
result = '不是的';
}*/
</script>
3、循环结构
**目的：**可以重复执行某些代码
（1）for循环
在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句
for重复执行某些代码，通常跟计数有关系
<script>
/*for (初始化变量;条件表达式;操作表达式){
循环体
}*/
// 3. 初始化变量 就是用var 声明的一个普通变量， 通常用于作为计数器使用
// 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
// 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
// 重复打印100句你好
// 1. 首先执行里面的计数器变量 var i = 1 .但是这句话在for 里面只执行一次 index
// 2. 去 i <= 100 来判断是否满足条件， 如果满足条件 就去执行 循环体 不满足条件退出循环
// 3. 最后去执行 i++ i++是单独写的代码 递增 第一轮结束
// 4. 接着去执行 i <= 100 如果满足条件 就去执行 循环体 不满足条件退出循环 第二轮
for (var i = 1;i<=100;i++){
console.log('你好')
}
</script>
<script>
//1、求1-100之间所有数字和的平均值
var sum = 0;
for (i = 1;i<=100;i++){
sum += i;
}
console.log('1-100之间所有数字和的平均值' + sum / 100)//50.5
//2、求1-100之间所有偶数和奇数的和
var sum1 = 0;
var sum2 = 0;
for (i = 1;i<=100;i++){
if (i%2 == 0){
sum1 += i
}else{
sum2 += i
}
}
console.log('1-100之间所有偶数的和' + sum1)//2550
console.log('1-100之间所有奇数的和' + sum2)//2500
//3、求1-100之间所有能被3整除的数的和
var sum3 = 0;
for (i = 1;i<=100;i++){
if (i%3 == 0){
sum3 +=i;
}
}
console.log('1-100之间所有能被3整除的数的和' + sum3)//1683
</script>
（2）双重for循环
很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个5行5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for循环，这样的for 循环语句我们称之为双重for循环。
<script>
//九九乘法表
// 一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环
// 外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行
// 内层的 for 循环控制每行公式 j
// 核心算法：每一行 公式的个数正好和行数一致， j <= i;
// 每行打印完毕，都需要重新换一行
var str = '';
for (var i = 1;i<=9;i++ ){
for (var j = 1;j<=i;j++){
str += j + '*' + i + '=' + j*i + '\t'
}
str += '\n'
}
console.log(str)
</script>
for循环小结
for循环可以重复执行某些相同代码
for循环可以重复执行些许不同的代码，因为我们有计数器
for循环可以重复执行某些操作，比如算术运算符加法操作
随着需求增加，双重for循环可以做更多、更好看的效果
双重for循环,外层循环一次，内层for循环全部执行
for循环是循环条件和数字直接相关的循环
分析要比写代码更重要
一些核心算法想不到，但是要学会，分析它执行过程
举一反三，自己经常总结，做一些相似的案例
（3）while循环
千万别忘记操作表达式，给变量++，不然会陷入死循环
<script>
//while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环
// while语句的语法结构如下: while 当。。。的时候
//条件表达式结果为真 执行循环体，结果为假 不执行循环体退出循环
/*while(条件表达式){
循环体
}*/
//循环100句你好
//初始化变量
var num = 1;
while(num <= 100){
console.log('你好吗')
//操作表达式，完成计数器更新，防止死循环
num ++;
}
</script>
（4）do while 循环
do… while语句其实是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环
<script>
//do while循环 至少执行一次
//do... while语句循环会先执行一次代码块，然后对条件表达式进行判断，
// 如果条件为真，就会重复执行循环体，否则退出循环
/*do{
循环体
}while(条件表达式)*/
var i= 1;
do {
console.log('你好吗');
i++;
}while (i <= 100)
</script>
<script>
//1、打印人的一生，1-100岁
var age= 1;
do {
console.log('这个人今年'+ age +'岁了')
age++;
}while(age <= 100)
//2、计算1-100之间所有整数的和
var num = 1;
var sum = 0;
do {
sum += num;
num++;
}while(num <= 100)
console.log(sum)
//3、弹出提示框，吃了吗？ 如果输入吃了，循环结束，否则，一直询问
// var answer = '';
do {
var answer = prompt('吃了吗？')
}while(answer !== '吃了')
alert('我也吃了')
</script>
循环小结
JS中循环有for 、 while、do while
三个循环很多情况下都可以相互替代使用
如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用for
while和do…while可以做更复杂的判断条件，比for循环灵活一些
while和do…while执行顺序不一样，while先判断后执行，do…while先执行一次，再判断执行
while和do…while执行次数不一样，do…while至少会执行一次循环体，而while可能一次也不执行
实际工作中，我们更常用for循环语句，它写法更简洁直观，所以这个要重点学习
continue 和 break
（1）continue关键字
continue关键字用于立即跳出本次循环，继续下一次循环(本次循环体中continue之后的代码就会少执行一次)。
<script>
//continue关键字 退出本次循环，继续执行剩余次循环
for (var i = 1;i<=5;i++){
if (i === 3){
continue;//只要遇见continue就退出本次循环，直接跳到i++
}
console.log('我正在吃第'+ i + '个包子')
}
//求1-100之间，除了能被7整除之外的整数和
var sum = 0;
for (var j = 1;j<=100;j++){
if (j % 7 === 0){
continue;
}
sum += j;
}
console.log(sum)
</script>
（2）break 关键字
break 关键字用于立即跳出整个循环（循环结束)。
<script>
//break关键字 立即跳出整个循环
for (var i = 1;i<=5;i++){
if (i === 3){
break;
}
console.log('我正在吃第'+ i + '个包子')
}
</script>
<script>
// 简易ATM题目描述
// 里面现存有 100 块钱。
// 如果存钱，就用输入钱数加上先存的钱数, 之后弹出显示余额提示框
// 如果取钱，就减去取的钱数，之后弹出显示余额提示框
// 如果显示余额，就输出余额
// 如果退出，弹出退出信息提示框
//有bug，做第2次选择时无法再次回到switch语句判断，无法进行下一步
/*var money = 100;
var msg = prompt('你想要的进行的操作是：\n 1、存钱 \n 2、取钱 \n 3、显示余额 \n 4、退出')
switch (parseInt(msg)) {
case 1:
var add = prompt('请输入您要存的钱数');
if(add >= 0){
money += parseFloat(add);
alert('存钱成功，您的余额是：' + money);
//有bug，做第2次选择时无法再次回到switch语句判断，无法进行下一步
msg = prompt('你想要的进行的操作是：\n 1、存钱 \n 2、取钱 \n 3、显示余额 \n 4、退出')
}else{
alert('你输入的钱数有误')
msg = prompt('你想要的进行的操作是：\n 1、存钱 \n 2、取钱 \n 3、显示余额 \n 4、退出')
}
break;
case 2:
var sub = prompt('你的余额是：'+ money + '\n' +'请输入您要取的钱数');
if (sub <= money){
money = money - parseFloat(sub);
alert('取钱成功，您的余额是：' + money);
msg = prompt('你想要的进行的操作是：\n 1、存钱 \n 2、取钱 \n 3、显示余额 \n 4、退出')
}else{
alert('你要取的钱数多余您的余额，操作失败')
msg = prompt('你想要的进行的操作是：\n 1、存钱 \n 2、取钱 \n 3、显示余额 \n 4、退出')
}
break;
case 3:
alert('您的余额是：' + money);
msg = prompt('你想要的进行的操作是：\n 1、存钱 \n 2、取钱 \n 3、显示余额 \n 4、退出')
break;
case 4:
alert('退出成功');
break;
default:
alert('您输入的命令有误')
}*/
var shuru = prompt('操作:\n1.存钱\n2.取钱\n3.显示余额\n4.退出');
qian = 100;
while (qian >= 0) {
if (shuru === '1') {
var add = prompt('请输入您要存的钱数');
if(add >= 0){
qian += parseInt(add);
alert('余额' + qian);
}else{
alert('你输入的钱数有误')
}
shuru = prompt('操作:\n1.存钱\n2.取钱\n3.显示余额\n4.退出');
}else if (shuru === '2') {
var sub = prompt('你的余额是：'+ qian + '\n' +'请输入您要取的钱数');
if (sub <= qian){
qian = qian - parseInt(sub);
alert('余额' + qian);
}else{
alert('你要取的钱数多余您的余额，操作失败')
}
shuru = prompt('操作:\n1.存钱\n2.取钱\n3.显示余额\n4.退出');
}else if (shuru === '3') {
alert('余额' + qian);
shuru = prompt('操作:\n1.存钱\n2.取钱\n3.显示余额\n4.退出');
}else if (shuru === '4') {
alert('退出成功');
// shuru = false;
break;
}else{
alert('您输入的命令有误');
shuru = prompt('操作:\n1.存钱\n2.取钱\n3.显示余额\n4.退出');
}
}
</script>
数组（Array）
可以使用数组(Array)。数组可以把一组相关的数据一起存放，并提供方便的访问(获取)方式。
数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。
1、创建数组及访问（获取）元素
<script>
//1、利用new创建数组
var arr = new Array();//创建了一个空数组
//2、利用数组字面量创建数组 []
var arr = [];//创建了一个空数组
//在数组中可以存放任意类型的元素,数据（元素）用逗号分隔
var arr1 = [1,2,3,'pink老师',true];
//获取数组元素 数组名[索引号]
//数组的索引（下标）从0开始
console.log(arr1);
console.log(arr1[3])//pink老师
console.log(arr1[0])//1
console.log(arr1[5])//undefined 没有索引号是五的元素
var week = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
console.log(week[6])//星期日
</script>
2、遍历数组
从代码中我们可以发现，从数组中取出每一个元素时，代码是重复的，有所不一样的是索引值在递增答案就是循环
遍历：就是把数组中的每个元素从头到尾都访问一次(类似我们每天早上学生的点名)。
<script>
//遍历：就是把数组中的每个元素从头到尾都访问一次(类似我们每天早上学生的点名)。
var arr = ['red','green','blue','yellow'];
//因为数组索引号从0开始，所以i<arr.length 而不是<=
//数组的长度是元素个数 arr.length动态监测数组元素的个数
for (var i = 0;i<arr.length;i++){
console.log(arr[i])
}
</script>
**数组长度：**length就是数组的长度 数组名.length
<script>
//求数组最大值
// 声明一个保存最大元素的变量 max。
// 默认最大值可以取数组中的第一个元素。
// 遍历这个数组，把里面每个数组元素和 max 相比较。
// 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
// 最后输出这个 max
var arr = [2,6,1,77,52,25,7]
var max = arr[0]
for (var i = 1;i<arr.length;i++){
if (arr[i] > max){
max = arr[i]
}
}
console.log('该数组内最大值是：' + max)
</script>
数组转换为字符串
<script>
// 将数组 ['red', 'green', 'blue', 'pink'] 转换为字符串，并且用 | 或其他符号分割
// 1.需要一个新变量用于存放转换完的字符串 str。
// 2.遍历原来的数组，分别把里面数据取出来，加到字符串里面。
// 3.同时在后面多加一个分隔符
var str = '';
var sep = '|'
var arr = ['red','green','blue','yellow','black'];
for (var i = 0;i<arr.length;i++){
str += arr[i] + sep
}
console.log(str)
</script>
3、数组新增长度
<script>
//1、通过修改length长度 新增数组元素
var arr = ['red','green','yellow']
console.log(arr.length)
arr.length = 5; //把数组长度修改为5
console.log(arr)
console.log(arr[3]) // 因更改数组长度但没有给值，故元素是undefined
console.log(arr[4]) // 因更改数组长度但没有给值，故元素是undefined
//2、通过修改数组索引新增数组长度
var arr1 = ['red','green','yellow']
arr1[3] = 'black';
console.log(arr1)
arr1[4] = 'blue'
console.log(arr1)
arr1[0] = 'purple' //替换原来的数组元素
console.log(arr1)
arr1 = '有点意思'
console.log(arr1) //不要随便给数组名赋值，否则里面的数组元素会被覆盖掉
</script>
4、数组排序（冒泡排序）
冒泡排序︰是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)。
外层for循环控制趟数，内层for循环控制次数
<script>
//冒泡排序
var arr = [4,3,76,23,90,12,32,41,7,89,53];
//外层循环管趟数，走arr.length-1趟
for (var i = 0;i<=arr.length-1;i++){
//内层循环管次数：走 arr.length-1-i 次
for (var j = 0;j<=arr.length-1-i;j++){
//内部交换两个变量的值 前一个和后一个相比较
//从小到大排序
/*if (arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}*/
//从大到小排序
if (arr[j] < arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr)
</script>
函数
在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。
虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数。
函数∶就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
函数的封装：是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
<script>
//求1-100之间所有数字和
var sum = 0;
for (i = 1;i<=100;i++){
sum += i;
}
console.log('1-100之间所有数字和：' + sum)//5050
// 函数 就是封装了一段可被重复调用执行的代码块
// 目的：让大量代码重复使用
// 声明函数
function getSum(num1,num2){
var sum = 0;
for (i = num1;i <= num2;i++){
sum += i;
}
console.log(sum)
}
//调用函数
getSum(10,50)//1230
</script>
1、函数的使用
<script>
//声明函数
//1、function 声明函数的关键字 小写 （命名函数）
//函数是做某件事情，函数名一般是动词
//函数不调用自己不执行
/*function 函数名(){
函数体
}*/
function sayHi(){
console.log('hi~~')
}
//调用函数
//函数名(); 小括号别忘了
sayHi();
// 2、函数表达式（匿名函数）
// 函数表达式声明方式跟声明变量差不多，
// 只不过变量里面存的是值而函数表达式里面存的是函数
// var 变量名 = function (){};
// 也可以传递参数
var fun = function (aru){
console.log('我是函数表达式')
console.log(aru)
}
// fun(); //调用函数 fun是变量名
fun('pink老师')
</script>
2、带参函数（形参、实参）
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。
形参不给值默认undefined
参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。
<script>
/*//1、在声明函数的小括号里是形参，形参（形式上的参数）
function 函数名(形参1,形参2...) {
}
//2、在函数调用的小括号里是实参（实际的参数）
// 函数的参数可以有，也可以没有，个数不限
函数名(形参1,形参2...)*/
function cook(aru) { //形参是接收实参的 aru='酸辣土豆丝' 类似变量赋值
console.log(aru);
}
cook('酸辣土豆丝');
cook('糖醋里脊');
</script>
3、函数和形参个数不匹配
<script>
//函数形参和实参个数不匹配
function getSum(num1,num2){
console.log(num1 + num2);
}
//1、如果形参实参个数一致----正常输出结果
getSum(1,4) //5
//2、如果实参个数多于形参----会取到形参的个数，多余的的不取
getSum(1,2,4) //3
//3、如果实参个数小于形参---
// 形参可以看做不用声明的变量，num2是一个变量但没有接收值，结果是undefined，
// 任何数加上undefined结果是NaN
getSum(2) //NaN
</script>
4、函数返回值
（1）return
<script>
//函数返回值 return
//1、函数只是实现某种功能，最终的结果需要返回给函数的调用函数名（） 通过return实现
//2、只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名（）= return后面的结果
/*function 函数名(){
return 需要返回的结果;
}
函数名();*/
function getResult(){
return 666;
}
// getResult(); //getResult() = 666
console.log(getResult())
//利用函数求任意两数之和
function getSum(num1,num2) {
return num1 + num2;
}
console.log(getSum(1,2));
</script>
<script>
function getArrMax(arr){ //arr 接收一个数组
// var arr = [];
var max = arr[0];
for (var i = 1;i < arr.length;i++) {
if (arr[i] > max){
max = arr[i];
}
}
return max;
}
//在实际开发中 经常用一个变量来接收 函数的返回结果
var re = getArrMax([5,2,55,33,23,45,67,81]) //实参是一个数组送过去
console.log(re);
</script>
（2）函数返回值注意事项
<script>
//注意事项
//1、return终止函数
function getSun(num1,num2){
return num1 + num2; //return后面的函数不会被执行
alert('我不会被执行')
}
console.log(getSun(1,2))
//2、return只能返回一个值
function fn(num1,num2){
return num1,num2; //返回最后一个值
}
console.log(fn(1,2)) //2
//3、求任意两个数的 加减乘除结果
//返回多个值用数组
function getResult(num1,num2) {
return [num1 + num2,num1 - num2,num1 * num2,num1 / num2]
}
var re = getResult(4,6)
console.log(re)
//4、函数如果有return返回return后面的值，如果没有return则返回undefined
function fun1() {
return 666;
}
console.log(fun1()) //666
function fun2() {
}
console.log(fun2()) //undefined
</script>
（3）break，continue，return 的区别
break : 结束当前的循环体(如 for、while )
continue : 跳出本次循环，继续执行下次循环（如 for、while )
return : 不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码
5、arguments的使用
当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中, arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
arguments展示形式是一个伪数组，因此可以进行遍历。
伪数组具有以下特点：
具有length属性、按索引方式储存数据、不具有数组的push , pop等方法
<script>
//arguments的使用 只有函数只有arguments对象，而且是内置好了的
function fn(){
console.log(arguments); //里面存储所有传递过来的实参
console.log(arguments.length) // 伪数组具有length属性、按索引方式储存数据、不具有数组的push,pop等方法
//按照遍历数组的方式遍历arguments
for (var i = 0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
fn(1,2,3);
fn(1,2,3,4,5)
</script>
<script>
//利用函数求任意个数的最大值
function getMax(){
var max = arguments[0];
for (var i = 1;i<arguments.length ;i++){
if (arguments[i] > max){
max = arguments[i]
}
}
return max;
}
console.log(getMax(2,3,4,5,33,22,12,43,12,3))
</script>
6、函数相互调用
因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况.
<script>
function backDay(){
var year = prompt('输入年份');
if (isRunYear(year)){ //调用isRunYear()函数
alert( year + '年是闰年2月份有29天' )
}else{
alert(year + '年是平年2月份有28天')
}
}
backDay();
//判断是否闰年的函数
function isRunYear(year){
//闰年返回true，平年返回false
var flag = false;
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){
flag = true;
}
return flag;
}
</script>
作用域
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少命名冲突。
<script>
//1、js作用域（es6）之前：全局作用域 局部作用域
// 全局作用域：整个script标签 或者是一个单独的js文件
var num= 10;
console.log(num)
// 局部作用域：在函数内部，这个代码的名字只在函数内部有效
function fn(){
//局部作用域
var num = 20;
console.log(num)
}
fn();
</script>
变量的作用域
根据作用域的不同，变量可以分为两种：
全局变量、局部变量
<script>
// 变量的作用域： 根据作用域的不同我们变量分为全局变量和局部变量
// 1. 全局变量： （1）在全局作用域下的变量 在全局下都可以使用
// 注意 （2）如果在函数内部 没有声明直接赋值的变量也属于全局变量
var num = 10; // num就是一个全局变量
console.log(num);
function fn() {
console.log(num);
}
fn();
// console.log(aru);
// 2. 局部变量 在局部作用域下的变量 后者在函数内部的变量就是 局部变量
// 注意： 函数的形参也可以看做是局部变量
function fun(aru) {
var num1 = 10; // num1就是局部变量 只能在函数内部使用
// 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
num2 = 20; //全局变量
}
fun();
// console.log(num1);
// console.log(num2);
// 3. 从执行效率来看全局变量和局部变量
// (1) 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
// (2) 局部变量 当我们程序执行完毕就会销毁， 比较节约内存资源
</script>
作用域链
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
<script>
//作用域链:内部函数访问外部函数的变量，采取的是链式(就近原则）查找的方式来决定取那个值这种结构我们称为作用域链
var num = 10;
function fn(){ //外部函数
var num = 20;
fun()
function fun(){ //内部函数
console.log(num)
}
}
fn()
</script>
预解析
JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。
<script>
// 1. 我们js引擎运行js 分为两步： 预解析 代码执行
// (1). 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
// (2). 代码执行 按照代码书写的顺序从上往下执行
// 2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
// (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
// (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数
//html文件不能叫预解析，会出错
// 1问
console.log(num);
// 2问
console.log(num); // undefined 坑 1
var num = 10;
// 相当于执行了以下代码
// var num;
// console.log(num);
// num = 10;
// 3问
function fn() {
console.log(11);
}
fn();
// 4问
fun(); // 报错 坑2
var fun = function() { //使用var定义函数，有变量提升 但不提升赋值也就是函数
console.log(22);
}
fun(); //调用成功
// 函数表达式 调用必须写在函数表达式的下面
// 相当于执行了以下代码
// var fun;
// fun();
// fun = function() {
// console.log(22);
// }
</script>
<script>
// 案例4
f1();
console.log(c); //9 b和c直接赋值，是全局变量
console.log(b); //9
console.log(a); //报错 a是函数内var声明变量 局部变量局部作用域
function f1() {
var a = b = c = 9;
console.log(a); //9
console.log(b); //9
console.log(c); //9
}
// 以下代码
/*function f1() {
var a;
a = b = c = 9;
// 相当于 var a = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当 全局变量看
// 集体声明 var a = 9, b = 9, c = 9;
console.log(a);
console.log(b);
console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);*/
</script>
对象（复杂数据类型）
现实生活中∶万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。
在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。
**属性：**事物的特征，在对象中用属性来表示(常用名词)
**方法︰**事物的行为，在对象中用方法来表示(常用动词)
变量、属性、方法、函数 的区别
<script>
// 变量、属性、函数、方法的区别
// 1.变量和属性的相同点 他们都是用来存储数据的
var num = 10;
var obj = {
age: 18,
fn: function() {
}
}
function fn() {
}
console.log(obj.age); //18
// console.log(age); //报错
// 变量 单独声明并赋值 使用的时候直接写变量名 单独存在
// 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
// 2. 函数和方法的相同点 都是实现某种功能 做某件事
// 函数是单独声明 并且调用的 函数名() 单独存在的
// 方法 在对象里面 调用的时候 对象.方法()
</script>
1、创建对象（object）
（1）利用字面量创建对象
对象字面量∶就是花括号[}里面包含了表达这个具体事物〔对象）的属性和方法。
<script>
//1、利用对象字面量创建对象{}
//里面的属性或方法采取键值对的形式 键 属性名： 值 属性值(可以是任意类型）
//多个属性或方法中间用逗号隔开
//方法冒号后面跟的是一个匿名函数
//var obj = {} 创建空对象
var obj = {
uname: '张三',
age:18,
sex:'男',
sayHi: function (){
console.log('hi')
}
}
//使用对象
// (1)调用对象的属性 对象名。属性名
console.log(obj.uname)
// (2)还有一种方法 对象名['属性名']
console.log(obj['age'])
// (3)调用对象的方法sayHi 对象名.方法名() 小括号必须的
obj.sayHi();
// 案例
var dog = {
uname:'可可',
type:'阿拉斯加',
age:5,
color:'red',
bark:function (){
console.log('汪汪！！')
},
showFilm:function (){
console.log('我会演电影')
}
}
console.log(dog.type)
dog.bark();
</script>
（2）利用new Object创建对象
<script>
var obj = new Object(); //创建了空对象
//追加属性 利用等号赋值的方法 添加对象的属性和方法
//每个属性和方法之间用 分号结尾
obj.uname = '张三';
obj.age = 12;
obj.sex = '男';
obj.sayHi = function (){
console.log('hi')
}
console.log(obj.age)
obj.sayHi()
// 案例
var people = new Object();
people.uname = '鸣人';
people.age = 18
people.sex = '男'
people.skill = function (){
console.log('影分身')
}
console.log(people)
console.log(people.uname)
people.skill()
</script>
（3）利用构造函数创建对象
因为前面两种创建对象的方式一次只能创建一个对象，里面很多属性和方法是大量相同的，因此可以利用函数的方法，重复这些代码，称为构造函数
这个构造函数里面封装的是对象
构造函数就是把对象里面一些相同的属性和方法抽象出来封装到函数里面
==构造函数︰==是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
<script>
//构造函数
/*function 构造函数名(形参){
this.属性 = 值;
this.方法 = function (){}
}
//使用构造函数
new 构造函数名(实参);*/
//构造函数名首字母大写
function Star(uname,age,sex){
//属性和方法前必须写this
this.name = uname //等号后面的是括号里的形参
this.age = age
this.sex = sex
this.sing = function (sang){
console.log(sang)
}
}
//构造函数不需要return就能返回结果
//调用构造函数必须使用new
//只要new Star（） 调用函数就是创建了一个对象
var ldh = new Star('刘德华',18,'男'); //返回一个对象
console.log(typeof ldh) //object
//这里调用ldh.name的name是this.name的name this指代ldh
console.log(ldh.name)
console.log(ldh['sex'])
ldh.sing('冰雨')
var zxy = new Star('张学友',23,'男');
console.log(zxy.name)
console.log(zxy.age)
zxy.sing('李香兰')
// 案例
function Hero(uname,type,blood){
this.name = uname
this.type = type
this.blood = blood
this.attack = function (attack){
console.log(attack)
}
}
var lp = new Hero('廉颇','力量型','500血量')
console.log(lp.type) //这里调用lp.type的type是this.type的type
lp.attack('近战')
var hy = new Hero('后羿','射手型','100血量')
console.log(hy.type)
hy.attack('远程')
</script>
构造函数和对象
构造函数，如Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类( class )
创建对象，如new Star（），特指某一个，通过new关键字创建对象的过程我们也称为对象实例化
<script>
// 构造函数和对象
// 1. 构造函数 明星 泛指的某一大类 它类似于 java 语言里面的 类(class)
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
// 2. 对象 特指 是一个具体的事物 刘德华 == {name: "刘德华", age: 18, sex: "男", sing: ƒ}
var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
console.log(ldh);
// 3. 我们利用构造函数创建对象的过程我们也称为对象的实例化
</script>
new关键字执行过程
<script>
// new关键字执行过程
// 1. new 构造函数可以在内存中创建了一个空的对象
// 2. this 就会指向刚才创建的空对象
// 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
// 4. 返回这个对象(所以构造函数不需要return)
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
var ldh = new Star('刘德华', 18, '男');
</script>
2、遍历对象
for…in语句用于对数组或者对象的属性进行循环操作。
<script>
var obj = {
name:'张三',
age:18,
sex:'男',
fn:function (){
}
}
// for in遍历对象
/*for (变量 in 对象){
}*/
//for in里面的变量一般写k或key
for (var k in obj){
console.log(k) //name age sex 输出的是属性名
console.log(obj[k]) //obj[k] 得到的是属性值
}
</script>
内置对象
JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象
前面两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于我们JS独有的，我们JS API讲解
内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法)
内置对象最大的优点就是帮助我们快速开发
JavaScript提供了多个内置对象:Math、Date . Array、string等
查文档：MDN、菜鸟教程、W3C
（1）Math对象
<script>
//Math数学对象不是一个构造函数﹐所以我们不需要new来调用而是直接使用里面的属性和方法即可
console.log(Math.PI) //一个属性 圆周率
console.log(Math.max(1,22,3,12,21,45,7,56,32)) //56
console.log(Math.max(-1,-10)) //-1
console.log(Math.max(1,33,'pink')) //NaN
console.log(Math.max()) //-Infinity
// 绝对值方法
console.log(Math.abs(-9)) //9
console.log(Math.abs('-1')) //1 隐式转换 会把字符串型 转换为数字型1
console.log(Math.abs('pink')) //NaN
// 取整方法
// (1) Math.floor() 地板 向下取整 往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
// (2) Math.ceil() ceil 天花板 向上取整 往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// (3) Math.round() 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // 这个结果是 -1
console.log(Math.round(-1.4)); // 这个结果是 -1
</script>
随机数方法 random（）
<script>
// 1.Math对象随机数方法 random() 返回一个随机的小数 左闭右开 0 =< x < 1
// 2. 这个方法里面不跟参数
// 3. 代码验证
console.log(Math.random());
// 4. 我们想要得到两个数之间的随机整数 并且 包含这2个整数
// Math.floor(Math.random() * (max - min + 1)) + min;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 100));
// 5. 随机点名
var arr = ['张三', '张三丰', '张三疯子', '李四', '李思思', 'pink老师'];
// console.log(arr[0]);
console.log(arr[getRandom(0, arr.length - 1)]);
</script>
（2）日期对象
Date对象和Math对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
Date实例用来处理日期和时间
| 方法名 | 说明 |
|---|---|
| getFullYear() | 获取当年 |
| getMonth() | 获取当月（0-11） |
| getDate() | 获取当天日期 |
| getDay() | 获取星期几（周日0 到周六6） |
| getHours() | 获取当前小时 |
| getMinutes() | 获取当前分钟 |
| getSeconds() | 获取当前秒钟 |
<script>
//格式化日期 年月日
var date = new Date();
console.log(date.getFullYear());//2022
console.log(date.getMonth()); //返回10 实际11月，因为month从0开始，到11
console.log(date.getMonth()+1); //返回11 +1之后就能返回当前月份
console.log(date.getDate()); //3
console.log(date.getDay()); //4周四
// 写2022年11月3日
var year = date.getFullYear();
var month = date.getMonth()+1;
var dates = date.getDate();
//根据day作为索引号取出星期几
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var day = date.getDay();
console.log('今天是：' + year + '年' + month + '月' + dates + '日\t' + arr[day] )
// 格式化时分秒
var hours = date.getHours()
var minu = date.getMinutes()
var sec = date.getSeconds()
console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())
console.log('现在是：' + hours + '时' + minu + '分' + sec + '秒')
console.log('现在是：' + year + '年' + month + '月' + dates + '日\t' + arr[day] + '\t' + hours + '时' + minu + '分' + sec + '秒')
// 要求封装一个函数返回当前的时分秒 格式 08:08:08
function getTimer() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTimer());
</script>
获得Date总的毫秒数
<script>
// 获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
// 1. 通过 valueOf() getTime()
var date = new Date();
console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
console.log(date.getTime());
// 2. 简单的写法 (最常用的写法)
var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
console.log(date1);
// 3. H5 新增的 获得总的毫秒数
console.log(Date.now());
</script>
倒计时案例
<script>
//倒计时案例 将来现在时间戳相减 再转换为时分秒
// 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
// 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
// 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
// 转换公式如下： 1秒=1000毫秒
// d = parseInt(总秒数/ 60/60 /24); // 计算天数
// h = parseInt(总秒数/ 60/60 %24) // 计算小时
// m = parseInt(总秒数 /60 %60 ); // 计算分数
// s = parseInt(总秒数%60); // 计算当前秒数
function countDown(time){
var nowTime = +new Date(); //没有参数，返回当前毫秒数
var inputTime = +new Date(time); //有参数，返回用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //times就是剩余时间总的秒数
var d = parseInt(times / 60/60 /24);
d = d<10 ? '0'+d : d;
var h = parseInt(times / 60/60 %24)
h = h<10 ? '0'+h : h;
var m = parseInt(times /60 %60 );
m = m<10 ? '0'+m : m;
var s = parseInt(times %60);
s = s<10 ? '0'+s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-11-07 18:00:00'))
var date = new Date();
console.log(date);
</script>
（3）数组对象
1）检测是否为数组
<script>
// 翻转数组
function reverse(arr) {
// if (arr instanceof Array) {
if (Array.isArray(arr)) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
} else {
return 'error 这个参数要求必须是数组格式 [1,2,3]'
}
}
console.log(reverse([1, 2, 3]));
console.log(reverse(1, 2, 3));
// 检测是否为数组
// (1) instanceof 运算符 它可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array); //true
console.log(obj instanceof Array); //false
// (2) Array.isArray(参数); H5新增的方法 ie9以上版本支持
console.log(Array.isArray(arr)); //true
console.log(Array.isArray(obj)); //false
</script>
2）添加和删除数组元素的方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| push（参数1…） | 末尾添加一个或多个元素，注意修改原数组 | 并返回新的长度 |
| pop（） | 删除数组最后一个元素，把数组长度减1无参数、修改原数组 | 返回它删除的元素的值 |
| unshift（参数1…） | 向数组的开头添加一个或更多元素，注意修改原数组 | 并返回新的长度 |
| shift（） | 删除数组的第一个元素，数组长度减1无参数、修改原数组 | 并返回第一个元素的值 |
<script>
//添加数组元素方法
// 1、push（） 在数组末尾添加一个或多个元素，注意修改原数组
var arr = [1,2,3];
arr.push(4,5,'pink')
console.log(arr)
// console.log(arr.push(4,5,'pink')) //push完毕之后返回结果是新数组长度
// 2、unshift（） 向数组的开头添加一个或更多元素，注意修改原数组
arr.unshift('red','purple')
console.log(arr)
// console.log(arr.unshift('red','purple')) //完毕之后返回结果是新数组长度
// 删除数组元素
// 3、pop（）没有参数 删除数组最后一个元素，把数组长度减1无参数、修改原数
arr.pop();
// console.log(arr.pop()) //返回删除的那个元素
console.log(arr)
// 4、shift（） 删除数组的第一个元素，数组长度减1无参数、修改原数组
arr.shift();
console.log(arr)
// console.log(arr.shift()) //返回删除的那个元素
</script>
3）筛选数组
<script>
var arr = [1500,1200,2000,2100,1800,2300,1400,1900]
var newArr = [];
for (var i = 0;i<arr.length;i++){
if (arr[i] <= 2000){
// newArr[newArr.length] = arr[i];
newArr.push(arr[i]);
}
}
console.log(newArr)
console.log(arr)
</script>
4）数组排序
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
| reverse（） | 颠倒数组中元素的顺序,无参数 | 该方法会改变原来的数组返回新数组 |
| sort（） | 对数组的元素进行排序 | 该方法会改变原来的数组返回新数组 |
<script>
//1、翻转数组
var arr = ['pink','blue','yellow','black']
arr.reverse();
console.log(arr)
//2、数组排序（冒泡排序）
var arr1 = [2,34,11,21,3,1,45,42,12]
// arr1.sort() //有bug
arr1.sort(function (a,b){
// return a - b; //升序的顺序排列
return b - a; //降序的顺序排列
})
console.log(arr1)
</script>
5）数组索引方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| indexOf（） | 数组中查找给定元素的第一个索引 | 如果存在返回索引号如果不存在，则返回-1. |
| lastIndexOf（） | 在数组中的最后一个的索引 | 如果存在返回索引号如果不存在，则返回-1. |
<script>
//返回数组元素索引号
var arr = ['red','pink','green','yellow','green']
console.log(arr.indexOf('green')) //返回第一个满足条件的索引值2
console.log(arr.lastIndexOf('green')) //返回数组中最后一个满足条件的索引值4
console.log(arr.indexOf('blue')) //数组没有'blue'这个元素，返回-1
</script>
数组去重
<script>
// 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。
// 1.目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。
// 2.核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否则不添加。
// 3.我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素
// 封装一个 去重的函数 unique 独一无二的
function unique(arr) {
var newArr = [];
for(var i = 0;i<arr.length;i++){
if (newArr.indexOf(arr[i]) === -1){
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
console.log(demo)
</script>
6）数组转换为字符串
| 方法名 | 说明 | 返回值 |
|---|---|---|
| toString（） | 把数组转换成字符串，逗号分隔每一项 | 返回一个字符串 |
| join（‘分隔符’） | 方法用于把数组中的所有元素转换为一个字符串。 | 返回一个字符串 |
<script>
//数组转换为字符串
// 1、toString（） 把数组转换成字符串，逗号分隔每一项
var arr = [1,2,3]
console.log(arr.toString()) //1,2,3
// 2、join（‘分隔符’） 方法用于把数组中的所有元素转换为一个字符串,自定义分隔符
var arr1 = ['green','red','blue']
console.log(arr1.join()) //green,red,blue 不指定分隔符时，默认逗号分隔
console.log(arr1.join('|')) //green|red|blue
console.log(arr1.join('&')) //green&red&blue
</script>
7）其他
| 方法名 | 说明 | 返回值 |
|---|---|---|
| contact（） | 连接两个或多个数组不影响原数组 | 返回一个新的数组 |
| slice（） | 数组截取slice(begin, end) 左闭右开 | 返回被截取项目的新数组，不改变原数组 |
| splice（） | 数组删除splice(第几个开始,要删除个数) | 返回被删除项目的新数组注意，这个会影响原数组 |
<script>
var arr= [1,2,3,4,5]
var arr1= [6,7,8,9,10]
//连接两个或多个数组不影响原数组
console.log(arr.concat(arr1)) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr1.concat(arr)) //[6, 7, 8, 9, 10, 1, 2, 3, 4, 5]
//数组截取slice(begin, end) 左闭右开
console.log(arr.slice(2,4)) //[3, 4] 左闭右开截取
//数组删除splice(第几个开始,要删除个数)
console.log(arr1.splice(1,2)) //[7, 8] 返回的是删除了的元素
console.log(arr1) // [6, 9, 10] 原数组发生改变
//从索引2开始，删除0个元素，添加32,12进数组，
console.log(arr.splice(2,0,32,12)) // [] 因没有删除元素，故返回空数组
console.log(arr) // [1, 2, 32, 12, 3, 4, 5] 原数组发生改变
</script>
（4）字符串对象
1）基本包装类型
为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型:String、Number和Boolean.
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
<script>
//基本包装类型
var str = 'andy'
console.log(str.length)
// 对象 才有 属性和方法 复杂数据类型才有 属性和方法
// 简单数据类型为什么会有length 属性呢？
// 基本包装类型： 就是把简单数据类型 包装成为了 复杂数据类型
//按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，
// 这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下:
// (1) 把简单数据类型包装为复杂数据类型
var temp = new String('andy');
// (2) 把临时变量的值 给 str
str = temp;
// (3) 销毁这个临时变量
temp = null;
</script>
2）字符串不可变
<script>
// 字符串的不可变性
//指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
var str = 'andy';
console.log(str);
str = 'red';
console.log(str);
// 因为我们字符串的不可变所以不要大量的拼接字符串 会有效率问题，电脑会卡死
var str = '';
/*for (var i = 1; i <= 1000000000; i++) {
str += i;
}*/
console.log(str);
</script>
3）根据字符返回位置
字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。
| 方法名 | 说明 |
|---|---|
| indexOf（’要查找的字符‘，开始的位置） | 返回指定内容在元字符串中的位置，如果找不到就返回-1，开始的位置是index索引号 |
| lastIndexOf（） | 从后往前找，只找第一个匹配的 |
<script>
//根据字符返回位置 indexOf（’要查找的字符‘，开始的位置）
var str = '学习web前端前'
console.log(str.indexOf('前')) //5
console.log(str.lastIndexOf('前')) //7 从后往前查找
console.log(str.indexOf('前',6)) // 7从索引号是6的位置开始查找
// 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
// 核心算法：先查找第一个o出现的位置
// 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
// 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
/*var str = "oabcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
// console.log(index);
while (index !== -1) {
console.log(index);
num++;
index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是: ' + num);*/
// 课后作业 ['red', 'blue', 'red', 'green', 'pink','red'], 求 red 出现的位置和次数
var arr = ['red', 'blue', 'red', 'green', 'pink','red'];
var index = arr.indexOf('red')
var num = 0;
while(index !== -1){
console.log(index)
num++;
index = arr.indexOf('red',index+1);
}
console.log('出现次数是：' + num)
</script>
4）根据位置返回字符
| 方法名 | 说明 | 使用 |
|---|---|---|
| charAt（index） | 返回指定位置的字符(index字符串的索引号) | str.charAt(O) |
| charCodeAt（index） | 获取指定位置处字符的ASCII码(index索引号) | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5，IE8+支持和charAt()等效 |
<script>
//根据位置返回字符 返回指定位置的字符(index字符串的索引号)
// 1、charAt（index）
var str = 'andy'
console.log(str.charAt(3)) //y
// 遍历所有的字符
for (var i = 0;i<str.length;i++){
console.log(str.charAt(i))
}
// 2、charCodeAt（index） 获取指定位置处字符的ASCII码(index索引号)
// 目的：判断用户按下了哪个键
console.log(str.charCodeAt(0)) //97 a
// 3、str[index] H5新增
console.log(str[0]) //a
</script>
统计出现最多的字符和次数
<script>
// 有一个对象 来判断是否有该属性 对象['属性名']
/*var o = {
age: 18
}
if (o['sex']) {
console.log('里面有该属性');
} else {
console.log('没有该属性');
}*/
// 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
// o.a = 1
// o.b = 1
// o.c = 1
// o.o = 4
// 核心算法：利用 charAt(） 遍历这个字符串
// 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
// 遍历对象，得到最大值和该字符
var str = 'abcoefoxyozzopp'
var o = {}
for (var i = 0;i<str.length;i++){
var chars = str.charAt(i); //chars是字符串的每一个字符 作为对象的属性
if (o[chars]){ // o[chars] 得到的是属性值
o[chars]++;
}else{
o[chars] = 1;
}
}
console.log(o)
// 遍历对象
var max = 0;
var char = ''
for (var k in o){
//k得到的是属性名 o[k]得到的是属性值
if (o[k] > max){
max = o[k];
char = k;
}
}
console.log('最多的字符是：' + char,'有' + max + '个')
</script>
5）字符串操作方法
| 方法名 | 说明 |
|---|---|
| contact（str1，str2，…） | concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用 |
| substr（start，length） | 从start位置开始(索引号), length 取的个数重点记住这个 |
| slice（start，end） | 从start位置开始，截取到end位置，end取不到(他们俩都是索引号) |
| substring(start,end) | 从start位置开始，截取到end位置，end取不到基本和slice相同但是不接受负值 |
<script>
//字符串操作方法
// 1、contact（字符串1，字符串2.。。）
var str = 'andyandy'
console.log(str.concat('red')) //andyred
// 2、substr（截取的起始位置，截取几个字符）
var str1 = 'web前端我在学习啊'
console.log(str1.substr(3,5)) //前端我在学
// 3、替换字符 replace（被替换的字符，替换为的字符）
console.log(str.replace('a','b')) //bndyandy 只会替换第一个字符
// oabcoefoxyozzopp 把所有o替换成*
var str2 = 'oabcoefoxyozzopp';
while (str2.indexOf('o') !== -1){
str2 = str2.replace('o','*');
}
console.log(str2)
// 4、字符串转换为数组 split（‘分隔符’） join数组转换为字符串
// 括号里的分隔符是字符串内原本的分隔符，会按照给的分隔符把字符串分开，变成数组的每个元素
var str3 = 'red,pink,green'
console.log(str3.split())
console.log(str3.split(',')) //['red', 'pink', 'green']
console.log(str3.split('|')) //['red,pink,green']
console.log(str3.split('&'))
var str4 = 'red&pink&green'
console.log(str4.split('&')) //['red', 'pink', 'green']
// 5、toUpperCase（） 转换大写
var str5 = 'segUYGhiogi'
console.log(str5.toUpperCase())
// 6、toLowerCase（） 转换小写
console.log(str5.toLowerCase())
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
