第一章:计算机编程基础
1.1编程语言
1.11编程
编程:计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。
计算机程序:计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
注意:上面所定义的计算机指的是任何能够执行代码的设备,可能是智能手机、ATM机、黑莓PI、服务器等等。
1.12计算机语言
计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介。
计算机语言总的来说可以分成机器语言,汇编语言和高级语言三大类。
实际上计算机最终所执行的都是 机器语言,它是由“0”和“1”组成的二进制数,二进制是计算机语言的基础。
1.13编程语言
如今通用的编程语言有两种形式:汇编语言和高级语言。
汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。
高级语言主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。
1.14 翻译器
高级语言所编制的程序不能直接被计算机识别,必须经过转换才能被执行,为此,我们需要一个翻译器。翻译器可以将我们所编写的源代码转换为机器语言,这也被称为二进制化。 记住1和 0。
![](https://i-blog.csdnimg.cn/blog_migrate/1ae6757b70f75d1318d674559d86f4b7.png)
1.15 编程语言和标记语言区别
编程语言有很强的逻辑和行为能力。在编程语言里, 你会看到很多 if else 、for 、while等具有逻辑性和行为能力的指令,是主动的。
标记语言(html)不用于向计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的, 是被动的。
1.16解释型语言和编译型语言
![](https://i-blog.csdnimg.cn/blog_migrate/b6c610a7bce71b802db738c02726999e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/afd344f6c3775099040a69f3f907e4a3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ac28826522a57f29f663ae2bbdce5fa6.png)
1.17标识符、关键字、保留字
标识(zhi)符:就是指开发人员为变量、属性、函数、参数取的名字。标识符不能是关键字或保留字。
关键字:是指 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 等。
保留字:实际上就是预留的“关键字”,意思是现在虽然还不是关键字,但是未来可能会成为关键字,同样不能使用它们当变量名或方法名。
包括: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等。
注意:如果将保留字用作变量名或函数名,那么除非将来的浏览器实现了该保留字,否则很可能收不到任何错误消息。当浏览器将其实现后,该单词将被看做关键字,如此将出现关键字错误。
1.2 计算机基础
1.21 计算机组成
![](https://i-blog.csdnimg.cn/blog_migrate/3d8d9b8af0eeef0c8ddc81967f7459d3.png)
1.22数据存储
计算机内部使用二进制 0 和 1来表示数据。
所有数据,包括文件、图片等最终都是以二进制数据(0 和 1)的形式存放在硬盘中的。
所有程序,包括操作系统,本质都是各种数据,也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件,其实就是把程序文件复制到硬盘中。
硬盘、内存都是保存的二进制数据。
1.23数据存储单位
bit<byte<kb<GB< TB<.....
位(bit): 1bit 可以保存一个 0 或者 1 (最小的存储单位)
字节(Byte):1B = 8b
千字节(KB):1KB = 1024B
兆字节(MB):1MB = 1024KB
吉字节(GB): 1GB = 1024MB
太字节(TB): 1TB = 1024GB
1.24程序运行
打开某个程序时,先从硬盘中把程序的代码加载到内存中
CPU执行内存中的代码
注意:之所以要内存的一个重要原因,是因为 cpu 运行太快了,如果只从硬盘中读数据,会浪费cpu性能,所以,才使用存取速度更快的内存来保存运行时的数据。(内存是电,硬盘是机械)
第二章:JavaScript基础
2.1JavaScript 是什么
布兰登·艾奇(BrendanEich,1961年~)。神奇的大哥用10天完成 JavaScript 设计。最初命名为 LiveScript,后来在与 Sun 合作之后将其改名为 JavaScript.
JavaScript是一种运行在客户端(浏览器)的脚本语言 (Script 是脚本的意思)
脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行
现在也可以基于 Node.js 技术进行服务器端编程
2.12JavaScript 的作用
![](https://i-blog.csdnimg.cn/blog_migrate/3e134d88399f36b8d79d7bb1846ff9c1.png)
2.13 HTML/CSS/JS 的关系
HTML/CSS 标记语言--描述类语言 HTML 决定网页结构和内容( 决定看到什么 ),相当于人的身体lCSS 决定网页呈现给用户的模样( 决定好不好看 ),相当于给人穿衣服、化妆
JS 脚本语言--编程类语言 实现业务逻辑和页面控制( 决定功能 ),相当于人的各种动作
2.14 JS 的组成
ECMAscript
WebAPIs: BOM和DOM
![](https://i-blog.csdnimg.cn/blog_migrate/eb1e508614d692bd1a0832811af3fadf.png)
ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者ECMAScript 语言的实现和扩展。 ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准.https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview
DOM ——文档对象模型
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
BOM ——浏览器对象模型
BOM (Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
2.15 JS 3种书写位置
行内式js 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
注意单双引号的使用:在HTML中我们推荐使用双引号, JS中我们推荐使用单引号
✍可读性差, 在html中编写JS大量代码时,不方便阅读;
✍引号易错,引号多层嵌套匹配时,非常容易弄混;
✍ 特殊情况下使用
内嵌式js 可以将多行JS代码写到 <script> 标签中 ,直接在html文件中,用<script> </script> 标签包裹。</body>的上方 内嵌 JS 是学习时常用的方式
外部式js
✍利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用 ✍引用外部JS文件的script标签中间不可以写代码 , 通过<script src=‘’‘’> </script>引入 ✍适合于JS 代码量比较大的情况
2.16JavaScript 输入输出语句
![](https://i-blog.csdnimg.cn/blog_migrate/ae94f2ffee6257b3e3e7fbf16b49036c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3204c79d292caafbe95adbd4dba122ba.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f0c3688ee4fdb0cdf255b63c8cc0b02e.png)
2.17结束符
![](https://i-blog.csdnimg.cn/blog_migrate/c5f5698e74c08b62406b3c15ca643a4e.png)
第二章变量
2.1 变量概述
变量是用于存放数据的容器。 我们通过 变量名 获取数据,甚至数据可以修改。
本质:变量是程序在内存中申请的一块用来存放数据的空间。
2.2变量的使用
变量在使用时分为两步: 1. 声明变量 2. 赋值
![](https://i-blog.csdnimg.cn/blog_migrate/2a28f21dedab4f76872eb1c392827027.png)
2. 赋值
![](https://i-blog.csdnimg.cn/blog_migrate/c3262382e9297c6c20ccef93a72d53dc.png)
= 用来把右边的值赋给左边的变量空间中此处代表赋值的意思
变量值是程序员保存到变量空间里的值
3.变量的初始化
声明一个变量并赋值, 我们称之为变量的初始化
2.3变量语法扩展
1. 更新变量
一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。
![](https://i-blog.csdnimg.cn/blog_migrate/c042eec839c3e55f61615189adf10c71.png)
2. 同时声明多个变量
同时声明多个变量时,只需要声明一次, 多个变量名之间使用英文逗号隔开。
![](https://i-blog.csdnimg.cn/blog_migrate/805af914208bee9920d2c361f5cc59c7.png)
3. 声明变量特殊情况
情况 |
说明 |
结果 |
var age ; console.log (age) |
只声明 不赋值 |
undefined |
console.log(age) |
不声明 不赋值 直接使用
|
报错
|
age =10;console.log (age); |
不声明 只赋值
|
10(不建议)
|
2.4变量命名规范
由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge,num01, _name
严格区分大小写。varapp; 和 varApp; 是两个变量
不能 以数字开头,。 18age 是错误的
不能 是关键字、保留字。例如:var、for、while
变量名必须有意义。MMD BBD nl → age
遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName
中间不能有空格,要连写: usrAge
2.5变量的本质:
![](https://i-blog.csdnimg.cn/blog_migrate/88c47abfd962d776349efbb2184901e8.png)
2.6let和var的区别
![](https://i-blog.csdnimg.cn/blog_migrate/28c44e77dab34363422768c14d61bac4.png)
2.7常量
使用const声明的变量称为常量。
![](https://i-blog.csdnimg.cn/blog_migrate/154eaaf0ccc9633c94a225a3c26997f7.png)
第三章 数据类型
3.1简介
在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。
变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言,弱数据类型的语言。只有赋值,才知道是哪一种数据类型。。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。
在代码运行时,变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后, 变量就确定了数据类型。JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型:
3.2 简单数据类型5种 Number ,String,Boolean,Undefined,Null:
JS 把数据类型分为两类:
1)简单数据类型 (Number,String,Boolean,Undefined,Null)
2) 引用数据类型 (object)
![](https://i-blog.csdnimg.cn/blog_migrate/e189ba20f1002276d778458be979299e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ec0d6cac990f204e62aeb56e90e531db.png)
基本数据类型
3.21 数字型 Number
JavaScript 数字类型既可以用来保存整数值,正数,负数,也可以保存小数(浮点数)。
![](https://i-blog.csdnimg.cn/blog_migrate/b9bb6fee0e3463da307f2b9f096ac815.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d64b51536ab776b9e80b26a7788dc966.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4c8f566536f74f8d084fa5cb3c2ab774.png)
isNaN判断变量是否非数字
![](https://i-blog.csdnimg.cn/blog_migrate/0705eacaa160e8fc8ecc12c0f148e482.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f68dbda931288028aee4aef39c27ea0e.png)
3.22字符串型 string
![](https://i-blog.csdnimg.cn/blog_migrate/2ff66b45cf86b2044a274c2326801ff5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/012da40436a7c48eeb20a2617a760e41.png)
➕拼接字符串:数字相加,字符相连
模板字符串:
![](https://i-blog.csdnimg.cn/blog_migrate/5627b60ab6d28a3b4d01a68854be543e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/093066b6a464bd52d231b3f15991e02f.png)
举例:模板字符串
检测字符串的长度length
![](https://i-blog.csdnimg.cn/blog_migrate/b0a37c88b481ddbd0eb0bd22b0edb4f2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fa9802dc99a38b6c029147c0eab955a0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bf8779f88b4727c1ff9ca2b328bb2b22.png)
3.23布尔型 Boolean
![](https://i-blog.csdnimg.cn/blog_migrate/e2811ee2395135d54f6f6e8180d81e13.png)
3.24 Undefined 和 Null 空值
一个变量声明后没有被赋值就是: undedfined ( 如果进行相连或者相加时,注意结果) unundefined未被定义的数据类型 unundefined和数字相加,输出结果为NaN;
![](https://i-blog.csdnimg.cn/blog_migrate/b54c102a789c9f17581dd44f8765cf67.png)
一个声明变量给 null 值,里面存的值为空(学习对象时,我们继续研究null),null和数字相加是相加之前的数字,因为null是空值,是没有。
![](https://i-blog.csdnimg.cn/blog_migrate/1104b3681bf5de80dd383319573d9289.png)
![](https://i-blog.csdnimg.cn/blog_migrate/497b446eef6e1a6cf1b76c42cdcc161d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cc1bb49dcbe5c5688a572944655b5b31.png)
3.25获取变量数据类型typeof
![](https://i-blog.csdnimg.cn/blog_migrate/456ce8a62a0177c07b91fb35ac8106e3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/87f2b81d57ba2adac78414187a0fff35.png)
3.26 字面量:
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
数字字面量:8, 9, 10 在控制台显示是蓝色
字符串字面量:'黑马程序员', "大前端" 在控制台显示黑色
布尔字面量:true,false
3.27数据类型
JavaScript. 数据类型.
值类型 (基本类型) :字符串(String)、数字 (Number)、布尔 (Boolean)、对空(Null)、未定义(Undefined)、Symbol。.
引用数据类型 :对象 (Object)、数组 (Array)、函数 (Function)。.
拓展- 基本数据类型和引用数据类型
目标:了解基本数据类型和引用数据类型的存储方式
简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。
值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型
string ,number,boolean,undefined,null
引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型
通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等
3.28数据类型转换
什么是数据类型转换?
使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换: 转换为字符串类型 转换为数字型 转换为布尔型
为什么需要数据类型的转换?
![](https://i-blog.csdnimg.cn/blog_migrate/8243d832972844fe7ba0cd032733841d.png)
3.281隐式转换
![](https://i-blog.csdnimg.cn/blog_migrate/130d3282f01f3c7145dcb62e69be601d.png)
➕两侧有字符串,会将值转换为字符串
➕作为开头的时候,会将数字转换为数字型。例如:
![](https://i-blog.csdnimg.cn/blog_migrate/3e018044d2b747ec0b24755215a6bbe0.png)
转换为了数字类型
3.282显示转换
![](https://i-blog.csdnimg.cn/blog_migrate/e774d55c2c1c167c77b0e6c867361e51.png)
转换为Number数字类型:
![](https://i-blog.csdnimg.cn/blog_migrate/2a3eae9f86430c5031bdc128e5afd244.png)
parseInt()函数可以把字符型的转化为数字,只要整数,去掉数字之后的单位或者字母
parseFloat()函数把小数转化为整数,也可以去掉数字之后的单位或者字母
如果字符串内容中有非数字,转换失败后转换为NaN,J即不是一个数字
NaN也是数字类型的数据,代表非数字
通过➕转换成数字:
![](https://i-blog.csdnimg.cn/blog_migrate/098167a79693fb4e8674dd8e2da77eab.png)
转换成字符串string
![](https://i-blog.csdnimg.cn/blog_migrate/36d577361303f15645195d721195b0fd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f39059813baac2f4e0144f7ed79c58b5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/185c29a45396db097c6a17fbd56fac5d.png)
除了代表空和否定的值比如:'',0,NaN,null,undefined这五个被转化为false,其余的值都会被转化为true。
第四章运算符
4.1JS 运算符
运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有:
算数运算符
一元运算符(递增和递减运算符)
比较运算符
逻辑运算符
赋值运算符
4.2算数运算符
概念:算术运算使用的符号,用于执行两个变量或值的算术运算;运算符两端用空格隔开
![](https://i-blog.csdnimg.cn/blog_migrate/827d4e7b099cb8fe9cac99589a53e77d.png)
怎么判断 一个数能够被整除呢?
它的余数是0 就说明这个数能被整除, 这就是 % 取余运算符的主要用途
4.21浮点数的精度问题
浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。
![](https://i-blog.csdnimg.cn/blog_migrate/e31902c2492de15db20de91352fbdf3c.png)
所以:不要直接判断两个浮点数是否相等
4.22 表达式和返回值
表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解:是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果,返回给我们,我们成为返回值
4.3递增递减运算符
![](https://i-blog.csdnimg.cn/blog_migrate/be79d07c69583ea504590ca58e573480.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1cdce566110415f9c21077a14137ac2b.png)
如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减( -- )运算符来完成。在 JavaScript 中,递增(++)和递减( -- )既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。注意:递增和递减运算符必须和变量配合使用
A. 前置递增运算符
++num前置递增,就是自加1,类似于 num = num + 1,但是 ++num 写起来更简单。使用口诀:先自加,后返回值
![](https://i-blog.csdnimg.cn/blog_migrate/7fb05fb528e1f3d8a1c27f87bf340643.png)
在这里++num是是先加1,++num的值为11,num是11
B. 后置递增运算符
num++ 后置递增,就是自加1,类似于 num = num + 1 ,但是 num++ 写起来更简单。使用口诀:先返回原值,参与运算之后,num进行加1
![](https://i-blog.csdnimg.cn/blog_migrate/8326135993ca49fb8fa0ec93357def2b.png)
在这里,num++是先返回原值10,在进行加法运算,加10,即num++是10,num是11
4.31 前置递增和后置递增小结(重点在于区别)
单独使用,没有区别。如果参与运算,有区别。前置自增,++i先自加,后参与运算。后置自增,i++i++先参与运算运算完成后,再进行自加。
1.前置递增和后置递增运算符可以简化代码的编写,让变量的值 + 1 比以前写法更简单2.单独使用时,运行结果相同
3.与其他代码联用时,执行结果会不同
4.后置:先原值运算,后自加(先人后己)先表达式返回原值,后变量进行加1
5.前置:先自加,后运算(先已后人)
6.开发时,大多使用后置递增/减,并且代码独占一行,例如:num++; 或者 num--;
4.4比较(关系)运算符
4.41 概述
概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为比较运算的结果。
![](https://i-blog.csdnimg.cn/blog_migrate/5cfd10f1dd8c7620fdb34d48151cfbf2.png)
注意:==默认会转换数据的类型
NaN不等于任何值,包括它自己。
![](https://i-blog.csdnimg.cn/blog_migrate/ab1a003a69cf9dc23edafb765837885f.png)
4.42关于 == 与 ===
![](https://i-blog.csdnimg.cn/blog_migrate/972d4fc01333ffafdcfce564ea5574bc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3f01fd41ef507326af24155fe52c667b.png)
4.5逻辑运算符 ||或, &&与, !非
4.51概述
概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断。
![](https://i-blog.csdnimg.cn/blog_migrate/27ad2e1760c73552b9a1537622d60b58.png)
逻辑与&& :对符号两侧得值进行与运算,并返回结果。两端的值都是 true才返回 true,两端中有个1个false就返回 falsee,一假则假,
逻辑或 || :两端的值都为 false 才返回 false,有一个true,就返回true,一真则真。
逻辑非 ! :逻辑非(!)也叫作取反符,用来取一个布尔值相反的值,如 true 的相反值是 false
可以为任意数据类型做两次非运算,即可将其转换为布尔值。
4.52逻辑中断重点(短路操作,与找false,或找true)
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
1. 逻辑与 的短路 语法: 表达式1 && 表达式2
如果第一个表达式的值为false,则返回表达式1,根据第一个值就能判断返回的结果,就不会再检查第二个。
如果第一个表达式的值为true,则返回表达式2
数字中只有0是假的
![](https://i-blog.csdnimg.cn/blog_migrate/3de84cc9ac45530e438ff23585086498.png)
2. 逻辑或
语法: 表达式1|| 表达式2
如果第一个表达式的值为true,则返回表达式1
如果第一个表达式的值为false,则返回表达式2
![](https://i-blog.csdnimg.cn/blog_migrate/cc01fd904b74b07ad6cfbf6072b9a5bc.png)
对于非布尔值,会先将其转换为布尔值,进行运算,最后结果返回原值。
4.53转换为布尔值
显示转换:
1.Boolean(内容)
记忆: ‘’、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true
隐式转换:
1. 有字符串的加法 “” + 1 ,结果会将数字1转变为字符串“1”。比如'black'+1 结果为'black1'
2. 减法 - (像大多数数学运算一样)只能用于数字,它会使空字符串 "" 转换为 0
3. null 经过数字转换之后会变为 0
4. undefined 经过数字转换之后会变为 NaN
5.null==undefined,但是null===undefined为假,他们的值相等,都为空,但类型不相等。
4.6赋值运算符
4.61概念:用来把数据赋值给变量的运算符
![](https://i-blog.csdnimg.cn/blog_migrate/e2ea27db8c6ef7c2da52603b148fb692.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c93fc060a22db0991f9970a73dde41dc.png)
4.7运算符的优先级
![](https://i-blog.csdnimg.cn/blog_migrate/2dc6a2f1c323efbaf290a6af52ee63ba.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9e92067a9c6cbee9198c85795c63a515.png)
4.8拓展(后期学习):js特殊运算符
4.81数字转化:单目运算符 +
4.82 逗号运算符
4.83布尔值转换符 !!
4.84空值合并运算符 ??
第五章 流程控制
流程控制就是来控制我们的代码按照什么结构顺序来执行。流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。
![](https://i-blog.csdnimg.cn/blog_migrate/6730c6d94cfd0e1fe2ed355b9ce22926.png)
5.1顺序结构
顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行
5.12表达式和语句
语句是一段可执行的代码,比如:prompt()可以弹出一段输入框,if语句,for循环语句等
![](https://i-blog.csdnimg.cn/blog_migrate/735fb12600d0bd8a99d496766a56b9d4.png)
5.2分支结构
分支结构:由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果。
JS 语言提供了三种分支结构语句:
if 语句
三元表达式
switch 语句
5.21 if 分支语句
5.211 if单分支语句
![](https://i-blog.csdnimg.cn/blog_migrate/e5ffb181a2c9cc8083bd1cf9e6fa0edb.png)
5.212 if else语句(双分支语句) 二选一的过程
![](https://i-blog.csdnimg.cn/blog_migrate/42f93d9e0091cb85ace66ec75e12d16a.png)
5.213 if else if 语句(多分支语句)
![](https://i-blog.csdnimg.cn/blog_migrate/414d27dc52f20528061f18a5d9720a2f.png)
5.22三元表达式
三元表达式也能做一些简单的条件选择。 有三元运算符组成的式子称为三元表达式
1. 语法结构
![](https://i-blog.csdnimg.cn/blog_migrate/3fd7679b728527896e291e4c6190cba9.png)
2. 执行思路
如果表达式1为true ,则返回表达式2的值,如果表达式1为false,则返回表达式3的值
简单理解: 就类似于 ifelse(双分支) 的简写
5.23 switch语句
switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用 switch。
![](https://i-blog.csdnimg.cn/blog_migrate/f42cb0cd2e632ce1d369594ab8e7c769.png)
注意:
switch :开关 转换 , case :小例子 选项
关键字 switch 后面括号内可以是表达式或值, 通常是一个变量
关键字 case , 后跟一个选项的表达式或值,后面跟一个冒号
switch 表达式的值会与结构中的 case 的值做比较
如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码执行结束
如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码,如果上一个case没有break,也会继续执行default
注意: 执行case 里面的语句时,如果没有break,则继续执行下一个case里面的语句。
Switch语句一般用于等值判断,不适合用于区间判断
switch case一般需要配合break关键字使用,没有break会造成case穿透
5.24switch 语句和 ifelseif 语句的区别
共同点:
都能实现多分支语句
大部分情况下可以互换
区别:
① switch...case 语句通常处理 case为比较确定值的情况, 而 if…else…语句更加灵活,常用于范围判断(大于、等于某个范围)
②switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而if…else 语句有几种条件,就得判断多少次。
③ switch一定要注意必须是===全等,一定注意数据类型,同时注意break,否则会有穿透效果
④ 当分支比较少时,if… else语句的执行效率比 switch语句高。
⑤ 当分支比较多时,switch语句的执行效率比较高,而且结构更清晰
5.3 循环
5.31循环
目的:在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句
在Js 中,主要有三种类型的循环语句:for 循环,while 循环,do...while 循环
5.32 for循环(重点)
在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句
for 循环主要用于把某些代码循环若干次,通常跟计数有关系。其语法结构如下:
![](https://i-blog.csdnimg.cn/blog_migrate/51fbfe434f84c6dab4c6a1d99e764efd.png)
变量起始值:通常被用于初始化一个计数器,就是let关键字声明一个普通变量,通常作为计数器使用。
终止条件:用于确定每一次循环是否能被执行。如果结果是 true就继续循环,否则退出循环。是终止的条件
变量变化量:每次循环的最后都要执行的表达式。通常被用于更新或者递增递减计数器变量。
![](https://i-blog.csdnimg.cn/blog_migrate/c3c29d16c6e58ed997b9b1a68749bb69.png)
for循环和while循环有什么区别呢:
Ø 当如果明确了循环的次数的时候推荐使用for循环
Ø 当不明确循环的次数的时候推荐使用while循环
5.33 双重for循环
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在for循环语句中,可以再嵌套一个for 循环,这样的 for 循环语句我们称之为双重for循环。
![](https://i-blog.csdnimg.cn/blog_migrate/73525267ee7df4ae564aa5e3306321ef.png)
内层循环可以看做外层循环的语句
内层循环执行的顺序也要遵循 for 循环的执行顺序
外层循环执行一次,内层循环要执行全部次数
![](https://i-blog.csdnimg.cn/blog_migrate/84fcdfbc343294822ac3e7594c885432.png)
5.34 while循环
在满足条件时,重复执行某些代码
![](https://i-blog.csdnimg.cn/blog_migrate/5e67849ac49594bda3a953aca08a55b7.png)
释义:
跟if语句很像,都要满足小括号里的条件为true才会进入 循环体 执行代码
while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件,直到括号内条件不满足,即跳出
while 循环三要素:
循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程。
所以,while循环需要具备三要素:
![](https://i-blog.csdnimg.cn/blog_migrate/b0532e5ce5f87897c95c1c2a0adcad35.png)
注意:
① 使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环
② while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断,比如判断用户名和密码
5.35 do while 循环(不常用)
do... while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。
do... while 语句的语法结构如下:
![](https://i-blog.csdnimg.cn/blog_migrate/74ab18a39a94f8a9f8ab93e9b3291203.png)
执行思路:
① 先执行一次循环体代码
② 再执行条件表达式,如果结果为 true,则继续执行循环体代码,如果为 false,则退出循环,继续执行后面代码
注意:先再执行循环体,再判断,我们会发现 do…while 循环语句至少会执行一次循环体代码
![](https://i-blog.csdnimg.cn/blog_migrate/e4bcd0011c275ad8a85062d2d76800a5.png)
5.36 关键字 continue break
continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)。
例如,吃5个包子,第3个有虫子,就扔掉第3个,继续吃第4个第5个包子,其代码实现如下:
![](https://i-blog.csdnimg.cn/blog_migrate/5b7de3f147bbb5074e8164cd7ee1d514.png)
![](https://i-blog.csdnimg.cn/blog_migrate/790e4813d24cc9b124a341acee56ff80.png)
break 关键字用于立即跳出整个循环(循环结束)。
例如,吃5个包子,吃到第3个发现里面有半个虫子,其余的不吃了,其代码实现如下:
![](https://i-blog.csdnimg.cn/blog_migrate/1750470fe0a25315a0a9d42c6326e89e.png)
5.37chrome 代码调试
断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。
断点调试可以帮我们观察程序的运行过程
浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。
F11: 程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
第六章:数组Array
6.1数组的概念
数组是指一组数据的集合,按照一定顺序保存数据的数据类型。其中的每一个数据都被称作元素,在数组中可以存放任意类型的元素,数组是将一组数据存放在单个变量名的方式。
6.2创建数组
数组的创建方式有两种:
利用new创建数组 let 数组名=new Array(); 注意Array();A要大写
利用数组字面量创建数组 let 数组名=[ ] ; 数组的字面量是方括号[], 声明数组并赋值称为数组的初始化,
6.21数组元素的类型:
可以存放任意类型
6.3获取数组中的元素
6.31数组的索引
索引:是用来访问数组中数据的序号
数组可以通过索引来访问(获取得到),设置,修改对应的数组元素,通过“数组名[索引]”来得到数组元素。
![](https://i-blog.csdnimg.cn/blog_migrate/1de303c802adc7b55d282d9dc134f67f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/10ea8d67c8351a9e5603e30c6a6f06c7.png)
被索引,但是对应的的数组元素内容没有,被索引后是undefined
arr.length:数组的长度是元素个数,即有几个元素。 可以动态监测数组元素的个数
6.4遍历数组(重点)
数组中的每一项通过“数组名[索引号]”的方式一项项的取出来。
数组里面的全部元素,从代码中我们可以发现,从数组中取出每一个元素时,代码是重复的,有所不一样的是索引值在递增,通过循环得到。
![](https://i-blog.csdnimg.cn/blog_migrate/e66ed90675a61ae500460e569b45b44e.png)
6.5操作数组
数组本质是数据集合, 操作数据无非就是 增 删 改 查 语法:
![](https://i-blog.csdnimg.cn/blog_migrate/2069959285d1efbaad69168ff21053bd.png)
1. 想要数组末尾增加数据元素利用那个方法?
Ø arr.push()
Ø 可以添加一个或者多个数组元素
Ø 返回的是数组长度
2. 想要数组开头增加数据元素利用那个方法?
Ø arr.unshift()
Ø 可以添加一个或者多个数组元素
Ø 返回的是数组长度
3. 重点记住那个?
Ø arr.push()
6.51操作数组-新增
6.511掌握利用push向数组添加元素(数据)
![](https://i-blog.csdnimg.cn/blog_migrate/9fb090634c27d56bf96d90bd469a0d83.png)
6.512 arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度
![](https://i-blog.csdnimg.cn/blog_migrate/57955950519b598c6db64cf531a7f8e9.png)
6.52操作数组-删除
6.521数组. pop()方法
数组. pop(不带参数) 方法从数组中删除最后一个元素,并返回该元素的值
6.522数组. shift() 方法
数组. shift(不带参数) 方法从数组中删除第一个元素,并返回该元素的值
6.523数组. splice() 方法
数组. splice(起始位置,删除几个元素) 方法 删除指定元素
解释:
start 起始位置:
指定修改的开始位置(从0计数)
deleteCount:
表示要移除的数组元素的个数
可选的。 如果省略则默认从指定的起始位置删除到最后
开发很常用,比如随机抽奖,比如删除指定商品等等
6.53通过修改length长度
可以通过修改length长度来实现数组扩容的目的,length属性是可读写的
6.54修改索引号增加数组元素
可以通过修改索引的方式追加数组元组元素,不能直接给数组名赋值,否则会覆盖掉以前的数据
![](https://i-blog.csdnimg.cn/blog_migrate/462ccff8e2605b5d7cddeea9d261035f.png)
对应的结果:
![](https://i-blog.csdnimg.cn/blog_migrate/5039ed5d9b28cec9110e0952c164d1dc.png)
6.6数组排序【重要!!】(筛选数组,删除指定元素,翻转数组,冒泡排序)
![](https://i-blog.csdnimg.cn/blog_migrate/1caa163258b43555aea769272724c7ce.png)
<script>
let arr = [2, 0, 6, 77, 52, 0, 25, 7];
//1,声明新的空数组
let arra = []
// 2 for循环遍历旧数组
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 3满足条件,追加给新数组
// 通过push方法追加
arra.push(arr[i])
// console.log(arr[i]);
// 通过自身追加
// arra+=arr[i]+'\n'
}
}
// 4输出新的数组
document.write(arra)
</script>
筛选数组之删除指定数,数组去0案例
需求:将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后,形成一个不包含 0 的新数组
分析:
①:声明一个新的数组用于存放新数据newArr
②:遍历原来的旧数组, 找出不等于0的元素
③:依次追加给新数组 newArr
<script>
let arr = [2, 0, 6, 77, 0, 52, 25, 7]
// 1声明一个新的数组
let newArr = []
// 2遍历旧数组
for (var i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
// 3通过push方法追加
newArr.push(arr[i])
}
}
// 4输出新数组
document.write(newArr)
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/60bb4d5d3da8eb0734b6065f7bf73c38.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e38bd21eb5c35768c24a368b3ddd912f.png)
冒泡排序
冒泡排序是一种简单的排序算法。
它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。
这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]
![](https://i-blog.csdnimg.cn/blog_migrate/74bc8b6acbe85834a6e7227358ed4f57.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5e91ba2de60da4f105d690428a571427.png)
第七章函数
7.1函数的概念
函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
7.2函数的使用
7.21函数在使用时分为两步:
声明函数和调用函数。
// 声明函数
function 函数名() {
//函数体代码
}
// 调用函数
函数名(); // 通过调用函数名来执行函数体代码
function是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum
调用的时候千万函数名后要添加小括号
口诀:函数不调用,自己不执行。声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码
函数体
函数体是函数的构成部分,它负责将相同或相似代码“包裹”起来,直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。
![](https://i-blog.csdnimg.cn/blog_migrate/03b74d7468547888db66648788bc93e5.png)
7.22函数的封装
函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
7.3函数的参数
7.31形参和实参
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参。
// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);
![](https://i-blog.csdnimg.cn/blog_migrate/d892dc76aa01b55d337b2fc44b07003f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/451f92fb140978ca32c8083aab5c5631.png)
参数的作用 : 在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去
函数参数的传递过程:
调用的时候实参值是传递给形参的,形参来接收实参
形参简单理解为:不用声明的变量
实参和形参的多个参数之间用逗号(,)分隔
7.32函数形参和实参个数不匹配问题
![](https://i-blog.csdnimg.cn/blog_migrate/d37ec3dddb71b92d1879e95bddf89c2d.png)
function sum(num1, num2) {
console.log(num1 + num2);
}
sum(100, 200); // 形参和实参个数相等,输出正确结果sum(100, 400, 500, 700); // 实参个数多于形参,只取到形参的个数sum(200); // 实参个数少于形参,多的形参定义为undefined,结果为NaN
注意:在JavaScript中,形参的默认值是undefined
7.4函数的返回值 return
7.41return返回 语句
return 只能返回一个值。
如果用逗号隔开多个值,以最后一个为准
在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
return 后面代码不会再被执行,会立即结束当前函数,所以 return 后面的数据不要换行写
return函数可以没有 return,这种情况函数默认返回值为 undefined
为什么要让函数有返回值
Ø 函数执行后得到结果,结果是调用者想要拿到的(一句话,函数内部不需要输出结果,而是返回结果)
Ø 对执行结果的扩展性更高,可以让其他的程序使用这个结果
7.42return 终止函数
return 语句之后的代码不被执行
function add(num1,num2){
//函数体return num1 + num2; // 注意:return 后的代码不执行alert('我不会被执行,因为前面有 return');
}
let resNum = add(21,6); // 调用函数,传入两个实参,并通过 resNum 接收函数返回值alert(resNum); // 27
7.43函数没有 return 返回 undefined
函数都是有返回值的
如果有return 则返回 return 后面的值
如果没有return 则返回 undefined
7.44 break ,continue ,return 的区别
break :结束当前的循环体(如 for、while)
continue :跳出本次循环,继续执行下次循环(如 for、while)
return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码
7.5arguments的使用
当我们不确定有多少个参数传递的时候,可以用 arguments来获取。在 JavaScript 中,arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。
arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:
具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法
![](https://i-blog.csdnimg.cn/blog_migrate/147e0a0750f4db70c5b5eec75defdbfb.png)
<script>
// 1求数组中最大值和最小函数
function getArrValue(arr = []) {
let max = arr[0]
let min = arr[0]
for (let i = 0; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i]
}
if (min > arr[i]) {
min = arr[i]
}
}
return [max, min] //可以返回数组,就可以同时返回多个值。
}
let re = getArrValue([1, 1, 1, 2, 234, 2, 5, 346, 47])
document.write(re)
// 单个返回最大值
document.write(`返回的最大值是${re[0]}`)
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/1e5b1bc40f2fd30b1ea3eb108debf1cf.png)
7.6函数案例()
利用函数封装方式,翻转任意一个数组
function reverse(arr) {
let newArr = [];
for (let i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
let arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);
![](https://i-blog.csdnimg.cn/blog_migrate/d24279cc23583240b650ba9eb71c2d42.png)
利用函数封装方式,对数组排序 -- 冒泡排序
function sort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp;
}
}
}
return arr;
}
console.log(sort([1,93,4778,56]));
![](https://i-blog.csdnimg.cn/blog_migrate/adeeba51d75b536bd16260b5b3671847.png)
案例 3: 判断闰年要求:输入一个年份,判断是否是闰年(闰年:能被4整除并且不能被100整数,或者能被400整除
function isRun(year) { var flag = false;
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) { flag = true;
}
return flag;
}
console.log(isRun(2010)); console.log(isRun(2012));
![](https://i-blog.csdnimg.cn/blog_migrate/862ef237934a1ecd2df5cf33d4a8bc3b.png)
函数可以调用另外一个函数:因为每个函数都是独立的代码块,用于完成特殊任务,因此经常会用到函数相互调用的情况
function fn1() { console.log(111); fn2(); console.log('fn1');
}
function fn2() { console.log(222); console.log('fn2');
}
fn1();
![](https://i-blog.csdnimg.cn/blog_migrate/cc30f301a04ba1304d94c43f8474a698.png)
7.7函数的两种声明方式(匿名函数,具名函数)
7.71. 自定义函数方式(命名函数)利用函数关键字 function 自定义函数方式。
// 声明定义方式
functionfn() {...}
// 调用fn();
调用函数的代码既可以放到声明函数之前,也可以放在后面
因为有名字,也被称为命名函数,具名函数
7.72 . 匿名函数
7.721函数表达式
将匿名函数赋值给一个变量,并且通过变量名称进行调用 我们将这个称为函数表达式
// 这是函数表达式写法,匿名函数后面跟分号结束
let fn = function(){...};
// 调用的方式,函数调用必须写到函数体下面fn();
调用的方式,函数调用必须写到函数体下面fn()
7.722. 立即执行函数
场景介绍: 避免全局变量之间的污染
![](https://i-blog.csdnimg.cn/blog_migrate/6bf0d5610f1f56dd103fccef861aacb0.png)
立即执行函数需要调用吗? 有什么注意事项呢?
Ø 无需调用,立即执行,其实本质已经调用了
Ø 多个立即执行函数之间用分号隔开
第八章作用域
8.1作用域
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。
![](https://i-blog.csdnimg.cn/blog_migrate/528776f62df3c8f481e57fd8e1adcb15.png)
js作用域分类(es6之前):全局作用域和局部作用域
全局作用域:整个script标签,或者单独的js文件
局部作用域(函数作用域):在函数内部,只在函数内部起作用和效果
8.2变量的作用域
在JavaScript中,根据作用域的不同,变量可以分为:
![](https://i-blog.csdnimg.cn/blog_migrate/b9b2994e8a92ff01daf8c3a919b4ea20.png)
注意:
变量有一个坑, 特殊情况:
如果函数内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐
但是有一种情况,函数内部的形参可以看做是局部变量。
从执行效率来看全局变量和局部变量:
全局变量在任何地方都可以使用,只有浏览器关闭的时候才会销毁,比较占内存资源
局部变量:只在函数内部使用当程序执行完毕,就会销毁。
8.3作用域链
根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称为作用域链。(就近原则,站在目标出发,一层一层往外查找)
变量的访问原则:就近原则,先局部后全局
只要是代码,就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
访问原则:在能够访问到的情况下 先局部, 局部没有在找全局
第九章预解析
9.1预解析
javaScript代码是由浏览器中的来javsScript解析器执行的,javsScript解析器在执行代码的时候分两步:预解析和代码执行。
预解析:js引擎会把js中所有的声明变量(var)的还有函数(function)提升到当前var作用域的最前端。
代码执行:按照书写顺序从上往下执行
9.2变量预解析和函数预解析
预解析分为变量预解析(变量提升)和函数预解析(函数提升)
变量提升:就是把所有的变量提升到当前作用域的最前端,不提升赋值操作。
console.log(num);
var num=10;
/* 在预解析的时候,相当于执行了以下操作:
var num;
剩下的代码依次罗列
console.log(num);
num = 10;
*/
![](https://i-blog.csdnimg.cn/blog_migrate/6d723155477ba983295de42c1d059664.png)
函数提升:就是把所有的函数声明提升到当前作用域的最前端,不调用函数。
functionfn() {
console.log(22);
};
fn();
/* 在预解析的时候,相当于执行了以下操作:
function fn() {
console.log(22);
};
剩下的代码依次罗列
fn();
*/
![](https://i-blog.csdnimg.cn/blog_migrate/afcd9d34e97ef6959504f74e2d5bb22a.png)
案例:结果是几?
var num = 10;
functionfn() {
console.log(num);
var num = 20;
console.log(num);
}
fn();
// 相当于执行以下操作:// var num;// function fn() {// var num;// console.log(num);// num = 20;// console.log(num);// };// num = 10;// fn();
![](https://i-blog.csdnimg.cn/blog_migrate/41c3645259c80497cbffd572bc4dd4fe.png)
案例2:结果是几?
![](https://i-blog.csdnimg.cn/blog_migrate/9d8ec031db5087537451273921517d23.png)
![](https://i-blog.csdnimg.cn/blog_migrate/629d0272413f32709190a0c7e4855459.png)
编辑
// 执行以下代码:var a;
functionf1() {
var b;
var a;
b = 9;
console.log(a);a
// 因为var a;离console.log(a)最近,会选择var a,也因为就近原则只会往上找,不会往下找;console.log(b);
a = '123'
};
a = 18;
f1();
![](https://i-blog.csdnimg.cn/blog_migrate/d131580444456b7d1937d815cfca67e8.png)
经典案例:
![](https://i-blog.csdnimg.cn/blog_migrate/50b04a5825e81d91b8fa80fefc8c6a20.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3a35fa011984e116ca147e499dd8b87a.png)
编辑
相当于执行以下代码:
functionf1() {
var a;
a=b=c=9;
// var a=b=c=9,是指a变量的值等于b等于c等于9,这里a声明变量,而b和c并未声明变量,是直接赋值// 如果是var a=9,b=9,c=9,意味着同时声明了a,b,c三个变量// 因为b和c没有声明,直接赋值,就会当作全局变量来看,所以函数外的log(c)和log(b)就可以使用、console.log(a);
console.log(b);
console.log(c);
};
f1();
console.log(c);
console.log(b);
console.log(a);
![](https://i-blog.csdnimg.cn/blog_migrate/2b55b55621dbb9065dede13fa99aea2b.png)
重点:
在函数内部未声明直接赋值的变量称为全局变量;
同时声明多个变量时,中间用逗号隔开,例如:var a=9,b=9,c=9,
第十章 对象
10.1对象 object
在 JavaScript 中,对象是一组无序的相关属性和方法的集合,是一组数据类型,详细的描述某个事务。所有的事物都是对象,例如字符串、数值、数组、函数等。对象是由属性和方法组成的。
属性:事物的特征,在对象中用属性来表示(常用名词)
方法:功能或者事物的行为,在对象中用方法来表示(常用动词)
为什么需要对象:
保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。如果要保存一个人的完整信息呢:JS 中的对象表达结构更清晰,更强大。
10.2创建对象三种方式
在 JavaScript 中,现阶段我们可以采用三种方式创建对象(object):
利用字面量创建对象
利用 newObject创建对象
利用构造函数创建对象
10.21 利用 字面量 创建对象
对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法。{ } 里面采取键值对的形式表示:
键:相当于属性名
值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)
里面的属性或者方法采取键值对的形式,
多个属性和方法之间以逗号隔开,
方法可以是一个匿名函数
let star = {
name : 'pink', age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
对象的调用:
对象里面的属性调用 : 对象.属性名 ,这个小点 . 就理解为“ 的
对象里属性的另一种调用方式 : 对象[‘属性名’],注意方括号里面的属性必须加引号,
对象的方法调用:对象.方法名() ,注意这个方法名字后面一定加括号
console.log(star.name) // 调用名字属性console.log(star['name']) // 调用名字属性
star.sayHi(); // 调用 sayHi 方法,注意,一定要带后面的括号
![](https://i-blog.csdnimg.cn/blog_migrate/f15c523c5c4fa2b9e7796d7d02b24a0d.png)
变量、属性、函数、方法总结:
变量和属性:
相同点:都是用来存储数据的
不同点:
变量:声明并且赋值,使用的时候直接写变量名,单独存在
属性:对象里面的变量称为属性,不需要声明,用来描述对象的特征。在使用的使用要通过对象名.属性来调用。
函数和方法:
相同点:都是实现某个功能,做某件事情
不同点:
函数:单独存在,通过 函数名()的方式调用
方法:对象中的函数称为方法,用来描述该对象的行为和功能。方法不需要声明,使用对象名.函数名() 的方式调用,
10.22 利用 new Object关键字创建对象
注意点:
Object() :第一个字母'O'大写
new Object() :需要 new 关键字
使用的格式:对象.属性 = 值;利用等号赋值的方法添加对象的属性和方法。
每个属性和方法以分号结束
调用方法同字面量创建一致
let andy = new Object();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}
![](https://i-blog.csdnimg.cn/blog_migrate/3dc66cba188aad4b8cc624d3f3b1b741.png)
10.23利用构造函数创建对象
由于字面量和new关键字一次只能创建一个对象,而大量属性和方法是一样的,只能依次复制。而我们可以通过利用函数的方法,重复这些相同的代码,我们就将这个函数称为构造函数。并且这个函数其中封装的是对象。
构造函数:就是将对象中相同的属性和方法抽象出来封装到一个函数中。
注意点:
构造函数名首字母必须大写
属性和方法通过 this指向
不需要return就可以返回结果
必须用new调用构造函数,
通过 new 函数名()调用就可以创建一个对象
// function 构造函数名() {// this.属性 = 值;
// this.方法 = function () { };// }
// new 构造函数名();
//调用
function Star(uname, age, sex) { //构造函数名字首字母要大写
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function (song) {
console.log(song);
}
}
let ld = new Star('刘', 18, '男',); //通过new关键字创建一个对象console.log(ld.name);
console.log(ld['age']);
ld.sing('冰雨'); //调用函数
10.3 遍历对象 for in
for in是对对象或者数组进行遍历。 // k变量,k是习惯性写法,或者写key 输出得到的是属性名。 // obj[k]得到的是属性值
let obj = {
name: '12313',
age: 18,
sex: '男',
fn: function () {
}
}
for (let k in obj) {
console.log(k);
// k变量,k是习惯性写法,输出得到的是属性名,并且是以字符串的形式k==='age'
console.log(obj[k]);
// obj[k]得到的是属性值
}
![](https://i-blog.csdnimg.cn/blog_migrate/50263ec3a37269486621b3b00e5dfcfa.png)
第十一章:内置对象P155~186
11.1内置对象
lJavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象,前两种对象属于js的基础内容,属于 ECMAScript;第三个浏览器对象是属于JS独有的,在JS API中讲解。
内置对象:是指js语言自带的一些对象,这些对象供开发者使用,并提供了一些最常用的功能(属性和方法)。
js中提供了多个内置对象,例如:Math,Date,Array,String
11.2查文档(MDN)
Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN: https://developer.mozilla.org/zh-CN/
如何学习对象中的方法:
查阅该方法的功能
查看里面参数的意义和类型
查看返回值的意义和类型
通过 demo 进行测试
11.3💃Math对象
Math 对象不是构造函数,它具有数学常数和函数的属性和方法。直接使用方法和属性。
11.31常用方法
例如:圆周率Math.PI,三个取整方法(向下取整Math.floor,向上取整Math.ceil,四舍五入Math.round,)绝对值Math.abs(隐式转换),最大值和最小值Math.max/min
<script>
console.log(Math.PI); //3.141592653589793
// 向下取整 floor,只允许取数值
console.log(Math.floor('1.2')); //1
//向上取整ceil()
console.log(Math.ceil(1.3)); //2
console.log(Math.ceil('1.3')); //2
console.log(Math.ceil(1.5)); //2
// 四舍五入,就进取整
console.log(Math.round('课程')); //NaN
console.log(Math.round('1.2'));//1
console.log(Math.round(1.5)); //2
console.log(Math.round(-1.5)); //-1
console.log('......');
console.log(Math.round(1.2)); //1
// 绝对值console.log(Math.abs(-4));
console.log(Math.abs('-4')); //4
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/3a7afa324a1a98fb6c34c98c3cb5ae3c.png)
利用对象封装自己的数学对象,包含PI,Max,Min
// 利用对象封装自己的数学对象,包含pi,最大值和最小值
let myMath = {
PI: 3.1415926,
getMax: function () {
let max = arguments[0];
for (let i = 1; i <= arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
},
getMin: function () {
let min = arguments[0];
for (var i = 1; i <= arguments.length; i++) {
if (arguments[i] < min) {
min = arguments[i];
}
}
return min;
},
}
console.log(myMath.PI);
console.log(myMath.getMax(1, 2, 4, 6, 43));
console.log(myMath.getMin(1, 2, 4, 6, 43));
![](https://i-blog.csdnimg.cn/blog_migrate/bbcc25d00ef1c4818fe6f96c78bbfbb6.png)
11.32 随机数法random()
random()方法可以随机返回一个小数,取值范围是[0,1),0<=x<1.
如何生成0-10的随机数呢?
Math.floor(Math.random() * (10 + 1))
如何生成5-10的随机数?
Math.floor(Math.random() * (5 + 1)) + 5
如何生成N-M之间的随机数
Math.floor(Math.random() * (M - N + 1)) + N
术语 | 解释 | 举例 |
关键字 | 在JavaScript中有特殊意义的词汇 | let、var、function、if else、 switch、case、break |
保留字 | 在目前的JavaScript中没意义,但未来可能会具有特殊意义的词汇 | int、short、long、char |
标识(标识符) | 变量名、函数名的另一种叫法无表达式能产生值的代码,一般配合运算符出现 | 10 + 3、age >= 18 |
语句 | 一段可执行的代码 | If () for() |
11.4 日期Date对象
11.41 日期格式化
Date对象是一个构造函数,需要通过new实例化才能使用。Date实例用来处理日期和时间。
Date() 构造函数的参数,如果()中有参数,就返回参数。如果没有,就返回当前时间。
()中参数的日期格式的两种书写方式:如图
// 不写参数
var date = newDate();
console.log(date);
// 参数日期的两种书写格式var now = newDate('2019-5-1 03:02:45');
console.log(now);
var now = newDate('2019/5/4 03:02:45');
console.log(now);
![](https://i-blog.csdnimg.cn/blog_migrate/f0a2a33a6940e0b5caf2bb7554e538fd.png)
日期格式化
方法名 | 说明 | 代码 |
getFullYear() | 获取当年 | date.getFullYear() |
getMonth() | 获取当月,注意月份会比真实月份小1, | date.getMonth() |
getDate() | 获取当天 | date.getDate() |
getDay() | 获取星期几(星期从周日开始) | date.getDay() |
getHours() | 获取当前小时 | date.getHours() |
getMinutes() | 获取当前分钟 | date.getMinutes() |
getSeconds() | 获取当前秒 | date.getSeconds() |
当前日期实例化:
按照中国人的习惯,一般星期都会以汉字书写,所以用到arr数组的索引号,将数字‘3’变为‘星期三’。
利用三元表达式将时分秒中小于10的部分替换成,比如:2:1:1替换成02:01:01
var now = newDate();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var day = now.getDay();
var hour = now.getHours();
hour = hour > 10 ? hour : '0' + hour;
var minute = now.getMinutes();
minute = minute > 10 ? minute : '0' + minute;
var second = now.getSeconds();
second = second > 10 ? second : '0' + second;
console.log('这个日期是:' + year + '年' + month + '月' + date + '日' + arr[day] + hour + ':' + minute + ':' + second);
![](https://i-blog.csdnimg.cn/blog_migrate/c5696513b2611facff0fe33473e8174d.png)
11.42 获取日期的总的毫秒(时间戳)的4种方法
Date 对象是基于1970年1月1日(世界标准时间)起的毫秒数。经常利用总的毫秒数来计算时间:
通过 valueOf() 方法
通过 getTime() 方法
+new Date() 返回的是总的毫秒数
H5新增的,获取总的毫秒数 var now=Date.now()
// 方法1和方法2 通过valueof()和getTime() 来实现,求出从1970年到现在总的毫秒数var now2 = newDate();
console.log(now2.valueOf());
console.log(now2.getTime());
// 方法3 通过 +new Date() 实现console.log(+newDate());
// 方法4.无需条件,直接输出,即可求出时间毫秒数 Date.now()console.log(Date.now());
![](https://i-blog.csdnimg.cn/blog_migrate/5c19825d1c8e65a86f02a2a0c07f6bb7.png)
11.43 倒计时案例
① 核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时 ,但是不能拿着时分秒相减,比如 05 分减去25分,结果会是负数的。
② 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数,1秒=1000毫秒。
③ 把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)
转换公式如下:
d = parseInt(总秒数/ 60/60 /24); 计算天数
h = parseInt(总秒数/ 60/60 %24) ; 计算时间
m = parseInt(总秒数 /60 %60 ); 计算分数
s = parseInt(总秒数%60); 计算当前秒数
案例:
function countDown(time) {
// 现在的时间毫秒数var nowTime = +newDate();
// 用户输入的时间毫秒数var inputTime = +newDate(time);
// 剩余的时间毫秒数,将毫秒数转化成秒数,1毫秒等于1000秒。var times = (inputTime - nowTime) / 1000;
// 将剩余时间转换成天数,时,分,秒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-12-10 15:26:40'));
![](https://i-blog.csdnimg.cn/blog_migrate/5183bd6552dc2f40689bf514bbe8f905.png)
11.5数组Array对象
11.51 创建数组对象的两种方式
字面量方式
new Array() 当()中有一个数字元素时,这个元素指的是arr的长度,例如arr1;arr数组中包含了3个空元素;当()中的元素大于等于2个时,例如arr2该数组相当于var arr=[2,3];
//字面量var arr = [1, 2, 3];
console.log(arr);
// new Array();var arr1 = newArray(3);
var arr2 = newArray(2, 3)
console.log(arr1);
console.log(arr2);
![](https://i-blog.csdnimg.cn/blog_migrate/3e88c497d55deb76bc59c701dd8d7f11.png)
11.52检测是否为数组
instanceof 运算符,可以判断一个对象是否属于某种类型
Array .isArray() 用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法
var arr = [1, 2, 3];
var arr2 = {};
// inatanceof 运算符console.log(arr instanceofArray);
console.log(arr2 instanceofArray);
// Array .isArray()console.log(Array.isArray(arr));
console.log(Array.isArray(arr2));
![](https://i-blog.csdnimg.cn/blog_migrate/6ba69899bf6f3dab23593dbb0137cbf4.png)
11.53添加删除数组元素的方法push unshift pop shift
方法名 | 说明 | 返回值 |
push(参数1,参数2,....) | 数组的末尾添加一个或者多个元素 | 新数组的长度 |
unshift(参数1,参数2,...) | 数组的开头添加一个或者多个元素 | 新数组的长度 |
pop() | 删除数组最后一个元素,无参数 | 返回删除的值 |
shift() | 删除数组第一个元素,无参数 | 返回删除后第一个元素的值 |
var arr = [1, 2, 3];
// push()在数组末尾添加一个或者多个元素,log后返回新的数组长度,6console.log(arr.push(2, 232, 3232));
// unshift()在数组开头添加一个或者多个元素后返回新的数组长度,9 console.log(arr.unshift(2, 232, 3232));
// 现在新的数组是 [2, 232, 3232, 1, 2, 3, 2, 232, 3232]console.log(arr);
// pop()删除数组的最后一个元素,log后返回删除的这个值console.log(arr.pop());
// pop()删除数组的开头的第一个元素,log后再返回删除后的第一个元素console.log(arr.shift());
![](https://i-blog.csdnimg.cn/blog_migrate/716a298bb84012d8a1137e63dafb7cca.png)
案例: 筛选数组
有一个包含工资的数组[1500,2000,2500,2100,1800],要求将数组中工资超过2000的删除,剩余的数组放到新的数组中。
var arr = [1500, 2000, 2500, 2100, 1800];
var arr1 = [];
for (var i = 0; i <= arr.length - 1; i++) {
if (arr[i] <= 2000) {
// arr1[arr1.length] = arr[i]; 这里可以使用push来运算
arr1.push(arr[i]);
}
};
console.log(arr1);
![](https://i-blog.csdnimg.cn/blog_migrate/85debe75a683333f456c24ba1184e2f1.png)
11.54数组排序 reverse() sort()
翻转数组 reverse(),颠倒数组中元素的数据。无参数
数组排序(冒泡排序) sort(),会用到函数,function(a,b){ return a-b;升序 return b-a; 降序 } 对数组中的元素进行排序
// 翻转数组var arr = ['1', '2', '3', '颜色'];
arr.reverse();
console.log(arr);
var arr = [121, 102, 12, 103, 23, 34, 56];
arr.sort();
console.log(arr);
// 冒泡排序。直接使用sort()的话,元素不会直接按照升序或者降序从小到大或者从大到小排列,所以用到函
数
arr.sort(function (a, b) {
// 降序return b - a;
// 升序// return a-b;
});
console.log(arr);
![](https://i-blog.csdnimg.cn/blog_migrate/ab0188bb0c0cdb3b669c6391e626b617.png)
11.55数组索引方法indexOf lastIndexOf()
indexOf("要查找的字符",[查找的位置]) 查找该数组中指定元素的索引号,只返回满足第一个条件的元素索引号,找不到的话返回-1;
lastIndexOf() 从后往前找,返回索引号,找不到返回-1
var arr = ['red', 'pink', 'yellow', 'pink', 'white'];
console.log(arr.indexOf('pink'));
console.log(arr.indexOf('COLOR'));
console.log(arr.lastIndexOf('pink'));
重点案例:数组去重;
有一个数组[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’],要求去除数组中重复的元素
①目标:把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重。
②核心算法:我们遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加。
③ 我们怎么知道该元素没有存在? 利用 新数组.indexOf(数组元素) 如果返回时 -1 就说明 新数组里面没有改元素
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(['1', '2', '1', '3']);
console.log(demo);
11.56数组转换为字符串toString(),join('分隔符‘)
方法 | 说明 | 返回值 |
toString() | 将数组转换成字符串,以逗号分隔 | 返回字符串 |
join('分隔符‘) | 将数组中的所有元素转换为字符串,以任意分隔符隔开,分隔符用''包含,,默认情况下join()表示的是逗号 | 返回字符串 |
var arr = [1, 2, 'pink'];
console.log(arr.toString());
console.log(arr.join());
console.log(arr.join('|'));
![](https://i-blog.csdnimg.cn/blog_migrate/191ae2b1058628e7deb1c8b03a52fd0d.png)
11.57 concat(),slice(),splice()
concat()合并两个数组,
slice() 方法 通过提取原始数组中的部分元素而返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
splice() 删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。返回的值是被删除的内容,会改变原始数组
splice(start, deleteCount, item1, item2, itemN)
star 指定修改的开始位置(从 0 计数)索引号,
deleteCount, 移除的数组元素的个数,
item1, item2, 要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。
![](https://i-blog.csdnimg.cn/blog_migrate/f4b9c99a3b85fb1ce8f9bbc7c29b8369.png)
方法 | 说明 | 返回值 |
concat() | 合并两个或多个数组,不更改现有数组 | 返回一个新数组 |
slice(start,end) | 提取数组中的部分元素,构成一个新的数组,包括start,不包括end。不改变原数组 | 一个含有被提取元素的新数组。 |
splice(index,deleteCount,item1, item2, ...) | 删除或替换现有元素或者原地添加新的元素来修改数组,改变原数组 | 返回值是被删除的内容 |
slice()和splice()的区别:
slice(start,end)方法可从已有数组中返回选定的元素,返回一个新数组,包含从start到end(不包含该元素)的数组元素。
注意:该方法不会改变原数组,而是返回一个子数组,如果想删除数组中的一段元素,应该使用Array.splice()方法。
start参数:必须,规定从何处开始选取,如果为负数,规定从数组尾部算起的位置,-1是指最后一个元素。
end参数:可选(如果该参数没有指定,那么切分的数组包含从start倒数组结束的所有元素,如果这个参数为负数,那么规定是从数组尾部开始算起的元素)。
var arr = [1,2,3,4,5];
console.log(arr.slice(1));//[2,3,4,5] 选择序列号从1到最后的所有元素组成的新数组。console.log(arr.slice(1,3))//[2,3] 不包含end,序列号为3的元素
同时slice(start,end)可以作用于字符串的切割
/*字符串切割和提取----slice(start,end),substring(),substr()*/
var str = "Hello,world!";
var sliceStr = str.slice(1,5);//ello (不包含end)var subStr = str.substring(1,5);//ellovar subStr = str.substr(1,5);//ello,var str = "1000000";
var sliceStr = str.slice(-3);//000 从序列号为-3的位置到最后
![](https://i-blog.csdnimg.cn/blog_migrate/3e59aabfd0a70a8dd8fab577624c5f47.png)
2.splice():该方法向或者从数组中添加或者删除项目,返回被删除的项目。(该方法会改变原数组)
splice(index,deleteCount,item1,...itemX)
index参数:必须,整数,规定添加或者删除的位置,使用负数,从数组尾部规定位置。
howmany参数:必须,要删除的数量,如果为0,则不删除项目。
tem1,...itemX参数:可选,向数组添加的新项目。
var arr=[1,2,3,4,5,6];
console.log(arr.splice(2,2,'pink')); //[3,4]返回新的数组 console.log(arr); // [1,2,'pink',5,6]返回新的数组
11.6字符串对象
11.61 基本包装类型
为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
![](https://i-blog.csdnimg.cn/blog_migrate/28f38f40c2c5e6fe19ee672752086e10.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6978577bfe7bd10b5f0e0e4988aa241b.png)
11.62 字符串的不可变
![](https://i-blog.csdnimg.cn/blog_migrate/d45c866cfb5f6499ddfd32d3b6e66957.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0e63e9ced1a377de614bae2fa0f8293c.png)
11.63根据字符返回位置
![](https://i-blog.csdnimg.cn/blog_migrate/0fc0e1bab31bc4afff9e47110aa6ff88.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0e68fce0bed1ff58e650b2af0fca1e38.png)
案例:返回字符位置,并查看出现的次数
查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
/* 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
① 核心算法:先查找第一个o出现的位置
② 然后 只要indexOf 返回的结果不是 - 1 就继续往后查找
③ 因为indexOf 只能查找到第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找 */
var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
while (index !== -1) {
console.log(index);
num++;
index = str.indexOf('o', index + 1);
}
console.log(num);
// 课后作业['red','blue','red','green','pink','blue','pink','red']求red出现的次数和位置
var arr = ['red', 'blue', 'red', 'green', 'pink', 'blue', '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);
![](https://i-blog.csdnimg.cn/blog_migrate/9f27a44f9226ffd18804e6be5950bf25.png)
11.64根据位置返回字符(重点)
![](https://i-blog.csdnimg.cn/blog_migrate/bbf9b815f4d89f05fc49d2d11453a802.png)
![](https://i-blog.csdnimg.cn/blog_migrate/58a2b23613a0b60b7be6a5b4d9966834.png)
案例:返回字符位置
判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数。
/* 核心算法
判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数。
① 核心算法:利用 charAt() 遍历这个字符串
② 把每个字符都存储给对象, 如果对象没有该属性,就为1,如果存在了就 +1
③ 遍历对象,得到最大值和该字符
判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数。对象 o { }
*/// 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数。
var str = 'abczoefoxyozzopp';
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
if (o[chars]) {
// o[chars]得到的是属性值
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o);
![](https://i-blog.csdnimg.cn/blog_migrate/4d6fcd37096b8dd9f66dea37360dabb0.png)
11.65字符串操作方法(重点)
方法名 | 说明 |
concat(str1,str2,str3...) | 连接多个字符串,拼接字符串,等同于+,+更常用 |
substring(Start,[end])重点 | 从start(索引号)位置开始,end取的个数,或者根据length属性使用 |
slice(start,[ end]) | 从start位置开始end结束,取不到end,start和end都是索引号 |
substring(start,[end])[]中的内容代表可选值,可有可无。
substring 提取从 start 到 end(不包括)之间的字符。特别地:
如果 start 等于end,substring 返回一个空字符串。
如果省略end,substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN,则被当作 0。
如果任一参数大于 str.length,则被当作 str.length。
如果 start 大于 end,则 substring 的执行效果就像两个参数调换了一样。
11.66replace()方法
replace(被替换的部分,替换后的部分) 方法替换部分或所有的新字符串。
11.67split()方法
split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。
![](https://i-blog.csdnimg.cn/blog_migrate/ecbbbbcda43f51963b37c11c4ca88c2a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/26a481610b6d922393212fbcfbe40b61.png)
11.68 toUpperCase()转换大写 toLowerCase()转换小写
给定一个字符串,如:“abaasdffggghhjjkkgfddsssss3444343”,问题如下:
字符串的长度
取出指定位置的字符,如:0,3,5,9等
查找指定字符是否在以上字符串中存在,如:i,c ,b等
替换指定的字符,如:g替换为22,ss替换为b等操作方法
截取指定开始位置到结束位置的字符串,如:取得1-5的字符串
找出以上字符串中出现次数最多的字符和出现的次数
遍历字符串,并将遍历出的字符两头添加符号“@”
第十二章:简单数据类型和复杂数据类型P187~190
12.1简单数据类型和复杂数据类型
简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。
★值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型 string ,number,boolean,undefined,null
★引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等
简单数据类型null返回的是一个空的对象,如果有个变量我们以后打算存储作为对象,暂时没想好放啥,这个时候就给null
let timeer=null;
console.log(typeof timeer);
![](https://i-blog.csdnimg.cn/blog_migrate/b36e787318ae4b1393bfa84f462918b2.png)
12.2堆和栈
堆栈空间分配区别:
1、栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面
2、堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。复杂数据类型存放到堆里面
![](https://i-blog.csdnimg.cn/blog_migrate/80f93d8b0081cc27f679efb5d789c5df.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2453977b18215395614face0767d912e.png)
12.3简单数据类型的内存分配
值类型(简单数据类型): string ,number,boolean,undefined,null
值类型变量的数据直接存放在变量(栈空间)中
![](https://i-blog.csdnimg.cn/blog_migrate/91aecefbc187b59b359dfdbee49d1cb5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f87c5033fcbef50d2e7c22cda63a23d7.png)
12.4复杂数据类型的内存分配
引用类型(复杂数据类型):通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等
引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中
![](https://i-blog.csdnimg.cn/blog_migrate/2155622b700bda82fc4394fb7859f6ed.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a0895aec81ff3e36abfaad4bbee8522d.png)
12.5简单类型传参
函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。
12.6复杂类型传参
函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。