JavaScript--JavaScript基础

原创已于 2025-04-05 16:03:42 修改 · 置顶 · 712 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2025-03-24 10:05:32 首次发布

JavaScript开发专栏收录该内容

43 篇文章

订阅专栏

一、Javascript介绍

1.1.JavaScript是什么？

1.JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果

2.JavaScript的作用

网页特效（监听用户的一些行为让网页做出对应的反馈）

表单验证（针对表单数据的合法性进行判断）

数据交互（获取后台的数据，渲染到前端）

服务端编程（node.js）

3.JavaScript的组成

Javascript 遵守 ECMAScript语法规范，Web APIs 包括 Dom 和 Bom

Dom:操作文档，比如对页面元素进行移动、大小、添加删除等操作

Bom：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等

1.2.书写位置

1.2.1.内部JavaScript

直接写在html文件里，用script标签包住

规范：script标签写在</body>上面

拓展：alert('你好,js')页面弹出警告对话框

<body>
    <script>
        alert('你好，js');
    </script>
</body>

1.2.2.外部JS

代码写在以.js结尾的文件里

语法：通过script标签，引入html页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/my.js"></script>
</head>
<body>
</body>
</html>

1.2.3.内联js

代码写在标签内部

语法：注意：此处作为了解即可，但是后面vue框架会用这种模式

<body>
    <button onclick="alert('逗你玩~~~')">点击我</button>
</body>

1.3.注释

单行注释：//

块注释：/* */ shift + alt +a

结束符：分号；但可写可不写 都不写最好，简单，一定要统一

1.4.输入输出语法

输出语法：

document.write('输出的内容') 
document.write('<h1>内容</h1>') //也可以输出标签

alert('要出的内容') //页面弹出警告对话框

console.log('控制台打印') //控制台输出语法，程序员调试使用

输入语法：
prompt('请输入内容') //输入语句
作用：显示一个对话框，对话框中包含一条文字消息，用来提示用户输入内容

1.5.代码执行顺序：

按html文档流顺序执行

alert() 和 prompt() 它们会跳过页面渲染先被执行

1.6.字面量

字面量是直接在代码中表示‌固定值‌的语法形式，无需通过变量或计算生成。以下是常见类型的字面量及其用法：

可以理解为直接赋值的数组，字符串，对象，布尔等其他类型都是字面量

// 更推荐字面量（简洁高效）：
const arr = [1, 2, 3];      // 字面量
const arr2 = new Array(1, 2, 3); // 构造函数

const obj = { key: "value" }; // 字面量
const obj2 = new Object();    // 构造函数

二、变量

2.1.变量是什么

问题1：用户输入的数据我们如何存储起来？答案：变量

变量是计算机存储数据的“容器”

变量可以让计算机变得有记忆

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器，可以理解为是一个个用来装东西的纸箱子

2.2.变量基本使用

2.2.1.变量的声明

创建变量或者声明变量
let 变量名
声明变量由两部分构成：关键字、变量名（标识）

let就是关键字，所谓关键字是系统提供的专门用来声明变量的词语

2.2.2.变量赋值

定义了一个变量后，就能初始化它，为它赋值，在变量名之后跟上一个'=',然后是数值

//变量赋值
let age
age = 18
alert(age)

//声明同时赋值--变量初始化
let age = 88
console.log(age)

2.2.3.更新变量

变量赋值后，可以通过简单的给它一个不同的值来更新它--也就是二次赋值

let age = 18
age = 19

// 例子临时变量
let num1 =10
let num2 =20
let num3 = num1
num1=num2
num2=num3

2.2.4.声明多个变量

let num,name num = 20 uname = '张三'

2.2.5.变量案例

1.需求：

浏览器中弹出对话框：请输入姓名，页面中输出：刚才输入的姓名

//输入姓名，并存到一个变量里
let name = prompt("请输入姓名：")
//输出刚才输入的姓名
alert("刚才您输入的姓名是："+name)

2.需求：

有2个变量：num1里放的是10，num2里放的是20

最后变为num1里放的是20，num2里放的是10

目的：

1.练习变量的使用

2.为了后面冒泡排序做准备

中间的临时变量会自动被销毁

let num1 = 10, num2= 20
let a = num1 
num1 = num2
num2 = a

2.3.变量本质

内存：计算机中存储数据的地方，是一个空间

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

2.4.变量命名规则与规范

规则：必须遵守，不遵守会报错

规范：建议，不遵守不会报错，但不符合业内共识

2.4.1.规则：

不能用关键字：let\var\if\for等

只能用下划线、字母、数字、$组成，且数字不能开头

字母严格区分大小写，如Age和age不同变量

2.4.2.规范：

起名要有意义

小驼峰命名法：userName，第一个单词首字母小写，后面每个单词首字母大写

2.5.let和var的区别

let 是优化升级版的 var

var和let的区别-CSDN博客

