Day 01
变量
本质：变量是程序在内存中申请一块用来存放数据的空间
变量的使用
1.声明变量
2.赋值
变量的初始化：声明一个变量 并赋值
var age = 18;
变量语法拓展
1.更新变量：一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准
var myname = '张三';
myname = '迪丽热巴';
console.log(myname);//迪丽热巴
2.同时声明多个变量，只需要写一个var,多个变量名之间用英文逗号隔开，最后一个用分号结束
var age = 18,
address = '火影村',
gz = 2000;
3.声明变量的特殊情况
3.1只声明不赋值，结果为undefined
var age;
console.log(age); //undefined
3.2不声明，不赋值直接使用某个变量会报错
3.3不声明，直接赋值使用能正常输出
变量命名规范
1.由字母，数字，下划线，美元符号组成。
2.严格区分大小写
3.不能以数字开头
4.不能是关键字，例如var,for,while
5.变量名必须有意义
6.遵守驼峰命名法，首字母小写，后面单词得首字母需要大写。如myFirstName
7.尽量不要使用name作为变量名
案例
交换两个变量
思路
1.需要一个临时变量
2.把apple1给临时变量temp
3.把apple2给apple1
4.把temp给apple2
var temp;
var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1;
apple1 = apple2;
apple2 = temp;
console.log(apple1, apple2)//红苹果 青苹果
数据类型
js变量的数据类型只有程序在运行过程中，根据等号右边的值来确定的。
js是动态语言，变量的数据类型是可以变化的。
数据类型分类
1.简单数据类型:Number,String,Boolean,Undefined,Null.
2.复杂数据类型：object
数字型(Number)
1.数字型进制
1.1.八进制0~7,在数字前面加0，表示八进制
1.2.十六进制0~9 a~f 在数字前面加0x，表示十六进制
2.数字型范围
//数字型最大值
console.log(Number.MAX_VALUE); //1.7976931348623157e+308
//数字型最小值
console.log(Number.MIN_VALUE); //5e-324
3.数字型三个特殊值
3.1.Infinity:代表无穷大，大于任何数值
3.2.-Infinity:代表无穷小，小于任何数值
3.3.NaN Not a number:代表一个非数值
4.isNaN()用来判断是否为非数字，并且返回一个值，如果是数字返回false,如果不是数字返回的是true.
console.log(isNaN(12)); //false
console.log(isNaN('123')); //false
console.log(isNaN('红色')); //true
字符串型(String)
字符串型可以是引号中的任意文本，其语法为双引号""和单引号’’，推荐使用单引号。
1.字符串引号嵌套
采用’外单内双’，'外双内单’的规则
2.字符串转义字符
注意：以 \ 开头，写在引号里面
| 转义符 | 解释说明 |
|---|---|
| \n | 换行符 |
| \\ | 斜杠\ |
| \’ | '单引号 |
| \" | "双引号 |
| \t | tab 缩进 |
| \b | 空格 |
3.字符串的长度
用length属性获取字符串的长度
var str = '我是帅气多金的程序猿';
alert(str.length); //10
4.字符串拼接
用 + 拼接，口诀：数值相加，字符相连
只要有字符串和其它类型相拼接，最终结果是字符串类型
console.log('沙漠' + '骆驼'); //沙漠骆驼
console.log('12' + 12); //'1212'
5.字符串拼接加强
变量的字符串相连口诀：引引加加
var age = 18;
console.log('我今年' + age + '岁');//我今年18岁
案例：显示年龄
弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示’您今年XX岁啦’
案例分析
1.弹出一个输入框(prompt)，让用户输入年龄
2.把用户输入的值用变量保存起来，把输入的年龄和所要输出的字符串拼接
3.使用alert语句弹出警示框
var age = prompt('请输入您的年龄');
var str = '您今年已经' + age + '岁了';
alert(str);
布尔型(Boolean)
布尔类型有两个值：true和false 其中true表示真，false表示假，true的值为1，false的值为0.
undefined和null
undefined(未定义)
一个变量声明未赋值就是undefined未定义数据类型
注意：undefined和数字相加最后结果为NaN
var varible = undefined;
console.log(varible + 'blue'); //undefinedblue
console.log(varible + 1) //NaN
null(空值)
var space = null;
console.log(space + 'blue'); //nullblue
console.log(space + 1);//1
获取检测变量的数据类型(typeof)
注意：prompt取过来的值是字符型
var num = 10;
console.log(typeof num); //number
var str = 'blue';
console.log(typeof str); //string
var flag = true;
console.log(typeof flag); //boolean
var vari = undefined;
console.log(vari); //undefined
var timer = null;
console.log(typeof timer); //object
数据类型转换
转换为字符串
var num = 10;
//方法一 toString()
var str = num.toString();
console.log(typeof str); //string
//方法二 String()
console.log(typeof String(num)); //string
//方法三 利用+拼接字符串方法实现转换效果 也称隐式转换
console.log(typeof(num + '')) //string
转换为数字型
parseInt(变量) 把字符型转换为数字型 得到的是整数
var age = prompt('请输入你的年龄');
console.log(typeof parseInt(age)); //number
console.log(parseInt(3.14)); //3
console.log(parseInt('120px')); //120
console.log(parseInt('rem120')); //NaN
parseFloat(变量) 把字符型转换为数字型 得到的是小数
console.log(parseFloat(3.14)); //3.14
console.log(parseFloat('120px')); //120
console.log(parseFloat('rem120')); //NaN
Number(变量)
var str = '123';
console.log(typeof Number(str)); //number
利用算术运算符 -,*,/
console.log('12' - 0); //12
console.log('120' - '120'); //0
console.log('123' * 1); //123
console.log('123' / 1);//123
console.log(12 - '6'); //6
console.log(4 / '2'); //2
案例：计算年龄
要求在页面中弹出一个输入框，我们输入出生年份后，能计算我们的年龄
案例分析
1.弹出一个输入框(prompt)，让用户输入出生年份
2.把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄
3.弹出警示框(alert)把计算的结果输出
var year = prompt('请输入你的出生年份');
var age = 2019 - year; //year取过来的是字符型，但是这里用的是减法 有隐士转换
alert('你今年已经' + age + '岁了');
案例：简单加法器
计算两个数的值，用户输入第一个值之后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示两次输入值相加的结果
案例分析
1.先弹出第一个输入框，提示用户输入第一个值，通过变量保存起来
2.在弹出第二个框，提示用户输入第二个值，通过变量保存起来
3.把这两个值相加，并将结果赋给新的变量(注意数据类型转换)
4.弹出警示框(alert)，把计算结果输出
var num1 = prompt('请输入第一个值');
var num2 = prompt('请输入第二个值');
var result = parseFloat(num1) + parseFloat(num2);
alert('结果是' + result);
转换为布尔型
Boolean()函数
注意：’’,0,NaN,null,undefined为false,其余值都为true
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean('123')); //true
console.log(Boolean('你好吗')); //true
console.log(Boolean(123)) //true;
Day 02
运算符
算术运算符
算术运算符优先级：先乘除，后加减，有小括号先算小括号里面的
| 运算符 | 描述 | 实例 |
|---|---|---|
| + | 加 | 10+20=30 |
| - | 减 | 10-20=-10 |
| * | 乘 | 10*20=200 |
| / | 除 | 10/20=0.5 |
| % | 取余数(取模) | 9%2=1 |
浮点数在算术运算符里面会有问题
console.log(0.1 + 0.2); //0.30000000000000004
console.log(0.2 - 0.1); //0.1
console.log(0.7 * 100); //70
console.log(0.07 * 100); //7.000000000000001
不能直接拿着浮点数来比较是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3);//false
递增运算符
注意：递增和递减运算符必须配合变量使用
前置递增和后置递增如果单独使用效果是一样的
var age = 10;
++age; //类似于age= age + 1
console.log(age);//11
var age = 10;
age++;类似于age= age + 1
console.log(age); //11
前置递增运算符
++写在变量的前面，先加1，后返回值
var age = 10;
console.log(++age + 10); //21
后置递增运算符
++写在变量的后面，先返回原值，后加1
var age = 10;
console.log(age++ + 10); //20
递增运算符练习
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); //13
var e = 10;
var f = e++ + ++e; //e++ 10 e=11 e=12 ++e=12
console.log(f); //22
比较运算符
返回是一个布尔值
| 运算符名称 | 说明 | 案例 | 结果 |
|---|---|---|---|
| < | 小于号 | 1<2 | true |
| > | 大于号 | 1>2 | false |
| >= | 大于等于 | 2>=2 2<=2 | true |
| <= | 小于等于 | 3<=2 | false |
| == | 等于（默认转换类型 会把字符串型转换为数字型） | 37==37 2 == ‘2’ | true |
| != | 不等于 | 37!=37 | false |
| === !== | 全等 要求值和数据类型都一致 | 37===‘37’ | false |
逻辑运算符
| 逻辑运算符 | 说明 | 案例 | 结果 |
|---|---|---|---|
| && | 逻辑与(and)两侧都为真才为真 | true&&false | false |
| || | 逻辑或(or)两侧有一侧为真就为真 | true||false | true |
| ！ | 逻辑非(not)取反 | !true | false |
短路运算(逻辑中断)
原理：当有多个表达式时，左边的表达式值可以确定结果时，不在 继续运算右边表达式的值
逻辑中断与
语法：表达式1&&表达式2
如果表达式1的值为真，则返回表达式2
如果表达式1的值为假，则返回表达式1
console.log(123 && 456); //456
console.log(0 && 456); //0
console.log(0 && 1 + 2 && 456 * 5);//0
逻辑中断或
语法：表达式1&&表达式2
如果表达式1的值为真，则返回表达式1
如果表达式1的值为假，则返回表达式2
console.log(123 || 456); //123
console.log(0 || 456); //456
console.log(123 || 456 || 789); //123
例
var num = 0;
console.log(123 || num++)//123;
console.log(num); //0
赋值运算符
| 赋值运算符 | 说明 | 案例 |
|---|---|---|
| = | 直接赋值 | var myName=‘小明’; |
| +=，-= | 加减一个数后在赋值 | var age=10;age+=5;//15 |
| *=,/=,%= | 乘除取模后在赋值 | var age=2;age*=5;//10 |
运算符优先级
| 运算符 | 顺序 |
|---|---|
| 小括号 | () |
| 一元运算符 | ++ – ！ |
| 算术运算符 | 先* / 后 + - |
| 关系运算符 | >，>=,<,<= |
| 相等运算符 | == != === !== |
| 逻辑运算符 | 先&& 后 || |
| 赋值运算符 | = |
Day 03
流程控制
顺序结构
分支结构
if分支语句
语法结构
//条件成立执行代码，否则什么也不做
if (条件表达式) {
//执行语句
}
案例：进入网吧
弹出一个输入框，要求用户输入年龄，如果年龄大于等于18岁， 允许进入网吧
案例分析
1.弹出prompt输入框，用户输入年龄，程序把这个值取过来保存到变量中
2.使用if语句来判断，如果年龄大于等于18，就执行if大括号里面的输出语句
var age = prompt('请输入您的年龄');
if (age >= 18) {
alert('我想带你去网吧偷耳机');
}
if else 双分支语句
语法结构
//条件成立执行语句1，否则执行语句2
if (条件表达式) {
//执行语句1
} else {
//执行语句2
}
案例：判断闰年
接收用户输入的年份，如果是闰年就弹出闰年，否则弹出是平年
案例分析
1.能被4整除且不能被100整除的为闰年或者能被400整除的就是闰年
2.弹出prompt输入框，让用户输入年份，把这个值取过来保存到变量中
3.使用if else语句来判断是否为闰年(如2000年是闰年，1999年不是闰年)，如果是闰年，就执行if大括号里面的输出语句，否则就执行else里面的输出语句
4.注意：判断整除的方法是取余为0
var year = prompt('请您输入年份');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
alert('您输入的年份是闰年');
} else {
alert('您输入的年份是平年');
}
if else if多分支语句
语法结构
//如果条件表达式1满足条件，执行语句1，退出整个if分支语句
//如果表达式1不满足条件，则判断条件表达式2，执行语句2，以此类推
//如果上面所有条件表达式都不成立，则执行else里面的语句
if (条件表达式1) {
//语句1
} else if (条件表达式2) {
//语句2
} else {
//上述条件都不成立就执行此处代码
}
案例：判断成绩级别
要求：接收用户输入的分数，根据分数输出对应的等级字母A,B,C,D,E
其中：
1.90分(含)以上，输出A
2.80(含)~90(不含)，输出B
3.70(含)~80（不含)，输出C
4.60(含)~70(不含)，输出D
5.60(不含)以下，输出E
案例分析
1.按照从大到小判断的思路
2.弹出prompt输入框，让用户输入分数，把这个值取过来保存到变量中
3.使用多分支语句if else if来分别判断输出不同的值
var score = prompt('请您输入分数');
if (score >= 90) {
alert('A');
} else if (score >= 80) {
alert('B');
} else if (score >= 70) {
alert('C');
} else if (score >= 60) {
alert('D');
} else {
alert('E')
}
switch分支语句
注意：
1.表达式经常写成变量
2.变量里面的值和case里面的值相匹配的时候是全等，必须是值和数据类型一致才可以
3.如果当前的case里面没有break,则不会退出switch,会继续执行下一个case
//利用表达式的值和case后面的选项值相匹配，如果匹配上，就执行该case后面的语句，如果没匹配上，那么执行default里面的语句
switch (表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
default:
执行最后语句;
}
案例：查询水果
用户在弹出框里面输入一种水果，如果有就弹出该水果的价格，如果没有该水果就弹出 ‘没有此水果’
案例分析
1.弹出prompt输入框，让用户输入水果名称，把这个值取过来保存到变量中
2.将这个变量作为switch括号里面的表达式
3.case后面的值写几种不同的水果名称，一定要加引号，必须是全等匹配
4.弹出不同价格，每个case之后加上break,以便退出switch语句
5.将default设为没有此水果
var fruit = prompt('请输入查询的水果：');
switch (fruit) {
case '苹果':
alert('苹果的价格是3.5元/斤');
break;
case '榴莲':
alert('榴莲的价格是35元/斤');
break;
default:
alert('没有此水果');
}
三元表达式
语法结构：
条件表达式 ? 表达式1 ：表达式2
执行思路：如果表达式结果为真，则返回表达式1的值，如果表达式结果为假，则返回表达式2的值
var num = 10;
var result = num > 5 ? '是的' : '不是的';
console.log(result); //是的
案例：数字补0
用户输入数字，如果数字小于10，则在前面补0，比如01,09，如果数字大于10，则不需要补，如20
案例分析
1.用户输入0~59之间一个数字
2.如果数字小于10，则在这个数字前面补0，否则，不作操作
3.用一个变量接收这个返回值，输出
var time = prompt('请输入一个0~59之间的一个数字');
var result = time < 10 ? '0' + time : time;
alert(result);
循环结构
for循环
语法结构
//初始化变量：var声明的一个普通变量,通常用于作为 计数器使用
//条件表达式：用来决定每一次循环是否继续执行 就是终止的条件
//操作表达式：用于计数器变量进行更新(递增或者递减)
for (初始化变量; 条件表达式; 操作表达式) {
//循环体
}
案例一：
求1~100之间所有数的平均值
var sum = 0;
var average = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
average = sum / 100;
console.log( average); // 50.5
案例二：
求1~100之间所有偶数和奇数的和
var even = 0;
var odd = 0;
for (var i = 0; i <= 100; i++) {
if (i % 2 == 0) {
even += i;
} else {
odd += i;
}
}
console.log('1~100之间所有偶数的和为：' + even); //2550
console.log('1~100之间所有奇数的和为：' + odd); //2500
案例三：求学生成绩
要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩
案例分析
1.弹出输入框输入总的班级人数(num)
2.依次输入学生的成绩保存给变量score,这里用for循环，弹出的次数跟班级总人数相关联，条件表达式i<=num
3.计算成绩:先求总成绩(sum)，之后求平均成绩(average)
4.弹出结果
var num = prompt('请输入班级总人数');
var sum = 0;
var average = 0;
for (var i = 1; i <= num; i++) {
var score = prompt('请输入第' + i + '个学生成绩');
sum += parseInt(score);
}
average = sum / num;
alert('班级总的成绩是：' + sum);
alert('班级的平均成绩是：' + average);
案例四：一行打印五个星星
var str = '';
for (var i = 1; i <= 5; i++) {
str += '☆';
}
console.log(str);
输出
☆☆☆☆☆
双重for循环
//外层循环一次，里面的循环执行全部
for (外层初始化变量; 外层条件表达式; 外层操作表达式) {
for (里层初始化变量; 里层条件表达式; 里层操作表达式) {
//执行语句
}
}
for (var i = 1; i <= 3; i++) {
console.log(('这是外层循环第' + i + '次'));
for (var j = 1; j <= 3; j++) {
console.log(('这是里层循环第' + j + '次'));
}
}
案例一：打印五行五列星星
var str = '';
for (var i = 1; i <= 5; i++) { //外层循环负责打印五行
for (var j = 1; j <= 5; j++) { //里层循环负责一行打印五个星星
str += '☆';
}
str += '\n';
}
console.log(str);
案例二：打印n行n列星星
var rows = prompt('请输入行数');
var cols = prompt('请输入列数');
var str = '';
for (var i = 1; i <= rows; i++) { //外层循环负责打印n行
for (var j = 1; j <= cols; j++) { //里层循环负责每一行打印n个星星
str += '☆';
}
str += '\n';
}
console.log(str);
案例三：打印倒三角形
var str = '';
for (var i = 1; i <= 10; i++) { //外层循环负责打印十行
for (var j = i; j <= 10; j++) { //里层循环负责一行打印十个星星
str += '☆';
}
str += '\n';
}
console.log(str);
案例四：打印九九乘法表
方法一：
var str = '';
for (var i = 1; i <= 9; i++) { //外层循环负责行数
for (var j = 1; j <= i; j++) { //里层循环负责每一行打印个数
str += j + '*' + i + '=' + j * i + '\t';
}
str += '\n';
}
console.log(str);
方法二：
<style>
table {
border-collapse: collapse;
width: 800px;
height: 300px;
}
th {
border: 1px solid black;
}
</style>
<script>
document.write('<table>')
for (var i = 1; i <= 9; i++) {
document.write('<tr>');
for (var j = 1; j <= i; j++) {
document.write('<th>' + j + 'x' + i + '=' + (i * j) + '</th>');
}
document.write('</tr>');
}
document.write('</table>');
</script>
while循环
语法结构
//当条件表达式结果为true，则执行循环体，否则退出循环
while (条件表达式) {
//循环体
}
案例一：打印人的一生，从1岁到100岁
var i = 1;
while (i <= 100) {
console.log('这个人今年' + i + '岁了');
i++;
}
案例二
弹出一个提示框，你爱我吗？如果输入我爱你，就结束循坏，否则一直询问
var message = prompt('你爱我吗?');
while (message !== '我爱你') {
message = prompt('你爱我吗');
}
alert('我也爱你');
打印九九乘法表
<style>
table {
border-collapse: collapse;
width: 800px;
height: 300px;
}
th {
border: 1px solid black;
}
</style>
<script>
var i, j;
document.write('<table>');
i = 1;
while (i <= 9) {
document.write('<tr>')
j = 1;
while (j <= i) {
document.write('<th>' + j + 'x' + i + '=' + (i * j) + '</th>');
j++;
}
i++;
document.write('</tr>');
}
document.write('</table>');
</script>
do while循环
语法结构
//先执行一次循环体，再判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环
//至少会执行一次循环体代码
do {
//循环体
} while (条件表达式)
案例一：打印人的一生，从1岁到100岁
var i = 1;
do {
console.log(('这个人今年' + i + '岁了'));
i++;
} while (i <= 100)
案例二
弹出一个提示框，你爱我吗？如果输入我爱你，就结束循坏，否则一直询问
do {
var message = prompt('你爱我吗?');
} while (message !== '我爱你');
alert('我也爱你');
continue关键字
退出本次循环，继续执行剩余的次数循环
例如：吃5个包子，吃到第三个发现有虫子，把第三个扔掉，继续吃其余的两个包子
break关键字
立即跳出整个循环
例如：吃5个包子，吃到第三个发现有虫子，其余的也不吃了
Day 04
数组
1.数组：数组是指一组数据的集合，在数组中可以存放任意类型的元素，存储在单个 变量下的优雅方式。
2.创建数组
1.利用new创建数组
var arr = new Array();
//里面写一个2，表示数组的长度，里面有两个空的数组元素
//里面写2,3，表示有两个数组元素，分别是2和3
2.利用数组字面量创建数组
var arr = [];
3.获取数组元素
格式：数组名[索引号] 索引号从0开始;
4.遍历数组
遍历：就是把数组中的元素从头到尾访问一次
例：
var arr = ['red', 'green', 'blue'];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
输出
'red','green','blue'
案例一
求数组[2,6,1,7,4]里面所有元素的和以及平均值
案例分析
1.声明一个求和变量sum。
2.遍历这个数组，把里面的每个数组元素添加到sum里面。
3.用求和变量sum除以数组长度就可以得到数组的平均值
代码：
var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i]; //我们加的是数组元素arr[i],不是计数器
}
average = sum / arr.length;
console.log(sum, average); //要想输出多个变量，用逗号隔开
输出
20,4
案例二
求数组[2,6,1,77,52,25,7]中最大值。
案例分析
1.声明一个保存最大元素的变量max。
2.默认最大值可以取数组中的第一个元素。
3.遍历这个数组，把里面的每个数组元素和max相比较。
4.如果这个数组元素大于max就把这个数组元素保存到max里面,否则继续下一轮比较。
5.最后输出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);
输出
77
案例三
将数组[‘red’,‘green’,‘blue’,‘pink’]转换为字符串，并且用|或其他符号分割
案例分析
1.需要一个新变量用于存放转换完的字符串str。
2.遍历原来数组，分别把里面数据取出来，加到字符串里面。
3.同时在后面多加一个分隔符。
代码
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
for (var i = 0; i < arr.length; i++) {
str += arr[i] + '|';
}
console.log(str);
输出
red|green|blue|pink|
5.数组中新增元素
-
修改length长度
-
修改索引号，追加数组元素：如果没有是追加，如果有是替换。
注意：不要直接给数组名赋值 ，否则里面的数组元素都没有了。
案例四
新建一个数组，里面存放10个整数(1~10).
案例分析
1.使用循环来遍历数组。
2.声明一个空数组arr。
3.循环中的计数器i,可作为数组元素存入。
4.由于数组的索引号是从0就开始的，因此计数器从0开始更合适，存入的数组元素要+1.
代码
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = i + 1;
}
console.log(arr);
输出
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
案例五
要求将数组[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) {
newArr[j] = arr[i];
j++;
}
}
console.log(newArr);
输出
[77, 52, 25]
方法二：
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] > 10) {
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
输出
[77, 52, 25]
6.数组案例
案例一：删除指定数组元素(数组去重)
要求将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组。
案例分析
1.需要一个新数组用于存放筛选之后的数据。
2.遍历原来数组，把不是0的数据添加到新数组里面(此时要注意采用数组名+索引号的格式接收数据).
3.新数组里面的个数，用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);
输出
[2, 6, 1, 77, 52, 25, 7]
案例二
将数组[‘red’,‘green’,‘blue’,‘pink’,‘purple’]的内容反过来存放
案例分析
1.声明一个新数组newArr。
2.把旧数组索引号第四个取过来(arr.length-1),给新数组索引号第0个元素(newArr.length)。
3.采用递减方式i–。
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);
输出
["purple", "pink", "blue", "green", "red"]
冒泡排序原理：
- 一共需要的趟数用外层for循环：arr.length-1.
- 每一趟交换次数用里层for循环：arr.length-i-1 i表示索引号.
- 交换两个变量.
案例
将数组[5,4,3,2,1]进行升序排列。
代码
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);
输出
[1, 2, 3, 4, 5]
函数
函数：函数就是封装了一段可以被重复执行调用的代码块 目的：让大量代码重复使用
函数使用：声明函数和调用函数
function sayHi(形参1，形参2....) {
// 函数体
}
sayHi(实参1，实参2....);
//(1)function 声明函数关键字全部小写
//(2)函数是做某件事情，函数名一般是动词
//(3)函数不调用自己不执行
//(4)调用函数的时候千万记得加小括号
函数形参实参个数匹配问题
1.如果实参个数和形参个数一致，则正常输出结果。
2.如果实参个数 多于形参个数，会取到形参的个数。
3.如果实参个数小于形参个数，多于的形参个数定义为undefined,最终结果为NaN.
注意：在JavaScript中，形参的默认值是undefined。
函数返回值
案例一
利用函数求两个数的最大值
代码
function getMax(num1, num2) {
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 6));//6
案例二
求数组[5,2,99,101,67,77]中的最大值
代码
function getArrMax(arr) {
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
var re = getArrMax([5, 2, 99, 101, 67, 77]);
console.log(re); //101
函数返回值注意事项
- return后面的代码不会被执行
- return只能返回一个值，如果用逗号隔开多个值，则以最后一个为准
- 函数如果有return则返回的是return后面的值，如果没有return则返回的是undefined
Day 05
arguments的使用
arguments是当前函数的一个内置对象，以伪数组的方式储存了传递的所有实参。
伪数组:
1.具有数组的length属性
2.按照索引的方式进行存储
3.没有真正数组的一些方法pop(),push()等
例：利用函数求任意个数的最大值
代码
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));//3
console.log(getMax(1, 2, 3, 4, 5, 6));//6
console.log(getMax(2, 3, 5, 6, 7, 8));//8
案例一
利用函数翻转任意数组
代码
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]);
console.log(arr1);//[4, 3, 2, 1]
var arr2 = reverse(['red', 'green', 'blue', 'pink']);
console.log(arr2);//["pink", "blue", "green", "red"]
案例二
利用函数冒泡排序
代码
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;
}
var arr1 = sort([1, 3, 5, 6, 2, 4]);
console.log(arr1);//[1, 2, 3, 4, 5, 6]
案例三
利用函数判断是否为闰年
代码
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));//true
console.log(isRunYear(1999));//false
案例四
用户输入年份,输出当前年份2月份的天数
代码
function backDay() {
var year = prompt('请输入年份');
if (isRunYear(year)) {
alert('当前年份是闰年2月份有29天');
} else {
alert('当前年份是平年2月份有28天');
}
}
backDay();
function isRunYear(year) {
var flag = false;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
flag = true;
}
return flag;
}
函数声明的两种方式
1.利用函数关键字自定义函数(命名函数)
function fn() {
}
fn();
2.函数表达式(匿名函数)
var 变量名 = function() {
}
变量名();
函数表达式也可以进行传参
javascript作用域:代码名字(变量)在某个范围内起作用和效果，目的是提高程序的可靠性，减少命名冲突。
全局作用域：整个script标签或者是一个单独的js文件。
局部作用域：在函数内部，只在函数内部起效果和作用。
变量作用域
全局变量：在全局作用域下的变量，在任何地方都可以使用。
注意：如果在函数内部没有声明的变量属于全局变量。
局部变量：在局部作用域下的变量，在函数内部使用。
注意：函数的形参也可看做是局部变量。
从事执行效率来看
全局变量：只有在浏览器关闭时才会销毁，比较占内存。
局部变量：当代码块被执行时，会被初始化；当代码运行你结束后，就会被销毁，会节省空间。
作用域链：内部函数访问外部函数的变量，采取链式查找的方式来决定取那个值这种结构称为作用链。就近原则。
js引擎运行分为两步：预解析 代码执行
预解析：
js引擎会把js里面所有的var、function提升到当前作用域最前面
预解析分为变量预解析(变量提升)和函数预解析(函数提升)。
变量提升：把所有的变量声明提升到当前的作用域最前面，不提升赋值操作。
函数提升：把所有的函数声明提升到当前作用域最前面，不调用函数
预解析案例
案例一
代码
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
//相当执行以下操作
// var num;
// function fun() {
// var num;
// console.log(num);
// num = 20;
// }
// num = 10;
// fun();
输出
undefined
案例二
代码
var num = 10;
function fn() {
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();
undefined
20
案例三
代码
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
//相当于执行以下操作
// var a;
// function f1() {
// var b;
// var a;
// b = 9;
// console.log(a);
// console.log(b);
// a = '123';
// }
// a = 18;
// f1();
输出
undefined
9
案例四
代码
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
//相当于以下操作
// function f1() {
// var a;
// a = b = c = 9;
// //var a=b=c=9;
// //相当于 var 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);
输出
9
9
9
9
9
报错
对象
对象由属性和方法组成
属性：事物的特征，常用名词表示。
方法：事物的行为，常用动词表示。
创建对象的三种方式
1.利用字面量创建对象
代码
var obj = {
uname: '张三疯',
age: 18,
sex: '男',
sayHi: function() {
console.log('hi~');
}
}
//创建对象
//1.里面的属性或者方法采用键值对的形式 键 属性名：值 属性值
//2.多个属性或者方法用逗号隔开。
//3.方法冒号后面跟的是一个匿名函数
//使用对象
//1.调用对象的属性 采取 对象名.属性名
console.log(obj.uname);
//2.调用属性还有一种方法 对象名['属性名']
console.log(obj['age']);
//3.调用对象的方法 对象名.方法名()
obj.sayHi();
2.利用new Object创建对象
var obj = new Object();
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
console.log('hi~');
}
//1.利用 等号=赋值的方法 添加对象的属性和方法
//2.每个属性和方法之间用 ; 结束
//3.new后面的对象名必须大写
console.log(obj.uname);
console.log(obj['sex']);
obj.sayHi();
3.利用构造函数创建对象
//构造函数的语法格式
function 构造函数名() {
this.属性 = 值;
this.方法 = function() {}
}
new 构造函数名();
例：
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
var ldh = new Star('刘德华', 18, '男'); //调用函数返回的是一个对象
//console.log(typeof ldh);
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');
var zxy = new Star('张学友', 19, '男');
console.log(zxy.name);
console.log(zxy.age);
zxy.sing('李香兰');
//1.构造函数名字首字母要大写
//2.构造函数不需要return就可以返回结果
//3.调用构造函数必须使用new
//4.只要new Star就创建了一个对象
//5.属性和方法必须添加this
变量、属性、函数、方法的区别
变量 单独声明并赋值 使用的时候直接写变量名 单独存在
属性 在对象里面不需要声明 使用时是 对象.属性
函数和方法相同点都是实现某种功能做某件事
函 数：单独声明 调用时采用 函数名() 单独存在
方法 在对象里面调用的时候 对象名.方法().
构造函数：把对象里面一些相同的属性和方法抽象出来封装到函数里面。
构造函数和对象的区别
构造函数：抽象了对象的公共部分，封装到函数里面，泛指某一大类。
创建对象：特指某一个，通过new关键字创建对象的过程称为实例化对象。
new关键字作用
- 在内存中创建一个新的空对象。
- 让this指向创建出来的空对象。
- 执行构造函数里面的代码，给这个空的对象添加属性和方法。
- 返回这个新对象（所以构造函数里面不需要return）。
遍历对象
//格式
// for (变量 in 对象) {
// }
var obj = {
name: 'pink老师',
age: 18,
sex: '男',
fn: function() {}
}
for (var k in obj) {
// console.log(k); //k变量 输出得到的是 属性名
console.log(obj[k]); //obj[k]得到的是 属性值
}
Day 06
内置对象
js语言自带一些对象，提供了一些常用的属性和方法。
JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象。
JavaScript中提供了多个内置对象：Math、Date、Array、String。
查文档：MDN。
Math对象
案例：封装自己的数学对象
利用对象封装自己的数学对象里面有PI、最大值和最小值。
var myMath = {
PI: 3.141592653,
max: function() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
},
min: function() {
var 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.max(10, 4, 9));
console.log(myMath.min(1, 4, 9));
输出
3.141592653
10
1
绝对值和三个取整方法
//1.绝对值方法
// console.log(Math.abs(1));
// console.log(Math.abs(-1));
// console.log(Math.abs('-1')); //隐士转换 会把字符串-1转换为数字型
// console.log(Math.abs('pink'));
//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() 四舍五入 -1.5特殊情况 往大取
// console.log(Math.round(1.1)); //1
// console.log(Math.round(1.5)); //2
// console.log(Math.round(-1.1)); //-1
// console.log(Math.round(-1.5)); //-1
// console.log(Math.round(-1.8));//-2
Math对象随机数方法 random() 返回一个随机的小数 0=<x<1.这个方法里面不跟参数
得到两个数之间的随机整数并且包含 这两个数
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));
案例 随机点名
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var arr = ['张三', '李四', '张三疯子', '李四', '李思思'];
console.log(arr[getRandom(0, arr.length - 1)]);
案例 猜数字游戏
案例分析
1.随机生成1~10的整数 需要用到Math.random()方法。
2.需要猜到正确为止，所以需要用循环
3.用while循环更简单
4.核心算法:使用 if else if多分支语句来判断大于、小于、等于。
代码
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 10);
while (true) {
var num = prompt('你来猜？输入1~10之间的一个数字');
if (num > random) {
alert('你猜大了');
} else if (num < random) {
alert('你猜小了');
} else {
alert('猜对了，你好帅哦');
break;
}
}
例：猜(1-50)之间的数，只有10次机会
代码
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 50);
for (var i = 1; i <= 10; i++) {
var num = prompt('你来猜？输入1~10之间的一个数字');
if (num > random) {
alert('你猜大了');
} else if (num < random) {
alert('你猜小了');
} else {
alert('猜对了，你好帅哦');
}
}
Date日期对象
Date对象是一个构造函数，需要实例化之后才能使用。
Date实例用来处理日期和时间。
日期格式化
| 方法名 | 说明 |
|---|---|
| getFullYear() | 获取当年 |
| getMonth() | 获取当月(0-11) |
| getDate() | 获取当天日期 |
| getDay() | 获取星期几(周日0到周六6) |
| getHours() | 获取当前小时 |
| getMinutes() | 获取当前分钟 |
| getSeconds() | 获取当前秒钟 |
格式化日期年月日星期
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]);
格式化日期时分秒
getTime();
setInterval(getTime, 1000);
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;
div.innerHTML = h + ':' + m + ':' + s;
}
获取总的毫秒数(时间戳：距离1970.1.1总的毫秒数)
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());
倒计时案例
案例分析：
1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但不能拿着时分秒相减，否则结果为负数。
2.用时间戳来做。用户输入时间总的毫秒数减去现在时间总的毫秒数，得到的就是剩余时间的毫秒数。
3.把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换)
转换公式
| d=parseInt(总秒数/60/60/24) | 计算天数 |
|---|---|
| h=parseInt(总秒数/60/60%24) | 计算小时 |
| m=parseInt(总秒数/60%60) | 计算分数 |
| s=parseInt(总秒数%60) | 计算当前秒数 |
countDown();
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); //返回的是当前总的毫秒数
var inputTime = +new Date('2019-12-30 00: 00: 00'); //返回的是用户输入的总的毫秒数
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;
div.innerHTML = d + '天' + h + '时' + m + '分' + s + '秒';
}
数组对象
检测是否为数组
1.instanceof 运算符 用来检测是否为数组
var arr = [];
var object = {};
console.log(arr instanceof Array);//true
console.log(object instanceof Array);//false
2.Array.isArray(参数);H5新增方法 ie9以上版本支持
var arr = [];
var object = {};
console.log(Array.isArray(arr));
console.log(Array.isArray(object));
添加数组元素方法
push()
1.在数组的末尾添加一个或多个数组元素
2.参数直接写数组元素就可以了
3.push完毕之后，返回的结果是新数组的长度
4.原数组也会发生变化
var arr = [1, 2, 3];
console.log(arr.push(4, ' pink'));//5
console.log(arr);//[1, 2, 3, 4, " pink"]
unshift()
1.在数组的前面添加一个或多个数组元素
2.参数直接写数组元素就可以了
3.unshift完毕之后，返回的结果是新数组的长度
4.原数组也会发生变化
var arr = [1, 2, 3];
console.log(arr.unshift(4, ' pink'));//5
console.log(arr);//[4, " pink", 1, 2, 3]
删除数组元素方法
pop()
- pop可以删除数组的最后一个元素，一次只能删除一个元素。
- 没有参数
- 返回的结果是删除的那个元素
- 原数组会发生变化
var arr = [1, 2, 3];
console.log(arr.pop());//3
console.log(arr);//[1, 2]
shift()
- shift可以删除数组的第一个元素，一次只能删除一个元素。
- 没有参数
- 返回的结果是删除的那个元素
- 原数组会发生
var arr = [1, 2, 3];
console.log(arr.shift());//1
console.log(arr);//[2, 3]
筛选数组案例
有一个包含工资的数组[1500,1200,2000,2100,1800]要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[i]);
}
}
console.log(newArr);
输出
[1500, 1200, 1800]
数组排序
翻转数组：reverse()方法
var arr = ['red', 'green', 'blue'];
arr.reverse()
console.log(arr);
输出
["blue", "green", "red"]
冒泡排序：sort()方法
var arr = [1, 19, 8];
arr.sort(function(a, b) {
// return a - b; 升序排列
return b - a; //降序排列
});
console.log(arr);
输出
[19, 8, 1]
获取数组元素索引
indexOf(‘要查找的字符’，[起始位置])：
- 返回的是第一个满足条件的索引号,从前面开始查找。
- 如果在该数组里面找不到元素，则返回是-1.
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.indexOf('blue'));//2
console.log(arr.indexOf('yellow'));//-1
lastIndexOf(‘要查找的字符’，[起始位置]):
- 返回的是最后一个满足条件的索引号,从后面开始查找。
- 如果在该数组里面找不到元素，则返回是-1.
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf('blue')); //4
console.log(arr.lastIndexOf('yellow')); //-1
数组去重案例
有一个数组[‘c’,‘a’,‘z’,‘a’,‘x’,‘a’,‘x’,‘c’,‘b’],要求去除数组中重复的元素
案例分析
1.遍历旧数组，拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，就添加，否则不添加。
2.怎么知道该元素存不存在？利用新数组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(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
console.log(demo);
输出
["c", "a", "z", "x", "b"]
数组转换为字符串
1.toString()
var arr = [1, 2, 3];
console.log(arr.toString()); //1,2,3
2.join(分隔符)
var arr1 = ['red', 'green', 'blue'];
console.log(arr1.join());//red,green,blue
console.log(arr1.join('|')); //red|green|blue
console.log(arr1.join('&')); //red&green&blue
concat()：方法用于连接两个或多个数组
语法
arrayObject.concat(arrayX,arrayX,......,arrayX)
返回一个新的数组。
实例：
例1
在本例中，将把 concat() 中的参数连接到数组 a 中：
<script type="text/javascript">
var a = [1, 2, 3];
console.log(a.concat(4, 5));
</script>
输出：
[1, 2, 3, 4, 5]
例2：
在本例中，我们创建了两个数组，然后使用 concat() 把它们连接起来：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
console.log(arr.concat(arr2))
</script>
输出
["George", "John", "Thomas", "James", "Adrew", "Martin"]
例3：
在本例中，我们创建了三个数组，然后使用 concat() 把它们连接起来：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"
console.log(arr.concat(arr2, arr3))
</script>
输出
["George", "John", "Thomas", "James", "Adrew", "Martin", "William", "Franklin"]
slice():方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
实例
例1：
在本例中，我们将创建一个新数组，然后显示从其中选取的元素：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
console.log(arr.slice(1))
</script>
输出
["John", "Thomas"]
例2：
在本例中，我们将创建一个新数组，然后显示从其中选取的元素：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
console.log(arr.slice(2, 4));
</script>
输出：
["Thomas", "James"]
splice() ：方法向/从数组中添加/删除项目，然后返回被删除的项目。
**注意：**该方法会改变原始数组。
语法
arrayObject.splice(index,howmany,item1,.....,itemX)
| 参数 | 描述 |
|---|---|
| index | 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 |
| howmany | 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 |
| item1, …, itemX | 可选。向数组添加的新项目。 |
实例
例1：
在本例中，我们将创建一个新数组，并向其添加一个元素：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
arr.splice(2, 0, "William")
console.log(arr);
</script>
输出
["George", "John", "William", "Thomas", "James", "Adrew", "Martin"]
例2：
在本例中我们将删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素：
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
arr.splice(2, 1, "William")
console.log(arr);
</script>
输出
["George", "John", "William", "James", "Adrew", "Martin"]
例3：
在本例中我们将删除从 index 2 (“Thomas”) 开始的三个元素，并添加一个新元素 (“William”) 来替代被删除的元素：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
arr.splice(2, 3, "William")
console.log(arr);
</script>
输出
["George", "John", "William", "Martin"]
字符串对象
根据字符返回位置
//str.indexOf('要查找的字符',[起始位置])
var str = '改革春风吹满地,春天来啦';
console.log(str.indexOf('春', 3)); //8
案例：返回字符案例
查找字符串’abcoefoxyozzopp’中所有o出现的位置以及次数
案例分析
-
先查找第一个o出现的位置
-
只要indexOf返回的结果不等于-1，就继续查找
-
因为indexOf只能查找第一个所以后面的查找要当前索引加1，从而继续查找
var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
while (index !== -1) {
console.log(index); //3 6 9 12
num++;
index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是：' + num);//4
根据位置返回字符
1.charAt(index)
var str = 'andy';
console.log(str.charAt(3));//y
//遍历所有的字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
输出
y
a
n
d
y
2.charCodeAt(index)返回相应索引号字符的ASCII值，目的：判断用户按下了那个键
var str = 'andy';
console.log(str.charCodeAt(0));//97
3.str[index] HTML5 IE8+支持
var str = 'andy';
console.log(str[0]);//a
案例：返回字符位置
判断一个字符串’abcoefoxyozzopp’中出现次数最多的字符，并统计其次数
案例分析
- 利用charAt()遍历这个字符串
- 把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1
- 遍历对象，得到最大值和该字符
var str = 'abcoefoxyozzopp';
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;
}
}
//遍历对象
var max = 0;
var ch = '';
for (k in o) {
if (o[k] > max) {
max = o[k];
ch = k;
}
}
console.log(max);
console.log('出现次数最多的字符是：' + ch);
输出
4
出现次数最多的字符是：o
字符串操作方法（重点）
concat(‘str1’, ‘str2’):用于拼接字符串
var str = 'andy';
console.log(str.concat('red', 'green'));
输出
andyredgreen
substr(截取起始位置，截取几个字符)第二个如果不写，默认从起始位置到最后一个字符
var str1 = '改革春风吹满地';
console.log(str1.substr(2, 2)); //第一个2是索引号 第二个2是截取几个字符
输出
春风
slice(start, end):从start位置开始，截取到end位置，end取不到，两个都是索引号（重点记住这个）
var str1 = '改革春风吹满地';
console.log(str1.slice(2, 3));//春
substring(start, end)：从start位置开始，截取到end位置，end取不到，两个都是索引号，不接受负值
toUpperCase() 方法用于把字符串转换为大写。
语法：
stringObject.toUpperCase()
返回值：
一个新的字符串，在其中 stringObject 的所有小写字符全部被转换为了大写字符
例：
在本例中，“Hello world!” 将以大写字母来显示：
var str = "Hello World!"
console.log(str.toUpperCase());
输出：
HELLO WORLD!
toLowerCase() 方法用于把字符串转换为小写。
语法：
stringObject.toLowerCase()
返回值：
一个新的字符串，在其中 stringObject 的所有大写字符全部被转换为了小写字符。
例
在本例中，“Hello world!” 将以小写字母来显示：
var str = "Hello World!"
console.log(str.toLowerCase());
输出
hello world!
替换字符
replace(‘被替换的字符’, ‘替换为的字符’) 它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace('a', 'b'));//bndyandy
例：
有一个字符串’abcoefoxyozzopp’要求把里面所有的o替换为*
var str = 'abcoefoxyozzopp';
while (str.indexOf('o') !== -1) {
str = str.replace('o', '*');
}
console.log(str); //abc*ef*xy*zz*pp
字符串转换为数组
split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
其使用格式如下：
字符串.split("分割字符")
var str = 'red,green,blue';
console.log(str.split()); //["red,green,blue"]
console.log(str.split(',')); //["red", "green", "blue"]
var str1 = 'red&green&blue';
console.log(str1.split()); //["red&green&blue"]
console.log(str1.split('&')); //["red", "green", "blue"]
简单数据类型和复杂数据类型
简单数据类型又叫基本数据类型或者值类型，复杂类型有叫引用类型
值类型：string,number,boolean,undefined,null
引用类型：通过new关键创建的对象(系统对象，自定义对象)，如Object,Array,Date等
堆和栈
栈(操作系统):由操作系统自动分配释放存放函数的参数值，局部变量的值，简单数据类型存放在栈里面。
堆(操作系统):存储复杂数据类型，一般由程序员分配释放，若程序员不释放，有垃圾回收机制回收
数据类型内存分配
简单数据类型：存放在栈里面，里面开辟一个空间存放的是值
复杂数据类型：首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据。
简单数据类型传参
函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
function fn(a) {
a++;
console.log(a); //11
}
var x = 10;
fn(x);
console.log(x); //10
复杂数据类型传参
函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。
function Person(name) {
this.name = name;
}
function f1(x) { // x = p
console.log(x.name); // 2. 这个输出什么 ? 刘德华
x.name = "张学友";
console.log(x.name); // 3. 这个输出什么 ? 张学友
}
var p = new Person("刘德华");
console.log(p.name); // 1. 这个输出什么 ? 刘德华
f1(p);
console.log(p.name); // 4. 这个输出什么 ? 张学友
来源：CSDN
作者：qq_42802170
链接：https://blog.csdn.net/qq_42802170/article/details/103889115