Js基础

Gigabyte
246 阅读3分钟 
我们是做前端的，代码一定要调好看的美美美

js引号是认为就近匹配的
可以转义让他俩在一起

// 外单内双  外双内单
        console.log('我是"pink德华"')
        console.log("我是'pink德华'")
console.log('我是\'pink德华\'')

隐试转换数字类型
image.png
过度系统内部的隐试转换是不严谨的，为了避免带来问题，显试转换

    <style>
        div {
            width: 100px;
        }
    </style>
</head>

<body>
    <script>
        // let num = '10'  
        // Number(数据)
        console.log(Number('10.01'))
        // 转换为数字型，只保留整数，没有四舍五入
        console.log(parseInt('10'))
        console.log(parseInt('10.111'))
        console.log(parseInt('10.999px'))
        // 转换为数字型，会保留小数
        console.log(parseFloat('10.999'))

        // 区别：
        // 1.Number() 只能放数字类型的字符，不能放abc这样的
        // 否则返回的是 NaN   not A number
        console.log(Number('10.01abc'))
        // parseFloat 经常用于过滤px单位
        // console.log(parseFloat('10.01abc'))
        console.log(parseFloat('100px'))
        // console.log(parseFloat('px100px'))

    </script>
</body>

</html>

转换成字符串、区别使用方法不一样，一个是只能放大括号里去，一个只能变量再转，括号放什么呢

</head>

<body>
    <script>
        console.log(String(10))
        let age = 10
        console.log(age.toString())
        // 括号里面如果是2 转换为 二进制
        console.log(age.toString(2))
    </script>
</body>

</html>

模板字符串反引号要注意

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      margin: 0 auto;
      text-align: center;
      border-collapse: collapse;
    }

    table th,
    td {
      border: 1px solid #000;
      padding: 15px;

    }

    table caption {
      margin: 15px 0;
    }
  </style>
</head>

<body>

  <script>
    // 1. 输入 price num  address 三个变量
    let price = +prompt('请输入商品价格:')
    let num = +prompt('请输入购买的数量:')
    let address = prompt('请输入收货的地址:')
    let total = price * num
    // 2. 渲染表格 填充数据
    document.write(`
      <table>
      <caption>
        <h2>订单确认</h2>
      </caption>
      <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>总价</th>
        <th>收货地址</th>
      </tr>
      <tr>
        <td>小米手机青春PLUS</td>
        <td>${price}元</td>
        <td>${num}</td>
        <td>${total}元</td>
        <td>${address}</td>
      </tr>
    </table>
    `)
  </script>
</body>

</html>

第二天

一元运算符，后自增运算，前置先自增：1+3+3=7

    <script>
        let i = 1
        console.log(i++ + ++i + i)
    </script>
</body>

</html>

逻辑运算符为程序思考准备，难点~逻辑中断短路，&&一假则假，||一真则真

image.png

 <script>
        // 逻辑与 一假则假
        // console.log(true && true)
        // console.log(false && true)
        // 逻辑或  一真则真
        // console.log(false || true)
        // console.log(false || false)
        // 逻辑非  取反
        // console.log(!true)
        // console.log(!false)

        // 有5个值是当 false 来看的   其余是真的
        //  false   数字0   ''  undefined   null   


        // function fun(x, y) {
        //     x = x || 0    //0
        //     y = y || 0    //0

        //     x + y
        // }
        // fun()


    </script>
</body>

</html>

如果输入数字保证程序的完整性，变得优雅

    <script>
        // let i = 1
        // i = i + 5
        // console.log(i)




        let num = prompt('请输入一个数')
        // console.log(num)  控制台是空子字符串 '' 当假看
        num = num || 0
        // console.log(num)
        console.log(num % 4 === 0 && num % 100 !== 0)


        num++


        num + 1
    </script>
</body>

</html>

运算符优先级

image.png pink老师想破脑袋想出来的，目的是折磨你们，不允许出面试题搞不定~

image.png 语句：表达式 分支：到底选哪一个多选一的过程，让程序具备选择性
循环：让代码可以重复去执行，遍历数组依次循环取出来
所有的东西都会变成布尔值因为只有真的才会被执行

image.png

Switch只能等值判断

</head>

<body>
    <script>
        // 1. 用户输入数字   还有一次 运算符
        let num1 = +prompt('请您输入第一个数:')
        let num2 = +prompt('请您输入第二个数:')
        let sp = prompt('请您输入+ - * / 运算')
        // 2. 根据不同的运算符计算不同的结果 switch
        switch (sp) {
            case '+':
                alert(`您选择的是加法，结果是: ${num1 + num2}`)
                break
            case '-':
                alert(`您选择的是减法，结果是: ${num1 - num2}`)
                break
            case '*':
                alert(`您选择的是乘法，结果是: ${num1 * num2}`)
                break
            case '/':
                alert(`您选择的是除法，结果是: ${num1 / num2}`)
                break
            default:
                alert(`你输了啥？ 请输入+ - * / `)
        }
    </script>
</body>

</html>

第三天

while循环的三要素，变量的起始值，终止条件，变量的变化

<script>
        while (true) {
            let str = prompt('如果是我DJ，你还爱我吗?')
            if (str === '爱') {
                alert('我也爱你啊~~')
                break
            }
        }
    </script>
</body>

</html>