特性	`var j` 循环案例	`let k` 循环案例
‌作用域‌	全局/函数作用域	块级作用域（每次迭代独立作用域）
‌变量存储‌	单次循环共用同一变量	每次迭代创建新变量副本
‌闭包捕获‌	所有回调共享最终值（3）	每个回调捕获独立迭代值（0/1/2）
‌输出结果‌	3 3 3	0 1 2

三、常量

3.1.基本使用

概念：使用const声明的变量称为“常量”

使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let

命名规范：和变量一致

常量使用：

// 声明一个常量
const G = 9.8
// 输出这个常量
console.log(G)

注意：常量不允许重新赋值，声明的时候必须赋值（初始化）

小技巧：不需要重新赋值的数据使用const

四、数据类型

4.1.数据类型

数据分类的目的：

1.更加充分和高效地利用内存

2.更加方便程序员的使用数据

JS数据类型整体分为两大类：

基本数据类型和引用数据类型

或

简单数据类型和复杂数据类型

基本数据类型：

关键字	类型
number	数字型
string	字符串型
boolean	布尔型
underfined	未定义型
null	空类型
Symbol（唯一值）
bigInt（大整数值）

引用数据类型：所有对象类型--其中包含--Object（普通对象）、Date（日期）、Function（函数）和Array（数组）

4.2.数字类型Number

数学中的数字，可以是整数、小数、正数、负数

let age = 18
let price = 88.99

javascript中正数、负数、小数统一为数字类型

JS是弱数据类型，变量到底属于哪种类型，只用赋值之后，我们才能确定

Java\C语言是强数据类型，例如int a=3 必须是整数

转换：

parseInt(..) 将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN

特殊值：
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。

数字运算符也叫算数运算符，主要包括加减乘除取余

符号	含义
+	求和
-	求差
*	求积
/	求商
%	取模（取余数）

算数运算符的优先级顺序

1.优先级越高越先被执行，优先级相同时以书写顺序从左向右执行

2.乘除取余优先级相同

3.加减优先级相同

4.乘除取余优先级大于加减

5.使用()可以提升优先级

总结：先乘除后加减，有括号先算括号里面的

计算圆的面积

需求：对话框中输入圆的半径，算出圆的面积并显示到页面

分析：

1.面积的数学公式：π*r²

2.转换为JavaScript写法：变量* r * r

const PI = 3.14
let r = prompt("输入圆的半径：")
console.log(PI*r*r)

NaN代表一个计算错误

JavaScript中，NaN是一个特殊的数字值（typeof NaN的结果为number），是not a number的缩写，表示不是一个合法的数字 // 一特殊的数字类型的值，但它又不是数字

特点一：NaN参与的任何运算都是NaN

特点二，NAN和任何值都不相等，NaN是在js中唯一一个和自身不相等的值

js的NaN深入了解-CSDN博客

4.3.字符串类型String

通过单引号，双引号或反引号包裹的数据都叫字符串，单引号和双引号本质上没有区别，推荐使用单引号

注意事项

1.无论单引号还是双引号必须成对使用

2.单引号、双引号可以互相嵌套，但是不可自己嵌套自己（口诀：外双内单，或者外单内双）

3.必要时可以使用转义符\，输出单引号或双引号

4.3.1.字符串拼接：

加号运算符可以实现字符串拼接

document.write('我叫'+'张三')
let uname = '张三'
let song = '之歌'
document(uname + song)

4.3.2.字符串的各种方法

