提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
目录
前言
记录自己的学习过程，补全前几天的知识点，顺便总结复习一下。本文内容包括while循环、数组的基本使用、函数、作用域简单理解、预解析、对象。
以下是本篇文章正文内容，下面案例可供参考
一、循环
1.While 循环
1.1 while
while 循环会在指定条件为真时循环执行代码块。
语法
var num = 1;//1、声明循环变量
while (num<=10){//2、判断循环条件;
document.write(num+"<br />");//3、执行循环体操作；
num++;//4、更新循环变量；
}
//他的执行思路是：当条件表达式为真时，执行 内部的执行语句，如果为假，则不执行。
//案例
var num = 1;
while(var i<=100){
//打印1-100；
console.log(i)
num++;
}
// 里面应该也有计数器 初始化变量
// 里面应该也有操作表达式 完成计数器的更新 防止死循环下面是案例
// 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 += j;
j++
}
console.log(sum);
// 3. 弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。
var message = prompt('你爱我吗?');
while (message !== '我爱你') {
message = prompt('你爱我吗?');
}
alert('我也爱你啊！');
//求从1开始第35个能被7和3整除的整数
var num = 0;
var i = 1;
var result = 0; //保存被整除的数
while (num != 35) { //每次进入这个循环的数都是小于35的然后在进入if判断。如果if判断不通过，那么就让i++，这样会让if里面的表达式i循环的次数/7，直到i能通过if的条件，这时num才会++,num++代表的是有一个数被整除了，依次循环到第35个数进入到if条件，然后我们需要有一个变量来记录每次通过条件的数，把最后通过条件的数赋予变量。这样就得到了第35个能被整除的数。
if (i % 7 == 0 && i % 3 == 0) {
num++;
result = i;
}
i++;
}
console.log(result);1.2 do..while
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。
语法：
do {
//执行语句；
} while (条件表达式);
// 执行思路 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环
var i = 1;
do {
console.log('how are you?');
i++;
} while (i <= 100)下面是案例，便于理解
// 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 += j;
j++;
} while (j <= 100)
console.log(sum);
// 3. 弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。
do {
var message = prompt('你爱我吗?');
} while (message !== '我爱你')
alert('我也爱你啊');1.3 while和do..while的区别
- while先去判断条件的真假，如果未假，则一次也不会执行。
- 但是do..while至少执行一次，再去判断条件。
1.4 break
break 语句“跳出”循环,会中断循环，并继续执行循环之后的代码（如果有)。
// 用switch 实现 break
var score = prompt('输入分数');
// 我们减少switch 的判断，增大switch 的固定匹配能力
// 我想：上来就进入switch的代码体 花括号里面
switch (Boolean(score)) {
case score >= 90:
document.write('A很优秀');
break;
case score >= 80:
document.write('B良好');
break;
case score >= 70:
document.write('C中等');
break;
case score >= 60:
document.write('D及格');
break;
default:
document.write('换要继续努力哦');
}1.5contiune
continue 语句“跳过”本次循环，然后进行下一个循环。
//案例
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue;
}
console.log(i);
}
// 1 2 4 5 跳过了3 继续执行了下面的循环1.6 break和contiune的区别
1、break：跳出本层循环，继续执行循环后面的语句。
如果循环有多层，则break只能跳出一层。
2、continue：跳过本次循环剩余的代码，继续执行下一次循环。
①对于for循环，continue之后执行的语句，是循环变量更新语句i++；
②对于while、do-while循环，continue之后执行的语句，是循环条件判断；
因此，使用这两个循环时，必须将continue放到i++之后使用，否则，continue将跳过i++进入死循环。
2.for循环
1.定义
目的 重复执行某段代码 ，提高编程效率
for循环
1、for有三个表达式：①声明循环变量；②判断循环条件；③更新循环变量；
三个表达式之间，用;分割，for循环三个表达式都可以省略，但是两个“;”缺一不可。
2、for循环的执行特点：先判断再执行，与while相同
3、for循环三个表达式都可以有多部分组成，第二部分多个判断条件用&& ||连接，第一三部分用逗号分割
2.语法
for (var num =1; num<=10; num++) {
document.write(num+" <br />"); //1 2 3 4 5 6 7 8 9 10
}案例
var num = prompt('请输入星星的个数');
for (var i = 1; i <= num; i++) {
document.write("★");
}3.双重for循环
是指 在一个循环语句中再定义一个循环语句的语法结构
for (外循环的初始; 外循环的条件;外循环的操作表达式) {
for (内循环的初始;内循环的条件; 内循环的操作表达式) {
需执行的代码;
}外层循环执行一次,内层循环要执行全部次数
案例1：打印一个五行五列的星星
for (var i = 1; i <= 3; i++) { //外层循环控制行数
for (var j = 1; j <= 3; j++) { //内层循环控制每一行的个数
document.write('☆');
}
document.write('<br />');
}案例2：打印正直角三角型
// 打印正直角三角型
for (var i = 1; i <= 5; i++) { //外层循环控制行的个数
for (var j = 1; j <= i; j++) { //内层循环控制内行个数
document.write('☆');
}
document.write('<br />');
}
方法二：
for (var i = 5; i >= 1; i--) { //外层循环控制 行的个数
for (var j = i; j <= 5; j++) { //内层循环控制内行个数
document.write('☆');
}
document.write('<br />');
}案例3：打印99乘法表
//使用for循环打印99乘法表(带表格的)
document.write("<table border='1' bordercolor='blue'> ")
for (var i = 1; i <= 9; i++) {
document.write('<tr style="border:1px solid #ccc">')
for (var j = 1; j <= i; j++) {
document.write('<td>')
document.write(j + 'X' + i + '=' + j * i);
}
document.write('<br/>');
document.write('</tr>')
}
document.write("</table> ")案例4：做一个简单的ATM机
var save = 0; //卡里
var balance = 100;
var sum1 = 0;
for (var i = 1; i <= Infinity; i++) {
var question = prompt(
'请输入您要进行的操作' + '\n' + '1.存钱' + '\n' + '2.取款' + '\n' + '3.显示余额' + '\n' + '4.退出'
);
if (question == '1') {
save = prompt('请输入存入的金额');
balance += parseFloat(save);
alert('您的余额为' + balance + '元')
} else if (question == '2') {
sum1 = prompt('请输入您要取走的金钱数额');
balance = balance - sum1;
alert('您的余额为' + balance + '元')
} else if (question == '3') {
alert('您的余额为' + balance + '元')
} else {
break;
}
}3.补充
1.死循环
//1.这里把条件表达式设置为无穷大 就会一直循环。一般配合break使用。跳出循环
for (var i = 1; i <= Infinity; i++) {
//循环体
}
//2.这里是让while的条件永远为真
while(1==1){
//循环体
}
//3.永远小于0
for(i=0;i<1;i--){
//循环体
{
....2.三种循环的总结
-
原则上，三种循环语句之间可以转换，只是每一种语句的适用场景不同
-
最常用：for循环；适合循环次数固定
-
while循环 -- 循环次数不固定
-
do..while循环： 适合循环次数不固定；但是循环体代码至少提前执行一次。
二、数组
定义 ：
数组可以把一组相关的数据一起存放，并提供方便的获取方式。在数组中可以存放任意类型的元素。
数组的创建方式
//1.字面量
var arr = [2, 3, 4, 5, 7];
//2.利用new创建数组
var arrNew = new Array();
var arrNew = new Array(2); //跟一个值代表 里面有两个空的数组元素
var arrNew = new Array(2, 3); //跟两个值，跟[2,3]一样。获取数组元素：数组名[索引号]；注意：索引是从0开始的。
遍历数组
// 遍历数组
var arr = ['a', 'b', 'h', 'y', 'l'];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}新增数组元素
//1.通过手动修改长度为6，
var arr = ['a', 'b', 'h', 'y', 'l'];
arr.length = 6; //后1个显示空的 empty默认的值为undefiend
//2.通过修改数组索引追加数组
var arr = ['a', 'b', 'h', 'y', 'l'];
arr[5] = 'red';//['a', 'b', 'h', 'y', 'l', 'red']冒泡排序
var arr = [4, 1, 2, 3, 5];
for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数
for (var j = 0; j <= arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数
// 内部交换2个变量的值 前一个和后面一个数组元素相比较
if (arr[j] < arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);翻转数组
// 将数组 ['red', 'green', 'blue', 'pink', 'purple'] 的内容反过来存放
// 1、声明一个新数组 newArr
// 2、把旧数组索引号第4个取过来（arr.length - 1)，给新数组索引号第0个元素 (newArr.length)
// 3、我们采取 递减的方式 i--
var arr = ['red', 'green', 'blue', 'pink', 'purple', 'hotpink'];
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i]
}
console.log(newArr);
</script>四、函数
定义：函数就是封装了一段可被重复调用执行的代码块，通过此代码块，我们可以实现大量代码的重复使用。
函数的使用分为两步：声明函数和调用函数
1.声明函数和调用函数
// 声明函数的方法
//1.利用函数关键字自定义函数
function 函数名() {
//函数体
}
//调用函数 函数名()
//2.函数表达式 //也成为匿名函数
var fun = function() {
//函数体
}
//调用函数 fun()2.函数的形参和实参
跟在函数名小括号里面的就是形参，调用函数的函数名后面的括号里面的就是实参。
实参比形参个数多，则以形参个数为准，忽略多出的实参。
实参比形参个数少，多出的形参则是undefiend.
所以我们尽量形参实参个数对应哦。
3.函数的返回值return
首先我们知道函数只是用来实现某种功能的所以我们要把得出的最终结果返回给函数的调用者，这个过程就是通过return来实现的。
return后面的语句不会被执行，他有终止函数的作用。
并且return只能返回一个值，如果用逗号隔开，则只返回最后的哪个值。
// 4. 求任意两个数的和
function getSum(num1, num2) {
return num1 + num2;
}
console.log(getSum(1, 2));4.arguments的使用
当我们不确定函数要接受的实参有多少时，我们可以用arguments来获取实参。
argumens是一个伪数组 因此它可以遍历，它具有length树荫，并且时按照索引的方式储存数据的。但是它不具有数组的push(添加数组元素)、pop(删除数组元素)等方法。
5.案例
利用函数 求两个数的最大值
// 利用函数 求两个数的最大值
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));函数之间是可以相互调用的
function fn1() {
console.log(111);
fn2();
console.log('fn1');
}
function fn2() {
console.log(222);
console.log('fn2');
}
fn1();六、作用域
定义：就是变量在某个范围内起的作用和效果，目的是为了提高程序的可靠性，更重要的是减少命名冲突。
全局作用域和局部作用域
全局作用域：整个script标签或者一个单独的js文件
局部作用域：在函数内部就是局部作用域，这个代码只在函数内部起效果和作用，也叫函数作用域。
在不同的作用域内，命名重复不会有影响，但是在相同作用域下命名重复就会冲突。
全局变量：在全局作用域下的变量都可以使用。函数内也可以使用。
另外 在函数内部 未声明直接使用的变量也叫做全局变量。
局部变量：在函数内部的变量就是局部变量
function see() {
var num1 = 10;
}
console.log(num1); //报错 因为是局部变量只能在内部调用 // 变量的作用域： 根据作用域的不同我们变量分为全局变量和局部变量
// 1. 全局变量： 在全局作用域下的变量 在全局下都可以使用
// 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
/* var num = 10; // num就是一个全局变量
console.log(num);
function fn() {
console.log(num);
}
fn();*/
// console.log(aru);
// 2. 局部变量 在局部作用域下的变量 后者在函数内部的变量就是 局部变量
// 注意： 函数的形参也可以看做是局部变量
/* function fun(aru) {
var num1 = 10; // num1就是局部变量 只能在函数内部使用
num2 = 20;
}
fun();*/
function fun() {
var num1 = 10; // num1就是局部变量 只能在函数内部使用
num2 = 20;
}
fun();
// console.log(num1);
console.log(num2);
从执行效率来看全局变量和局部变量
(1) 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
(2) 局部变量 当我们程序执行完毕就会销毁， 比较节约内存资源
七、对象
定义：对象就是一组无序的相关属性的方法的集合
对象是一个具体的事物
对象有方法和属性组成。
1.创建对象的方式
//创建对象的方式
// 1、利用字面量
var obj = {
name: '王楚燃',
age: '18',
sex: '女',
sing: function() {
console.log('一剪梅');
}
}
//调用函数
obj.name
// 或者
obj['age'] //注意这种方法里面一定要加引号
obj.sing(); //调用方法
//2.利用new Object
var obj = new Object();
name = '刘德华';
age = 18;
sex = '男';
sing = function() {
console.log('忘情水');
}
//调用函数
obj.name
// 或者
obj['age'] //注意这种方法里面一定要加引号
obj.sing(); //调用方法
//3.利用构造函数
function start(uname, uage, usex) {
this.name = uname;
this.age = uage;
this.sex = usex;
this.sing = function() {
console.log('hi~');
}
}
//调用区别于前两种 用new 函数名
var ldh = new.start('刘德华', '18', '男')
console.log(ldh.age);
//调用方法
ldh.sing();遍历对象
// 遍历对象
var obj = {
name: 'pink老师',
age: 18,
sex: '男',
fn: function() {}
}
// 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 或者 keyNew关键字执行过程
据说是个大厂的面试题哦
// new关键字执行过程
// 1. new 构造函数可以在内存中创建了一个空的对象
// 2. this 就会指向刚才创建的空对象
// 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
// 4. 返回这个对象
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, '男'); 案例补充：
//数组套对象
var arr = [{
name: '花花',
age: '18',
}, {
name: '明明',
age: '18',
}, {
name: '小黑',
age: '18',
}]
//字符串语法，获取存在变量中的字符串
var obj = {
name: '天天',
age: 18,
}
var ages = 'age';
console.log(obj[ages]);八、内置对象
1.Math内置对象
//Math内置对象
// max求最大值 min求最小值
// var arr = [1, 2, 3];
console.log(Math.max(1, 2, 3)); //3 //m小写小写小写
console.log(Math.min(1, 2, 3)); //1 //m小写小写小写
// console.log(Math.Max(arr)); //这样会报错
//abs求绝对值
console.log(Math.abs(-5)); //5
//圆周率
console.log(Math.PI);
//重点重点 随机数 random
console.log(Math.random()); //获取的是0-1之间的随机小数 包含0 但不包含1
// 写一个获得随机数的函数
function ran(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
console.log(getRandom(1, 30)); // 包括1 也包括30 通常我们都会获取一个整数的随机数 所以两个参数要写整数
Math.floor(1.8);//向下取整
Math.ceil(1.8);//向上取整
Math.round(1.5);//四舍五入-- 使用不多！2.Array内置对象
//数组内置对象
//1.删除添加数组元素
var arr = ['红', '黄', 1, 4, 6];
arr.push('我是push添加进来的') //返回的是新数组的长度
console.log(arr); //[ '红', '黄', 1, 4, 6, '我是push添加进来的']
arr.unshift('我是unshift添加进来的') //返回的是新数组的长度
console.log(arr); //['我是unshift添加进来的', '红', '黄', 1, 4, 6, '我是push添加进来的']
//删除数组元素
arr.pop() //在最后删除 返回的是被删除的元素
console.log(arr); //['我是unshift添加进来的', '红', '黄', 1, 4, 6]
arr.shift() //在开头删除 返回的是被删除的元素
console.log(arr); // ['红', '黄', 1, 4, 6]
//2.截取数组 splice('从第几个元素下标开始截'，'要截几个')
arr.splice('1', '2')
console.log(arr); //['红', 4, 6]
arr.splice('1') 从索引为1的位置开始，删除之后的元素
console.log(arr); //['红']
arr.splice(1, 0); //从索引为 1的位置，删除0个元素
console.log(arr); //['红']
arr.splice(0, 2, '哈哈', '啊啊', 1, 4, 2, 1, ); //从索引为0位置开始，删掉2个元素，同时添加
console.log(arr); // ['哈哈', '啊啊', 1, 4, 2, 1]
//3.获取数组元素
var arr1 = ['杨幂', '王楚燃', '张学友', '杨幂', ];
// indexOf() 根据内容从前往后查找返回下标
var num1 = arr1.indexOf('张学友')
console.log(num1); //2
//lastIndaexOf()根据内容从后往前查找返回下标
var num2 = arr1.lastIndexOf('杨幂');
console.log(num2); //3
//4.数组转为字符串 toString() join分隔符
var arr2 = [3, 5, 3, 2, 1, ]
var re1 = arr2.toString();
console.log(re1); //3,5,3,2,1
var re2 = arr2.join('-');
console.log(re2); //3-5-3-2-1
//5.数组排序
// reverse() --数组翻转
// sort() --数组排序（ 知道即可）3.Date内置对象
//Date 内置对象
// date 内置对象是一个构造函数 所以使用的时候一定要new一下
//练习date 年月日
var date = new Date();
var year = date.getFullYear(); //获取年
var month = date.getMonth() + 1; //获取月
var dates = date.getDate(); //获取日
var days = date.getDay(); //获取周
var arr = ['周天', '周一', '周二', '周三', '周四', '周五', '周六'];
var re = year + '年' + month + '月' + dates + '日' + arr[days];
console.log(re);
//获取时分秒
function times() {
var h = date.getHours();
h = h < 10 ? '0' + h : h;
var m = date.getMinutes();
m = m < 10 ? '0' + ma : m;
var s = date.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(times());4.String内置对象
//2.字符串转为数组 变量名.split('分隔符')
var str2 = '3,莉莉,m,8,0';
var re3 = str2.split(',')
console.log(re3); //['3', '莉莉', 'm', '8', '0']
//3.根据位置返回字符(重要！！！！)
//变量名.charAt('下标')
var strs = '刘丽行三李四方立';
var re4 = strs.charAt('3');
console.log(re4); //三
//变量名.charCodeAt('下标')
// 返回的是AscII的编码 一般用来获取用户输入的哪个键。
// 变量名[index]
//H5新增 跟第一个的用法一样
//替换字符串 replace
//截取字符串 substr
//连接字符串concat
总结
js的基础到这里就结束啦。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
