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 || 0
           y = y || 0
           console.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'  === k
      console.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])