js基础复习
打印多行多列小星星
- 凡是看到多行多列这样的需求，先 打印出一行(一行有多列) -- for循环
- 再打印出多行：for循环
// 打印出多行
for (let j = 0; j < 5; j++) {
// 先打印出一行中的多个心心
for (let i = 0; i < 5; i++) {
document.write('❤️')
}
// 换行
document.write('<br>')
}
数组-求和，最大值和最小值
- 定义函数，实现业务处理，并返回处理结果
- 求和：获取数组中的每一个数据 --循环--for
- 最大值，最小值： 判断 -- if
- 返回三个值：包装为对象
// arr:数组类型，由用户进行传递
function getResults(arr) {
// 变量在先声明赋值再使用
let sum = 0,
max = arr[0],
min = arr[0]
// 遍历数组，获取每一个值
for (let i = 0; i < arr.length; i++) {
// 求和
sum += arr[i]
// 求最大值
if (max < arr[i]) {
max = arr[i]
}
// 求最小值
if (min > arr[i]) {
min = arr[i]
}
}
// 返回处理结果
// return { 'sum': sum, 'max': max, 'min': min }
// es6规定：如果对象的键和值同名，可以只写一个，代表键值同名
return { sum, max, min }
}
// 调用方法接收返回值
let results = getResults([12, 3, 2445, 6, 47, 5867, 8, 679])
console.log(results)
根据数据生成柱状图
-
需求
- 接收用户输入的四个值
- 根据数据生成柱状图
-
步骤
-
要动态先静态
-
动态结构的生成--遍历拼接
- 接收用户数据，并存储到数组 -- 定义数组 push方法追加数据
- 遍历数组，拼接生成柱状图
-
// 定义一个数组用于存储用户输入的数据
let datas = []
for (let i = 0; i < 4; i++) {
datas.push(+prompt(`请输入第${i + 1}季度的数据`))
}
// 动态渲染-遍历拼接
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)
删除数组中所有的偶数-filter方法的使用
以后不要直接使用索引来删除数组--确保索引是正确的索引
// 数据有四种操作：增加，删除，修改，查询
// filter:在学习后台接口之前，本地数据的 查询和删除 都是filter的菜
let arr = [12, 3, 234, 23, 53546, 7, 58, 67, 899, 78]
let temp = arr.filter(function(value, index) {
// 添加过滤条件
return value % 2 !== 0
})
console.log(temp)
// 数组.filter( 回调函数(value,index){ return 过滤条件} )
// 1.它会 从头到尾 遍历指定的数组
// 2.每次会将遍历到的数据及索引传递给回调函数
// 3.它会执行回调函数，如果回调函数的返回结果为true,就将当前数据存储到内部数组中
// 4.最终将内部数组返回
使用forEach实现渲染
// 使用forEach实现数组的遍历
// 如果是遍历数据，那么参数名称一般就是 value index
// 如果是遍历元素伪数组，那么参数名称一般就是 element index
data.forEach(function(value, index) {
htmlStr += `<li>
<img src="${value.src}" alt="" />
<h4>
${value.title}
</h4>
<div class="info">
<span>高级</span> • <span>${value.num}</span>人在学习
</div>
</li>`
})
1~100中前4个能被7整除的数
-
1- 100 的数： for 遍历
-
能被7整除： if判断： 数 % 7 == 0
-
前4个：
- 每次获取到满足条件的数，就将标识值 + 1 -- 自己定义一个标识
- 将所有的数获取到，再取前4个,也可以判断数组的长度是否到4 -- 自定义一个数组
let arr = [] // 满足条件的数的集合--数组
// 1~100中前4个能被7整除的数
for (let i = 1; i <= 100; i++) {
// 能被7整除
if (i % 7 == 0) {
// 满足条件，让count++
arr.push(i)
// 判断是否有4个了，如果有4个了，那中止循环
if (arr.length == 4) {
break
}
}
}
console.log(arr)
随机生成16进制的颜色
-
分析业务
- 随机： Math.random() :生成0-1之间的随机数
- 16进制：0、1、2、3、4、5、6、7、8、9 、A、B、C、D、E、F
- 颜色：# + 6位16进制值
-
步骤
- 为了让随机数和颜色值产生对应关系，将16进制的颜色值存储到数组中，那么随机数就是索引下标
- 6位颜色值需要我们添加循环，进行拼接
function getColor() {
let colors = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']
let index // 随机生成的索引值，这个索引对应着一个颜色值
let str = '#' // 颜色值
// 添加一个循环
for (let i = 0; i < 6; i++) {
// 随机生成一个索引
index = parseInt(Math.random() * colors.length)
// 进行颜色的拼接
str += colors[index]
}
return str
}
setInterval(function() {
// 获取p元素，并且为p元素设置样式
document.querySelector('p').style.color = getColor()
}, 100)
驼峰命名法
封装一个函数，实现功能：往函数传参为该格式字符串：'gEt-elemEnts-by-class-name'，得到驼峰命名法的返回值为‘getElementsByClassName’
- 第一个单词转小写
- 后续每个单词的首字母转大写，其它的字符转小写
步骤
-
先获取每个单词，每个单词以-分隔：split('分隔符') 》》数组
-
遍历数组，获取每一个单词
-
第一个单词，转小写 >> toLowerCase()
-
后续的单词：
-
首字符转大写
-
获取首字母
- 字符串[0]
- 字符串.substring(0,1) >> substring(起始索引，结束索引) | substr(起始索引，长度)
-
转大写 >> toUpperCase()
-
-
其它字符转小写
- 获取除首字母之外的其它字符：字符串.substring(1)
- 转小写 >> toLowerCase()
-
拼接
- join('指定连接符')
-
-
-
返回结果
// 封装一个函数，实现功能：往函数传参为该格式字符串：'get-elements-by-class-name'，得到驼峰命名法的返回值为‘getElementsByClassName’
function camelName(str) {
// 1.将字符串拆分为数组
let arr = str.split('-')
console.log(arr) // ['get', 'elements', 'by', 'class', 'name']
// 2.遍历数组，获取每个单词
arr.forEach(function(value, index) {
// 2.1 处理第一个单词：index == 0
if (index == 0) {
// 第一个单词转小写
arr[index] = value.toLowerCase()
} else {
// 2.2 后续单词：首字符转大写 + 其它字符转小写
arr[index] =
value[0].toUpperCase() + value.substring(1).toLowerCase()
}
})
// 3. 返回拼接的结果
return arr.join('')
}
let result = camelName('GEt-elEMEnts-by-class-name')
console.log(result)
数组：
push():在数组的最后追加成员
splice(索引，长度)：删除数组成员
join('连接符')：将数组的每一个成员以指定的字符进行连接
unshift:在数组的最前面插入成员
字符串
split('分隔符')：将字符串以指定字符进行分隔，返回数组
toUpperCase():转大写
toLowerCase():转小写
substr(起始索引，长度)：截取从起始索引开始的指定长度的字符串，如果没有指定第二个参数，则从起始索引一直截取到最后
substring(起始索引，结束索引)：截取字符串，从起始索引开始到结束索引之前的一个字符串结束，如果没有指定第二个参数，则从起始索引一直截取到最后
参数字符串转对象
有一个url(字符串)如下: www.heima.com?key0=haha&key1=hello&key2=xixi ; 要求处理此url, 得到一个如下格式的对象: let obj = { key0:’haha’, key1:’hello’, key2:’xixi’ }
获取 key0=haha&key1=hello&key2=xixi ： split('?')[1]
将参数部分再以&符号进行分隔：['key0=haha', 'key1=hello', 'key2=xixi']
遍历数组，对每一组键值进行处理
- 再以=进行分隔，获取具体的键和值
- 为对象添加属性值
// 有一个url(字符串)如下: http://www.heima.com?key0=haha&key1=hello&key2=xixi; 要求处理此url, 得到一个如下格式的对象: let obj = { key0:’haha’, key1:’hello’, key2:’xixi’ }
let obj = {}
let str = 'http://www.heima.com?key0=haha&key1=hello&key2=xixi'
console.log(str)
// 获取参数部分，？后面的就是参数部分，可以以split进行分隔
let params = str.split('?')[1] // key0=haha&key1=hello&key2=xixi
// console.log(params)
// 将参数部分再以&符号进行分隔，也是使用split方法，获取的还是一个数组
let arr = params.split('&') // ['key0=haha', 'key1=hello', 'key2=xixi']
// console.log(arr)
// 遍历数组
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i]) // key0=haha
// console.log(arr[i].split('='))
let subArr = arr[i].split('=') // ['key0','haha']
// let key = subArr[0]
// 为对象添加键值对
// 由于键是一个变量所以只能使用[]方式进行操作
// 如果key不存在，就是添加
obj[subArr[0]] = subArr[1]
// console.log(obj)
}
console.log(obj)
对象转参数字符串
有一个对象如{name:'jack',age:20},转换为name=jack&age=20
- 获取每一组键值对 -- 遍历：for ... in
- 拼接，拼接为key=value这种格式
- 注意&符号的拼接
// 有一个对象如{name:'jack',age:20},转换为name=jack&age=20
let obj = { name: 'jack', age: 20 }
// let str = ''
let arr = []
for (let key in obj) {
console.log(key, obj[key])
// str += `${key}=${obj[key]}&`
arr.push(`${key}=${obj[key]}`)
}
// console.log(str.substr(0, str.length - 1))
console.log(arr.join('&'))
\
