一、for循环与while循环
1、介绍: 在循环中, 有特别常见的循环四要素
1.1、循环变量初始值
1.2、循环条件
1.3、循环体
1.4、循环变量的运算
2、语法:
for (循环变量初始值; 循环条件; 循环变量的运算) {循环体}
3、for循环执行顺序逻辑:
循环变量初始值==>循环条件==>循环体==>循环变量的运算==>循环条件==>循环体==>循环变量的运算
4、while更适合使用在不明确循环的次数的时候
while (true) {
// 循环体
if (跳出循环的条件) {
// 跳出循环
break;
}
}
例:while (true) {
// 循环体
// 询问“在吗,能借我点钱不?”
let result = prompt('在吗,能借我点钱不?');
// 跳出循环
if (result === '行') {
alert('我们形影不离');
// 跳出循环
break;
}
//他不借,就一直循环
}
5、do-while循环(了解)
do {循环体} while (条件)
//先不管条件成立与否 先执行一次循环体 然后再去看条件
6、循环进阶--双循环
例:
<script>
for (let i = 1; i <= 10; i++) {
// 上述代码重复 所以可以使用循环完成
for (let count = 1; count <= 8; count++) {
document.write('❤');
}
// 等到一行结束在添加一个换行
document.write('<br />');
}
</script>
问:1、外层for循环控制什么? => 行数 一共循环了多少次 => 10次
问:2、内层for循环控制什么? => 每一行的列数 一共循环了多少次 => 80次
7、break与continue
7.1、break: 跳出整个循环 代表循环完全结束=>一般用于结果已经得到,后续的循环不需要
7.2、continue: 跳出当前这一次的循环 继续下一次的循环=>一般用于跳过当前选项 继续下一次的循环
二、数组
1、创建数组 => 数据集合
例:let arr = ['数值0', '数值1', '数值2', '数值3'];
//所有的数组都有下标, 而且下标(索引)默认都是从0开始 往后依次递增
2、数据集合的使用 => 增删改查
例:let arr = ['秒杀', '优惠券', 'PLUS会员', '品牌闪购'];
//2.1、查 => 数组名[下标]
arr[2]
//2.2、改 => 数组名[下标] = 新值
arr[1] = '不优惠券';
//2.3、删 => 数组名.splice(操作的下标, 删除的个数)
arr.splice(1, 1);
//2.4、增 => 傻瓜式的操作下标
arr[4] = '拍卖';
arr[5] = '家电';
arr[6] = '超市';
//2.4(改良)、数组名.push(添加的内容)
arr.push('拍卖', '家电', '瑟提');
3、数组特性
3.1、 每一个数组都有一个length属性, 代表数组的长度
3.2、 数组的长度 = 数组的最大下标 + 1
3.3、 获取数组的长度: 数组名.length
3.4、 数组的长度 JS会自动更新
4、遍历数组 => 将数组的每一项挨个访问
公式:
for (let i = 0; i < 数组名.length; i++) {
//数组的每一项 => 数组名[i]
//数组的下标 => i
}
5、翻转数组
5.1、核心:倒着遍历 在遍历的过程中,将对应的选项添加到新数组里面去
5.2、提示:循环变量初始值应该是从 最大下标 开始 每一次下标自行减1 一直减到0 需要等于0 因为需要访问到第0项(最大下标 = 数组.length - 1)
5.3、做法:
<script>
let arr = [1, 2, 3, 4, 5];
let newArr = [ ]; // 用来装倒着遍历的每一个选项
for (let i = arr.length - 1; i >= 0; i--) {
// 将倒着遍历的每一项 追加到新数组里面去
newArr.push(arr[i]);
}
</script>
6、累加简写
sum += arr[index]; ==> sum = sum + arr[index]
三、函数
1、函数的声明与调用
1.1、函数声明:用来装特定代码的容器 一旦将这个放入函数中, 就可以重复使用它
1.2、顺序:
//函数声明 => 创建函数
function 自定义的函数名 (){}
//函数调用 => 使用函数
函数名()
1.3、特点说明:
// 1.3.1. 函数默认不会主动执行,必须通过函数名() 调用才会执行.
// 1.3.2. 函数一次声明可以多次调用,每一次函数调用函数体里面的代码会重新执行一次.
// 1.3.3. 函数的命名尽量遵守动词或者动词+名词的方式,这样函数的作用一目了然.
// 1.34. 我们曾经使用的 alert(), Number(), console.log() ,push() 这种名字后面跟小括号的本质都是函数的调用
2、函数的传参(先写死一种固定的情况, 后期将这个对应的值提取出来作为参数传递即可)
例:
<script>
function greet(name, content) {
console.log(`${name},${content}`);
}
greet('飞飞', '早上好');
greet('棠哥', '晚上好');
</script>
3、函数的返回值
我们自己定义的函数,如何拥有返回值=>只需要在函数体里面添加上一个return return后面的内容就是函数的返回值
<script>
function test() {
// 函数的代码逻辑 xxxxxx
return 11111;
}
onsole.log(test())
</script>
4、函数内部调用函数 与在外部调用函数一样
例:
<script>
function getMax(a, b) {
return a > b ? a : b;
}
//console.log(getMax(getMax(10, 20), 30));
function getMax2(a, b, c) {
// 先求两个数的最大值
let max = getMax(a, b);
return max > c ? max : c;
}
console.log(getMax2(10, 20, 30));
</script>
5、函数细节补充
5.1、两个相同的函数后面的会覆盖前面的函数
解释:预解析 => 会提前解析函数声明 => 函数可以先调用 在声明;
在真正执行代码之前 函数声明会提前解析, 如果两个函数一样,会导致内存中只有一个函数声明 => 后面的生效
5.2、在Javascript中 实参的个数和形参的个数可以不一致
解释:1. 如果形参过多 会自动填上undefined (了解即可)
2、如果实参过多 那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)
例:
<script>
function getMax() {
let max = arguments[0];
// 遍历数组
for (let i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
// 返回最大值
return max;
}
getMax(10, 20, 30)
getMax(10, 20, 30, 50, 60)
getMax(10, 20, 30, 50, 60, 80, 100)
</script>
6、函数返回值补充
6.1、函数一旦遇到return 就会提前结束 所以一般函数的返回值放到最后==>可以使用return 结束函数
6.2、function check() {if (不合法) {return;} //可以使用return 结束函数
6.3、return 用于函数里面 结束函数 而break 用于循环当中 结束循环
四、作用域
1、作用域: 变量起作用的区域
2、全局作用域就是在全局声明过的变量起作用的区域
3、局部作用域就是在局部声明过的变量起作用的区域
4、块级作用:(if大括号/for大括号/while大括号/function大括号/独立的大括号)
5、注意:局部变量必须是函数里面声明过(let)的变量, 不要认为只要在函数里面的就是局部变量 要看在哪里声明
6、变量的访问原则: 在能够访问到的情况下 先局部 局部没有在找全局
五、匿名函数: 没有名字的函数
1、特点:匿名函数无法直接使用,需要满足一些条件才可以
2、解决:
2.1、函数表达式 => 将匿名函数赋值给一个变量 这个变量就可以理解为函数的名称
例:
1、let a = function () {
console.log('我被调用了');
};
a();
//注:调用 => 函数表达式不可以先使用 在声明
2、// 允许先调用 在声明
test();
// 函数声明
function test() {
console.log('我是函数声明');
}
2.2、自执行 => 将函数伪装成一个表达式 然后自己调用自己
使用场景: 使用形成作用域 保护内部的变量不受外部影响 => 沙箱模式
例:
(function () {
// 函数可以形成一个局部作用域
// fn就可以理解为是一个局部变量 所以只能在当前函数内部调用
function fn() {
console.log('这是我三哥的代码 实现了一个很强大的功能');
}
fn();
})();
六、对象
1、对象: 万物皆对象 自然界的任何实体都可以理解为一个对象
特征:在Js中, 对象就是一组无序的键值对的集合
// 静态特征
// 姓名, 性别, 体重, 年龄, ....
// 动态行为
// 点名, 唱, 跳, rap ...
2、对象本质上就是一个数据集合, 所以使用对象无非就是 增删改查
例:
<script>
let obj = {
name: 'zs',
age: 18,
hair: '乌黑靓丽的秀发',
// 这里的sing 就相当于函数的名称
//称之为方法
sing: function () {
console.log('嘿~~~~');
},
};
//2.1、查 => 对象名.属性名
console.log(obj.name);
//2.2、改语法 => 对象名.属性名 = 新值
obj.hair = '地中海';
//2.3、增语法 => 对象名.新属性名 = 新值
obj.girlFriend = '乔碧萝殿下';
//2.4、删语法 => delete 对象名.属性名
delete obj.girlFriend;
</script>
3、 点语法可以操作对象的属性 [ ]语法也可以
3.1、相同点: 都可以操作对象属性==>对象名.属性名 === 对象名['属性名']
3.2、不同点:点语法无法解析变量,但是[ ]语法可以解析变量 (前提: 中括号里面的内容不能添加引号)
4、遍历对象:将对象里面的数据都访问一遍
问题:对象没有length属性,对象没有类似于数组那样有规律的下标
解决:for(let 变量 in 对象名) {}
例:let obj = {
name: 'zs',
age: 18,
hair: '乌黑靓丽的秀发',
sing: function () {
console.log('嘿~~~~');
},
};
for (let attr in obj) {
// attr 是一个变量 在遍历的过程中 表示当前对象的每一个'键名'
// console.log(attr);
// 这里不能使用点语法 因为attr是一个变量 而点语法是无法解析变量的
// console.log(obj.attr); =>四个undefined
// 这里必须使用中括号语法 而且不能添加引号 这样就可以让attr作为变量去解析
console.log(obj[attr]);
}
5、字面量 推荐使用字面量的形式 => 直观 底层本质上还是通过内置构造函数的形式创建
let obj = {}; === let obj2 = new Object();
let arr = []; === let arr2 = new Array();
6、 Math 是一个数学对象 里面包含着很多关于数学的属性和方法
6.1、Math.PI => 圆周率
6.2、Math.abs(-2); // => 2=>绝对值
6.3、let max = Math.max(10, 20, 50, 60, 18);=>最大值, 参数: 需要比较的数值, 返回值: 参数列表的最大值
6.4、let min = Math.min(10, 20, 50, 60, 18); =>最小值, 参数: 需要比较的数值, 返回值: 参数列表的最小值
6.5、Math.floor() => 向下取整;Math.ceil() => 向上取整;Math.round() => 四舍五入
6.6、Math.random() => 产生一个随机数 => 0 到 1之间的任意随机的小数,可以取到0 但是永远取不到1
例:1、0 - n之间的随机数: Math.floor(Math.random() * (n + 1))
2、随机数组里面的数据: Math.floor(Math.random() * arr.length)
3、m - n之间的随机数: Math.floor(Math.random() * (n - m + 1)) + m
7、日期对象
7.1、如何获取日期对象 => new Date();
7.2、获取日期的指定部分: 年月日 时分秒 => 纯数字 => 在使用字符串拼接成我们想要的任何的格式
例:
<script>
//获取日期对象
let d = new Date();
// 年
let Y = d.getFullYear();
// 月 坑: 月份默认是从0开始的, 所以需要手动加1
let M = d.getMonth() + 1;
// 日
let D = d.getDate();
// 时
let h = d.getHours();
// 分
let m = d.getMinutes();
// 秒
let s = d.getSeconds();
let str =
`${Y}-${addZero(M)}-${addZero(D)}${addZero(h)}:${addZero(m)}:${addZero(s)}`;
//补零操作,检测是否 < 10 如果<10成立, 需要在这个个位数前面添加一个0 否则直接输出
function addZero(n) {
return n < 10 ? '0' + n : n;
}
</script>
8、时间戳: 从1970年1月1号 00:00:00 到现在的毫秒数
获取时间戳 => 直接将时间转换成number类型即可 => let start = +new Date();
未来的时间戳 => let furture = +new Date('2021-05-26 16:26:00'); //得到一个毫秒数