发表于: 2023-03-09 20:19:20

0 258



今天的js知识点:


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>

   <script>
     // function getSum() {
     //     // arguments 动态参数 只存在于 函数里面
     //     //是伪数组
     //     console.log(arguments)
     //     let sum = 0
     //     for (let i = 0; i <arguments.length; i++) {
     //         sum += arguments[i]
     //     }
     //     console.log(sum)
     // }
     // getSum(2, 3, 4)
     // getSum(1, 2, 3, 4, 5)

     //剩余参数
     // function getSum(...arr) {
     //     // console.log(arr)
     //     let sum = 0
     //     for(let i = 0; i < arr.length; i++) {
     //         sum += arr[i]
     //     }
     //     console.log(sum)
     // }
     // getSum(2, 3)
     // getSum(1, 2, 3)

     //展开运算符
     //1、 不会修改原数组
     const arr1 = [1, 2, 3]
// console.log(...arr)

     // console.log(Math.max(1, 2, 3))
     // ...arr1 ===  1, 2, 2
     // 求数组最大值
     console.log(Math.max(...arr1)) //3
     console.log(Math.min(...arr1)) //1
     //2、合并数组
     const arr2 = [3, 4, 5]
const arr = [...arr1, ...arr2]
console.log(arr)

</script>

</body>
</html>


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>

   <script>
       // function fn() {
       //     console.log(123)
       // }

       //箭头函数 基本语法
       // const fn = () => {
       //     console.log(123)
       // }
       // fn()

       // const fn = (x) => {
       //     console.log(x)
       // }
       // fn(1)

       // 只有一个形参的时候,可以省略小括号
       // const fn = x => {
       //     console.log(x)
       // }
       // fn(1)

       // 只有一行代码的时候,可以省略大括号
       // const fn = x => console.log(x)
       // fn(1)

       // 只有一行代码的时候,可以省略 return
       // const fn = x => x + x
       // console.log(fn(1))

       //箭头函数可以 直接返回一个对象
       // const fn = (uname) => ({uname: uname})
       // console.log(fn('李白'))


       //利用箭头函数求和
       // const getSum = (...arr) => {
       //     let sum = 0
       //     for (let i = 0; i< arr.length; i++) {
       //         sum += arr[i]
       //     }
       //     return sum
       // }
       // let result = getSum(2, 3)
       // console.log(result)


       // 箭头函数 this  是上一层作用域的this 指向
       // const fn = () => {
       //     console.log(this) // window
       // }
       // fn()
       // //对象方法的箭头函数的 this
       // const obj = {
       //     uname: '李白',
       //     sayHi: () => {
       //         console.log(this) // window
       //     }
       // }
       // obj.sayHi()

       const obj = {
uname: '李白',
           sayHi: function () {
console.log(this) // 指向 obj
               let i = 10
               const count = () => {
console.log(this) // 指向 obj
               }
count()
}
}
obj.sayHi()
</script>

</body>
</html>


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>

   <script>
     // 数据解构 是将数组的单元值快速批量赋值给一系列变量的简洁语法
     // const arr = [100, 60, 80]
     //数组解构 赋值
     // const [max, min, avg] = arr
     // const max = arr[0]
     // const min = arr[1]
     // const avg = arr[2]
     // const [max, min, avg] = [100, 60, 80]
     // console.log(max) // 100
     // console.log(min) // 60
     // console.log(avg) // 80

     // 典型应用 交互2个变量
     // let a = 1
     // let b = 2;
     // [b, a] = [a, b]
     // console.log(a, b)


     // 数组解构赋值 案例
     // const [hr, lx, mi, fz] = ['海尔', '联想', '小米', '方正']
     // console.log(hr)
     // console.log(lx)
     // console.log(mi)
     // console.log(fz)
     //
     // function getValue() {
     //     return [100, 60]
     // }
     // const [max, min] = getValue()
     // console.log(max)
     // console.log(min)


     // const [a, b, c, d] = [1, 2, 3]
     // console.log(a) // 1
     // console.log(b) // 2
     // console.log(c) // 3
     // console.log(d) // undefined

     // // 剩余参数 数量少 单元值多
     // const [a, b, ...c] = [1, 2, 3, 4]
     // console.log(a) // 1
     // console.log(b) // 2
     // console.log(c) //[3, 4]

     // // 防止 undefined 传递
     // const [a = 0, b = 0] = []
     // console.log(a) // 0
     // console.log(b) // 0

     // 按需导入赋值
     // const [a, b, , d] = [1, 2, 3, 4]
     // console.log(a) // 1
     // console.log(b) // 2
     // console.log(d) // 4

     // const arr = [1, 2, [3, 4]]
     // console.log(arr[0]) // 1
     // console.log(arr[1]) // 2
     // console.log(arr[2]) // [3, 4]
     // console.log(arr[2][0]) // 3

     // const arr = [1, 2, [3, 4]]
     // const [a, b, c] = [1, 2, [3, 4]]
     // console.log(a) // 1
     // console.log(b) // 2
     // console.log(c) // [3, 4]

     const [a, b, [c,d]] = [1, 2, [3, 4]]
console.log(a) // 1
     console.log(b) // 2
     console.log(c) // 3
     console.log(d) // 4

   </script>

</body>
</html>




返回列表 返回列表
评论

    分享到