重点！！
image.png
js复习
js阶段的主要内容有：
1.变量的定义和使用
2.循环结构：for forEach map filter
3.分支结构：if...else 三元表达式
4.数组的定义和操作
5.对象的定义和操作
6.函数及函数封装
一：动态生成商品信息
- 以后凡是根据数据生成动态结构，都遵守一个原则： 要动态，先静态
我们需接收用户从键盘输入的四个值，最终生成一个html结构，打印到页面中
1.接收四个值-----定义4个变量 从键盘输入：prompt
2.根据变量生成html结构 ---- 拼接字符串---模板字符串
3.在页面中打印 ---- document.write
// 1.4个变量的定义
let goodsName, goodsPrice, goodsNum, address
// 2.从键盘输入并接收
goodsName = prompt('请输入商品名称')
goodsPrice = prompt('请输入商品价格')
goodsNum = prompt('请输入商品数量')
address = prompt('请输入商品收货地址')
// 3.准备生成网页结构
let htmlStr = `<table>
<thead>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>地址</th>
</thead>
<tbody>
<tr>
<td>${goodsName}</td>
<td>${goodsPrice}</td>
<td>${goodsNum}</td>
<td>${address}</td>
</tr>
</tbody>
</table>`
// 4.将生成的结构输出到页面中
document.write(htmlStr)
二：时间补0案例
- 在js中，转换bool值为false的有： '' "" 0 undefined null NaN
- NaN不能与任意值进行比较，比较的结果都是false
接收用户从键盘输入的一个数字，如果数字小于10，则在前面补0
- 接收用户输入：定义变量 + prompt
- prompt接收的值一定是字符串
- 判断是否是数字，如果不是，则给出提示，如果是则补0 -- if + 先转换再判断
- 在前面补一个字符串0，因为如果在数字前面+0，数字不变
let num = prompt('请输入一个数字')
// 判断当前用户输入的是否是数字--先转换再判断
// 1.能够转换 》》
// 2.不能转换 》》
console.log(+num)
if (!+num) {
alert('你输入的不是一个数字')
} else {
// 如果用户输入的是数字，我要再判断值是否小于10
if (num < 10) {
console.log('0' + num)
} else {
console.log(num)
}
}
三：for-1-100偶数和
- 变量的使用：先声明 ，赋值，使用
有一个变量存储和
1-100：加每一个值，应该是一个循环操作，范围固定为1-100，固定循环次数，优先使用for循环
循环三要素：变量初始值 判断条件 变量的变化
// for-1-100偶数和
let sum = 0
// 要素可以写在其它位置，但是for中的;不能少
for (let i = 1; i <= 100; i++) {
if (i % 2 == 0) {
sum += i
}
}
console.log(sum)
四：ATM
- 需求驱动开发
要根据用户的输入来决定到底重复操作多少次 --- while循环(适合执行不确定次数的循环操作)
判断用户的输入，根据用户输入执行不同的操作 ---- if
建议：
1.先做一次
2.再加循环
3.处理细节
// 定义一个初始金额
let initMoney = 1000
let choice
// 重复让用户进行操作
while (1) {
// 1.用户提示
choice = prompt(`请输入你的选择
1.取款
2.存款
3.查看余额
4.退出`)
// 2.判断用户输入
if (choice == 1) {
let money = +prompt('请输入取款金额')
// 判断取款金额是否小于总金额
if (money < initMoney) {
initMoney -= money
} else {
alert('余额不足')
}
}
else if (choice == 2) {
let money = +prompt('请输入存款金额')
if (money > 0) {
initMoney += money
} else {
alert('输入的存款金额不合理')
}
}
else if (choice == 3) {
alert(initMoney)
}
else if (choice == 4) {
console.log('退出')
break
}
else {
console.log('输入不正确')
}
}
五：打印多行多列小星星
- 需求驱动开发
先打印一行N个星星：for循环
再打印多行 -- for循环
// 打印一行col个星星
let col = +prompt('请输入你一行需要打印的星星的数量')
let row = +prompt('请输入你想打印的星星的行数')
for (let j = 0; j < row; j++) {
for (let i = 0; i < col; i++) {
document.write('⭐')
}
document.write('<br>')
}
六：打印九九乘法表
- 需求驱动开发
- 建议一个复杂的效果：先完成一个简单的功能，再根据效果进行代码的完善
// 打多行
// 第一行： j = 1 i:1
// 第二行： j = 2 i:1，2
// 第三行： j = 3 i:1，2，3
for (let j = 1; j <= 9; j++) {
// 先打印一行
for (let i = 1; i <= j; i++) {
document.write(`<span>${i} * ${j} = ${i * j}</span>`)
}
document.write('<br>')
}
七：数组-求和，最大值和最小值
- 凡是要获取数组的每一个元素，都是循环遍历
- 数组的遍历，在现阶段如果没有特别意外，都是使用for循环
- 函数返回多个值的时候，要将值包装为对象
将代码封装为一个函数
- 函数的声明定义
- 函数的参数传递
- 函数的返回值
获取最大，最小，和：我们需要获取数组的每一个元素，进行相应的操作
// 封装函数，求数组和的和，最大值，最小值
// arr:数组，调用方法需要传入数组
function getValue(arr) {
let sum = 0,
max = arr[0], // 不能直接赋值为0，我们压根不知道数组中是什么值(全部是负数怎么办)
min = arr[0] // 不能直接赋值为0，我们压根不知道数组中是什么值(全部是正数怎么办)
// 循环遍历数组
for (let i = 1; i < arr.length; i++) {
// 求和
sum += arr[i]
// 求最大值：如果遍历的元素大于max,说明max需要被覆盖
if (arr[i] > max) {
max = arr[i]
}
// 求最小值：如果遍历的元素小于min,说明min需要被覆盖
if (arr[i] < min) {
min = arr[i]
}
}
// 方法只是进行操作，而不能对操作结果进行处理
// 如果在函数中使用reutrn直接返回多个值，最终只有最后一个值
//return只能返回一个变量,所以我们一般对多个进行包装，如果没有特别意外，都包装为对象
return { sum, max, min }
// return { 'sum':sum, 'max':max, 'min':min }
}
let result = getValue([12, 3, 2134, 23, 543, 6, 54, 6756])
console.log(result)
八：动态生成柱子
- 要动态，先静态
- 凡是说到动态渲染，必须要准备好 数据 + 静态结构
- 现阶段的动态渲染的实现过程就是：遍历拼接
接收用户的输入数据---多个值，定义数组进行存储
遍历数组，根据数组元素值动态拼接指定的html结构
细节：不要忘记了父容器
// 柱子的数量，柱子的数量对应于需要接收的用户输入的值的数量
let num = 4
// 定义一个数组用于存储用户数据--数组命名：要么单词本身是一个复数或本身表示数组，要么你自己添加s/es
// arr list children items names
let datas = []
// 循环遍历为数组添加元素
for (let i = 0; i < num; i++) {
// push / unshift / 数组[索引] = 值
// datas.push(+prompt())
datas[i] = +prompt(`请输入第${i + 1}个值`)
}
// 实现动态渲染:数据 + 结构 --实现的过程就是 遍历拼接
// 遍历谁：datas
// 拼接什么：
let htmlStr = `<div class="box">`
for (let i = 0; i < datas.length; i++) {
htmlStr += ` <div class="sub" style='height:${datas[i]}px'>
<span>${datas[i]}</span>
<p>第${i + 1}季度</p>
</div>`
}
htmlStr += '</div>'
document.write(htmlStr)
九：猜数字游戏
- 回顾api,阶段总结
- 学会拆分业务中的需求
1.得自动的生成一个1-10 之间的数字
2.添加while循环
让用户输入数字，进行比较
- 如果大了，就提示大了 --继续输入
- 如果小了，就提示小了 --继续输入
- 如果猜 对了，给出提示 -- 不再继续 break
// 1.生成一个1-10之间的随机数字
// Math.random():生成0-1之间的小数，包含0不包含1
let num = Math.ceil(Math.random() * 10)
// 让用户循环--重复输入-重复次数不确定，就用for
for (;;) {
let guess = prompt('请输入你猜测的数字')
// - 如果大了，就提示大了 --继续输入
if (guess > num) {
alert('输入大了，继续！！！')
}
// - 如果小了，就提示小了 --继续输入
else if (guess < num) {
alert('输入小了，继续！！！')
}
// - 如果猜 对了，给出提示 -- 不再继续 break
else {
alert('棒')
break
}
}
十：删除数组中所有的偶数
自己模拟一个数组
遍历数组，实现元素的删除
// 删除数组中所有的偶数
let arr = [12, 456, 234, 4, 34, 6, 8, 10, 878]
// 遍历，删除splice(索引，数量)
for (let i = 0; i < arr.length; i++) {
if (arr[i] % 2 == 0) {
arr.splice(i, 1)
i--
}
}
console.log(arr)
十一：filter方法的使用
- 两个重点使用场景： 查询 删除
// 删除数组中所有的偶数
let arr = [12, 457, 44, 5, 12, 9, 8, 11, 68]
// 删除偶数的本质 是 保留奇数
// filter方法会返回一个新数组
// filter(回调函数)
// filter(function(元素值，索引){})
// let temp = arr.filter(function(v) {
// return v % 2 != 0
// })
// 建议：如果是遍历数据：两个参数名称一般就是value index
// 如果是遍历元素，两个参数的名称一般就是ele index
// 它会从头到尾遍历指定的数组（用那个数组调用这个方法，就会遍历这个数组）
// 每次遍历给回调函数传入当前遍历到的数组元素
// 执行回调函数，如果回调函数的返回结果为true,就将当前遍历到的元素存储到filter内部所创建的数组中
// 最终将内部数组返回
let temp = arr.filter(function(value, index) {
return value % 2 != 0
})
console.log(temp)
十二：数组-forEach-动态拼接html
- 要动态，先静态
- 凡是说到动态渲染，必须准备好 数据和结构
- 动态渲染的实现过程： 遍历 + 拼接
// forEach的作用：单纯的遍历
// 语法：arr.forEach(function(value,index){})
// 从头到尾遍历指定的数组，每次遍历给回调函数传入一个参数，调用回调函数
<!-- 引入数据文件,引入之后，当前页面就可以使用data.js文件中定义的数据了
引入一个文件，相当于在当前页面中也有引入的js的文件的代码 -->
<script src="./data/data.js"></script>
<script>
let str = `<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">`
// 遍历拼接
data.forEach(function(value, index) {
str += `<li>
<img src="${value.src}" alt="" />
<h4>
${value.title}
</h4>
<div class="info">
<span>高级</span> • <span>${value.num}</span>人在学习
</div>
</li>`
})
str += `</ul>
</div>
</div>`
document.write(str)
</script>
十三：1~100中前4个能被7整除的数
一：1~100 >> for循环遍历
二：前4个
- 定义一个数组，每当有数据满足的时候，将值添加到数组，判断数组的长度是否到4，如果到4就break
- 定义一个计数器，每当有数据满足的时候，+1，判断是否到4
三：能被7整除 >> 值 % 7 == 0
// let arr = []
let count = 0
// 1~100中前4个能被7整除的数
for (let i = 1; i <= 100; i++) {
if (i % 7 == 0) {
// arr.push(i)
console.log(i)
count++
if (count == 4) {
break
}
// if(arr.length == 4){
// break
// }
}
}
十四：随机生成16进制的颜色
16进制：0 1 2 3 4 5 6 7 8 9 A B C D E F
16进制颜色的组成：# + 6位16进制的值
需求：
- 随机获取6位16进制的值，组成一个颜色
- 使用一个数组来存储所有的16进制的值
- 随机生成一个合理的索引，通过索引取出一个值
- 我们需要生成6个值，所以需要使用循环，每次循环获取一个值，6次循环获取6个值，拼接在一起生成一个颜色值
实现步骤
- 定义一个数组
- 添加一个for循环，在循环中
- 生成随机数，获取一个颜色值
- 拼接到一个字符串中
要求：将操作封装为一个函数
// 封装一个函数随机生成16进制的颜色，格式为#******
function getColor() {
// 定义16进制的颜色值
let colors = [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'A',
'B',
'C',
'D',
'E',
'F'
]
let str = '#'
// 添加一个循环
for (let i = 0; i < 6; i++) {
// 生成一个随机数
let index = parseInt(Math.random() * colors.length)
// 通过索引获取数组中的某个值，进行拼接
str += colors[index]
}
// 将生成的颜色值返回
return str
}
document.querySelector('p').style.color = getColor()
十五：降序排序
一：随机10个10-110之间的整数存入数组, 并且降序排列
- 随机生成指定范围内的值：
- 随机生成数据存储到数组
- 降序排序
二：实现排序
- 使用循环遍历出数组的每一个元素，进行前后(i > i+1)比较
- 如果大小关系满足需要，就应该交换两个数的值
let nums = []
for (let i = 0; i < 10; i++) {
let num = parseInt(Math.random() * 101) + 10
nums.push(num)
}
console.log(nums)
// 对数组进行排序操作
// 比较多轮
let count = 0
for (let j = 0; j < nums.length - 1; j++) {
// 比较一轮，只能获取一个最大值放到后面
for (let i = 0; i < nums.length - 1 - j; i++) {
count++
if (nums[i] < nums[i + 1]) {
// 交换两个数的值
let temp = nums[i]
nums[i] = nums[i + 1]
nums[i + 1] = temp
}
}
}
console.log(nums)
// 随机10个10-110之间的整数存入数组, 并且降序排列
// 如果不用冒泡（不交换数据位置）
// 方法1分析：遍历数组，就最大值，每次获取最大值后，把最大值添加到新数组，并且，把原数组最大值改为0（因为原数组最小值为10，不冲突），再进行第二轮求最大值，改值的好处，是不会改变原数组的长度，以及每一个元素的下标
// 也可以直接把最大值删除，再进行第二轮
// 方法二：直接循环生成10个随机数，按顺序把他们添加到空数组，添加之前进行判定，
// 判定规则：遍历数组，当遍历到比这个数还要小的数时，就把这个数放在它之前，否则放到最后，每次往新数组添加新数时，结束内循环
let arr = [];
for (let i = 0; i < 10; i++) {
let num = Math.floor(Math.random() * 101 + 10);
console.log(num);
for (let j = 0; ; j++) {
if (num > arr[j]) {
arr.splice(j, 0, num);
break;
} else if (j == arr.length) {
arr.push(num);
break;
}
}
}
console.log(arr);
// 从“按身高排队”去看“数组排序”
// 假设：全班80个学生，学号从1-80，但是学号不代表身高
// 场景：现在要全班同学按照身高，从高到低排成一队，但是所有人都站在原地，没人动，老师生气，下达命令：
// “按照学号的顺序，一个个站过去！1号，你先！”
// 1号同学站了过去，接着是2号，
// 2号过去，发现自己比1号高，就自觉站到1号的前面。
// 轮到3号，3号发现自己比2号矮，但是又比1号高，于是，站到1号和2号中间
// 目前他们的顺序是：2、3、1
// 4号发现自己比2号矮，就去跟3号比，没想到比3号也矮，最后也比1号矮，于是站到了队伍最后（2、3、1、4）
// 5号先跟2号比，发现自己比2号高，自然站到最前面（5，2，3，1，4）
十六：统计字符出现次数
- 我们给用户什么样的结果比较合适？{'a':2,'b':3,'c':1,'e':3}
- 我们发现这个案例的实际需求就是：根据处理生成对象，添加对象的键值
统计字符串 'abcoefoxyozzopp' 中每个字符出现的次数
1.遍历字符串，获取里面的每一个字符 --- 字符串的本质是字符数组
2.根据遍历到字符
- 如果这个字符所对应的键在对象中存在，就将数量+1
- 如果字符不存在，就添加一个新的键值，键就是这个字符，值就是1
// 统计字符串 'abcoefoxyozzopp' 中每个字符出现的次数(字符串可以随意设置啊)
// 将功能封装为函数
let str = 'aaabadfasdfasjdfjashdfkjashdflkj'
// {'a':2,'b':3,'c':1,'e':3}
let obj = {}
for (let i = 0; i < str.length; i++) {
// str[i]
let s = str[i] // a
// 判断当前对象是否有这个值所对应的键
if (obj[s]) {
obj[s] = obj[s] + 1
} else {
obj[s] = 1
}
}
console.log(obj)
十七:驼峰命名转换
一：转换字符串大小写的基本api
- 第一个单词小写：toLowerCase()
- 后面的每一个单词的首字母大写，其它字符小写：toUpperCase()
二：获取需要进行转换的单词
- 每个单词是以-分隔：字符串.split('分隔符')：返回一个数组
三：遍历数组，获取每一个字符串单词，对单词进行如下操作：
- 第一个单词转换为小写
- 后面的单词
- 先取出第一个字符，转换为大写:
- 字符串.substr(起始索引，长度) ：获取从起始索引开始指定长度的字符
- 字符串.substr(起始索引) :获取从起始索引位置开始的所有字符
- 取出后面的所有字符，转换为小写
- 拼接为一个整体
// 封装一个函数，实现功能：往函数传参为该格式字符串：'get-elements-by-class-name'，得到驼峰命名法的返回值为‘getElementsByClassName’
function exchange(str) {
let result = ''
// 进行字符串的分隔，使用split方法，分割之后返回一个数组
let arr = str.split('-') // ['GET', 'elemenTs', 'bY', 'cLAss', 'nAMe']
// 遍历数组，去处理其中的每一个单词
arr.forEach(function(value,index) {
if(index == 0){
// 第一个单词转换为小写
result += value.toLowerCase()
}else{
// 后面的单词：取出第一个字符转大写，其它的字符转小写，进行拼接
result += value[0].toUpperCase() + value.substr(1).toLowerCase()
}
})
return result
}
console.log(exchange('GET-elemenTs-bY-cLAss-nAMe'))
十八：参数字符串转换为对象
- 这种参数格式的转换是后期业务处理的一个环节
获取查询参数部分：以?做为分割---split('?')
再将字符串使用&符号进行分割---split('&')
遍历数组，获取每一个值，每一个值应该对着一组 键值对
- 对遍历到的值再次进行分割，根据=分割
- 获取数据的第0个元素就是对象所需要添加的key,第一个元素就是key所对应的值
function exchange(str) {
let obj = {}
// 浏览器地址栏中的地址称为 url
// 如果在url地址进行参数的拼接，那么拼接的参数称为 查询字符串
// 这种参数有一个标识： ？，将 ？及?后面的统一称为查询参数
// 有一个url(字符串)如下: http://www.heima.com?key0=haha&key1=hello&key2=xixi ; 要求处理此url, 得到一个如下格式的对象: let obj = { key0:’haha’, key1:’hello’, key2:’xixi’ }
let search = str.split('?')[1] // key0=haha&key1=hello&key2=xixi
// 将字符串再次进行分割
let arr = search.split('&') // ['key0=haha', 'key1=hello', 'key2=xixi']
// 遍历
arr.forEach(function(value) {
// console.log(value) // key0=haha
let temp = value.split('=') // ['key0', 'haha']
let k = temp[0],
v = temp[1]
// 第一个元素(索引0)就是对象的键，第二个元素(索引1)就是对象的值
obj[k] = v // {key0:'haha'}
// obj[temp[0]] = temp[1]
})
return obj
}
十九：对象转换为参数字符串
- {id:1000,bookname:'你好呀',author:'张三',publisher:'黑马出版社'} 》》id=1000&bookname=你好呀
一：遍历对象 -- for ...in
- key就是对象的键
- obj[key]就是对象的键所对应的值
二：拼接字符串
- 要拼接&符号
- 记得将多余的&清除
// {id:1000,bookname:'你好呀'} 》》id=1000&bookname=你好呀
function parseObjToString(obj) {
let str = ''
// 1.遍历对象
// key:对象的键
for (let key in obj) {
console.log(key, obj[key])
str += `&${key}=${obj[key]}`
}
// console.log(str.substr(0, str.length - 1))
// console.log(str.substr(1))
return str.substr(1)
}
二十：回调函数
// 不止一个用户调用这个方法获取这个数据实现渲染
// 有一个模拟数据：只有这个方法可以获取到数据
// 1.方法并不能决定数据如何渲染
// callback:回调函数
function getData(callback) {
let arr = [123, 12, 3, 234, 34, 54, 64, 6]
callback(arr)
}
// 0-----------------------------------
// 实现动态渲染
function render(arr) {
let str = ''
arr.forEach(function(value) {
str += `<li>${value}</li>`
})
document.querySelector('ul').innerHTML = str
}
// 调用一个函数A，传入一个函数B做为参数，函数B就称为回调函数
// 1.回调函数是我们准备的
// 2.回调函数不是我们自己调用，而是在函数A中调用
function render2(arr) {
console.log(arr)
let str = ''
arr.forEach(function(value) {
str += `<p>${value}</p>`
})
document.querySelector('div').innerHTML = str
}
// 现在我们需要调用这个方法，实现数据的动态渲染
// 我调用这个方法获取数据，我当前清楚数据应该如何处理 --- 我有数据吗？
// 当我调用方法获取数据的时候，我将数据的处理方式传递给函数
getData(render)
