JS基础知识(下)
案例：渲染柱形图
CSS部分
<style>* {margin: 0;padding: 0;}.box {display: flex;width: 700px;height: 300px;border-left: 1px solid pink;border-bottom: 1px solid pink;margin: 50px auto;justify-content: space-around;align-items: flex-end;text-align: center;}.box>div {display: flex;width: 50px;background-color: pink;flex-direction: column;justify-content: space-between;}.box div span {margin-top: -20px;}.box div h4 {margin-bottom: -35px;width: 70px;margin-left: -10px;}</style>js部分
<script>let num1 = +prompt('请输入第一季度营业额')let num2 = +prompt('请输入第二季度营业额')let num3 = +prompt('请输入第三季度营业额')let num4 = +prompt('请输入第四季度营业额')document.write(`<div class="box"><div style="height:${num1}px;"><span>${num1}</span><h4>第1季度</h4></div><div style="height:${num2}px;"><span>${num2}</span><h4>第2季度</h4></div><div style="height:${num3}px;"><span>${num3}</span><h4>第3季度</h4></div><div style="height:${num4}px;"><span>${num4}</span><h4>第4季度</h4></div></div>`)</script>改进
<script>let arr = []for (let i = 1; i <= 4; i++) {arr.push(prompt(`请输入第${i}季度营业额`))}//盒子开头document.write(`<div class="box">`)//盒子中间 利用循环的形式for (let i = 0; i < arr.length; i++) {document.write(`<div style="height:${arr[i]}px;"><span>${arr[i]}</span><h4>第${i + 1}季度</h4></div> `)}//盒子结尾document.write(`</div>`)</script>
案例叮嘱：
1.注意使用循环简化代码结构
2.学习这种渲染顺序，先渲染盒子开头，再渲染盒子中间，最后渲染盒子结尾
3.此时数组中存放的是字符串但没有关系，本身数据后面要跟px，就相当于字符串拼接
常用代码及其相关知识点
逻辑中断
function getSum(x, y) {x = x || 0y = y || 0console.log(x + y)
}逻辑运算符里的短路
短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
原因：通过左边能得到整个式子的结果，因此没必要再判断右边
运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值
注意：当 && 连接的两侧都为真时，则返回最后一个真值
当 || 连接的两侧都为假时，则返回最后一个假值
转换为Boolean型
显式转换：' '、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true
隐式转换：
1.有字符串的加法 “” + 1 ，结果是 “1”
2.减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串 "" 转换为 0
3.null 经过数字转换之后会变为 0
4.undefined 经过数字转换之后会变为 NaN
Null ==undefined
函数
参数默认值：
如果一个变量不给值，默认是undefined。如果做用户不输入实参，则出现 undefined + undefined 结果是NaN。我们可以改进下，用户不输入实参，可以给形参默认值，可以默认为 0, 这样程序更严谨
说明：这个默认值只会在缺少实参参数传递时 才会被执行，所以有参数会优先执行传递过来的实参, 否则默认为undefined
函数表达式
将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式
函数表达式和具名函数的不同
1. 具名函数的调用可以写到任何位置
2. 函数表达式，必须先声明函数表达式，后调用
立即执行函数
场景介绍: 避免全局变量之间的污染
注意： 多个立即执行函数要用 ; 隔开，要不然会报错
对象
查的另外一种写法
对于多词属性或属性名中存在-等特殊字符的情况，点操作就不能用了，采取： 对象['属性'] 方式
let obj = {'goods-name': '小米10青春版',num: '100012816024',weight: '0.55kg',address: '中国大陆'}
console.log(obj['goods-name'])遍历
k是获得对象的属性名，对象名[k]是获得属性值
for (let k in obj) {console.log(k) // 属性名 但是是字符串 'uname' 'age'// console.log(obj.uname)// console.log(obj['uname']) 'uname' === kconsole.log(obj[k]) // 输出属性值 obj[k]
}内置对象之随机函数
//生成N-M之间的随机数
Math.floor(Math.random() * (M - N + 1)) + N
//随机抽取数组中元素值
let random = Math.floor(Math.random() * arr.length)
console.log(arr[random])