obj.length()                         获取长度
obj.trim()                           去除字符串左右空格,移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符，返回索引下的字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                             $数字：匹配的第n个组内容；
                                             $&：当前匹配的内容；
                                             $`：位于匹配子串左侧的文本；
                                             $'：位于匹配子串右侧的文本
                                             $$：直接量$符号

4.3.3.模版字符串

使用场景：拼接字符串和常量

语法：反引号``英文输入模式下按键盘的tab键上方那个键（1左边那个键）

内容拼接变量时，用${}包住变量

let  age=18
document.write(`我今年${age}岁了`)

页面输出用户信息案例

需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年xx岁了

let name = prompt('请输入名字：')
let age = prompt('请输入年龄：')
document.write(`大家好，我叫${name}，今年${age}岁了`)

4.4.布尔类型boolean

true false

布尔判断汇总--在js中[] == ![] 为什么为true?-CSDN博客

判断true/false
在js中，`if`可以判断true/false，为false的值有：

false
undefined
null
''
0
NaN

let isCool = true
console.log(isCool)

==      比较值相等
!=      不等于
===     比较值和类型相等
!===    不等于
||      或
&&      且

4.5.未定义类型（undefined)

未定义是比较特殊的类型，只有一个值undefined

什么情况出现未定义类型

只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少[直接]为某个变量赋值为undefined

let num

console.log(num) //undefined

console.log(typeof undefined);//undefined

工作中的使用场景

我们开发中经常声明一个变量，等待传送过来的数据

如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来

4.6.null 空类型

let obj= null

console.log(obj);//null

console.log(typeof null);//object

4.7.null和undefined的区别

null和undefined的区别-CSDN博客

4.8.检测数据类型

语法：typeof x

let num 
document.write(typeof num)

4.9.类型转换

4.9.1.为什么需要类型转换？

JS是弱数据类型，JS也不知道变量到底属于哪种数据类型，只有赋值了才清楚

坑：使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单地进行加法运算

例如：

console.log('10000'+'2000') // '100002000'

正确的是要把10000和2000 字符串转换为数字类型Number然后再进行加法运算

4.9.2.隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则：

加号两边只要有一个是字符串，都会把另外一个转成字符串

console.log("pink"+1) //pink1
console.log("2"+1) //21

除了加号以外的算术运算符，都会把数据转成数字类型

console.log("2"-1)  //1

缺点

转换类型不明确，靠经验才能总结

小技巧

加号作为正号解析可以转换成数字型

document.log(+'123')

任何数据和字符串相加结果都是字符串

4.9.3.显示转换

过度依赖系统内部的隐式转换是不严谨的，因为隐式转换都是靠经验

语法：

//转换为数字类型number
console.log(Number(数据))
//只保留整数
console.log(parseInt('12.34px')) // 12
//可以保留小数
console.log(parseFloat('12.34px')) // 12.34

在Number(数据)的应用时，如果字符串内容里有非数字，转换失败时，结果为NaN

NaN也是number类型的数据，代表非数字

parseInt/parseFloat函数只有数字在开头才能提取

4.9.4.数字类型(Number)与字符串(String)相互转换的方式

JavaScript数据类型直接互相转换办法(数组,字符串,对象)-CSDN博客

4.9.5.练习

输入两个数，计算两者的和，打印在页面里

方法1：

let num1 = prompt("请输入第一个数")
let num2 = prompt('请输入第二个数')
document.write("您计算的结果是"+(Number(num1)+Number(num2)))

方法2：

let num1 = +prompt("请输入第一个数")
let num2 = +prompt("请输入第二个数")
document.write("您计算的结果是${num1+num2}")

4.9.6.用户订单信息案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            text-align: center;
 
        }
        table,th,td {
            border: 1px solid black;
            padding: 20px 30px;
        }
        table {
            border-collapse: collapse;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>订单确认</h1>
    <script>
        let name = prompt('请输入商品名称')
        let price = prompt('请输入商品价格')
        let count = prompt('请输入商品数量')
        let place = prompt('请输入收货地址')
        document.write(`<table>
                            <tr>
                                <th>商品名称</th>
                                <th>商品价格</th>
                                <th>商品数量</th>
                                <th>总价</th>
                                <th>收货地址</th>
                            </tr>
                            <tr>
                                <td>${name}</td>
                                <td>${price}</td>
                                <td>${count}</td>
                                <td>${price*count}</td>
                                <td>${place}</td>
                            </tr>
                         </table>`)
    </script>
</body>
</html>

五、运算符

5.1.赋值运算符

对变量进行赋值操作的运算符

= 将等号右边的值赋予给左边，要求左边必须是一个容器

+= -= *= /= %=

使用这些运算符可以在对变量赋值进行快速操作

5.2.一元运算符

运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符

一元运算符--自增，自减：正负号

自增 ++ （可以前置也可以后置）

自减 -- （可以前置也可以后置）

let i = 1
console.log(i++ + ++i + i) // 7

js中的 ++i和i++的区别-CSDN博客

5.3.二元运算符

let num = 10 + 20 //二元运算符

5.4.比较运算符

符号	意义
>	略
<
>=
<=
==	左右两边值是否相等
===	左右两边是否类型和值都相等
!==	左右两边是否不全等

console.log(2 == "2") //true
console.log(2 === "2")  //false

5.5.逻辑运算符

符号	含义
&&	逻辑与
\|\|	逻辑或
!	逻辑非

逻辑中断

与找false,遇到false短路

或找true,遇到true短路

let age = 18

console.log(false&&age++) //false
console.log(age)     //18

console.log(false||age++) //18--因为i++先处理运算
console.log(age) //19

判断一个数是4的倍数，且不是100的倍数

用户输入一个，判断这个数能被4整除，但是不能被100整除，满足条件，页面弹出true,否则弹出false

let num = +prompt("请输入一个数")
alert(num%4==0 && num%100!=0)

5.6.运算符优先级

优先级	运算符	顺序
1	小括号	. ()
2	一元运算符	++ -- !
3	算数运算符	先*/% 后+-
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&& 后\|\|
7	赋值运算符	=
8	逗号运算符	,

六、语句

6.1.表达式和语句

表达式：可以被求值的代码，JS引擎会将其计算出一个结果

x = 7
3+4
num++

语句：语句是一段可以执行的代码

比如：prompt()可以弹出一个输入框，还有if语句，for循环语句等

for(let i=0;i<+3;i++){
    consloe.log("1234")
}

区别：

因为表达式可被求值，所以可以写在赋值语句的右侧

语句不一定有值，所以比如alert() for 和 break 等语句就不能被赋值

6.2.分支语句

6.2.1.程序三大流程控制语句

1.顺序结构：从上往下执行

2.分支结构：根据条件选择执行代码

3.循环结构：某段代码被重复执行

6.2.2.if分支语句

三种使用：单分支双分支多分支

a.单分支语法

if (条件){
	满足条件要执行的代码
}

括号内的条件为true时，进入大括号里执行代码

小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型

除了 '' 所有的字符串都为真除了0所有数字都为真

如果大括号只有一个语句，大括号可以省略，但不提倡

案例

1.用户输入高考成绩，如果分数大于700，则提示恭喜考入黑马程序员

let score = +prompt("请输入你的高考成绩")
if (score > 700){
    alert("恭喜考入山东科技大学")
}

b.双分支语法

if (条件){
	代码1
}else {
	代码2
}

案例

用户输入，用户名：pink,密码：123456 ，则提示登陆成功，否则提示登录失败

let id = prompt('请输入用户名')
let code = prompt('请输入密码')
if(id == 'pink' && code =='123456'){
    alert('登陆成功')
}else{
    alert('账号或密码错误')
}

判断闰年

让用户输入年份，判断这一年是闰年还是平年，并弹出警示框

let year = +prompt("请输入年份")
if ((year %4 ==0 && year%100!=0)|| year %400 == 0  ){
    alert(`${year}年是闰年`)
}else{
    alert(`${year}年是平年`)
}

c.多分支if语句

if (条件1){
	代码1
}else if (条件2){
	代码2
}else if (条件3){
	代码3
}else{
	代码n
}

案例

根据输入不同的成绩，反馈不同的评价

90以上为优秀，70-90为良好，60-70为及格，60以下为不及格

let score = +prompt("请输入你的成绩")
if(score>90){
    alert("优秀")
}else if(score>70 && score<=90){
    alert("良好")
}else if(score>60 && score<=70){
    alert("及格")
}else{
    alert("不及格")
}

6.2.3.三元运算符

let a = 条件 ？ 满足条件执行的代码 ： 不满足条件执行的代码

案例

用户输入2个数，控制台输出最大的值

let a = +prompt('输入第一个数')
let b = +prompt('输入第二个数')
let max = a>b ? a : b
console.log(max)

数字补0案例

用户输入1个数，如果数字小于10，则前面补0，比如09 03 等

分析：

1.为后期页面显示时间做铺垫

2.利用三元运算符补0 计算

let num = +prompt('输入一个数')
alert(num>9 ? num : '0'+num)

6.2.4.switch语句

必须全等时才会执行

switch(数据) {
	case 值1:
		代码
		break
	case 值2:
		代码
		break
	case 值3:
		代码
		break
	default:
		console.log("什么也不是时候执行")
		break
}

案例

用户输入 2个数字，然后输入+-*/任何一个，可以计算结果

let num1 = +prompt('请输入第一个数字')
let num2 = +prompt('请输入第二个数字')
let a = prompt('请输入计算符号')
switch(a){
    case '+':
        alert(`${num1} +  ${num2} = ${num1+num2}`)
        break
    case '-':
        alert(`${num1} -  ${num2} = ${num1-num2}`)
        break
    case '*':
        alert(`${num1} *  ${num2} = ${num1*num2}`)
        break
    case '/':
        alert(`${num1} /  ${num2} = ${num1/num2}`)
        break
    default:
        alert('请输入正确的计算符号')
        break
}

6.2.5.if判断和switch的区别

1.switch判断确定值，if更加灵活通常用于判断范围

2.switch直接执行程序语句，if有几种判断条件，就判断几次

3.switch一定需要===

4.分支多用switch,分支少if

6.3.循环语句

6.3.1.断点演示

F12->源代码

6.3.2.while循环

while (循环条件){
	要重复执行的代码(循环体)
}

// 无限循环
while(true){
    console.log("111111")
}

释义：

跟if语句很像，都要先判断条件为真才会进入循环

三要素：

变量起始值，终止条件，变量的变化量

练习

1.页面输出1-100

let i = 1
while (i<=100)
{
	document.write(i)
	i++
}

2.计算从1加到100的总和并输出

let i=1,sum=0
while(i<=100)
{
	sum+=i
	i++
}
document.write(sum)

3.计算1-100之间的所有偶数和

let i=1,sum=0
while(i<=100)
{
	if(i%2==0)
		sum+=i
	i++
}
document.write(sum)

6.3.3.for语句

a.基本使用

for(变量起始值;终止条件;变量变化量){
	循环体
}

// 无限循环
for(;;){
    console.log("1111")
}

案例

1.利用for循环输出1~100岁

for(let i = 1;i<=100;i++){
	document.write(`今年我${i}岁了`)
}

b.循环数组

需求：请将数组['马超','赵云','张飞','关羽','黄忠']依次打印出来

let arr=['马超','赵云','张飞','关羽','黄忠']
for(let i=0;i<arr.length;i++)
{
	document.write(arr[i])
}

c.循环嵌套

外面for执行1次里面的for执行所有次

for(外部声明记录循环次数的变量;循环条件;变化值){
	for(内部声明记录循环次数的变量;循环条件;变化值){
		循环体
	}
}

练习：打印五行五列的*

for(let i =0 ;i<5;i++)
{
	for(let j=0;j<5;j++)
		document.write('*')
	document.write('<br>')  //换行
}

6.3.4.退出循环

continue,break,return

JavaScript 跳出循环-CSDN博客

案例

页面弹出对话框，"你爱我吗"，如果输入“爱”，则结束，否则一直弹出对话框

while(true)
{
	if(prompt("你爱我吗")=='爱')
		break
}

综合案例

简易ATM取款机案例

需求：用户可以选择存钱、取钱、查看余额和退出功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let sum=0
        while(true)
    {
        let choice = prompt("请选择您的操作：\n             1.取款\n             2.存款\n             3.查看余额\n             4.退出")
        let flag=0
        switch(choice){
            case '1':
                let sub = +prompt("请输入你要取出的金额：")
                if(sub>sum)
                    alert("抱歉， 您的余额不足")
                else{
                    sum-=sub
                    alert(`您已成功取出${sub}元`)
                }
                break
            case '2':
                let add = +prompt("请输入你要存入的金额：")
                sum+=add
                alert(`恭喜您，成功存款${add}元`)
                break
            case '3':
                alert(`您当前账户存款余额为：${sum}元`)
                break
            case '4':
                flag=1
                break
        }
        if(flag==1)
            break
    }
       
    </script>
</body>
</html>

6.3.5.for循环和while循环有什么区别呢

当如果明确了循环的次数的时候推荐使用for循环

当不明确循环的次数的时候推荐使用while循环

七、数组

7.1.数组的定义

数组是一种可以按顺序保存数据的数据类型

元素：数组中保存的每个数据都是数组元素

下标：数组中数据的编号

长度：数组中数据的个数，通过数组的length属性获得

7.2.基本使用

7.2.1定义数组和数组单元

let 数组名 = [数据1,2,3,4]
let arr = new Array(数据1,2,3,4)

数组是按顺序保存，所以每个数据都有自己的编号

7.2.2数组遍历

for(let i =0;i<数组名.length;i++)
{
	数组名[i]
}

7.2.3案例

1.求数组[2,6,1,7,4]里面所有元素的和以及平均值

let arr=[2,6,1,7,4]
let sum=0
for(let i=0;i<arr.length;i++)
{
	sum+=arr[i]
}
document.write(`数组元素的和为${sum}，平均值为${sum/arr.length}`)

2.求数组[2,6,1,77,52,25,7]的最大值

let arr=[2,6,1,77,52,25,7]
let max=arr[0]
for(let i=1;i<arr.length;i++)
{
	if(max<arr[i])
		max=arr[i]
}
document.write(`数组的最大值元素为${max}`)

7.3.操作数组

7.3.1查询数组数据

7.3.2重新赋值

略

7.3.3数组添加新的数据

数组.push()方法将一个或多个元素添加到数组末尾，并返回该数组的新长度

arr.push(元素1，元素2，)

数组.unshift(新增的内容)方法将一个或多个元素先加到数组开头，并返回数组的新长度

arr.unshift(元素1，元素2)

案例

将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组

let arr=[2,0,6,1,77,0,52,0,25,7]
let arr1=[]
for(let i =0 ;i<arr.length;i++)
{
	if(arr[i]>=10)
		arr1.push(arr[i])
}
alert(arr1)

7.3.4删除数组中数据

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值

arr.pop()

数组.shift()方法删除第一个元素，并返回该元素的值

arr.shift()

数组.splice()方法，删除指定元素

arr.splice(start,deleteCount)
arr.splice(起始位置，删除几个元素)

若deleteCount删除元素数量空着，就默认从头删到尾

7.3.5数组的操作

obj.length          获取长度
obj.push(ele)       尾部追加元素
obj.pop()           尾部获取一个元素
obj.unshift(ele)    头部插入元素
obj.shift()         头部移除元素

obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1)     指定位置删除元素

obj.slice( )        切片
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序

7.3.6数组的方法

a.数组map方法

使用场景：

map 可以遍历数组处理数据，并且返回新的数组

map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。

map重点在于有返回值，forEach没有返回值（undefined）

<body>
  <script>
  const arr = ['red', 'blue', 'pink']
  // 1. 数组 map方法 处理数据并且 返回一个数组
   const newArr = arr.map(function (ele, index) {
    // console.log(ele)  // 数组元素
    // console.log(index) // 索引号
    return ele + '颜色'
	})
console.log(newArr)
</script>
</body>

b.数组join方法

作用：join() 方法用于把数组中的所有元素转换一个字符串

<body>
  <script>
    const arr = ['red', 'blue', 'pink']
   
    // 数组join方法  把数组转换为字符串
    // 小括号为空则逗号分割
    console.log(newArr.join())  // red颜色,blue颜色,pink颜色
    // 小括号是空字符串，则元素之间没有分隔符
    console.log(newArr.join(''))  //red颜色blue颜色pink颜色
    console.log(newArr.join('|'))  //red颜色|blue颜色|pink颜色
  </script>
</body>

c.数组forEach方法

作用：forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数

注意：

1.forEach 主要是遍历数组

2.参数当前数组元素是必须要写的，索引号可选。

<body>
  <script>
    // forEach 就是遍历  加强版的for循环  适合于遍历数组对象
    const arr = ['red', 'green', 'pink']
    const result = arr.forEach(function (item, index) {
      console.log(item)  // 数组元素 red  green pink
      console.log(index) // 索引号
    })
    // console.log(result)
  </script>
</body>

d.数组filter方法

作用：filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

主要使用场景：筛选数组符合条件的元素，并返回筛选之后元素的新数组

<body>
  <script>
    const arr = [10, 20, 30]
    // const newArr = arr.filter(function (item, index) {
    //   // console.log(item)
    //   // console.log(index)
    //   return item >= 20
    // })
    // 返回的符合条件的新数组

    const newArr = arr.filter(item => item >= 20)
    console.log(newArr)
  </script>
</body>

e.数组reduce方法

作用：数组的累加器

reduce()用于数组中--可以没有初始值

const arr=[1,2,3,4,5,6,7]

// arr.reduce(function(上一次的值，当前值){
// },起始值)

// 没有初始值
const total = arr.reduce(function(prev,current){
    return  prev+current
})
console.log(total);

// 有初始值
const total = arr.reduce(function(prev,current){
    return  prev+current
},10)
console.log(total);

reduce()用于数组对象中--必须有初始值

// reduce--是数组对象的写法，必须有初始值
const arr=[
    {name:"123",price:100},
    {name:"456",price:100},
    {name:"789",price:100},
]

const total=arr.reduce(function(prev,current){
    return prev+current.price
},0)

console.log(total);

冒泡排序

let arr = [1,2,3,4,5]
for(let i=0;i<arr.length-1;i++)
{
	for(let j=0;j<arr.length-1-i;j++)
	{
		if(arr[j]>arr[j+1]){
			let num = arr[j]
			arr[j]=arr[j+1]
			arr[j+1]=num
		}
	}
}

7.3.7数组排序

let arr=[33,32,2,1,2]
//1.升序写法--返回原数组
arr.sort(function(a,b){
	return a-b
})
console.log(arr)
 
//2.降序写法--返回原数组
arr.sort(function(a,b){
	return b-a
})
console.log(arr)

7.3.7 数组中查找某个子字符串或元素的方法

str.indexOf(searchValue[, fromIndex])

//searchValue 是必须要提供的参数，即你想要查找的字符串。
//fromIndex 是可选参数，用于指定从哪个索引开始查找。如果你不提供 fromIndex，默认值就是从索引 0 开始查找。

返回值

如果找到 searchValue，返回它在字符串或数组中的首次出现的位置索引。
如果没有找到，返回 -1

let str = 'hello world';
console.log(str.indexOf('world')); // 输出：6
console.log(str.indexOf('js'));    // 输出：-1

7.3.8检测是否为数组的两种方式(ARRAY)：

// 1.instanceof
var arr = [];
consolo.log(arr instanceof Array); //true
var obj = {};
consolo.log(obj instanceof Array); //false

// 2.Array.isArray()
consolo.log(Array.isArray(arr));  //true
consolo.log(Array.isArray(obj));  //false

7.3.9展开运算符

const arr =[1,4,5,6,7,8,9,0]
console.log(...arr);//1 4 5 6 7 8 9 0

运用场景：求最大值或最小值

const arr =[1,4,5,6,7,8,9,0]
console.log(Math.max(...arr));//9
console.log(Math.min(...arr));//0

运用场景：合并数组

const arr1 = [1,2,3,4,5]
const arr2 = [6,7,8,9,10]
const arr3 = [...arr1,...arr2]
console.log(arr3);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

八、函数

1.为什么需要函数

函数：实现代码复用

可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用

比如前面我们使用的 alert()\prompt()\console.log()函数等，都是已经封装好的函数

2.具名函数

function 函数名(){
	函数体
}

函数名() //函数调用

函数的复用代码和循环重复代码的不同：

循环代码写完就执行，不能很方便控制执行位置

函数的能随时调用随时执行，重复调用

具名函数调用位置可以任何位置

function sayHi(){
	document.write("Hi~~~")
}
sayHi() // 函数调用

案例

1.封装一个函数，计算两个数的和

function sum(){
	let num1 = +prompt('请输入第一个数')
	let num2 = +prompt('请输入第二个数')
	document.write(num1 + num2)
}

3.函数传参

function 函数名(形参){
	函数体
}
函数名(实参)

// 参数默认值
function getsum( num1 = 0,num2=1){          
    let sum = 0  
    sum = num1+num2
    console.log(sum)                
}
getsum(11,22)

// 实参可以是变量
function getsum( num1 = 0,num2=0){
    let sum = 0  
    sum = num1+num2
    console.log(sum)
}           
let num1 = +prompt("num1")
let num2 = +prompt("num2")
getsum(num1,num2)

案例

1.需求：

每个学生的分数是一个数组，计算每个学生的总分

function student(arr = []){ //实参默认空数组，程序不会报错
let sum=0
	for(let i=0;i<arr.length;i++)
	{
		sum+=arr[i]
	}
	document.write(sum)
}
 
student([1,2,3,4,5])

4.函数返回值--可以直接使用

function 函数名(){
	return 值
}

function fn(){
    return 20
}
console.log(fn())

function fn(x,y){
    return x+y
}
let sum = fn(1,2)
console.log(sum)

多个返回值，返回数组

function fn(arr){
     let max= arr[0]
     let min= arr[0]
     for(i=1;i<arr.length;i++){
         if(max<arr[i]){
             max = arr[i]
         }
         if(min>arr[i]){
             min = arr[i]
         }  
     }
     // 多个返回值，返回数组
     return [max,min]
}
console.log(fn([11,22,111,34214234,53456456,1115675686789789,789]))

案例

1.求任意两个数中的最大值，并返回

function getMax(a=0,b=0){
	return a>b ? a:b
}

5.补充

1.两个相同的函数后面的会覆盖前面的函数

2.在JS中，实参个数和形参个数可以不一致

a.如果形参多，会自动填上undefined

b.如果实参多，多余的实参会被忽略

3.函数会在return之后停止

6.作用域

全局作用域--整个script内部--js文件

局部作用域--函数

// 全局变量
let num = 10

// 局部变量--在当前函数内修改
function(){
     let num = 20
}
console.log(num) //10

访问原则

在能够访问到的情况下，先局部，局部没有再找全局

var和let的循环案例--关于作用域问题-CSDN博客

7.匿名函数

将函数的名字去掉即是匿名函数

function (){
    console.log("Eula");
}

这样直接写在js中会直接报错，不符合语法规范；需要使用小括号包括起来：

 // 不在报错
 (function () {
     console.log("Eula");
 })

那怎么调用呢，普通函数的调用都是使用 ()小括号来调用，匿名函数也不例外；后面需要在加一个小括号实现自调用，同样括号里面也可以传参；

 (function (value) {
       console.log("name:" + value);
  })("Eula");
  // 打印结果
  name:Eula

匿名函数的应用场景

1、自调用

匿名函数想要自调用需要放在（）里面并后面使用小括号调用，里面可以传参；

(function (value){
    console.log("name:"+value);
})("Eula")
输出结果：
name:Eula

2、事件的绑定函数

<input type="button" value="Eula！" id="btn">
<script>
    //获得按钮元素
    var btn=document.querySelector("#btn");
    //给按钮增加点击事件。
    btn.onclick=function(){
        alert("姐是尤菈你记住！");
    }
</script>

3、在对象中使用

var obj={
    name:"Eula",
    fun:function(){
        return "我是"+this.name
    }
};
console.log(obj.fun());//我是Eula

8.函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们称之为函数表达式

let fn = function(){//函数表达式
	函数体
}
fn() //用变量名调用函数

具名函数可以写到任何地方调用

匿名函数必须先写函数表达式，后调用

9.立即执行函数

避免全局变量之间的污染

//方式1
(function (){ 
	console.log(11)
})();//必须加分号
 
//方式2
(function (){
	console.log(11)
}());//必须加分号
(function (x,y){
	console.log(x+y)
})(1,2);

10.回调函数

概念：回调函数就是一个被作为参数传递的函数；

setInterval(function(){
    console.log("我是一个回调函数，每次1秒钟会被执行一次");
},1000);

11.函数作为返回值返回

//将匿名函数作为返回值
function fun() {
    //返回匿名函数
    return function () {
        return "Eula";
    };
}
//调用匿名函数
console.log(fun()()); //Eula
//或
const handleFun = fun();
console.log(handleFun()); //Eula

九、对象

1.什么是对象

对象(object)：JS中的一种数据类型

可以理解为一种无序的数据集合

用来描述某个事物，例如描述一个人：可以有姓名、年龄、性别等信息，还有吃饭睡觉打代码等功能

还有静态特征和动态行为

可以更加详细地描述某一个事物

2.对象使用

let 对象名 = {} 
let 对象名 = new Object()

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

let 对象名 = {
	属性名: 属性值,
	方法名: 函数
}
let obj = {
	uname: 'yh',
	age: 18,
	gender: '男'
}

3.操作数据

a.查询对象

对象名.属性

对象名['属性名']

b.重新赋值

对象名.属性=新值

c.增加属性

对象名.新属性=新值

d.删除属性

delete 对象名.属性

let product={
    goods:"手机",
    'good-name':"平板电脑",
    name:"小米",
    num:1,
    weight:"180",
    address:"北京"
}
// 查找对象
console.log(product.goods)
console.log(product.name)
// 查找的另一种方式--适合有横线的属性名
console.log(product["good-name"])
// 修改对象
product.name="华为"
console.log(product.name)
// 新增对象
product.sex="男"
console.log(product.sex)
// 删除对象
delete product.sex
console.log(product)

e.对象中添加方法

let person = {
	name: 'andy',
	sayHi: function() { //匿名函数
		document.write('hi!')
	}
}
 
person.sayHi() //调用

f.对象遍历

let obj = {
	uname: 'andy',
	age: 18,
	sex: "man"
}
for(let k in obj) { // k是加引号的属性名。'uname'
	console.log(k)	//打印属性名
	console.log(obj[k])	// 打印属性值 obj['uname']
}

g.遍历数组对象

将下面数据对象打印出来

<script>
let student = [
    {name: '小明',age: 18, gender: '男',hometown:'河北省'},
    {name: '小红',age: 19, gender: '女',hometown:'河男省'},
    {name: '小刚',age: 17, gender: '男',hometown:'湖北省'},
    {name: '小丽',age: 18, gender: '女',hometown:'河北省'},
]

for(let i=0;i<student.length;i++){
    for(let k in student[i]){
        document.write(k)
        document.write(student[i][k]+'<br>')
    }
}
</script>

十.内置对象

JS内部提供对象，包含各种属性和方法给开发者调用

例如：document.write()

数学对象(Math)

提供数字运算方法

数学对象方法

方法	含义
random	生成0-1之间的随机数
ceil	向上取整
floor	向下取整
max	找最大数
min	找最小数
pow	幂运算
abs	绝对值

生成N-M之间的随机数

Math.floor(Math.random() * (M-N +1)+N)

生成数组长度的随机数

 let num = Math.floor(Math.random()*arr.length)

案例

需求：把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面

let arr=['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
document.write(arr[Math.floor(Math.random()*7)])

日期对象(Date)

ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。

Date是一个内置的构造函数，需要通过new来进行实例化生成实例对象

日期对象方法

// 1. 实例化
const date = new Date(); // 获取系统默认时间
const date = new Date('2020-05-01') // 获得指定时间

// date 变量即所谓的时间对象
console.log(typeof date) //object

// 2. 调用时间对象方法
// 通过方法分别获取年、月、日，时、分、秒
const data = new Date().getFullYear()  //获得年
const data = new Date().getMonth()+1 //获得月
const data = new Date().getDate()  //获得日
const data = new Date().getDay()  //获得星期几
const data = new Date().getTime() //获得时
const data = new Date().getMinutes()//获得分
const data = new Date().getSeconds()//获得秒
const data = new Date().toLocaleString() //2025/3/3 20:39:45 把Data转化为字符串
const data = new Date().toLocaleDateString()  //2025/3/3 把日期转化为字符串
const data = new Date().toLocaleTimeString()  //20:39:45 把时间转化为字符串

注意--周的排序是从星期天开始的

// 获得星期几
const arr = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六",]
console.log(arr[new Date().getDay()])

时间戳

时间戳是指1970年01月01日00时00分00秒起至现在的总秒数或毫秒数，它是一种特殊的计量时间的方式。

注：ECMAScript 中时间戳是以毫秒计的。

//获取时间戳的三种方式
const data = new Date().getTime()
const data = +new Date() //推荐
const data = Date.now()

得到指定时间的时间戳

// 得到指定时间的时间戳
const data = +new Date('2022-4-1 18:30:00')
console.log(data)

十一、JSON

基本数据类型：存储变量时存储的是值本身，因此叫值类型（栈)

引用类型：复杂数据类型，存储变量时仅仅存储地址（引用）(堆)

let 对象 = {
	"key1": value1,
	"key2": value2
};

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输1

将json字符串转为js对象

let obj = JSON.parse(json对象)

将js对象转为json字符串

let json对象 = JSON.stringify(obj)