复制上来的图片都没了,想看原版可以移步对应资源下载免费资源
https://download.csdn.net/download/m0_58355897/88989177?spm=1001.2014.3001.5503
一 JS 组成及写法
(一)前置知识
- 简述硬件 & 操作系统 & 软件(应用系统)之间的关系。
- 计算机是由多个硬件组成,例如:CPU、硬盘、内存、网卡、主板等。
- 操作系统则是安装在计算机上用于协调各硬件进行配合工作的,他将用户的一些行为转化为计算机能够识别的命令,并协调各个硬件配合完成相关命令。
- 软件,是由程序员开发并安装在操作系统的程序(本质上是一大堆的代码),例如:微信、QQ、金山毒霸等。
- 列举常见的操作系统都有哪些。
常用的操作系统有三类:
- linux:centos、ubuntu、redhat 等。
- mac:Catalina、Mojave、Sierra 等。
- 简述编译器和解释器的区别和作用。
- 编译器和解释器的作用是将各编程语言的代码进行翻译,从而使得计算机能够识别并执行。
- 编译器,全文翻译,将代码编译成 临时文件 ,再执行临时文件。
- JavaScript、Python、PHP、Ruby... 一般称为解释型语言(脚本语言)。
- C、C++、Go、Java... 一般称为编译型语言。
(二)JS介绍
JS介绍:
JS是直接可以运行在浏览器上的,因为浏览器内置了JS的解释,是一种高级语言,是解释性语言。也就是我们所谓的脚本语言,所谓的脚本语言,就是不需要编译,由解释器去执行。当然现在JS也可以运行在NODE端。
![](https://i-blog.csdnimg.cn/blog_migrate/1201e26e709509430569c0c188753c5b.png)
(三)JS三大组成部分
- ECMAScript(最新是ES6):js基础语法核心知识
![](https://i-blog.csdnimg.cn/blog_migrate/d15fe7630282b6a25e98ca970798deb3.png)
- DOM(Document Object Model):文档对象模型
操作文档。比如对页面元素进行移动、大小、添加删除等操作
- BOM(Browser Object Model):浏览器对象模型
操作浏览器。比如页面弹窗,检测窗口宽度,存储数据到浏览器等
![](https://i-blog.csdnimg.cn/blog_migrate/1e544117b001393ad2def994f142abb0.png)
(四)JS三种写法
0.事件三要素(前置知识)
- 事件源:表示事件发生的场所(元素)
- 事件类型:是click点击,hover悬浮还是之类的事件
- 事件处理程序(监听器):当事件发生时要执行的代码-一般为函数,对应执行里面的函数体操作
1.行内写法
HTML <button οnclick="alert('js行内写法')"行内写法</button> |
分析: <!-- button是一个元素 事件源 --> <!-- click 是点击的意思 表示点击事件 --> <!-- on是前缀 onclick表示给button按钮绑定了一个点击事件 --> <!-- alert('hello js') 表示事件处理程序,也叫监听器,作用在浏览器中弹出一个警示框 --> |
2.内部写法(常用)
- 推荐将JavaScript代码和编写位置放在body子元素的最后一行;
HTML <button οnclick="fn()">内部写法</button> <script> function fn(){ // alert表示一个警示框 会阻塞代码向下执行 // 只有点击了确定,alert才会执行完毕 alert('js内部写法'); } </script> |
3.外部写法
JavaScript //out.js文件 function fn1(){ alert('js外部写法'); } |
HTML <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入外部的js代码 --> <script src="./out.js"></script> </head>
<body> <button οnclick="fn1()">外部写法</button> </body> |
4.乱七八糟写法(微乎其微出现,but可了解下)
JavaScript //out.js文件 alert('js乱七八糟写法外部文件部分'); |
HTML <body> <script src="./out.js"> //无法执行 alert('js乱七八糟写法内部文件部分'); </script> </body> |
二 JS注释+输出/输入语句
(一)JS注释
1.单行注释 ctrl+/
JavaScript // 1.单行注释 // console.log("hhh") |
2.多行注释 alt+shift+a
JavaScript /* console.log("hhh") console.log("hhh") */ |
ps:js多行注释内可以嵌套单行注释,反之...hh好像也可以
![](https://i-blog.csdnimg.cn/blog_migrate/c874fc7920a40501ce5f15a66d8d76aa.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a53f8e623ce218b73e0e8115b856d43b.png)
(二)JS输出/输入语句
![](https://i-blog.csdnimg.cn/blog_migrate/03f80deb43d88343ed6c1cbdc89c1bfe.png)
1.JS输出语句
- 弹出对话框-alert()警告
-confirm()确认
JavaScript // 输出语句1: // 弹出窗口 警示框 掌握! alert('警告一下') // 询问框 了解 confirm('可以吗') |
- 控制台-console.log()普通输出
-console.warn()警告输出
-console.error()错误输出
JavaScript // 输出语句2: // 输出语句 浏览器控制台打印输出语句 掌握! console.log('输出语句'); // 变量和纯数字不需要加引号 console.log(111);
console.warn('警告语句') console.error('错误语句') |
- 直接输出至页面-document.write(),里面可以写标签元素
JavaScript // 输出语句3: // 在页面上输出 document.write('我是输出语句') document.write(`<h1>我是输出语句</h1>`) |
2.JS输入语句
弹出对话框-prompt()输入对话框
JavaScript // prompt 信息输入框 掌握! prompt('请问今年多大?') |
3.注意引号
JavaScript // 注意: 使用引号的方式'' "" ``都可以 document.write('我是"输出"语句')//(外单内双) document.write("我是'输出'语句")//(外双内单) // 不能以下写法 // document.write('我是'输出'语句') // document.write("我是"输出"语句") |
三 JS变量
(一)认识变量
什么是变量?为什么使用变量?
- <!-- 所谓的变量 内存空间中的数据(变量值)+内存空间对应的别名(变量名) -->
- <!-- 对变量名的操作 实际上就是对内存空间中的数据的操作 -->
JavaScript // var 声明变量的关键字 // age 变量名 // = 赋值运算符 将右边的值赋值给了左边的变量名 (== ===) // 18 变量值 // 变量的赋值过程是从右往左的
var age = '18'; age = '19'; //重新赋值
// 一个数据值为100, 在内存空间中开辟一个空间将100放入,将这片内存空间命名为num var num = 100;
var score = 100; score = 80; //重新赋值 console.log(score); |
(二)变量命名
- 首字符不能是数字 只能是字母 或 _ 或 $
- 其他字符可以是字母、_、$或数字
- 不能使用关键字和保留字符,参考
- 多个单词
- 下划线
- 大驼峰 从第一个单词开始第一个单词的首字母都大写
- 小驼峰 跳过第一个单词从第二个开始每一个单词首字母大写
![](https://i-blog.csdnimg.cn/blog_migrate/954dd2e79b19bb2eee68a299b5e66dbd.png)
- 严格区分大小写
- 与标签里class和id属性名的命名比,不能用-
JavaScript //错误: // var 1num = 13; // var 1num = 13; //正确: var _num = 13; var $num = 13; |
(三)变量与内存指向关系
情况1:
![](https://i-blog.csdnimg.cn/blog_migrate/112402f79b3061418cdef05c37088987.png)
情况2:
![](https://i-blog.csdnimg.cn/blog_migrate/6797dff7b4acda95cacd144755476338.png)
在计算机的内存中创建一块区域保存字符串”malu",name变量名则指向这块区域。然后又再内存中创建了一块域保存字符串”wangcai",name变量名则指向”wangcai“所对应的空间,不再指向"malu"所对应的空间。"malu"所对应的内存空间,无人指向的数据会被标记为垃圾,由解释器自动化回收。
情况3:
![](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=file%3A%2F%2F%2FC%3A%5CUsers%5CDELL%5CAppData%5CLocal%5CTemp%5Cksohtml17620%5Cwps10.jpg&pos_id=Xei7fVq2)
在计算机的内存中创建一块区域保存字符串”malu",name变量名则指向这块区域。new_name变量名指向name变量,因为被指向的是变量名,所以自动会转指向到name变量代表的内存区域。
情况四:
![](https://i-blog.csdnimg.cn/blog_migrate/9f052ca4cc14666a18c5d212733748cb.png)
情况五:
![](https://i-blog.csdnimg.cn/blog_migrate/1341f47b9d979804fecd3d74b5703456.png)
(四)变量提升
1.声明和赋值在调用之后-变量提升
变量提升:just声明提升而非赋值提升
<script> // 变量提升:just声明提升而非赋值提升 // 使用var关键字声明的变量会被提升(提升到了代码段的最前面) console.log(num); //undefined(空) var num = 10; console.log(num); </script> <script> //与前一个等价,提升后(只提升声明 不提升赋值) var num; //声明 console.log(num); //undefined 只声明 未赋值 num = 10; //赋值 console.log(num); //10 num 被赋值了 </script> |
2.未声明未赋值-报错
JavaScript // 未声明未赋值,直接报错 // alert(num2); |
3.未声明直接赋值(不建议)
JavaScript <script> // 不使用var关键字 声明 // 可以这样写但是不建议,不使用var声明的关键字,这个变量是被挂载在window对象 userName = "张三" // 未声明直接赋值会放到window里,成为它的一个属性 console.log(window); console.log(window.userName); </script> |
另.声明多个变量两种方式
JavaScript // 使用一个var声明多个变量 var num, age, sex, username; //声明 //赋值 num = 1; age = 18; sex = '男'
// 等同于 var num = 1; var age = 18; var sex = '男'; |
四 JS的数据类型
(一)认识数据类型
1.为什么需要数据类型?
- 给不同的数据分配不同的内存空间,数据类型就是为了让我们合理地使用内存空间
软件运行流程
- 打开某个程序时,先从硬盘中把程序的代码加载到内存中
- CPU执行内存中的代码
![](https://i-blog.csdnimg.cn/blog_migrate/0935494f2e1c14507319091a299e84d8.png)
使用编译语言是去开发软件的,软件上面的很多的数据,这些数据都是放在内存的。内存空间是有限,绝大部分的编程语言为了合理地使用内存空间,都会把使用到的数据进行分类,分成不同的类型,目的就是为了更加合理的使用内存空间。
typeof介绍与typoef的返回值
- "object"表示值为对象(而不是函数)或 null;
2.数据类型的分类
1.Number-数字 正/负数+整数或浮点数, 特殊数字(infinity,-infinity,Number.MAX_VALUE,Number.MIN_VALUE), NAN(字符串拼接数字时,eg:var num=1+'哈哈') 2.String-字符串 'xxx' + 'xxx' 或 xxx ${} xxx拼接 3.Boolean-true/false 4.undefined-只定义未赋值变量的的默认值 5.null-可以初始化对象,eg:var num=null; 6.Object-var xxx{xxx:xxx,xxx:xxx}; 7.BigInt 8.Symbol |
其中有5个基本数据类型:
![](https://i-blog.csdnimg.cn/blog_migrate/c70d2cb322bc5ede73e1adc55ee76663.png)
Number String Boolean undefined null BigInt Symbol
Object-对象 Array-数组 Function-函数
JavaScript <script> // typeof 检测数据类型 var num=1; console.log(num,typeof num);//number var text="文本"; console.log(text,typeof text);//string(字符串) var bool=false; console.log(bool,typeof bool);//boolean(布尔) </script> |
3.数据转换的应用场景
- 用户输入处理
用户输入字符串,我们可能需要将其转换为number类型或其他需要的类型进行计算和验证
- 数据比较
在进行比较操作时,js会自动的进行类型转换
- 数据展示
在将数据展示给用户时,我们可能需要将数据转换为字符串类型以便于显示或者格式化
...
(二)number数据类型
1.number范围
正数负数小数整数,特殊数,NaN(Not a Number)
在js中,无论是小数还是整数,统一是number类型
NaN虽然意思是"不是一个数字",但实际上还是number类型哦~ |
number有不同进制的表示法
![](https://i-blog.csdnimg.cn/blog_migrate/1610593c71f1ed73d0b3fdc90644b865.png)
数据的表示范围
![](https://i-blog.csdnimg.cn/blog_migrate/acdfc3d7db14b5801f9e0209517c8b60.png)
2.相关方法
是NaN结果是true,否则结果是false
![](https://i-blog.csdnimg.cn/blog_migrate/83183c1631e0bc71e3b03090997832fd.png)
3.代码实操
JavaScript // 这几个不太熟
//js中运行的结果是Infinity,java中直接会报错 var num3 = 1 / 0; console.log(num3, typeof num3);//Infinity 'number'
// 特殊数值 NaN (not a number) var num4 = "hhh" * 2; console.log(num4);//NaN console.log(typeof num4);//number
// isNaN() 来判断一个数是否是NaN 两个结果true/false console.log(isNaN(num4));//true console.log(isNaN(num3));//false
// 特殊数值 最大值和最小值 var min = Number.MIN_VALUE; var max = Number.MAX_VALUE; console.log(min);//5e-324 5*10的负324次方 console.log(max);//1.7976931348623157e+308 1.79*10308次方
var width = 20; var height = 10; var age = 18; var score = 88.8; console.log(typeof score);//number
// 数字可以进行运算,加减乘除都可 var dblScore = 2 + score;//2+88.8 console.log(dblScore); //90.8
var size = width * height;//20*10 console.log(size);//200
// 特殊数值 无穷大 无穷小 var num1 = Infinity; console.log(num1);//Infinity console.log(typeof num1);//number
var num2 = -Infinity; console.log(num2);//-Infinity console.log(typeof num2);//number |
(三)string数据类型
1.在js中,可以使用"" '' ``引字符
JavaScript // 单引号 var str1 = 'haha'; // 双引号 var str2 = "hehe"; // 反引号 var str3 = `heihei`; |
2.拼接字符串(两种方式)
- Es6 模板字符串(better) ` ${}`
JavaScript var str7 = `hello ${username} howareyou` console.log(str7); |
- 拼接字符串 +
JavaScript var str4 = str1 + str2; console.log(str4);
// var str5 = str1 + str2 + str3; var str5 = str4 + str3;
var username = "malu" // hello malu howareyou var str6 = "hello" + username + "how are you" console.log(str6); |
3. 其他相关tips/方法
![](https://i-blog.csdnimg.cn/blog_migrate/f8d3462fa34a7c1e2f4366ff122178e1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c81ab276d7c4b843f12e6d74c7403d92.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0b0f87edd428ceddcfbdcc72484e779a.png)
(四)boolean数据类型(布尔类型)
对应值有两个:true、false
JavaScript // 关系运算符,最终也是布尔类型 console.log(2>1);//true console.log(2==1);//false |
JavaScript // ! 非,取反 console.log(!2>1);//false console.log(2!=1);//true |
(五)null和undefined数据类型
1.null数据类型
只有一个值null 空
null类型通常用来表示一个对象为空,给一个对象初始化的时候,可以赋值为null
JavaScript // 给一个已经声明的变量赋值为null进行初始化 var user = null; user = { name: '小花', age: 18 } |
2.null和undefined 有什么区别?
undefined通常只用作变量声明未赋值时的默认值 null则是为变量声明未赋值时赋值为空 |
JavaScript var uname; console.log(uname);//und uname=null; console.log(uname);//null // 而undefined一般不这样用,因为本就是默认值 // 如var user2=undefined; |
(六)object数据类型
1.拆解分析
// object是一个对象, 也可以称之为容器 //object数据类型是复杂类型,前面讲的都是基本数据类型,往往可以表示一组数据,是其他数据的一个集合 // {} var obj = { // name是属性名 小花是属性值 // 属性名-key(键) 属性值-value(值) // 键值对 key:value name: '小花', age: 18, love: true } console.log(obj, typeof obj); // 访问对象里面的某一个属性 // .叫属性访问运算符 只有对象可以打点 console.log(obj.name); |
2.对象模板
JavaScript // 1.初始化对象 var obj2 = null; // 2.给对象赋值 obj2 = { key: value, key: value, key: value } // 或者直接var obj={key:value,key:value}一步到位 |
(七)其他数据类型->string
总结: 1)强制转化 a.toString()-这个只可转换Number/Boolean类型 String(a) 2)隐式转化 + 法一 String()构造函数 强制转化 可转Number、Boolean、null、undefined、字面量 法二 使用xx.toString()方法 强制转化 just可转换Number、Boolean类型 法三 + 隐式转换 范围都可以,可转Number、Boolean、null、undefined、字面量 |
(八)其他数据类型->number
1.string类型(含空串)->number
// string类型(含空串)->number总结: // 将字符串(包含空串)转为number类型 // 1.Number() 强制转化 // 2.parseInt() parseFloat() // 3.+ - 隐式转化 特殊: "123px" 使用Number() + - 被转为NaN "123px " 使用parseInt() parseFloat() 被转为123 能转则转 "px123px" --转为NaN
- 如果是一个空串,空串是"",转化后, "" => 0
|
2.其他类型->number
其他类型->number总结: 1.通过Number() 2.+ - 上两个方法其他类型转换时结果一样 true - 1 false - 0 null - 0 undefined - NaN 3.parseInt() parseFloat() 其他数据类型,全都NaN |
(九)其他数据类型->boolean
哪些数据转成布尔类型会变成false?
- 空串,0,-0,NaN,und,null 会转化成false,其它的都会转化成true
|
五 运算符
(一)概念及分类
// 运算符:具有某些功能的符号 + - * / % // 操作数:1 + 1 运算符号的两侧的数据叫操作数 // 表达式:任何有值的内容都叫表达式 // 要求:运算的时候,左右两侧的数据必须要保持一致,如果不一致,会发生隐式转化
// 算数运算符 // 递增递减运算符 // 关系运算符 // 逻辑运算符 // 赋值运算符
// 一元运算符 单目运算符 +1 // 二元元素符 双目运算符 1+1 // 三元运算符 三目运算符 三元表达式 xx?xx:xx |
(二)算术运算符
1.概念
+ - * / % 数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。 |
![](https://i-blog.csdnimg.cn/blog_migrate/afb497f040de2e5366865e0efdf932f4.png)
2.某些特殊情况
JavaScript // +如果碰到字符串,那么就是字符串拼接 // + 会把number类型隐式转换为String类型 console.log(666 + "123");//666123 // 否则就是相加 number + number console.log(1 - "666");//-665 -没有隐式转换为字符串的功能 console.log(1 * "666");//666 "666"被隐式转为number类型 //和true(1) false(0) var d = 100 var e = true; var f = d + e; //100+1=101 console.log(1 / false);Infinity //和null(0) console.log(666 + null);//666+0 = 666 console.log(1 / null);//Infinity //取余模为0时有点特殊,结果为NaN console.log(3 % 0);//NaN //undefined(NaN) var und; console.log(666 + und);//NaN // NaN和任何数据进行运算,结果都是NaN console.log(666 + NaN); //NaN console.log(1 * "文字");//NaN |
(三)赋值运算符
概念:将=右边的数据,存储到=左边的变量名对应的内存空间中。 // 简单的赋值运算符 = // 复杂的赋值运算符 += -= *= /= %= |
![](https://i-blog.csdnimg.cn/blog_migrate/15c4b253a3c880d05ee55c2da17ec59d.png)
JavaScript num1 += 120; //num1=num1+120 //其他类似 |
赋值运算符有副作用,它的整体也有一个值,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/16187e9b69f08767680d28b58e199d1b.png)
(四)三元运算符
JavaScript var res = true ? "hello" : "world" console.log(res);//hello var res2 = false ? "hello" : "world" console.log(res2);//world var a = 1; var b = 2; console.log((a > b) ? "hello" : "world");//world |
(五)关系(比较)运算符
1.概念及相关tips
比较运算符(关系运算符)是两个数据进行比较时所使用的运算符 比较运算后,会返回一个布尔值(true / false)作为比较运算的结果 // == === != !== > < >= <= // 最终返回值是 false true
- 比较时,如果不是数字,会隐式转换为number类型
// false -- 0 true -- 1 // undefined -- NaN // null -- 0 |
![](https://i-blog.csdnimg.cn/blog_migrate/ddcf3584cc5b639928c8746d2f398434.png)
2.=VS==VS===
// 赋值 = // 相等 == // 全等 ===(先判断类型是否一致,再比较大小) // ! 取反 // != 不相等 // !== 不全等 |
JavaScript // 任何和NaN作比较全部都是false console.log(NaN === NaN);//f
// 不会判断类型,在比较前已经发生了隐式转换 转换成number类型 console.log(123 == "123");//t
// === 全等 会先比较类型,如果类型不一致,直接返回false console.log(123 === "123"); //f
// !=不等 console.log(123 != "456");//t console.log(123 !== "456");//t console.log(123 !== 456);//t |
3.某些特殊情况
JavaScript // 美国的字符编码集 ASSIC 了解 console.log(1 > "a"); //f 97 1>97 console.log("b" > "a"); //t a=97 b=98 console.log("ab" > "ac"); //f a=97 b=98 c=99 console.log(1 > true); //f console.log(1 > false); //t console.log(1 > null); //t console.log(1 > "123"); //f "123"转换成number是123 console.log(1 > NaN); //f console.log(1 > undefined);//f und隐式转为NaN |
(六)逻辑运算符及逻辑中断
1.逻辑运算符
// 概念:将多个表达式或者值放到一起来获取到一个最终的结果 // && 与 一假即假 // || 或 一真即真 // ! 非 取反 |
![](https://i-blog.csdnimg.cn/blog_migrate/e90a8d170b34a949205952c4a699621c.png)
2.逻辑中断
JavaScript var i = 100; // ||或 从前往后,哪个为真即输出该值 //这里的中断是第一个值为真时不继续向后执行 console.log(101 || i++);//101 console.log(i);//100
var i = 100; // &&且 判断到最后,皆为真时输出最后一个值 //这里的中断是第一个值为假时不继续向后执行 console.log(false && i++);//100 console.log(i);//100 |
(七)逻递增递减运算符
// ++ -- // ++在前整体是一个新值,++在后整体是一个旧值 var b = 1; console.log(b);//1 console.log(b++);//1 console.log(b);//2 console.log(++b);//3 console.log(b);//3 |
(八)运算符的优先级
运算符的优先级有很多,常见的没几个,推荐你记住3个即可:
直接上代码:
![](https://i-blog.csdnimg.cn/blog_migrate/76971b0302a2d8be11ec626358f90efe.png)
其它优先级:参考
六 分支语句
(一)相关概念
![](https://i-blog.csdnimg.cn/blog_migrate/50ae67bb270a28155ee126830d091e86.png)
三大流程控制: // 顺序结构:从上向下,顺序执行代码 // 分支结构:根据条件判断,决定执行代码的哪个分支 // 循环结构: 让特定的代码 重复执行 |
分支结构 第一种
第二种 三元表达式 第三种 switch语句(了解) 注意: 1.if语句中的条件,不管是什么表达式,都会转化成布尔类型 2.if语句后面的{}可以不写,如果不写,只有if后面第1条语句,相当于是{}中的 3.if语句可以嵌套 |
(二)代码
JavaScript //第一种情况:单分支if语句 if(条件){ 满足条件则执行此代码 } //第二种情况:双分支if语句法 if(条件){ 满足条件执行的代码 }else{ 不满足上面条件要执行的代码 } //第三种情况:多分支if语句法 if(条件1){ 满足条件执行的代码 }else if(条件2){ 满足条件执行的代码 }else if(条件3){ 满足条件执行的代码 }else{ 以上都不满足执行代码块 } |
七 循环语句
(一)概念
- 循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程。
- 变量起始值
- 终止条件(缺终止条件,循环会一直执行->死循环)
- 变量变化量(用自增/自减)
|
(二)while和do while循环
//循环体 }
//循环体 }while(条件) 区别: while:不满足条件一次循环体也不执行 do while:至少执行一次循环体 |
(三)for循环
for(变量起始值,循环条件;变化值){ 循环体 } |
一个for嵌套for例子(倒等腰三角形):
JavaScript // * * * * // * * * // * * // *
for (var i = 1; i <= 4; i++) { // 打印空格 for (var j = 1; j < i; j++) { document.write(' ') }
// 打印* for (var j = 4; j >= i; j--) { document.write("* ") } // 换行 document.write('<br>') } |
(三)循环中断
JavaScript // 跑5圈,第二圈没跑,但是后面跑了 var dinstance = 0; for (var i = 1; i <= 5; i++) { if (i == 2) { // 结束本次循环,继续下次循环 continue; } dinstance += 500 } console.log(dinstance);//2000
// 跑5圈,第二圈没跑,后面都不跑了 var dinstance = 0; for (var i = 1; i <= 5; i++) { if (i == 2) { // 跳出整个循环 break; } dinstance += 500 } console.log(dinstance);//2000 |
(四)一些练习
1.百元买百鸡
JavaScript // 百钱买百鸡(鸡翁一,值钱五;鸡母一,值钱三;鸡雏三,值钱一;百钱买百鸡,则翁、母、雏各几何?) // 100元 公鸡/5元(a) 母鸡/3元(b) 小鸡*3/ 1元(c) // 100元 公鸡 100/5==20 // 100元 母鸡 100/3==33 // 100元 小鸡 100*3=300 for (var a = 0; a <= 20; a++) { // 考虑:在买0只公鸡的情况下,要么多少只母鸡,多少只小鸡 // 考虑:在买1只公鸡的情况下,要么多少只母鸡,多少只小鸡 // ... // 考虑:在买20只公鸡的情况下,要么多少只母鸡,多少只小鸡 for (var b = 0; b < 34; b++) { // 考虑:在买0只母鸡的情况下,要么多少只小鸡 // 考虑:在买1只母鸡的情况下,要么多少只小鸡 // ... // 考虑:在买33只母鸡的情况下,要么多少只小鸡 for (var c = 0; c <= 300; c++) { if ((a + b + c) === 100 && (5 * a + 3 * b + c / 3) == 100) { console.log("公鸡:" + a + "母鸡:" + b + "小鸡:" + c) } } } } |
2.斐波那契数列
JavaScript // 斐波那契数列,输入斐波那契数列的个数,打印斐波那契数列 // 如输入了10,求斐波那契数列前10个数字 // 10 var num = +prompt('请输入斐波那契数列的个数(大于2)'); var x = 1; var y = 1; var z = 2; //表示两个数字的相加和 for (var i = 1; i <= num; i++) { if (i == 1 || i == 2) { console.log(1); } else { z = x + y; x = y; y = z; console.log(z); } } |
八 函数
(一)初识函数
函数,可以当做是一大堆功能代码的集合。就是某段代码的封装,这段代码帮助我们完成某一个功能。默认情况下,JS引擎也帮我提供了一些函数,我们也可以编写自己的函数。
什么时候会使用到函数:
以前我们变成是按照业务逻辑从上到下逐步完成,称为:面向过程编程;现在学了函数之后,利用函数编程称为:函数式编程。
函数声明和函数表达式:
- 使用function关键字来声明一个函数,也可以把一个函数赋值给一个变量,我们叫函数表达式
直接上代码:
![](https://i-blog.csdnimg.cn/blog_migrate/da215ff6e4f429ae6e49541e0ebbf269.png)
函数声明的注意细节:
- 函数定义完后里面的代码是不会执行的,函数必须调用才会执行
- 函数要尽量做到见名知意,学习时,使用foo,bar,fn,gn....
- 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum
函数调用:
- 可以是自己写的函数,也可以是系统中内置的,也可以是第三方的
直接上代码:
![](https://i-blog.csdnimg.cn/blog_migrate/53c8b009597e4cd2a992698b3a9978df.png)
(二)作用域(局部变量和全局变量)
局部变量和全局变量:
- 局部变量就是只能在一定范围内使用,一般在函数内部的变量都是局部变量
全局作用域和局部作用域:
|
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/fc2cfb4e721d60b3f6901a892b206036.png)
(三)函数的参数(形参和实参)
在定义函数时,如果在括号中添加 变量 ,我们称它为函数的形式参数
实际调用函数时,如果在括号中有数值传入,我们称它为函数的实际参数
![](https://i-blog.csdnimg.cn/blog_migrate/c94f85c3c7cc66987d7dba6a9081f25c.png)
(四)函数的返回值
函数本质也是一个数据,数据类型是function,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/4dac5d29d345dd7b6b48034f1507df63.png)
So调用一个函数,函数是可以给我们返回一个数据的
![](https://i-blog.csdnimg.cn/blog_migrate/673c9c50736ea553f40c20959d7b7c42.png)
- 如果函数没有写return,它默认返回und,如下:
![](https://i-blog.csdnimg.cn/blog_migrate/300144337508540d29c7fb8fa2c5faef.png)
九 数组
(一)数组介绍
前面写的多个数据类型,有字符串,数字,布尔,und,null,这些数据类型叫基本数据类型。还有复杂数据类型,复杂数据类型有数组,有函数,有对象。数据是一个容器,是一个有序的集合,它里面可以放一堆的数据。
![](https://i-blog.csdnimg.cn/blog_migrate/eed2c9cd3ad78dcf6feecce0f9cc1222.png)
数组叫array,数组中的每一个数据,叫元素(elements);每一个元素都有一个索引,也叫下标(index),索引是从0开始的;数组中元素的个数,叫数组的长度(length)。
数组中放的数据的类型可以不一样,可以放任意的数据类型。
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/048cac1c25240373abf06185321beae0.png)
(二)操作数组
1.创建数组
JavaScript var arr2 = ["a", "b", true, 123, 600, undefined, null]; |
JavaScript var arr3 = new Array("hello", "world", 111, null); |
当new Array(n),参数n是一个数字时,创建为长度为数字大小的数组。
2.数组元素的CRUD(原数组被改变)
![](https://i-blog.csdnimg.cn/blog_migrate/38e868a9bd29559d5bb84ae3913ee001.png)
a.添加元素
- unshift 头部——返回值为新增元素后的数组长度
代码演示:
![](https://i-blog.csdnimg.cn/blog_migrate/a04b1daada309ecec06587e2768ab8df.png)
b.删除元素
代码演示:
![](https://i-blog.csdnimg.cn/blog_migrate/19470f31f11df571c3e2ec927132212c.png)
c.修改元素
![](https://i-blog.csdnimg.cn/blog_migrate/0bf144671076487ea846e78f3c40df2f.png)
d.查找元素
![](https://i-blog.csdnimg.cn/blog_migrate/b47d760149963e955820c3860402262a.png)
3.数组的查找
// indexOf lastIndexOf查找数组的某个元素的索引 // includes 查找数组是否包括某个元素 // find(function(){}) 查找元素 // findIndex(function(){}) 查找元素对应的索引 //返回索引不存在时,一般返回-1 // 元素不存在,一般返回undefined ps:includes()是false |
a.indexOf lastIndexOf 查找数组的某个元素的索引(方向不同)
JavaScript var arr1 = ["z3", "l4", "w5", "z6", "t7", "l4"]; // 1.indexOf 从左往右查找数组的某个元素的索引 console.log(arr1.indexOf('l4'));//1 //如果元素不在数组中,返回值为-1 console.log(arr1.indexOf("xxx"));//-1 // 2.lastIndexOf 从右往左查找数组的某个元素的索引 console.log(arr1.lastIndexOf('l4'));//5 |
b.includes 查找数组是否包括某个元素
JavaScript // 3.includes 查找数组是否包括某个元素 返回一个布尔值true/false console.log(arr1.includes('xxx'));//false console.log(arr1.includes('z3'));//true |
c.find 查找元素
JavaScript // 4.find 查找元素 // 函数的参数是一个函数,叫高阶函数 /* 语法 arr.find(function(item,index,arr){
}) */ //参数: // item 表示数组中的每一个元素 // index 表示每一个元素对应的索引 // arr 表示此数组 var arr2 = ["z3", "l4", "w5", "z6", "t7", "l4"]; // find 自带遍历功能 //return item == "z3";元素在其中 var res1 = arr2.find(function (item, index, arr) { console.log(item); console.log(index); console.log(arr); return item == "w5"; }); //return item == "xxx";元素不在其中 var res2 = arr2.find(function (item, index, arr) { return item == "xxx"; }); console.log(res1);//w5 console.log(res2);//undefined |
d.findIndex 查找元素对应的索引
JavaScript // 5.findIndex 查找元素对应的索引 与find语法类似 // 语法:arr.findIndex(function(item,index,arr){
// }) var res3 = arr2.findIndex(function (item, index, arr) { return item == "z3"; }); //return item == "xxx";元素不在其中 var res4 = arr2.findIndex(function (item, index, arr) { return item == "xxx"; }); console.log(res3);//0 console.log(res4);//-1 |
4.数组的遍历(及对象的遍历)
a利用普通的for循环进行遍历,如下:
JavaScript for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } |
b使用for (var index in arr)进行遍历,如下:
JavaScript for (var index in arr) { // index -- 索引 console.log(arr[index]); |
c使用for (var item of arr)进行遍历,如下:
JavaScript for (var item of arr) { // item -- 每一项 console.log(item); } |
d使用forEach (function(){})进行遍历,如下:
JavaScript arr.forEach(function (item) { // console.log(item); // 让数组中的每个元素都执行一次对应的方法 console.log(item + "111"); }); |
e使用=>进行遍历
PS:对象的遍历for (var key of obj)
只能用for in遍历的是对象的键值,再通过键来获取对应的值
JavaScript var obj = { // key:value; name: "zhangsan", age: 18, height: 180 }
// for in 循环遍历的是对象的键值,再通过键来获取对应的值 for (var key in obj) { console.log(key); console.log(obj[key]); }
// 遍历对象不能使用for of for (var item of obj) { console.log(item); //obj is not iterable } |
PS:字符串的遍历for (var item of str)
JavaScript var str1 = "hello"; // for of for (var item of str1) { console.log(item); } |
5.数组的映射、过滤和累加
map 映射,对数组的每一个元素进行加工,返回一个新数组 filter 过滤 会创建一个新数组, 不会改变原数组 reduce 累加 一个和 |
a.map: 映射——对数组的每一个元素进行加工
JavaScript // 会返回一个新数组 // 语法 arr.map(function(){
// }) var res1 = arr.map(function (item) { return item + "111"; }); console.log(arr);// ['z3', 'l4', 'w5', 'z6', 't7', 'l4'] console.log(res1);// ['z3111', 'l4111', 'w5111', 'z6111', 't7111', 'l4111'] |
b.filter:过滤
JavaScript // 会创建一个新数组,不会改变原数组 // 语法 arr.filter(function(item){
// })
var arr2 = [2, 3, 4, 5, 6, 7, 234, 34, 34, 2]; var res2 = arr2.filter(function (item) { return item >= 10; }); console.log(arr2);//[2, 3, 4, 5, 6, 7, 234, 34, 34, 2] console.log(res2);//[234, 34, 34] |
c.reduce:累加
JavaScript var arr3 = [1, 2, 3, 4, 5, 6]; var res3 = arr3.reduce(function (prev, next) { return prev + next; // 第一次:prev 100 next 1 // 第二次:prev 101 next 2 // 第三次:prev 103 next 3 // 第四次:prev 106 next 4 // 第五次:prev 110 next 5 // 第六次:prev 115 next 6 // 结果:121 }, 100);//100是prev的初始值 console.log(res3);//121 |
6.数组的排序及翻转(原数组被改变)
a.sort 排序——ASCII/降序/升序
JavaScript // 1.sort 排序——根据ASCII比较,升序 // 语法:arr.sort() var arr = [2, 45, 6, 7, 8, 34, 5, 35]; console.log(arr.sort());//从最高位单位单位比较而非整体数值 console.log(arr);//原数组被改变 var arr2 = ["a", "d", "c", "b", "e"]; console.log(arr2.sort()); |
JavaScript // 2.sort 从小到大 升序return a - b; // 语法:arr.sort(function(a,b){ // return a-b; // }) // 如果(a, b)=> a - b返回小于0的值,那么a将被排列到b之前 // 如果(a, b)=> a - b返回0,那么a和b的顺序不变 // 如果(a, b)=> a - b返回大于0的值,那么b将被排列到a之前 arr.sort(function (a, b) { return a - b; }); console.log(arr); |
JavaScript // 3.sort 从大到小 降序return b-a; // 语法:arr.sort(function(a,b){ // return b-a; // }) arr.sort(function (a, b) { return b - a; }); console.log(arr); |
b.reverse 数组翻转
JavaScript // 4.reverse 数组翻转 // 语法:arr.reverse() console.log(arr.reverse()); console.log(arr);//原数组被改变 |
7.数组的合并与截取
- concat() 合并数组 把多个数组合并成一个数组
|
a.slice() 截取数组元素
JavaScript // 1.slice() 截取数组元素的新数组,不改变原数组 var arr1 = [0, 1, 2, 3, 4, 5]; // slice(start,end) 包前不包后 var res = arr1.slice(1, 3) console.log(arr1.slice(1, 3));//[1,2] // slice(start) 从start开始到最后 console.log(arr1.slice(1));//[1,2,3,4,5] // start为负数时 从后-1开始往前数第负数个 console.log(arr1.slice(-1));//[5] // slice() 整个数组 console.log(arr1.slice());//[0,1,2,3,4,5] |
b.concat() 合并数组
JavaScript // 2.concat() 合并数组 var arr2 = ['hh', 'xixi']; var arr3 = [null, true]; // 合并一个数组 console.log(arr1.concat(arr2));//[0, 1, 2, 3, 4, 5, 'hh', 'xixi'] // 合并多个数组 console.log(arr1.concat(arr3,arr2));//[0, 1, 2, 3, 4, 5, null, true, 'hh', 'xixi'] |
(三)数组和字符串之间相互转化
- join 数组.join("拼接符") 把数组转化成字符串
- split 字符串.split("分隔符") 把字符串转化成数组
|
a.join() 把数组转换为字符串
JavaScript // 1.join() 把数组转换为字符串 console.log(arr1.join());//0,1,2,3,4,5 默认分隔符为, //join('-') 参数为分隔符 console.log(arr1.join('-'));//0-1-2-3-4-5 |
b.split() 把字符串转换为数组
JavaScript // 2.split() 把字符串转换为数组 var str='nihao-aaaa-bbb-ccc'; console.log(str.split());//['nihao-aaaa-bbb-ccc'] //split('-') 参数为分隔符 console.log(str.split('-'));// ['nihao', 'aaaa', 'bbb', 'ccc'] |
十 字符串
和数组是不一样的 ,字符串不可以被改变字符,不可以重新赋值 var str1 = "hello"; str1[4] = "O" console.log(str1);//hello 未改变 |
(一)创建字符串
JavaScript // 1)通过字面量的形式来创建一个字符串 var str1 = "hello"; console.log(str1);
// 获取字符串的长度 length 长度 console.log(str1.length);//5
// 2)通过 new String()来创建一个字符串 var str2 = new String("world") console.log(str2); console.log(str2.length); |
(二)遍历+访问字符串字符
a.遍历字符串字符
JavaScript // for循环 for (var i = 0; i < str1.length; i++) { console.log(str1[i]); }
// for of for (var item of str1) { console.log(item); } |
b.访问字符串字符
JavaScript // 使用方式1 :通过字符串的索引 str[0] var str = "hello" console.log(str[1]);//e console.log(str[4]);//o console.log(str[6]);//und
// 使用方式2 通过str.charAt(0) console.log(str.charAt(0));//h console.log(str.charAt(4));//o console.log(str.charAt(6));//空串(空字符串)
// 区别:如果通过索引去访问一个不存在的元素 |
(三)操作字符串
- indexOf() 从长串中找到子串 返回值是子串的首字母的索引
- includes 包含 长串中是否包含子串 返回true false
- startsWith 判断是否以什么开头 返回true false
- endsWith 判断是否以什么结尾 返回true false
|
JavaScript // indexOf() 从长串中找到子串 var str1 = "my name is wang"; console.log(str1.indexOf("name"));//3 console.log(str1.indexOf("my"));//0
// 返回值是-1的时候,说明在长传中找不到子串 console.log(str1.indexOf("lee"));//-1
// ---------------------------- // includes 包含 长串中是否包含子串 var str2 = "my name is wang"; console.log(str2.includes("name")); //true console.log(str2.includes("lee")); //false
// ---------------------------- // startsWith 判断是否以什么开头 // endsWith 判断是否以什么结尾 var str3 = "my name is wang"; console.log(str3.startsWith("my"));//true console.log(str3.startsWith("you"));//false console.log(str3.endsWith("wang"));//true console.log(str3.endsWith("lee")); //false // ---------------------------- // toLowerCase 大写转小写 // toUpperCase 小写转大写 var str22 = "HELLO"; var str33 = "hello"; console.log(str22.toLowerCase());//hello console.log(str33.toUpperCase());//HELLO
// ---------------------------- // replace 替换/替代 替换字符串 var str4 = "my name is wang"; var newStr = str4.replace("my", "you") console.log(newStr);
// ---------------------------- // 拼接字符串 + concat var str5 = "hello"; var str6 = "world"; console.log(str5 + str6); console.log(str5.concat(str6));
// ---------------------------- // trim() 掌握! 去掉前后空格 var str7 = " 前端 "; console.log(str7); console.log(str7.trim()); |
(四)数组和字符串之间相互转化
- join 数组.join("拼接符") 把数组转化成字符串
- split 字符串.split("分隔符") 把字符串转化成数组
|
a.join() 把数组转换为字符串
JavaScript // 1.join() 把数组转换为字符串 console.log(arr1.join());//0,1,2,3,4,5 默认分隔符为, //join('-') 参数为分隔符 console.log(arr1.join('-'));//0-1-2-3-4-5 |
b.split() 把字符串转换为数组
JavaScript // 2.split() 把字符串转换为数组 var str='nihao-aaaa-bbb-ccc'; console.log(str.split());//['nihao-aaaa-bbb-ccc'] //split('-') 参数为分隔符 console.log(str.split('-'));// ['nihao', 'aaaa', 'bbb', 'ccc'] |
十一 对象
(一)创建对象
创建方式一:字面量的方式 创建方式二:通过new Object的方式创建 |
JavaScript // 创建方式一:字面量的方式 var obj = { name: "zhangsan", age: 18, isMarry: false, // 如果一个函数位于一个对象中,这个函数叫方法 eat: function () { //eat是一个方法 console.log("eat.."); } } // 创建方式二:通过new的方式创建 var obj1 = new Object(); obj1.name = "wang"; obj1.age = 18; console.log(obj1); |
(二)操作对象(CRUD)
JavaScript var obj = { name: "wang", age: 18, isMarry: false, eat: function () { //eat是一个方法 console.log("eat..."); } }
// 访问属性 查 console.log(obj.name); //联想前面的for in 遍历对象key后obj[key]获取对应value console.log(obj["name"]);
// 添加属性 增 obj.address = "zhengzhou"; console.log(obj);
// 修改属性 改 obj.name = "lee"; console.log(obj);
// 删除属性 delete obj.address;//delete是一个运算符,用来删除某个对象上的属性
// 访问对象身上不存在的属性,得到und console.log(obj); console.log(obj.hobby);//undefined |
(三)Math对象
- Math.random() 生成[0,1)的随机数
|
JavaScript // 圆周率 console.log(Math.PI);
// floor 本意是地板的意思 向下取整 console.log(Math.floor(3.8));//3 console.log(Math.floor(3.2));//3
// ceil 本意是天花板的意思 向上取整 console.log(Math.ceil(3.2));//4 console.log(Math.ceil(3.9));//4
// round 本意是环绕的意思 四舍五入取整 console.log(Math.round(3.5));//4 console.log(Math.round(3.2));//3
// random 本意是随机的意思,生成0-1的随机数 包含0 但是不包含1 console.log(Math.random());
// 随机生成一个5-50的整数 5<=x<=50 var randomNum = Math.round(Math.random() * 45) + 5 console.log(randomNum);
// pow 返回x的y次方 console.log(Math.pow(3, 4));//81 |
(四)Date对象
获取日期时间(年/月 +1/日/时/分/秒/毫秒/周) |
JavaScript // 获取日期和时间 var date = new Date(); console.log(date);//Mon Mar 18 2024 16:09:23 GMT+0800 (中国标准时间) // 获取日期 console.log(date.toDateString()); // 获取时间 console.log(date.toTimeString());
console.log(date.getFullYear());//年 console.log(date.getMonth());//月 +1 console.log(date.getDate());//日 console.log(date.getHours());//时 console.log(date.getMinutes());//分 console.log(date.getSeconds());//秒 console.log(date.getMilliseconds());//毫秒 console.log(date.getDay());//周 |