十一：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)
