一、JS初体验
目录
JS有3种书写位置，分别为行内、内嵌和外部
1、行内式JS
<input type="button" value="点我试试" onclick="alert('hello World')"/>-
可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick
-
注意单双引号的使用：再HTML中我们推荐使用双引号，JS中我们推荐使用单引号
-
可读性性差，在html中编写JS大量代码时，不方便阅读；
-
引号易错，引号多层嵌套匹配时，非常容易弄混
-
特殊情况下使用
2、内嵌式JS
<script>
alert('Hello World');
</script>-
可以将多行JS代码写到<script>标签中
-
内嵌JS是学习时常用的方式
3、外部JS文件
<script src="my.js"><script>-
利用HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观也方便文件级别的复用
-
引用外部JS文件的script标签中间不可以写代码
-
适合于JS代码量比较大的情况
二、变量的数据类型
//int num=10; java
var num;//这里的num不确定属于哪种数据类型
var num=10;//num属于数字型
//JS的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
var str='pink';//str字符串型
//js是动态语言 变量的数据类型是可以变化的
var x=10;//x是数字型
x='pink';//x是字符串型1、数字型Number
var num=10;//num 数字型
var PI=3.14;//PI 数字型
//1、八进制0~7 我们程序里面数字前面加0 表示八进制
var num1=010;
console.log(num1);2、非数字型 isNaN
//isNaN()用这个方法来判断非数字 并返回一个值 如果是数字返回的是false 如果不是数字返回的是true
console.log(isNaN(12));//false
console.log(isNaN('HELLO'));3、字符串型String
//字符串型String
var str='我是一个小朋友'
//引号嵌套，外双内单或者外单内双
var str='我是一个“小朋友”'
console.log(str);
var str="我是一个‘小朋友’"
//字符转义符 都是\开头，这些转义符都要写在引号里面
var str='我是一个\n大呲花'
console.log(str);//1、检测字符串的长度length
var str='my name is andy';
console.log(str.length);
//2、字符串的拼接 +
console.log('非洲'+'呲花');//字符串的 非洲呲花
console.log('candy老师'+'呲花');//candy老师呲花
console.log('pink'+true);//pinktrue
console.log(12+12);//24
console.log('12'+12);//12124、布尔型boolean
var flag=true;//flag 布尔型
var flag1=false;//flag1 布尔型
console.log(flag+1);//true参与加法运算当1来看
console.log(flag1+1);//false参与加法运算当0来看5、undefined和null
//如果一个变量声明未赋值，就是undefined 未定义数据类型
var str;
var variable=undefined;
console.log(variable+'pink');//undefinedpink
console.log(varianle+1);//NaN underfined和数字相加，最后结果NaN
//null 空值
var space =null;
console.log(space+'pink');//nullpink
console.log(space+12);//1三、获取变量数据类型
1、获取检测变量的数据类型
type of可以用来检测变量的数据类型
四、数据类型的转换
1、转换为字符串
to String（） 转成字符串 String（） 强制转换 加号拼接字符串
//1、把数字型转换为字符串型 toString（）
var num=10;
var str=num.toString();
console.log(str);
console.log(typeof str);
//2、String(变量)
console.log(String(num));
//3、利用+拼接字符串的方法实现转换效果
console.log(num + '');2、转换为数字型
parseInt（String）函数 将string类型转成整数数值型 parseFloat（string）函数 将string类型转成浮点数数值型 Number（）强制转换函数 将string类型转换为数值型 js隐式转换（- * /） 利用算术运算隐式转换为数值型
//var age=prompt('请输入你的年龄');
//1、parseInt(变量) 可以把字符型的转换为数字型 得到的是整数
//console.log(parseInt(age));
console.log(parseInt('3.14'));//3取整
console.log(parseInt('3.98'));//3取整
console.log(parseInt('120px'));//120 会去掉这个px单位
console.log(parseInt('rem120px'));//NaN
//2、parseFloat(变量)可以把字符型的转换为数字型 得到的是小数 浮点数
console.log(parseFloat(3.14));
console.log(parseFloat('120px'));//120
onsole.log(parseFloat('rem120px'));//NaN
//3、利用Number（变量）
var str ='123';
console.log(Number(str));
console.log(Number('12'));
//4、利用了算术运算 - * /
console.log('12'- 0);
console.log('123'-'1203、转换为布尔型
代表空、否定的值会被转换为false，如：' '、0、NaN、null、undefined 其余值都会被转换为true
五、JavaScript运算符
//1.算术运算符
console.log(1 + 1);
console.log(1 - 1);
console.log(1 * 1);
console.log(1 / 1);
console.log(1 % 1);
//浮点数 算数运算中会出现精度问题
console.log(0.07 * 100);
console.log(0.1 + 0.2);
//不能直接将浮点数进行比较 是否相等
var num=0.1 + 0.2;
console.log(num == 0.3);
//2.表达式与返回值
//由数字、运算符、变量等组成的式子 称为表达式
console.log(1 + 1);//2 就是返回值
//在程序里：2 = 1 + 1 把我们右边表达式计算完毕把返回值给左边
var num = 1 + 1;
//3.递增和递减运算符
//①想要一个变量自己加1 num=num + 1 比较麻烦
var num = 1;
num = num + 1;
console.log(num);//2
//++num 前置递增运算符 先自加1后返回值
var age = 10;
++age;//类似于 age=age+1
console.log(age);
var p=10;
console.log(++p + 10);
//num++ 后置自增运算符 先返回原值后自加1
var num=10;
num++;//类似于 num=num+1
console.log(num);
//4.练习
var a = 10;
++a;//++a 11 a=11
var b = ++a + 2;//a=12 ++a=12
console.log(b);//14
var c = 10;
c++;//c++ 11 c=11
var d = c++ + 2;//c++ =11 c=12
console.log(d);
var e = 10;
var f = e ++ + ++e;// e++ =10 e=11 e=12 ++e=12
console.log(f);
//后置自增 先表达式返回原值 后面变量再自加1
//5.比较运算符
console.log(3 >= 5);//false
console.log(2 <= 4);//true
//我们程序里面的等于符号是 == 默认转换数据类型 会把字符串的数据转换为数字型
console.log(3==5);//false
console.log('pink老师' =='大呲花');//false
console.log(18 == 18);//true
console.log(18 == '18');//true
//我们程序里面有全等于 === 要求两侧的值还有数据类型完全一致 才可以true
console.log(18 === 18);
console.log(18 === '18');//false
//6.逻辑运算符
//&& 两侧都为true 结果才是true 只要有一侧为false 结果就为 false
console.log(3 > 5 && 3 > 2);//有一个为假 即假 false
console.log(3 < 5 && 3 > 2);//true
// || 两侧都为假 结果才是假 只要有一侧是true 结果就是true
console.log(3 > 5 || 3 > 2);//true
console.log(3 > 5 || 3 < 2);//false
// ！
console.log(!true);
//练习
var num =7
var str ="我爱你~中国~";
console.log(num > 5 && str.length >= num);//true
console.log(num < 5 && str.length >= num);//false
console.log(!(num < 10));//false
console.log(!(num < 10 || str.length == num));//false
//7.短路运算（逻辑中断）
//逻辑与短路运算 用我们的布尔值参与的逻辑运算 true && false ==false
//语法：表达式1&&表达式2 如果第一个表达式为真，则返回表达式2；如果第一个表达式为假，则返回表达式1
console.log(123 && 456); // 456
console.log(0 && 456); // 0
console.log(0 && 1+2 && 456*56789); // 0
//如果有空的或否定的为假，其余为真 0 '' null undefined NaN
//逻辑或短路运算 如果表达式1为真，返回表达式1；如果表达式1为假，则返回表达式2
console.log(123||456);//123
console.log(123 || 456 || 456+123); //123
console.log(0 || 456 || 456+123);//456
//8.赋值运算符
var num = 10;
//num = num + 1; num++
num = num + 2;// num += 2;
num += 2;
console.log(num); // 12
num += 5;
console.log(num);// 15
var age = 18;
age *= 2;//age = age * 2
console.log(age);// 36
六、流程控制、分支结构
1、流程控制
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构
2、顺序流程控制
3、分支流程控制if语句
if分支语句
<script>
//1.if的语法结构
if(条件表达式){
//执行语句
}
//2.执行思路 如果if里面的条件表达式结果为真true则执行大括号里面的执行语句
//如果if条件表达式结果为假，则不执行大括号里面的语句，则执行if语句后面的代码
//3.代码体验
if(3 < 5){
alert('说散就散');
}
</script>进入网吧（案例）
<script>
//弹出一个输入框，要求用户输入年龄，如果年龄大于等于18岁，允许进入网吧
//①弹出一个prompt输入框，用户输入年龄，程序把这个值取过来保存到变量中
//②使用if语句来判断年龄，如果年龄大于18就执行if大括号里面的输出语句
var age=prompt('请输入您的年龄：');
if(age>=18){
alert('大漠孤烟直，长河落日圆');
}
</script>if else双分支语句
<script>
//1.if else双分支语句
if(条件表达式){
//执行语句1
}else{
//执行语句2
}
//2.执行思路 如果if里面的条件表达式结果为真true则执行大括号里面的执行语句1
//否则执行语句2
//3.代码验证
var age=prompt('请输入您的年龄');
if(age>=18){
alert('我想带你去海边');
}else{
alert('你不配');
}
</script>判断闰年（案例）
<script>
//接收用户输入的年份，如果是闰年就弹出闰年，否则就弹出是平年
//①能被4整除且不能整除100的为闰年
//②弹出prompt输入框，让用户输入年份，把这个值取过来保存到变量中
//③使用if语句来判断是否是闰年，如果是闰年，就执行if大括号里面的输入语句，否则执行else里的输入语句
var year=prompt('请您输入年份：');
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
alert('您输入的年份是闰年');
}else{
alert('您输入的年份是平年');
}
</script>if else if 语句（多分支语句）
<script>
//1.多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果，多选1的过程
//2.语法规范
if(条件表达式1){
//语句1;
}else if(条件表达式2){
//语句2;
}else if(条件表达式3){
//语句3;
}else{
//最后的语句;
}
</script>判断成绩级别（案例）
<script>
var score=prompt('请您输入分数');
if(score>=90){
alert('优秀');
}else if(score>=80){
alert('良好');
}else if(score>=70){
alert('一般');
}else if(score>=60){
alert('及格');
}else{
alert('不及格');
}
</script>4、三元表达式
<script>
//1.语法结构
//条件表达式？表达式1：表达式2
//2.执行思路
//如果条件表达式结果为真，则返回表达式1，
var num=10;
var result = num>5?'是的':'不是的';
console.log(result);
//相当于
if(num>5){
result='是的';
}else{
result='不是的';
}
</script>数字补0（案例）
<script>
//用户输入0~59之间的一个数字
//如果数字小于10，则在这个数字前面补0，（加0）否则不做操作
//用一个变量接受这个返回值，输出
var time=prompt('请您输入一个0~59之间的一个数字');
//三元表达式
var result=time < 10 ? '0'+time : time;//把返回值赋值给一个变量
alert(result);
</script>5、分支流程控制switch语句
<script>
// 语法结构
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
default:
执行最后的语句;
}
//代码验证
switch(2){
case 1:
console.log('这是1');
break;
case 2:
console.log('这是2');
break;
default:
console.log('没有匹配结果');
}
//switch注意事项
var num=3;
switch(num){
case 1:
console.log(1);
break;
}
//1.我们开发里面 表达式经常写成变量
//2.我们num的值和case里面的值相匹配的时候是全等 必须是值和数据类型一致才可以 num==1
//3.如果当前的case里没有break则不会退出switch ，会继续执行下一个case
</script>查询水果（案例）
<script>
var fruit=prompt('请您输入查询的水果');
switch(fruit){
case '苹果':
alert('苹果的价格3.5/斤');
break;
case '橘子':
alert('橘子的价格4/斤');
break;
default:
alert('没有这种水果');
}
</script>七、循环
1、for循环
<script>
//1.for 重复执行某些代码，通常跟计数有关
//2.for 语法结构
// for(初始化变量;条件表达式;操作表达式){
//循环体
// }
//3.初始化变量 就是用var声明一个普通变量，通常用于作为计数器使用
//4.条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
//5.操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或递减）
//6.代码体验
for(var i=1;i<=100;i++){
console.log('你好');
}
//========================================
//for循环执行相同的代码
for(var i=1;i<=10;i++){
console.log('牛奶咖啡');
}
//我们可以让用户控制输出的次数
var num =prompt('请您上输入次数');
for(var i=1;i<=10;i++){
console.log('牛奶咖啡');
}
//========================================
//for循环执行不同的代码
//我们想要输出一个人 1~100岁
for(var i=1;i<=100;i++){
console.log('这个人今年' + i + '岁了');
}
//=========================================
//for循环重复某些相同的操作
//求1~100之间所有整数的累加和
// ①：需要循环100次，我们需要一个计数器i
// ②：我们需要一个存储结果的变量sum，但是初始值一定是0
// ③：核心算法：1+2+3+4...,sum=sum+i;
var sum=0; //求和的变量
for(var i=1;i<=100;i++){
sum=sum+i;
}
console.log(sum);
</script>for循环案例
<script>
//1.求1~100之间所有数的平均值
var sum=0;
var average=0;
for(var i=1;i<=100;i++){
sum=sum+i;
}
average =sum/100;
console.log(average);
//2.求1~100之间所有偶数和奇数的和 偶数的和变量even 奇数odd
var even=0;
var odd=0;
for(var i=1;i<=100;i++){
if(i%2==0){
even=even+i;
}else{
odd=odd+i;
}
}
console.log('1~100之间所有的偶数和是'+even);
console.log('1~100之间所有的奇数和是'+odd);
//3.求1~100之间所有能被3整除的数字的和
var result=0;
for(var i=1;i<=100;i++){
if(i%3==0){
result=result+i;
}
}
console.log('1~100之间能被3整除的数是'+result);
//一行打印5个*
var num=prompt('请输入星星的个数');
var str='';
for(var i=1;i<=5;i++){
str=str+'*';
}
console.log(str);
</script>2、双重循环
<script>
//双重for循环 语法结构
for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
//执行语句;
}
}
//把里面的循环看作是外层循环的语句
//外层循环循环一次，里面的循环执行全部
//代码验证
for(var i=1;i<=3;i++){
console.log('这是外层循环第'+i+'次');
for(var j=1;j<+i;j++){
console.log('这是里层循环的第'+j+'次');
}
}
</script>打印五行五列 * ； 打印n行n列 * ； 打印倒三角形 ； 九九乘法表
<script>
//打印五行*
var str='';
for(var i=1;i<=5;i++){//外层循环负责打印五行
for(var j=1;j<=i;j++){//里层循环负责一行打印五个*
str = str +'*';
}
//如果一行打印完毕5个*就要另起一行 加\n
str=str+'\n';
}
console.log(str);
//=========================================
//打印n行n列*
var rows=prompt('请您输入行数：');
var cols=prompt('请您输入列数：');
var str='';
for(var i=1;i<=rows;i++){
for(var j=1;j<=cols;j++){
str=str+'*';
}
str=str += '\n';
}
console.log(str);
//=========================================
//打印倒三角形
var str='';
for(var i=1;i<=10;i++){//外层循环控制行数
for(var j=i;j<=10;j++){//里层循环打印的个数不一样
str=str + '*';
}
str += '\n';
}
console.log(str);
//=========================================
//九九乘法表
var str='';
for(var i=1;i<=9;i++){
for(var j=1;j<+i;j++){
//1*2=2;
//str=str+'*';
str += j + '*' + i + '=' + i * j + '\t';
}
str += '\n';
}
console.log(str);
</script>3、while循环
<script>
//1.while循环语法结构
// while(条件表达式){
//循环体
// }
//2.执行思路
//3.代码验证
var num=1;
while(num<=100){
console.log('你哈啊');
num++;
}
//4.里面应该有计数器，初始化变量
//5.里面应该有操作表达式，完成数据器的更新，防止死循环
</script>while循环案例
<script>
//while循环案例
//1.打印人的一生，从1岁到100岁
var i=1;
while(i<=100){
console.log('这个人今年'+i+'岁了');
i++;
}
//2.计算1~100之间所有整数的和
var sum=0;
var j=1;
while(j<=100){
sum=sum+j;
j++;
}
console.log(sum);
//3.弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问
var message=prompt('你爱我吗？');
while(message !='我爱你'){
message=prompt('你爱我吗？');
}
alert('我也爱你啊')
</script>4、do while循环
<script>
//1.do while 循环语法结构
do{
//循环体
}while(条件表达式)
//2.执行思路
//先执行一次循环，再判断条件
//3.代码验证
var i=1;
do{
console.log('你好吗？');
i++;
}while(i<=100)
//4.do while 循环体至少执行一次
</script>do while 循环案例
<script>
//1.打印人的一生，从1岁到100岁
var i=1;
do{
console.log('这个人今年'+i+'岁了');
i++;
}while(i<=100)
//2.计算1~100之间所有整数的和
var sum=0;
var j=1;
do{
sum=sum+j;
j++;
}while(j<=100)
console.log(sum);
//3.弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问
do{
var message=prompt('你爱我吗');
}while(message !='我爱你')
alert('我也爱你啊');
</script>5、continue break
<script>
//continue关键字
for(var i=1;i<=5;i++){
if(i==3){
continue;//只要遇见continue就退出本次循环，直接跳到i++
}
console.log('我正在吃第'+i+'个包子');
}
//求1~100之间，除了能被7整除之外的整数和
var sum=0;
for(var i=1;i<=100;i++){
if(i%7==0){
continue;
}
sum=sum+i;
}
console.log(sum);
</script> <script>
//break关键字 退出整个循环
for(var i=1;i<=5;i++){
if(i==3){
break;
}
console.log('我正在吃第'+i+'个包子');
}
</script>八、JavaScript数组
1、数组的概念
数组是指一组数据的集合，其中的每一个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。
2、创建数组
JS中创建数组有两种方式：
①利用new创建数组；②利用数组字面量创建数组
<script>
//利用new创建数组
var arr = new Array();//创建了一个空的数组
//利用数组字面量创建数组[]
var arr =[];//创建了一个空的数组
var arr1 = [1,2,'hello',true];
//数组里面的数据用逗号分隔
//数组里面的数据，称为数组元素
//=================================================
//获取数组元素 格式 数组名[索引号] 索引号从0开始
console.log(arr1[2]);//hello
console.log(arr1[3]);//true
//访问数组
var arr2=['王俊凯','易烊千玺','王源'];
console.log(arr2[0]);
console.log(arr2[1]);
console.log(arr2[2]);
console.log(arr2[3]);//因为没有这个数组元素，所以输出的结果是undefined
</script>3、遍历数组
<script>
var arr = ['red','green','blue']
for (var i=0; i < 3 ; i++) {
console.log(arr[i]);
}
//1.因为数组的索引号是从0开始，所以i必须从0开始 i < 3
//2.输出的时候 arr[i] i 计数器当索引号使用
//=========================================
//数组长度 数组名.length
var arr = ['关羽','张飞','马超','赵云','黄忠','刘备','姜维'];
//方式一
for(var i = 0; i < 7; i++){
console.log(arr[i]);
}
console.log(arr.length);
//方式二
for(var i = 0; i < arr.length; i++){
console.log(arr[i]);
}
//1. 数组的长度是元素个数 不要个索引号混淆
//2. arr.length 动态检测数组元素的个数
</script><script>
//求数组[2,6,1,7,4]里面所有元素的和以及平均值
//①：声明一个求和变量sum ②：遍历这个数组，把里面每一个数组元素加到sum里面、
//③：用求和变量sum除以数组的长度就可以得到数组的平均值
var sum = 0;
var arr = [2,6,1,7,4];
var average = 0;
for (var i = 0; i < arr.length; i++){
sum += arr[i];//我们加的是数组元素 arr[i] 不是计数器i
}
average = sum / arr.length;
console.log(sum, average);
</script><script>
//求数组[2,6,1,77,52,25,7]中的最大值
//①：声明一个保存元素的变量max ②：默认最大值可以取数组中的第一个元素
//③：遍历这个数组，把里面每个数组元素和max相比较 ④：如果这个数组元素大于max就把这个数组元素存到max里面，否则继续下一轮比较
//最后输出max
var arr = [2,6,1,77,52,25,7];
var max = arr[0];
for (var i = 1; i < arr.length; i++){
if (arr[i] > max){
max = arr[i];
}
}
console.log('该数组里面的最大值是'+ max);
</script><script>
//数组转换为分割字符串。要求：将数组['red','green','blue','pink']转换为字符串，并且用|或其他符号分割
//输出：'red|green|blue|pink'
//①：需要一个新变量用于存放转换完的字符串str ②：遍历原来的数组，分别把里面数据取出来，加到字符串里面 ③：同时在后面多加一个分隔符
var arr = ['red','green','blue','pink'];
var str='';
var sep='!';
for (var i =0; i < arr.length; i++) {
str = str + arr[i] + sep;
}
console.log(str);
</script>4、数组中的新增元素
<script>
//1.新增数组元素 修改length长度
var arr =['red','green','blue'];
console.log(arr.length);
arr.length = 5;//把数组的长度修改为了5 ，里面应该有5个元素
console.log(arr);
console.log(arr[3]);//undefined
console.log(arr[4]);//undefined
//2.新增数组元素 修改索引号 追加数组元素
var arr1 = ['red','green','blue'];
arr1[3]='pink';
console.log(arr1);
arr1[4]='hotpink';
console.log(arr1);
arr1[0]='yellow';//这里是替换原来的数组元素
console.log(arr1);
arr1='有点意思';
console.log(arr1);//不要直接给数组名赋值，否则会覆盖掉以前的数据
</script>案例：
<script>
//新建一个数组，里面存放10个整数（1~10）
//核心原理：使用循环来追加数组
//1、声明一个空数组arr
//2、循环中的计数器i 可以作为数组元素存入
//3、由于数组的索引号是从0开始的，因此计数器从0开始更合适，存入的数组元素要+1
var arr= [];
for(var i=0;i<10;i++){
//arr = i;不要直接给数组名赋值 否则以前的元素都没了
arr[i] = i + 1;
}
console.log(arr);
</script>案例：筛选数组
<script>
//将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入数组中
//1、声明一个新的数组用于存放新数据newArr
//2、遍历原来的旧数组，找出大于等于10的元素
//3、依次追加新数组newArr。
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){
//新数组应该从0开始，依次递增
newArr[j] = arr [i];
j++;
}
}
console.log(newArr);
//方法二：
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>5、数组案例
<script>
//删除指定数组元素
//将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组
//①：需要一个新数组用于存放筛选之后的数据
//②：遍历原来的数组，把不是0的数据添加到新数组里面（此时注意采用数组名+索引的格式接收数据）
//③：新数组里面的个数，用length不断累加
var arr = [2,0,6,1,77,0,52,0,25,7];
var newArr = [];
for (var i = 0;i < arr.length;i++){
if(arr[i] !=0){
newArr[newArr.length]=arr[i];
}
}
console.log(newArr);
//翻转数组
//将数组['red','green','blue','pink',purple]的内容反过来存放
//输出：['purple','pink','blue','green','red']
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>6、（数组排序）冒泡排序
冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示（从小到大或从大到小）
<script>
//冒泡排序
var arr = [5,4,3,2,1];
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;
}
}
}
console.log(arr);
</script>九、函数
1、函数的概念
<script>
//1.求1~100的累加和
var sum = 0;
for(var i=1; i<=100; i++){
sum += i;
}
console.log(sum);
//2.求10~50的累加和
var sum = 0;
for (var i = 10; i <= 50; i++){
sum += i;
}
console.log(sum);
//3.函数 就是封装了一段可以被重复执行调用的代码块 目的：就是让大量代码重复使用
function getSum(num1,num2) {
var sum = 0;
for (var i = num1; i <= num2; i++){
sum += i;
}
console.log(sum);
}
getSum(1,100);
getSum(10,50);
</script>2、函数的使用
<script>
//函数使用分为两步：声明函数 和 调用函数
//1.声明函数
// function 函数名(){
//函数体
// }
function sayHi(){
console.log('hi~');
}
//①：function 声明函数的关键字，全部小写
//②：函数是做件某事，函数名一般是动词 sayHi
//③：函数不调用自己不执行
//2.调用函数
// 函数名();
sayHi();
//①：调用函数不要忘记加小括号
</script>
<script>
//利用函数计算1~100之间的累加和
//1.声明函数
function getSum() {
var sum = 0;
for (var i = 1;i <= 100; i++){
sum += i;
}
console.log(sum);
}
//2.调用函数
getSum();
</script>
3、函数的参数
<script>
//1.函数可以重复相同的代码
function cook (){
console.log('酸辣土豆丝');
}
cook();
cook();
//2.我们可以利用函数的参数实现函数重复不同的代码
function 函数名(形参1，形参2...) { //在声明函数的小括号里面是 形参（形式上的参数）
}
函数名(实参1,实参2...); //在函数调用的小括号里面是实参（）实际的参数
//3.形参和实参的执行过程
function cook(aru) { //形参是接受实参的 aru = '鱼香肉丝' 形参类似于一个变量
console.log(aru);
}
cook('鱼香肉丝');
cook('糖醋里脊');
//4.函数的参数可以有，也可以没有，个数不限
</script> <script>
//1.利用函数求任意两个数的和
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(1, 3);
getSum(3, 8);
//2.利用函数求任意两个数之间的和
function getSums(start, end){
var sum = 0;
for (var i = start; i <= end; i++){
sum += i;
}
console.log(sum);
}
getSums(1, 100);
getSums(1, 10);
//3.注意点:① 多个参数之间用逗号隔开 ② 形参可以看作是不用声明的变量
</script> <script>
//函数形参实参个数匹配
function getSum(num1, num2){
console.log(num1 + num2);
}
//1.如果实参的个数和形参的个数一致，则正常输出结果
getSum(1, 2);
//2.如果实参的个数多于形参的个数,会取到形参的个数
getSum(1, 2, 3);
//3.如果实参的个数小于形参的个数，多于的形参定义为undefined 最终的结果就是NaN
//形参可以看作是不用声明的变量 num2 是一个变量但没有接收值 结果就是undefined
getSum(1);//NaN
</script>4、函数的返回值
<script>
//1.函数是做某件事或者实现某种功能
/* function cook(aru) {
console.log(aru);
}
cook('大肘子');
*/
//2.函数返回值格式
/* function 函数名() {
return 需要返回的结果;
}
函数名();
*/
//①：函数是实现某种功能，最终结果需要返回给函数的调用者函数名() 通过return 实现
//②：只要函数遇到return 就把后面的结果返回给函数的调用者 函数名()=return后面的结果
//3.代码验证
function getResult(){
return 666;
}
getResult(); //getResult()=666
console.log(getResult());
//1.中像以下这么写才对
function cook(aru) {
return aru;
}
console.log(cook('大肘子'));
</script><script>
//利用函数求任意两个数的最大值
function getMax(num1, num2) {
// if (num1 > num2){
// return num1;
// } else {
// return num2;
// }
//或者
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 3));
console.log(getMax(11, 3));
</script>
<script>
//利用函数求数组[5,2,99,101,67,77]中的最大数值
function getArr(arr){
var max = arr[0];
for(var i = 1; i <= arr.length; i++){
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
// getArrMax([5,2,99,101,67,77]);//实参是一个数组送过去
//实际开发中采取以下格式,经常用一个变量来接收 函数返回结果，使用更简单
var re = getArrMax([5,2,99,101,67,77]);
console.log(re);
</script>
return终止函数
<script>
//函数返回值注意事项
//1.return 终止函数
function getSum(num1, num2){
return num1 + num2;
alert('我是不会被执行的');//return后面的代码不会被执行
}
console.log(getSum(1,2));
//2.return只能返回一个值
function fn(num1,num2){
return num1,num2;//返回结果是最后一个值
}
console.log(fn(1,2));
//3.我们求任意两个数的加减乘除结果
function getResult(num1,num2){
return [num1+num2,num1-num2,num1*num2,num1/num2];
}
var re=getResult(1,2);//返回的是一个数组
console.log(re);
//4.我们的函数如果有return则返回的是return 后面的值，如果函数没有return则返回undefined
function fun1(){
return 666;
}
console.log(fun1());//返回666
function fun2(){
}
console.log(fun2());//没有return函数返回undefined
</script>5、arguments的使用
<script>
//arguments的使用 只有函数才有arguments对象 而且是每个函数都内置好了这个arguments
function fn(){
console.log(arguments); //里面存储了所有传递过来的实参
console.log(arguments.length);
console.log(arguments[2]);
//我们可以按照数组的方式遍历arguments
for(var i=0; i< arguments.length; i++){
console.log(arguments[i]);
}
}
fn(1,2,3);
fn(1, 2, 3, 4, 5);
//伪数组 并不是真正意义上的数组
//1.具有数组的length属性
//2.按照索引的方式进行存储
//3.没有真正数组的一些方法 pop() push()等
</script><script>
//利用函数求任意个数的最大值
function getMax(){
var max = arguments[0];
for(var i = 1; i < arguments.length; i++){
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
console.log(getMax(1, 2, 3));
console.log(getMax(1, 2, 3, 4));
console.log(getMax(11, 2, 34, 44, 5, 100));
</script>6、函数案例
利用函数翻转任意数组
<script>
//利用函数翻转任意数组
function reverse(arr) {
var newArr = [];
for (var i = arr.length-1; i >= 0; i--){
newArr[newArr.length] = arr[i];
}
return newArr;
}
var arr1 = reverse([1, 2, 3, 4, 5]);
console.log(arr1);
var arr2 = reverse([2, 5, 4, 7, 1]);
console.log(arr2);
</script>
利用函数对数组排序
<script>
//利用函数封装的方式，对数组排序--冒泡排序
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+1];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
return arr;
}
var arr1 = sort ([1, 4, 2, 9]);
console.log(arr1);
var arr2 = sort([11, 3, 1, 999]);
console.log(arr2);
</script>判断闰年
<script>
//判断闰年
function isRunYear(year){
//如果是闰年返回true否则返回false
var flag = false;
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
flag = true;
}
return flag;
}
console.log(isRunYear(2000));
console.log(isRunYear(1999));
</script>7、函数的两种声明方式
<script>
//函数的2种声明方式
//1.利用函数关键字自定义函数（命名函数）
function fn(){
}
fn();
//2.函数表达式(匿名函数)
// var 变量名 = function(){};
var fun = function(){
console.log('我是函数表达式');
}
fun();
//①：fun是变量名 不是函数名
//②：函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数
//③：函数表达式也可以进行传递参数
</script>十、JavaScript作用域
1、作用域
<script>
//1.javaScript作用域：就是代码名字在某个（变量）范围内其作用和效果，目的：提高程序的可靠性，减少命名冲突
//2.js的作用域（es6）之前：全局作用域 局部作用域
//3.全局作用域：整个script标签 或者是一个单独的js文件
var num = 10;
//4.局部作用域：在函数内部的，只在函数内部其效果和作用的
function fn(){
//局部作用域
var num = 20;
console.log(num);
}
fn();
</script>2、变量的作用域
<script>
//变量的作用域：根据作用域的不同，变量分为全局变量和局部变量
//1.全局变量：在全局作用域下的变量 在全局下都可以使用
//注意：如果在函数内部没有声明直接赋值的变量也属于全局变量
var num = 10; //num就是一个全局变量
console.log(num);
function fn() {
console.log(num);
}
fn();
//2.局部变量 在局部作用域下的变量 后者在函数内部的变量就是 局部变量
//注意：函数的形参也可以看做是局部变量
function fun() {
var num1 = 10; // num1就是全局变量 只能在函数内部使用
num2 = 20;
}
fun();
console.log(num1);
//3.从执行效率来看全局变量和局部变量
//（1）全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
//（2）局部变量 当我们程序执行完毕就会销毁
</script>
js中没有块级作用域 js作用域：全局作用域 局部作用域3、作用域链
<script>
//作用域链:内部函数访问外部函数的变量，采取的是链式查找的方式决定取哪个值 就近原则
var num = 10;
function fn() { //外部函数
var num = 20;
function fun() { //内部函数
console.log(num);
}
fun();
}
fn();
</script>十一、JavaScript与解析
1、预解析
<script>
//1问
console.log(num);
//2问
console.log(num);
var num = 10; // undefined 坑1
//相当于执行了以下代码 先进行预解析
// var num;
// console.log(num);
// num=10;
//3问
fn();
function fn() {
console.log(11);
}
//4问
fun(); //报错 坑2
var fun = function() {
console.log(22);
}
//函数表达式 调用必须写在函数表达式的下面
//首先预解析再进行代码执行，相当于执行了以下代码
var fun;
fun();
fun = function(){
console.log(22);
}
//1.js引擎运行js分两步：预解析 代码执行
//①：预解析 js 引擎会把js里面所有的var 还有function 提升到当前作用域的最前面
//②：代码执行 按照代码书写的顺序从上往下执行
//2.预解析分为 变量预解析（变量提升）和函数预解析（函数提升）
//①：变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
//②：函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数
</script>2、变量预解析和函数预解析
十二、JS对象
1、对象
在JS中，对象是一组无序的相关属性和方法的集合，所有事物都是对象，例如字符串、数值、数组、函数等。
对象由属性和方法组成。属性：事物的特征 方法：事物的行为
2、创建对象的三种方式
在JS中，采用三种方式创建对象（object） 利用字面量创建对象 利用new Object创建对象 利用构造函数创建对象
<script>
对象的字面量：就是花括号{ }里面包含了表达这个具体事物（对象）的属性和方法
//1.利用对象字面量创建对象 {}
var obj = {};//创建了一个空的对象
var obj = {
uname:'易烊千玺',
age:21,
sex:'男',
sayHi:function() {
console.log('hi');
}
}
//(1)里面的属性或者方法采取键值对的形式 键 属性名：值 属性值
//(2)多个属性或者方法中间用逗号隔开的形式
//(3)方法冒号后面跟的是一个匿名函数
//2.使用对象
//(1)调用对象的属性 采取 对象名.属性名
console.log(obj.uname);
//(2)调用属性的第二种方法 对象名['属性名']
console.log(obj['age']);
//(3)调用对象的方法 对象名.方法名() 不要忘记添加小括号
obj.sayHi();
</script>变量、属性、函数、方法的区别 1、变量和属性的相同：都是用来存储数据的 变量：单独声明并赋值，使用的时候直接写变量名，单独存在。 属性：在对象里面的不需要声明，使用的时候必须是 对象.属性 2、函数和方法的相同点：都是实现某种功能，做某件事 函数是单独声明，并且调用的 函数名( ) 单独存在 方法 在对象里面 调用的时候 对象.方法( )
<script>
//利用new Object创建对象
var obj = new Object(); //创建了一个空的对象
obj.uname = '陈飞宇';
obj.age = 20;
obj.sex = '男';
obj.sayHi = function() {
console.log('hi~');
}
//(1)利用等号= 赋值的方法 添加对象的属性和方法
//(2)每个属性和方法之间用分号结束
</script><script>
//利用构造函数创建对象
//创建四大天王的对象
//构造函数的语法格式
/* function 构造函数名() {
this.属性 = 值;
this.方法 = function() {}
}
new 构造函数名();
*/
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function() {}
console.log();
}
var ldh = new Star('刘德华',18,'男');//调用对象返回的是一个对象
console.log(ldh.name);
lde.sing('冰雨');
//(1)构造函数名首字母大写
//(2)构造函数不需要return 就可以返回结果
//(3)要用构造函数必须使用new
//(4)只要new Star() 调用函数就创建一个对象 lde{}
//(5)我们的属性和方法前必须加this
</script>
构造函数和对象：
构造函数，如Star(),抽象了对象的公共部分，封装到了函数里面，它泛指某一大类(class)
创建对象，如new Stars(),特指某一个，通过new关键字创建对象的过程我们也称为对象的实例化
3、new关键字
<script>
//new关键字的使用
//1.new构造函数可以在内存中创建一个空的对象
//2.this 就会指向刚才创建的空的对象
//3.执行构造函数里面的代码，给这个空对象添加属性和方法
//4.返回这个对象
function Star() {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
var ldh = new star('刘德华', 18, '男');
</script>4、遍历对象属性
<script>
//遍历对象
var obj = {
name:'英语老师',
age:18,
sex:'男'
}
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);
//for in 遍历对象
/* for (变量 in 对象) {
}
*/
for (var k in obj) {
console.log(k); //k 变量 输出 得到的是 属性名
console.log(obj[k]); //obj[k] 得到的是 属性值
}
//使用for in 里面的变量 喜欢写k 或者 key
</script>十三、JS内置对象
1、内置对象
js种对象分3种：自定义对象、内置对象、浏览器对象
内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
内置对象最大的优点就是帮助我们快速开发
JS提供了多个内置对象：Math、Date、Array、String等
2、查文档
学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。Mozilla开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括HTML、CSS和万维网及HTML5应用的API。
3、Math对象
<script>
//Math数学对象 不是一个构造函数，所以我们不需要new来调用，而是直接使用里面的属性和方法即可
console.log(Math.PI); //一个属性 圆周率
console.log(Math.max(1,33,0,2)); //33
console.log(Math.max(-1,-2,-9)); //-1
console.log(Math.max(1,99,'拉萨')); //NaN
console.log(Math.max()); //-Infinity
</script><script>
//利用对象封装自己的数学对象 里面有 PI 最大值和最小值
var myMath = {
PI: 3.141592653,
max:function() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++){
if (arguments[i] > max) {
}
}
return max;
},
min:function() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++){
if (arguments[i] > max) {
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(1,5,9));
console.log(myMath.min(1,5,9));
</script>
//==========================================
<script>
//1.绝对值方法
console.log(Math.abs(1));//1
console.log(Math.abs(-1));//1
console.log(Math.abs('1'));隐式转换 会把字符串-1转换伪数字型
console.log(Math.abs('pink'));//NaN
//2.三个取整方法
//（1）Math.floor() 向下取整 往最小了取值
console.log(Math.floor(1.1));//1
console.log(Math.floor(1.9));//1
//（2）Math.ceil() 向上取整 往大了取值
console.log(Math.ceil(1.1));//2
console.log(Math.ceil(1.9));//2
//(3) Math.round() 四舍五入
console.log(Math.round(1.1));//1
console.log(Math.round(1.5));//2
console.log(Math.round(1.9));//2
console.log(Math.round(-1.1));//-1
console.log(Math.round(-1.5));//-1 其他数字都是四舍五入，但是 .5 特殊 它往大了取
</script>随机数方法random( )
<script>
//1.Math对象随机数方法 random() 返回一个随机的小数 0 =< x <1
//2.这个方法里面不跟参数
//3.代码验证
console.log(Math.random());
//4.我们想要得到两个数之间的随机数 并且 包含这2个整数
//Math.floor(Math.random() * (max - min + 1)) + min
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
console.log(getRandom(1,10));
//5.随机点名
var arr = ['张三' ,'李四' ,'王五'];
//console.log(arr[0]);
console.log(arr[getRandom(0, arr.length-1)]);
</script>4、日期对象
Date概述 Date对象和Math对象不一样，它是一个构造函数，需要实例化后才能使用。 Date实例后用来处理日期和时间
<script>
//Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象
var arr = new Array(); //创建一个数组对象
var obj = new Object(); //创建了一个对象实例
//1.使用Date 如果没有参数，返回当前系统的当前时间
var date = new Date();
console.log(date);
//2.参数常用的写法 数字型 2019, 10, 01 或者是 字符串型'2019-10-1 8:8:8'
var date1 = new Date(2019, 10, 1);
console.log(date1); //返回的是11月 不是10月
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);
</script> <script>
//格式化日期 年月日
/* var date = new Date();
console.log(date.getFullYear()); //返回当前日期的年
console.log(date.getMonth() + 1); //月份 返回当前月份小1个月 记得月份+1
console.log(date.getDate()); //返回的是几号
console.log(date.getDay()); //周一返回的是 1 周六返回的是6 但是周日返回的是0
*/
//写一个2022年1月25日 星期二
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
console.log('今天是'+year+'年'+month+'月'+dates+'日'+arr[day]);
//格式化 时分秒
var date = new Date();
console.log(date.getHours()); //时
console.log(date.getMinutes()); //分
console.log(date.getSeconds()); //秒
//要求封装一个函数返回当前的时分秒 格式08：08：08
function getTime() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTime());
//获得Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
//1.通过valueOf() getTime()
var date = new Date();
console.log(date.valueOf()); //就是我们现在时间 距离1970.1.1 总的毫秒数
console.log(date.getTime());
//2.简单的写法
var date1 = +new Date(); //+new Date() //返回的就是总的毫秒数
console.log(date1);
//3.H5新增的 获得总的毫秒数
console.log(Date.now());
</script> <script>
//倒计时案例
//案例分析
//①：核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数
//②：用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
//③：把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）
function countDown(time) {
var nowTime = +new Date(); //返回的是当前时间总的毫秒数
var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //time是剩余时间总的秒数
//var d = parseInt(总秒数/60/60/24);
var d = parseInt(times / 60 / 60 / 24); //天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24); //时
d = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60); //分
d = m < 10 ? '0' + m : m;
var s = parseInt(times % 60 ); //秒
d = s < 10 ? '0' + s : s;
return d + '天' + h +'时' + m + '分' + s + '秒';
}
console.log(countDown('2019-5-1 18:00:00'));
var date = new Date();
console.log(date);
</script>5、数组对象
<script>
//创建数组的两种方式
//1.利用数组字面量
var arr = [1, 2, 3];
console.log(arr[0]);
//2.利用new Array()
var arr1 = new Array(); //创建了一个空的数组
var arr1 = new Array(2); //这个2表示 数组的长度为2 里面有2个空的数组元素
var arr1 = new Array(2, 3); //等价于[2, 3]这样写表示里面有2个数组元素 是2和3
console.log(arr1);
</script> <script>
//翻转数组
function reverse(arr) {
if(arr instanceof Array) {
var newArray = [];
for (var i = arr.length-1; i>=0; i--){
newArr[newArr.length] = arr[i];
}
return newArr;
}else {
return 'error 这个参数要求必须是数组格式[1, 2, 3]'
}
}
console.log(reverse([1, 2, 3]));
console.log(reverse(1,2,3));
//检测是否为数组
//(1)instanceof 运算符 可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
//(2)Array.isArray(参数) H5新增的方法，ie9以上版本支持
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
</script><script>
//添加删除数组元素方法
//1.push()在数组末尾添加一个或者多个数组元素 push 推
var arr = [1, 2, 3];
//arr.push(4, 'pink');
console.log(arr.push(4, 'pink'));
console.log(arr);
//(1)push 是可以给数组追加新的元素
//(2)push() 参数直接写 数组元素就可以了
//(3) push完毕之后 返回的结果是新数组的长度
//(4) 原数组也会发生变化
//2. unshift() 在数组的开头 添加一个或多个数组元素
console.log(arr.unshift('red', 'blue')); //arr.unshift('red', 'blue');
console.log(arr);
//(1)unshift是可以给数组前面追加新的元素
//(2)unshift() 参数直接写 数组元素就可以了
//(3)unshift完毕后 返回的结果是新数组的长度
//(4)原数组也会发生变化
//3. pop() 删除数组的最后一个元素
//arr.pop();
console.log(arr.pop());
console.log(arr);
//(1)pop是可以给删除数组的最后一个元素，一次只能删除一个元素
//(2)pop() 没有参数
//(3)pop完毕后 返回的结果是删除的那个元素
//(4)原数组也会发生变化
//4. shift() 可以删除数组的第一个元素
console.log(arr.shift());
console.log(arr);
//(1)shift是可以给删除数组的第一个元素，一次只能删除一个元素
//(2)shift() 没有参数
//(3)shift完毕后 返回的结果是删除的那个元素
//(4)原数组也会发生变化
</script> <script>
//筛选数组 有一个包含工资的数组[1500,1200,2100,1800],
//要求把数组中工资超过2000的删除，剩余的放到新的数组里面
var arr = [1500,1200,2100,1800];
for (var i = 0; i < arr.length; i++){
if(arr[i] < 2000) {
// newArr[newArr.length] = arr[i]; 或者
newArr.push(arr[i]);
}
}
console.log(newArr);
</script><script>
//数组排序
//1.翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
//2.数组排序（冒泡排序）
// var arr1 = [3, 4, 7,1];
//arr1.sort();
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b){
// return a - b; 升序的顺序排列
return b - a; //降序的顺序排列
});
console.log(arr1);
//返回数组元素索引号方法 indexOf(数组元素) 作用返回该数组元素的索引号 从前面开始查找
//它只返回第一个满足条件的索引号
//它如果在该数组里面找不到元素，则返回的是-1 例：var arr = ['red','green','pink']; //-1
var arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.lastIndexOf('blue'));
//返回数组元素索引号方法 indexOf(数组元素) 作用返回该数组元素的索引号 从后面开始查找
var arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.lastIndexOf('blue')); //4
</script> <script>
//数组去重['c','a','z','a','x','a','x','c','b']要求去除数组中重复的元素。
//1.目标：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。
//2.核心算法：我们遍历旧数组，然后拿着旧数组元素查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。
//3.我们怎么知道该元素没有存在？ 利用 新数组 .indexOf(数组元素)如果返回是-1 就说明新数组里面没有该元素
//封装一个去重的函数 unique
function unique(arr){
var newArr = [];
for(var i =0;i<arr.length;i++){
if( newArr.indexOf(arr[i])===-1){
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique(['c','a','z','a','x','a','x','c','b']);
console.log(demo);
</script> <script>
//数组转换为字符串
//1.toStrig() 将我们的数组转换为字符串
var arr = [1,2,3];
console.log(arr.toString()); //1,2,3
//2. join(分隔符)
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join()); //green,blue,pink
console.log(arr1.join('-')); //green-blue-pink
console.log(arr1.join('&')); //green&blue&pink
</script>6、字符串对象
<script>
//基本包装类型
var str = 'andy';
console.log(str.length);
//对象 才有 属性和方法 复杂数据类型才有 属性和方法
//简单数据类型为什么会有length属性呢？
//基本包装类型：就是把简单数据类型 包装为复杂数据类型
//（1）把简单数据类型包装称为复杂数据类型
var temp = new String('andy');
//(2)把临时变量的值给str
str = temp;
//(3)销毁这个临时变量
temp = null;
</script> <script>
//查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
//核心算法：选查找第一个o出现的位置
//然后只要indexof返回的结果不是-1就继续往后查找
//因为indexOf只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
var str = "abcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
//console.log(index);
while(index !== -1){
console.log(index);
num++;
index = str.indexOf('o',index + 1);
}
console.log('o出现的次数是：' + num);
</script><script>
//根据位置返回字符
//(1)charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));
//遍历所有的字符
for(var i = 0;i<str.length;i++){
console.log(str.charAt(i));
}
//(2)charCodeAt(index) 返回相应索引号的字符ASCII值，目的：判断用户按下哪个键
console.log(str.charCodeAt(0)); //97
//(3)str[index] H5新增的
console.log(str[0]); //a
</script><script>
//字符串操作方法
//1.concat('字符串1', '字符串2'...)
var str = 'andy';
console.log(str.concat('red'));
//2.substr('截取的起始位置', '截取几个字符')
var str1 = '改革春风吹满地';
console.log(str1.substr(2,2));//第一个2是索引号2 第二个2是取几个字符
//替换字符replace('被替换的字符','替换为的字符') 它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace('a', 'b'));
//有一个字符串'abcoefoxyozzopp'要求把里面所有的o替换为*
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1){
str1 = str1.replace('o', '*');
}
//字符转换为数组 split('分隔符') 前面学过join把数组转换为字符串
var str2 = 'red, pink, blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));
</script>十四、JS中的简单数据类型和复杂数据类型
1、简单类型与复杂类型
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 如：string，number，boolean，undefined，null 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型 通过new关键字创建的对象（系统对象，自定义对象）如Object，Array，Date等
2、堆和栈
堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈 简单数据类型存放到栈里面 2、堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收 复杂数据类型存放到堆里面
3、简单类型的内存分配
//1.简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
4、复杂类型的内存分配
//2.复杂数据类型 首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据
扫一扫
813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
