循环练习
1、打印100以内7的倍数
// 需要验证的是1-100之间的数字 循环计数器正好可以表示
// i初始值设置为1 正好可以表示出需要验证的数字
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
console.log(i)
}
}
2、计算1～100之间所有奇数的和
// 计算1～100之间所有奇数的和 先找出 每一个奇数 然后求和运算
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 != 0) {
sum+=i;
}
}
3、入职薪水10K，每年涨幅5%，第50年工资多少
// 入职薪水10K，每年涨幅5%，第50年工资多少
var money = 10000;
for (var i = 2; i <= 50; i++) {
money = money * 1.05;
console.log('第'+i+'年的薪资是：'+money)
}
4、计算1000～2000之间的闰年（每行四个，打印到页面）
// 创建一个计数器 用于记录是第几个闰年
var index = 0;
// 计算1000～2000之间的闰年（每行四个，打印到页面）
for (var year = 1000; year <= 2000; year++) {
if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
document.write(year +' ')
index++;//if条件满足 说明找到了一个闰年 计数器需要增加
if(index % 4 == 0){
// 每四个
document.write('<br/>')
}
}
}
5、计算水仙花数
for (var num = 100; num <= 999; num++) {
// 提取出数字中每一位数字
// 百位数字
var b = parseInt(num / 100);
// 提取十位数字
var s = parseInt((num - b * 100) / 10);
// 提取个位数字
var g = (num - b * 100) % 10;
// b**次方数
if (num == b ** 3 + s ** 3 + g ** 3) {
console.log(num + '是水仙花数')
}
}
6、计算素数
// 计算素数
var num = 9;
// 素数是除了自己跟1之外的任何一个数都无法除尽
// 需要将当前这个数从2开始 一路除以到4 过程中 有一个数可以被除尽证明不是素数 否则就是素数
// 假设现在的这个数是一个素数 使用true表示
// var flag = true;
// for (var i = 2; i < num; i++) {
// // 在循环的过程中if判断会执行很多次
// if (num % i == 0) {
// flag = false;
// }
// }
// // 循环结束 flag为false 说明 不是素数 如果 flag还是true 就说明前面没有一次是可以除尽
// console.log(flag ? '素数' : '不是素数')
// js中两个关键字 break continue;
// for(var i =0;i<10;i++){
// if(i==4){
// break;
// }
// console.log(i);
// }
// for (var i = 0; i < 10; i++) {
// if (i == 4) {
// continue;
// }
// console.log(i);
// }
// console.log('over')
// break整个循环退出 不管后面还有多少次循环没有执行
// continue是跳出当前这一次循环，后面还有循环需要执行的继续
var flag = true;
for (var i = 2; i < num; i++) {
// 在循环的过程中if判断会执行很多次
if (num % i == 0) {
flag = false;
break;
}
console.log('循环执行了')
}
7、九九剩法表
// 输出9*9table标签
// 1、输出1个tr中存在9个td单元格
// var html = '<table><tr>';
// for (var i = 1; i <= 9; i++) {
// html += '<td></td>';
// }
// html += '</tr></table>';
// document.write(html);
// 2、9个tr 每个tr中9个td
// 循环嵌套 外层循环执行一次 里层循环执行n次
// 当j = 1的时候 里层循环中i 会从1执行到9 j = 1 i = 1循环体代码 i=2循环体代码
// 当j = 1的时候 i需要 1
// 当j = 2的时候 i需要 1 2
var html = '<table border="1">';
for (var j = 1; j <= 9; j++) {
html += '<tr>'
for (var i = 1; i <= j; i++) {
html += '<td>' + i + ' * ' + j + ' = ' + (i * j) + '</td>';
}
html += '</tr>';
}
html += '</table>';
document.write(html);
8、填数
var html = '<table>';
for (var i = 1; i <= 10; i++) {
html += '<tr>'
for (var j = 1; j <= 10; j++) {
//(i-1)*10+j
// i = 1 表示第一行 需要设置 1-10
// j = 1 值为1
// j = 2 值为2
// 。。。
// i = 2 表示第二行 需要设置 11-20
// j = 1 值为11
// j = 2 值为12
// 。。。
html += '<td>' + ((i - 1) * 10 + j) + '</td>'
}
html += '</tr>'
}
html += '<table>'
document.write(html)
初识数组
数组的作用
js中基本数据类型只能存储一个值 存在弊端
例如现在需要编写程序计算出所有同学的平均成绩，所以需要记录每一个同学额分数。可以每一个同学使用一个变量名称表示，但是不方便。如果人数发生改变 需要修改代码
所以需要使用数组结构。通过使用数组 可以存储多份数据
数组的基本使用
1、创建数组
// 1、创建数组
// 语法 var 变量名称 = [元素1,元素2,....]; 在创建数组中使用中括号叫做字面量 具体存储的每一个值叫做元素 元素没有数据类型的约束，可以是任何一种数据类型 但是一般所有元素都是相同的数据类型
// 如果数组中没有元素 叫做空数组 但是空数组转换为布尔值是真
// var score = [];
var score = [80, 67, 90, 53];
console.log(score)
2、控制台查看的结果
3、访问数组元素
// 2、访问数组中元素
// 语法：变量名称[下标] 下标千万不要越界
console.log(score[6]); // undefined
// 在获取数据是 将下标保存到其他变量中通过 数组[下标变量]
var index = 3;
console.log(score[index]);
4、数组长度
// 3、数组长度
console.log(score.length);//这个是对象访问属性的语法
// score[length] 这个表示取出score数组中length变量保存的值的元素
// 获取数组长度
// console.log(score['length'])
// 规律 数组最大下标=数组长度-1
console.log(score[score.length-1]);//获取最后一个元素值
5、数组修改元素/追加元素
var arr = ['a','b']
// 修改语法 数组变量[下标]=值 如果存在下标就修改不存在下标就添加
arr[1] = 'c'
// 追加一个元素
arr[arr.length] = 'cc'
console.log(arr)
6、数组遍历
// 5、数组遍历(就是将数组中每一个元素取出使用 循环)
var sum = 0;
for (var i = 0; i < score.length; i++) {
// 每次循环 i表示 0 1 2 ... 正好对应着数组的下标
sum += score[i]
}
console.log(sum / score.length)
变量内存分布
内存地址解释
计算机中所有的功能都是CPU在进行计算，但是CPU没有存储数据的能力。所有运算都是由内存条中存储的数据提供。
为了更好的使用内存管理数据，操作系统将内存划分为多个区域。主要关心的是堆区与栈区。堆区与栈区空间依旧很大。所为了方便去管理，每个区域都继续进行一个更小的划分，每一个小区域都分配一个编号，编号就叫做内存地址。实际使用 可以使用十六进制的数
堆区：相对空间比较大 相对效率要低
栈区：相对空间小 相对效率要高
基本数据类型
1、示例代码
//先创建i变量(在栈区开辟一个空间) 赋值时将变量的值存储起来
var i = 10;
// 先创建j变量 在栈区开辟一个空间 当执行j=i(赋值语句 永远会将变量在栈区存储的值进行赋值) 将i变量在栈区存储的值拷贝一份 存储到j变量的栈区
var j = i;
// i=20是一个赋值语句 将i变量在栈区存储的值从10修改为20
i = 20;
// 取出j变量栈区的值 10
console.log(j);//10
2、内存分布图
引用数据类型
1、示例代码
// var arrr 先在栈区开辟一个空间,当执行arr=[1,2,3] 将数据保存到堆区 栈区中记录数据在堆区的位置
var arr = [1,2,3];
// var newArr 在栈区开辟一个空间 当执行newArr = arr 将arr栈区存储的值赋值给newArr 导致newArr与arr变量对应堆区的同一份数据
var newArr = arr;
// 根据arr在栈区记录的地址到堆区中找到第一个值修改为100
// arr[0] = 100;
// console.log(newArr)
// 此时的修改是直接赋值 会创建新的堆区空间记录数据 最后将arr在栈区的值存储为新的空间地址 导致 arr与newArr相互不影响
arr = [3,4,5];
console.log(newArr)
2、内存图
结论：
1、变量直接(变量=值)赋值永远是修改栈区存储的内容
2、基本类型直接赋值之后 其中一个变量修改不影响另外一个变量
3、引用类型直接赋值后。如果顺着内存修改数据(arr[0]=100)两个变量相互印象,如果是直接给其中一个变量赋值导致与；另外一个变量不共享数据 最终两个变量独立相互不影响
函数
函数的作用
目前写的代码是不能复用的 如果需要实现一模一样的功能需要将代码复制一份，导致代码质量不高 并且不方便后期的维护
所以可以使用函数解决这个问题。函数的特点就是一次封装 多次调用
函数的定义与调用
1、语法
1、创建语法
声明式函数：function 函数名称([形参列表]){
函数体代码
//可选的return语句
}
赋值式函数：var 函数名称 = function([形参列表]){
函数体代码
//可选的return语句
}
2、调用语法 函数名称([实参列表])
2、使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 创建函数 函数创建不会将内部的代码执行
function fn(){
console.log('100行代码执行')
}
// 声明式函数
var fn2 = function(){
console.log('声明式函数')
}
// 调用函数
fn();
fn();
fn();
fn2();
fn2();
</script>
</body>
</html>
声明式与赋值式的区别
1、同一个script标签的情况
<!-- 函数创建与调用都在一个script标签中 -->
<script>
// 1、在同一个script标签中 声明式函数 任何位置都可以调用
// 2、在同一个script标签中 赋值式的函数只能在函数之后调用
fn();
function fn(){
console.log('声明式函数');
}
fn();
// fn3 is not defined 说明fn3不存在
// fn3();
// fn2 is not a function 说明fn2存在 但是只是不是一个函数而已
fn2();
var fn2 = function(){
console.log('提莫')
}
fn2()
</script>
2、不同的script标签
<!-- 2、不同的script标签中 -->
<script>
// fn3();
// fn4();
</script>
<script>
var fn3 = function(){
console.log('盖伦');
}
function fn4(){
console.log('亚索');
}
</script>
结论
1、声明式函数 在同一个script标签 任何位置都可以使用 但是在不同的script标签中只能在script标签后才可以调用文章来源：https://www.toymoban.com/news/detail-747372.html
2、赋值式函数 不论什么情况 永远只能在函数之后调用文章来源地址https://www.toymoban.com/news/detail-747372.html
到了这里，关于day3-函数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