数组只要是数据类型啥都能装

刺激的来了,冒泡排序非正常人智商115以上

<script>
        let arr = [2, 6, 4, 3, 5, 1]
        // 1. 外层循环控制  趟数   循环 4次   arr.length - 1
        for (let i = 0; i < arr.length - 1; i++) {
            // 2. 里层的循环 控制 一趟交换几次  arr.length - i - 1 次序
            for (let j = 0; j < arr.length - i - 1; j++) {
                // 交换两个变量
                // arr[j]   arr[j + 1]
                if (arr[j] > arr[j + 1]) {
                    let temp = arr[j]
                    arr[j] = arr[j + 1]
                    arr[j + 1] = temp
                }
            }
        }
        console.log(arr)

        // 复习变量
        // let num1 = 10
        // let num2 = 20
        // let temp = num1
        // num1 = num2
        // num2 = temp


    </script>
</body>

</html>

image.png

第四天~函数编程

for主要用来计数的，为什么可以计算多少次呢，i++后置自增就是用来计数的，但是他恰巧和数组的索引号对上去

    <script>
        let arr = ['pink', 'red', 'blue']
        // for 循环用来计数的， while 可以有条件判断
        for (let i = 0; i < arr.length; i++) {
            // i   是序号，但是可以当索引号来看   0 1 2 3
            // arr[i]  是数组元素 是里面的每一个值  pink red blue
        }
    </script>
</body>

</html>

数组的使用

image.png 函数让代码具备复用能力-是被设计为执行特定任务的代码块,有利于精简代码方便复用，提高开发效率
理解函数的意义，能够具备封装函数的意义

image.png

函数缺陷，功能局限单一，只能解决一个问题，要有参数的函数，用户决定放什么原料，传入几个数据就写几个，他相当于一个变量，就是接收数字

image.png image.png NaN与所有值都不相等包括他自己

// 什么时候当假看  0  undefined  null  '' false  NaN
        document.write('<br>-------------------------------')
        function getSum(x, y) {
            // x = 1 
            // document.write(x)
            // document.write(x + y)
            // 我们想要：如果调用的时候，我们没有传递实参，则默认为 0
            x = 2 || 0
            y = y || 0
            document.write(x + y)
        }
        // 调用
        // getSum(1, 2)
        getSum()
        getSum(1, 2)



    </script>
</body>

</html>

为什么让函数有返回值

image.png

return数组多个值

<body>
    <script>
        function fn(x, y) {
            let jia = x + y
            let jian = x - y
            // return jia, jian 结果值返回了 jian 因为return只能返回一个值
            return [jia, jian]
        }
        let re = fn(1, 2)   //  [3, -1]
        document.write(`相加之后的结果是：${re[0]},相减之后的结果是: ${re[1]} `)
    </script>
</body>

</html>

形参一个也不要通过arguments全接过来

    <script>
        // function fn(x, y) {
        //     // x = 1 
        //     // y = undefined
        //     // 1 + undefined  =  NaN
        //     console.log(x + y)
        // }
        // fn(1, 2)

        // 1. 实参个数少于形参   返回的结果 NaN
        // fn(1)
        // 2. 实参个数大于形参   非诚勿扰
        function fn() {
            // arguments 函数内有效   表现形式 伪数组 
            // 伪数组 比真数组 少了一些 pop()  push()  等方法 
            console.log(arguments) //  [1,2,3]
            let sum = 0
            for (let i = 0; i < arguments.length; i++) {
                sum += arguments[i]
            }
            console.log(sum)
        }

        fn(1, 2, 3)


    </script>
</body>

第5天

熟悉对象语法

image.png 遍历对象

image.png

image.png

<body>
    <script>
        let obj = {
            uname: '小明',
            age: 18,
            sex: '男',

        }
        // 请输出对象的名字 小明
        console.log(obj.uname)
        console.log(obj['uname'])
        // 遍历对象
        for (let k in obj) {
            // 得到的是带字符串的属性名
            // k === 'uname'  === 'age'  === 'sex'
            console.log(k)
            // console.log(obj.k)  不可行
            // console.log(obj['uname'])
            // console.log(obj['age'])
            // console.log(obj['sex'])
            console.log(obj[k])
        }
    </script>
</body>

</html>

数组放里放任何类型

    <script>
        // 数组 里面可以放任何的数据类型
        // let arr = [1, 'pink', true, undefined, null, {}, []]
        // console.log(arr)
        // 数组对象
        let students = [
            { name: '小明', age: 18, gender: '男', hometown: '河北省' },
            { name: '小红', age: 19, gender: '女', hometown: '河南省' },
            { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
            { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
        ]

    </script>
</body>

</html>

image.png

image.png

基本数据类型和引用数据类型

image.png image.png 他们地址指向同一个对象，简单数据类型不会有影响按结果存储，而复杂数据类型存储obg1地址10变20按地址存储

    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <script>
        // 简单数据类型存储的是值
        let num1 = 10
        let num2 = num1
        num2 = 20
        console.log(num1)


        // 对象 引用数据类型    栈里面存储的是地址

        let obj1 = {
            age: 18
        }
        let obj2 = obj1
        obj2.age = 20
        // console.log(obj1, obj2)
        console.log(obj1)   // 20 
    </script>

</body>

</html>

image.png

avatar
文章
阅读
粉丝