目录
6.2.比较运算符
简单整理~持续补充~
(一)计算机基础
1.计算机组成:
- 硬件:输入设备 输出设备 CPU 硬盘(永久存储数据) 内存(暂时存储数据)
- 软件:系统软件 应用软件
2.数据存储:
- 计算机内部使用二进制0和1表示数据
3.数据存储单位:
- 位bit < 字节byte < 千字节kb < 兆字节mb ...(1byte = 8bit 1kb = 1024byte)
4.程序运行
- 硬盘->内存条->cpu(cpu执行代码)
注意:之所以要内存的重要原因:cpu运行太快了,如果只从硬盘读取数据,会浪费cpu性能,所以,才使用内存速度更快来保存运行时的数据.
(二)浏览器执行js过程
1.浏览器的组成分为两大部分:渲染引擎和JS引擎
- 渲染引擎:用来解析HTML和CSS,俗称内核,比如chrome浏览器blink
- JS引擎:也称为JS解释器,用来读取网页中的JS代码,对其处理后运行,比如chrome浏览器的V8
注意:浏览器本身并不会执行JS代码,而是通过内置JS引擎(解释器)来执行代码,JS引擎执行代码时逐行解释每一句源码(转为机器语言),然会由计算机去执行,所以JS语言归为脚本语言,会逐行解释执行.
(三)JS组成
ECMAScript DOM BOM
- DOM:文档对象模型,是W3C组织推荐的处理标记语言的标准编程接口,通过DOM提供的接口可以对页面上的各种元素进行操作(大小/位置/颜色等)
- BOM:浏览器对象模型,它提供了独立于内容的/可以与浏览器窗口进行互动的对象结构,通过BOM可以操作浏览器窗口,比如弹出框/控制浏览器跳转/获取分辨率等等
1.JS三种书写位置
<代码演示>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 3.外链式 标签中间不可以打内容 --> <script src="./01.js"></script> <!-- <script> //2. 内嵌式 学习阶段使用 alert('点秋香') </script> --> </head> <body> <!-- 1.行内式（不推荐使用行内式） --> <!-- 点击“唐伯虎” 弹出名字为“点秋香”的警示框 --> <!-- <input type="button" value="唐伯虎" onclick="alert('点秋香')"> --> <!-- alert('') 弹出框 --> </body> </html>2.JS常用的输入输出语句
- alert()；弹出框
- prompt()；输入框
- console.log()；控制台输出
confirm（）；确认、取消
<代码演示>
<script> // 这是一个输入框 prompt("请输入您的姓名"); // 警示框 弹出框 alert("123"); // 确定、取消 confirm("确定不听课么") // console 控制台输出 console.log("我是给程序员看的"); </script>3.JS数据类型
- 简单数据类型:number string boolean underfined null
- 复杂数据类型:object
3.1 number 数字型
number:八进制在数字前面加0;十六进制在数字前面加0x; infinity无穷大; -infinity无穷小
NaN:not a number ==> isNaN()用这个方法判断非数字,返回true/false
<代码演示>
<script> // 1.八进制 0~7 我们程序前面加0 表示八进制 var num1 = 010 ; console.log(num1); var num2 = 012 ; console.log(num2); // 2.十六进制 0~9 a~f #ffffff 前面的数加0x表示十六进制 var num3 = 0x9 ; console.log(num3); var num4 = 0xa; console.log(num4); // 数字型的最大值与最小值 console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE); console.log(Number.MAX_VALUE*2); //无穷大 console.log(-Number.MAX_VALUE*2); //无穷小 // 非数字 NaN console.log("你好"-100); </script>3.2 .string 字符串型
<代码演示>
<script> var str = "你好\n好"; console.log(str); var str = "10";//纯数字型字符串 alert("人生匆匆\n愿我们同享光荣\n愿我们的梦永不落空");//可以双引号套单引号，或者单引号套双引号 //如果两个双引号套用，就要用到转义字符 </script> <!-- 转义字符\ 1. \n 换行 2. \\ 斜杠 3. \’ 单引号 4. \" 双引号 5. \r 回车符 -->3.3 boolean 布尔型
如果一个布尔类型的值参与运算 true当1看 false当0看
true false可以参与数字相加减 true=1;false=0
<代码演示>
<script> //如果一个布尔类型的值参与运算 true当1看 false当0看 var flag = true; // 1 var flag1 = false; // 0 console.log(flag+1);//2 1+1 console.log(flag1+1);//1 0+1 </script>3.4.undefined
- 声明变量未赋值
- 和string相加:undefinedstring
- 和number相加:NaN
<代码演示>
<script> // 如果一个变量声明未赋值 返回undefined 未定义数据类型 var variable=undefined; console.log(variable+"hello");// 控制台输出为 undefinedhello console.log(variable+1);//NaN </script>3.5.null
- 和string相加: nullstring
- 和number相加:number
<代码演示>
<script> //null 空值 var space = null ; console.log(space+"hh"); console.log(space+1);//1 </script>4.获取变量数据类型
4.1.转换为字符串
(1)变量.toString（）；
(2)String(变量)
(3)隐式转换:num + "字符串"
<代码演示>
<script> //1.把数字型转换成字符串型 【变量.toString（）；】 var num = 10; var str = num.toString(); console.log(typeof str); //2. 【String(变量)】 var str1= String(num); console.log(typeof str1); //3.利用拼接字符串形式 隐式转化 var str2 = num + ""; console.log(typeof str2); </script>4.2.转换为数组型
(1)parseInt(变量) 是把字符型转换成数字型 得到的是整数
(2)parseFloat(变量) 字符型转换成数字型 得到的包括小数部分
(3)Number()强制转换函数
(4)隐式转换:通过计算符号 'str' + 0 隐式转化(减乘除)
<代码演示>
<script> var age = prompt("请输入你的年龄"); // 1.parseInt(变量) 是把字符型转换成数字型 得到的是整数 console.log(parseInt(age)); console.log(parseInt("3.14"));//3 console.log(parseInt("3.94"));//3 console.log(parseInt("120px"));//120 console.log(parseInt("r120px"));//null //2.parseFloat(变量) 字符型转换成数字型 得到的包括小数部分 console.log(parseFloat("3.14"));//3.14 console.log(parseFloat("120px"));//120 //3.Number(变量) var str = "123"; console.log(Number(str)); console.log(Number("12")); //4.利用算数运算 - * / 隐式转化(减乘除) console.log("12" - 0);//12 console.log("123" - "120");//3 console.log("123" * 1);//123 </script>4.3.转换为Boolean型
Boolean（变量）
<代码演示>
<script> // 代表空，否定的值 会被转换成false 如“0”、“NaN"、”null“、”undefined“ console.log(Boolean("")); console.log(Boolean(0)); console.log(Boolean(NaN)); console.log(Boolean(null)); console.log(Boolean(undefined)); //除以上几种情况之外 都为true console.log(Boolean(1));// true </script>5.标识符/关键字/保留字
1.标识符:开发人员为变量/属性/参数取的名字,标识符不能是关键字或保留字
2.关键字:是指js已经使用了的字,不能再用他们充当变量名/方法名
如:break,case,catch,continue,default,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with等
3.保留字:预留的"关键字",不能用来当变量名或方法名
如: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等
6.运算符operator
6.1.算术运算符
- + 加 - 减 * 乘 / 除 % 取余
注意：浮点数在算数运算中存在误差,不能使用浮点数判断是否相等！
6.2.比较运算符
1.>
2. <
3. >= 大于 或者 等于
4. <= 小于 或者 等于
5. == 只用来比较变量中的值是否相等，不考虑数据类型
6. === 用来判断值和数据类型必须同时相等
7. ！= 判断值是否不相等，不考虑数据类型
8. ！== 判断值和数据类型
总结：通过比较运算符得到的结果，只有true和false
6.3.逻辑运算符
- &&与 ||或 !非
6.4短路运算(逻辑终端）
1.用我们的布尔值参与的逻辑运算 true && false == false
2.逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 ； 如果表达式1为假 那么返回表达式3
3.逻辑或短路运算 如果表达式1 结果为真 则返回表达式1 ； 如果表达式1结果为假 则返回表达式2
6.5 一元运算符
++(自增) 和 --（自减）+1
（1）++运算
++a 在变量a的基础上加1
a++ 在变量a的基础上加1
（2）减减和加加同理
注意：如果将a++或者++a赋值给一个变量的时候，这个变量的值有区别
如果将a++赋值一个变量，那么先将a原来的值赋值给新的变量，然后自己在加1（先赋值再计算）
如果将++a赋值一个变量，那么先进行加1计算，然后把计算后的结果赋值给新的变量
7.三元表达式
- 语法结构：条件表达式？ 表达式1：表达式2
- 执行思路：如果条件表达式结果为真 则返回 表达式1 的值；如果条件表达式结果为假 则返回 表达式2 的值
<代码演示>
<script> var num = 10; var result= num > 5 ? "是的":"不是的"; console.log("result"); </script>8.switch 语句
switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码
语法结构：
switch(表达式){
case value1:
执行语句1;
break; //退出这个switch语句
case value2:
执行语句2;
break;
...
default://当前面的case都不满足
执行最后的语句
注意：
1.我们开发里面 表达式我们经常写成变量
2.我们num的值 和case 里面的值相匹配的时候是全等 必须是值和数据类型一致才可以 num == =1
3.break 如果当前的case里面没有break 则不会推出switch 是继续执行下一个case
9.for循环
- 语法结构：
for(变量初始化;条件表达式;变量自增（变量自减）){
循环体代码
}
- for循环可以执行不同的代码
10.双重for循环
- 语法结构
for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
执行语句;
}
}
- 可以把里面的循环看作是外层循环的语句
- 外层循环循环一次，里面的循环执行全部
11.获取变量数据类型
- 语法结构 typeof
注意：prompt 获取过来的值是字符串型
12.while循环
- 语法结构
while(条件表达式){
循环体；
}
执行思路 当满足条件表达式 执行花括号里的代码体，不满足就跳出该循环
13 do...while循环
- 语法结构
do{
循环体
}while(条件表达式)
- 执行思路
跟while不同的地方在于 do...while先执行一次循环 再判断条件
我们的do...while 循环体至少执行一次
14.continue，break，return语句
continue语句特点 ：当程序遇到continue的时候，会结束本次循环，后面的代码也不会执行，进入到下一次循环中
break语句特点 ： 当程序遇到break语句的时候，程序会立刻终止，后面的代码不执行
return ：不仅可以退出循环 还能够返回语句中的值,同时还可以结束当前函数体 的代码
简述：
continue：退出本次（当前次的循环） 继续执行剩余次数循环
break：退出本次及以后的循环
15.数组
15.1数组
数组（Array）：就是一组数据的集合 存储在单个变量下的优雅方式
数组里面的值用逗号隔开，数组里面的数据统称为数组元素
获取数组中的元素格式 arr[索引号] （索引号即下标 从0开始）
数组长度：arr.length 动态监测数组元素的个数
注意：数组的长度是元素个数 不要跟索引号混淆
15.2 创建数组的两种方式
利用new创建数组： var arr = new Array();
利用数组字面量创建数组： var arr = [ ]；
15.3 遍历数组
<代码演示>
<script> //遍历数组就是把数组里面的所有元素取到 // 配合for循环 循环的是下标 var arr =[1,2,3,4,5,6,7,8,123,578,2425,324]; for(var i = 0;i<arr.length;i++){ console.log(arr[i]); } //获取数组元素长度 arr.length </script>
- 案例演示1-求数组中的最大值
<代码演示>
<script> // 求数组[2,6,1,77,52,25,7] // 声明个变量 max存最大值 // 默认数组中的第一个数是最大值 max=arr[0] // for 循环遍历数组里面的值 arr[1] max 比较大小 // 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较 // 最后输出max var arr =[2,6,1,77,52,25,7]; var max =arr[0];//数组里面第0个 for(var i = 1;i < arr.length;i++){ if(arr[i]>max){ max=arr[i]; } } console.log(max); </script>
- 案例演示2-数组转换成字符串
<代码演示>
<script> // 将数组['red','green','blue','pink']转换为字符串，并且用 | 或其他符号分割 var arr= ['red','green','blue','pink']; var str=""; //先定义一个空字符串 var step="*"; for(var i= 0;i<arr.length;i++ ){ str+=arr[i] + step; } console.log(str); </script>15.4新增数组元素
修改length
修改索引号 追加数组元素
<代码演示>
<script> // 1.新增数组元素 修改length var arr =[1,2,3]; arr.length=5; console.log(arr);//由此可见，新增两个空元素 // 2.新增数组元素 修改索引号 追加数组元素 var arr =[1,2,3]; arr[3]=4;// arr[i]是索引号 没有改索引号 就是追加数组元素 arr[2]=10;//将第三个元素替换为10 console.log(arr); // 练习 新建一个数组 里面存放10个整数（1~10） var arr = []; for(var i = 0;i<10;i++){ arr[i]=i+1;//存放数组元素为 下标数 加 1 } console.log(arr); </script>15.5筛选数组
<代码演示>
方法一 <script> // 将数组[2,0,6,1,77,0,52,0,25,7]中大于10的元素选出来，放入新数组 // 方法一 var arr=[2,0,6,1,77,0,52,0,25,7]; var newArr=[]; var j = 0; for(var i =0;i < arr.length;i++){ if(arr[i]>=10){ newArr[j]=arr[i]; j++; } } console.log(newArr); </script>方法二 <script> // 将数组[2,0,6,1,77,0,52,0,25,7]中大于10的元素选出来，放入新数组 var arr=[2,0,6,1,77,0,52,0,25,7]; var newArr=[]; // 刚开始 newArr.length 就是0 for(var i =0;i < arr.length;i++){ if(arr[i]>=10){ // 新数组索引号应该从0开始 依次递增 newArr[newArr.length]=arr[i]; } } console.log(newArr); </script>15.6数组去重
<代码演示>
<script> // 将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组 var arr = [2,0,6,1,77,0,52,0,25,7]; var newArr=[]; for(i = 0;i<arr.length;i++){ if(arr[i] != 0){ newArr[newArr.length]=arr[i]; } } console.log(newArr); </script>15.7翻转数组
<代码演示>
<script> // 将数组['red','green','blue','pink','purple']的内容反过来存放 var arr = ['red', 'green', 'blue', 'pink', 'purple']; var newArr = []; for (var i = arr.length - 1; i >= 0; i--) { newArr[newArr.length] = arr[i]; } console.log(newArr); </script>15.8冒泡排序
<代码演示>
<script> // 冒泡排序 是一种算法 ，把一系列的数据按照一定的顺序进行排序显示 【从小到大，从大到小】 // 核心算法：一次性比较两个元素，如果他们的顺序错误，就把他们交换 // 最外层for循环管趟数 里层循环管每一趟交换的次数 var arr =[5,4,3,2,1]; for(var i = 0;i<arr.length-1;i++){ //4趟 for(var j = 0;j<=arr.length-i-1;j++){//循环次数 ，依次分别是4，3，2，1 。 外面第一趟里面循环4次 // 内部交换两个变量的值 相邻的两个元素 前一个和后一个比较 if(arr[j]>arr[j+1]){ //如果第一个数大于第二个数 从小到大 var temp=arr[j]; //此处设置一个临时变量 将第一个数放到临时变量中 arr[j]=arr[j+1];//将第二个数放到第一个数中 arr[j+1]=temp;//将将放入临时变量中的第一个数重新放到第二个数中 } } } console.log(arr); </script>16.函数
16.1 什么是函数？
函数 ：把一段可以重复被执行的代码 封装起来
<代码演示>
<script> function getSum(num1,num2){ var sum = 0; for (var i = num1; i <= num2; i++) { sum += i; } console.log(sum); } getSum(1,100) getSum(20,100) </script>16.2 函数的使用
1.创建 function 函数名(){ }；
2.调用 函数名（）注意：
(1)function 声明函数的关键字 全部小写
(2)函数是做某件事 ，函数名一般是动词 sayHi
(3)函数不调用自己不执行
<代码演示>
<script> // 创建函数一共分两步 声明函数 调用函数 // 1.创建函数 function 函数名(){ 执行代码 } // 2.调用函数 函数名(); </script>16.3.函数的参数
<代码演示>
<script> // function 函数名(形参1，形参2.....){ // } // 函数名(实参1,实参2......) // 参数个数没有限制 有也行没有也行 function cook (arg){ // 形参接实参 console.log(arg); } cook("锅包肉"); </script>16.4 函数的形参和实参个数匹配问题
<代码演示>
<script> function getSum(num1,num2){ //形参类似于不用声明的变量 console.log(num1+num2);//NaN console.log(num2);//undefined } // 1.如果实参的个数和形参的个数一致，则正常输出结果 getSum(1,2); // 2.如果实参的个数多于形参的个数 会取到形参的个数 getSum(1,2,3); // 3.如果实参的个数小于形参的个数 多余的形参定义为undefined 最终的结果就是NaN getSum(1); </script>16.5函数返回值
注意：
1.如果函数没有显示的使用 return 语句,那么函数有默认的返回值: undefined
2.如果函数中写了return语句 ,后面没有写任何其他内容,那么函数的返回值依然是 undefined
3.一个函数只能有一个返回值
4.return 代码执行完成后,后面的代码不再执行 return 终止函数
5.函数也可以作为返回值(理解)
- 代码练习1
<script> function getSum(num1, num2) { return num1 + num2; } getSum(1, 2); console.log(getSum(1, 2));//3 控制台输出的return的结果 (实参) </script>
- 代码练习2
<script> function getMax(num3, num4) { return num3 > num4 ? num3:num4; //利用三元表达式 } var result= getMax(10, 20) console.log(result); </script>16.6 arguments使用
只有函数才有arguments 对象 而且每个函数都内置好了arguments对象
注意：
arguments 伪数组 并不是真正意义的数组 arguments != arr
1.具有数组的length属性
2.按照数组索引的方式进行存储
3.它没有真正数组的一些方法: pop() push() 真正数组有,伪数组没有
<代码演示>
<script> function fn(){ console.log(arguments); // 里面储存了所有传递过来的实参 arguments=[1,2,3,4] console.log(arguments.length); } fn(1,2,3,4); </script><练习一>
<代码演示>
<script> // 利用函数求任意个数的最大值 (不确定函数的个数 arguments) function getMax(){ var max=arguments[0]; for(var i = 1;i<arguments.length;i++) { if(arguments[i]>max){ max=arguments[i]; } } return max; } console.log(getMax(1,2,3)); console.log(getMax(1,2,3,4,5)); </script>16.7 利用函数翻转任意数组 reverse 翻转
<代码演示>
<script> function reverse(arr) { var newArr = []; for (var i = arr.length - 1; i >= 0; i--) { //遍历数组 只不过是从后往前遍历 newArr[newArr.length] = arr[i]; } return newArr; } var res1= reverse([1,2,3]); //注意 这里的实参是数组[] var res2= reverse([1,2,3,4,5,6,7,8,9]); console.log(res1,res2); </script>16.8 利用函数冒泡排序 sort 排序
<代码演示>
<script> function sort() { for (var i = 0; i < arr.length - 1; i++) { //外层for循环管趟数 for (var j = 0; j <= arr.length - i - 1; j++) {//里层for循环管每一趟交换的次数 // 内部交换两个变量的值 相邻的两个元素 前一个和后一个比较 if (arr[j] > arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; } var arr1=sort([1,43,2,45]); console.log(arr1); </script>16.9 函数是可以互相调用的
<代码演示>
<script> function fn1(){ console.log(111); fn2(); console.log('fn1'); } function fn2(){ console.log(222); console.log('fn2'); } fn1(); //最终控制台显示为 111 222 fn2 fn1 </script>16.10 函数的两种声明方式
1.利用函数关键字 自定义函数（命名函数）
function fn(){
}
fn();
2.函数表达式（匿名函数）
var fun=function(){
console.log("我是函数表达式");
}
fun();
总结：
(1) fun 是变量名 不是函数名
(2) 函数表达式声明表达式跟声明变量差不多，只不过变量里存的是值，而函数表达式存的是函数
(3) 函数表达式也可以传递参数
17.作用域
17.1 函数作用域
- js作用域：就是代码名字（变量） 在某个范围内起作用和效果，目的是提高程序的可靠性，也减少命名冲突
- js的作用域：全局作用域 局部作用域
1. 全局作用域：script标签 或者一个单独的js文件
2. 局部作用域：（函数作用域）在函数内部就是局部作用域，这个代码的名字只在函数内部起效果
17.2 变量作用域
- 变量作用域：根据作用域不同我们的变量也分为全局变量和局部变量
（1）全局变量：在全局作用域下声明的变量 在全局都可以使用
（2）局部变量：就是在局部作用域下声明的变量
从执行效率来看全局变量和局部变量
(1)全局变量只有浏览器关闭的时候才会销毁，比较浪费内存资源
(2)局部变量 当我们的程序执行完毕就会销毁 ，节约内存资源
注意：
- 函数的形参也可以看作是局部变量
特殊情况 （不建议使用） 如果在函数内部 没有声明但是赋值的变量属于全局变量
形参不是全局作用域
17.3作用域链
作用域链 ：内部函数访问外部函数的变量 ，采取链式查找的方式来决定取哪个值，这种结构称为作用域链。（就近原则）
<代码演示>
<script> var num=10; function fn(){//外部函数 var num=20; function fun(){//内部函数 console.log(num);//20 } fun(); } fn(); </script>18.预解析
1.我们js引擎运行js代码分两步 1.预解析 2.代码执行
(1)预解析： js引擎会把js代码里面的 var 和 function 提升到当前作用域的最前面
(2)代码执行：按照代码书写顺序从上往下执行
2.预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
(1)变量预解析 把所有的变量声明提升到当前作用域的最前面 但是【不提升赋值】
(2)函数预解析： 就是把所有的函数声明提升到当前作用域的最前面 【不调用函数】
注意：函数提升优先级大于变量提升
18.1 预解析经典案例
<代码演示>
<script> f1(); console.log(c); console.log(b); console.log(a); function f1() { var a = b = c = 9;//相当于 var a =9;b=9; c=9; console.log(a); console.log(b); console.log(c); } // 以下代码 function f1() { var a; a = 9; b = 9; c = 9; console.log(a); console.log(b); console.log(c); } f1(); console.log(c); console.log(b); console.log(a); </script>19.对象/函数
19.1利用对象字面量创建对象
var obj ={ };
*相关知识点标注在代码演示中
注意：
(1) {}里面的属性或方法 我们采用键值对的形式 。 键 属性名 ： 值 属性值
(2) 多个属性或方法中间用逗号隔开
(3) 方法 冒号后面是一个匿名函数<代码演示>
<script> // 1.利用对象字面量创建对象 // var obj ={};//创建了一个空对象 var obj = { uname: "姓名", age: 18, sex: "性别", teach: function () {//匿名函数 console.log("哈喽"); } } // 2.使用对象 // (1) 调用对象的属性 我们采取 对象名.属性名 .可以理解为 的 的意思 console.log(obj.age); // (2) 调用对象的属性的另外一种方式 对象名['属性名'] console.log(obj['sex']); // (3) 调用对象的方法 对象名.方法名() 千万别忘记加小括号 obj.teach(); //调用 </script>19.2利用new Object 创建对象
var obj = new Object();//创建一个空的对象 注意 Object的首字母大写
注意：
（1）.利用 等号赋值 的方法 添加对象的属性和方法
（2）.每个属性和方法之间用分号隔开
<代码演示>
<script> // 利用new Object 创建对象 var obj = new Object();//创建一个空的对象 注意 Object的首字母大写 obj.uname="姓名"; obj.age=18; obj.sex="性别"; obj.cook=function(){ console.log("你好"); } </script>19.3 利用构造函数创建对象
1.构造函数的语法格式
function 构造函数名() {
this.属性 = 值；
this.方法 = function () { }
}
2. 调用构造函数：new 构造函数名();
注意：
1.构造函数起名字首字母必须大写
2.我们构造函数不需要return
3.我们调用构造函数 必须new一下
4.我们只要 new Star() 调用函数就是创建了一个对象
5.我们的属性和方法前面必须加this
19.4对象的实例化
利用构造函数 创建对象的过程 称为对象的实例化
19.5.new关键字的执行过程
1. new 构造函数可以在内存中创建一个空的对象
2.this 就会指向这个创建的空对象
3.执行构造函数里的代码 给我们这个空对象添加属性和方法
4.返回这个对象 (构造函数不需要return)
20.遍历对象
- for in 遍历我们的对象
- 语法结构： for (变量 in 对象){ }
<代码演示>
<script> var obj={ name:"姓名", age:18, sex:"女", sing : function(){ } } for (var k in obj ){ console.log(k);//k 变量输出得到的是属性的名 console.log(obj[k]);// 这里得到的是属性的值 } </script>21.Math 数学对象
- Math 数学对象 相关知识
Math 数学对象不是构造函数 所以我们不需要new关键字来调用，直接使用里面的属性和方法
22.数组
22.1 创建数组的两种方式
1. 利用字面量来创建数组
var arr = [1,2,3];
console.log(arr[1]);//通过索引号提取数组中的内容
2.利用 new Array()
<script> var arr1 = new Array();//创建了一个空数组 var arr2 = new Array(2);//当参数只有一个数时,表示数组的长度 这个2,表示数组的长度,里面有两个空的数组元素 console.log(arr2); var arr3=new Array(1,2);// 等价于[2,3] console.log(arr3); </script>22.2 检测是否为数组的方法
Array.isArray(参数); h5新增的方法,必须是ie9以上支持
instanceof 运算符 可以用来检测是否为数组
<代码演示>
<script> // (1) Array.isArray(参数); h5新增的方法,必须是ie9以上支持 function reverse(arr) { if (Array.isArray(arr)) {//判断条件 var newArr = []; for (var i = arr.length - 1; i >= 0; i--) { newArr[newArr.length] = arr[i]; } return newArr; } else { return "必须输入的是数组格式!"; } } console.log(reverse([1, 2, 3])); console.log(reverse("1,2,3")); </script><script> // (2) instanceof 运算符 可以用来检测是否为数组 var arr1=[]; if (arr instanceof Array) {//判断条件 var newArr = []; for (var i = arr.length - 1; i >= 0; i--) { newArr[newArr.length] = arr[i]; } return newArr; } else { return "必须输入的是数组格式!"; } console.log(arr1 instanceof Array); </script>22.3 添加删除数组中的元素的方法
- push() 在我们数组的末尾添加一个或者多个数组元素
(1) push 方法是给数组后面添加新的元素
(2) push(参数) 参数直接写数组新元素就可以
(3) push完毕之后,返回结果 新数组的长度 console.log(arr.push();返回值是数组的长度
(4) 原数组发生变化
console.log(arr.push(4,6));//返回值是数组的长度
- unshift 在我们的数组开头 添加一个或多个元素
(1) unshift 方法是给数组前面添加新的元素
(2) unshift(参数) 参数直接写 数组新素就可以
(3) unshift完毕之后,返回结果 新数组的长度 console.log(arr.unshift();返回值是数组的长度
(4) 原数组发生变化
console.log(arr.unshift(0));//返回值是新数组的长度
- pop() 可以删除数组中的最后一个元素
(1) pop是删除数组中的最后一个元素 记住一次只能删除一个元素
(2) pop () 没有参数
(3) pop完毕之后 返回的结果是 删除的那个元素
(4) 原数组发生变化
console.log(arr.pop());//返回值是删除的元素 (即数组中的最后一个元素)
- shift 可以删除数组中的第一个元素
(1) shift数组中的第一个元素 记住一次只能删除一个元素
(2) shift () 没有参数
(3) shift完毕之后 返回的结果是 删除的那个元素
(4) 原数组发生变化
console.log(arr.shift());//返回值是删除的元素
22.4 筛选数组
<script> // 有一个包含工资的数组[1500,1230,2050,2100,1800],要求把数组中工资超过2000的删除,剩余的放到新数组里 var arr=[1500,1230,2050,2100,1800]; var newArr=[]; for(var i= 0;i<arr.length;i++){ if(arr[i]<2000){ newArr.push(arr[i]); } } console.log(newArr); </script>22.5数组排序、翻转数组
<script> // 1. 数组排序(冒泡排序) // 使用sort会有误差 因为简单使用sort只能给第一位数排序 var arr1 = [1, 13, 4, 57, 20]; arr1.sort(function (a, b) { return a - b;//升序排列 从小到大 return b - a;//降序排列 从大到小 }); console.log(arr1); // 2.翻转数组 var arr=["red","green","blue"] arr.reverse(); console.log(arr); </script>22.6 获取元素索引方法
返回数组元素索引号方法 indexOf(数组元素); 作用就是返回该数组元素的索引号 从前往后查
当查询的元素不在该数组内 会返回-1
当要查询元素在数组中有多个存在,只返回第一个满足条件的索引号
返回数组元素索引号方法 lastIndexOf(数组元素) 从后往前查
22.7数组去重
目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去
核心算法 ：遍历旧数组，然后拿着旧数组元素去查询新数组
利用新数组.indexOf(数组元素) 如果返回时显示 -1
<script> 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; } console.log(unique(['c','a','z','a','x','a','x','c','b'])); </script>22.8数组转字符串
toString() 将我们的数组转换成字符串
join(分隔符)
<代码演示>
<script> //数组转换成字符串 // 1. toString() 将我们的数组转换成字符串 var arr=[1,2,3] console.log(arr.toString()); // 2. join(分隔符) var arr1 = ['red','green','blue','pink']; console.log(arr1.join()); console.log(arr1.join("-")); console.log(arr1.join("*")); </script>22.9根据字符返回位置
根据字符返回位置 str.indexOf("要查找的字符")，[起始位置] 从0开始
<代码演示>
<script> // 练习 查找字符串"abcoefoxyozzopxxoppp" 中所有o出现的位置以及次数 var str1 = "abcoefoxyozzopxxoppp"; var index = str1.indexOf("o");//获得 o 出现的位置 var num = 0; while (index != -1) { console.log(index); num++; index = str1.indexOf("o", index + 1); } </script>22.10 根据位置返回字符
charAt(index) 根据位置返回字符
<script> var str ="baby"; console.log(str.charAt(3));// 返回y </script>charCodeAt(index) 根据位置返回字符 返回的是相应索引号的字符的ASII值
str[index] h5新增的
22.11 统计出现最多的字符和次数(待补充)
核心算法：利用charAt（） 遍历这个字符串
把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1
遍历对象 ，得到最大值和该字符
23.字符串操作方法 拼接/截取
1.concat("字符串1","字符串2"，.........)
var str='my';
console.log(str.concat("baby"));// my baby
2.截取字符串 substr("截取的起始位置"，截取几个字符) 起始位置是指该字符的索引号
var str2="找工作顺顺利利"
console.log(str2.substr("3",4));//顺顺利利
24.其他方法 替换字符/字符串转换为数组/转化大小写
替换字符 replace('被替换的字符'，'替换为的字符') 它只会替换第一个字符
<script> // 1.替换字符 replace('被替换的字符'，'替换为的字符') 它只会替换第一个字符 var str = 'babybaby'; console.log(str.replace('a', 'c'));//只有第一个baby的a换成了c console.log(str.replace('baby', 'money')); </script><script> // 练习 有一个字符串"abcoefoxyozzopp" 要求把里面所有的o替换为 * var str1 = "abcoefoxyozzopp" while (str1.indexOf("o") != -1) { str.replace("o", "*") } console.log(str1);//过滤敏感词 </script>
- 字符串转换为数组 split("分隔符")
<script> var str2="red,green,blue"; console.log(str2.split(",")); var str3="red&green&blue"; console.log(str3.split("&")); </script>
toLocaleUpperCase() 转化为大写
toLocaleLowerCase() 转化为小写
<script> var str4 ="red"; console.log(str4.toLocaleUpperCase()); str5 ="RED" console.log(str5.toLocaleLowerCase()); </script>25.Date日期对象
- 构造函数 必须使用new 来创建一个日期对象
使用Date时如果没有参数 会返回当前系统的当前事件
- 参数的常用写法： 数字型 2022,10,01 或者 字符串型“2022-10-01 17；16；52"
<代码演示>
代码演示 <script> // 1.构造函数 必须使用new 来创建一个日期对象 var arr= new Array(); var obj=new Object(); // 2.使用Date 如果没有参数 会返回当前系统的当前事件 var data =new Date(); console.log(data); // 3.参数的常用写法 数字型 2022,10,01 或者 字符串型“2022-10-01 17；16；52” var data1 = new Date(2022,10,01); console.log(data1);//返回的不是10月 是9月 (在下面解释) var data2=new Date("2022-10-01 17:16:52"); console.log(data2);//这里返回的就是10月了 就不会出现日期错误 </script>25.1格式化日期年月日
内容标注在代码案例中
<代码演示>
<script> // 格式化日期年月日 var data = new Date(); console.log(data.getFullYear());//获取当前时间的年份 console.log(data.getMonth() + 1);//月份是0-11 所以返回的月份会小一个月 记得月份加1 console.log(data.getDate);//返回几日 console.log(data.getDay());//返回的是星期几 范围是0-6 ， 0代表的是星期日 // 一个小案例 var year = data.getFullYear(); var month = data.getMonth() + 1; var datas = data.getDate(); var arr = data.getDay(["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]); console.log("今天是" + year + "年" + month + "月" + datas + "日" + "星期"+arr); </script>25.2格式化时分秒
内容标注在代码案例中
<代码演示>
<script> // 一个小案例---封装一个函数返回当前的时分秒 格式 08:08:08 function getTime() { var time = new Date(); //得到当前系统的当前时间 var h = time.getHours();//得到此时的 时 h = h < 10 ? "0" + h : h; //此处用到了三元表达式 如果h < 10,就要补零 以下分秒同理 var m = time.getMinutes(); m = m < 10 ? "0" + m : m; var s = time.getSeconds(); s = s < 10 ? "0" + s : s; return h+":"+m+":"+s; } console.log(getTime()); </script>25.3获得Date的总毫秒数
! 注意：总毫秒数不是当前时间的毫秒数 而是距离【1970年1月1日】过了多少毫秒数
内容标注在代码案例中
<代码演示>
<script> // 1.通过 valueOf() getTime() var date = new Date(); console.log(date.valueOf()); console.log(date.getTime()); // 2.简单的写法（最常用的） var date1 =+ new Date(); //直接返回总的毫秒数 console.log(date1); // 3.H5新增获取总毫秒数 console.log(Date.now); </script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
