ES6

阿moon
122 阅读11分钟

let和const

1-1 let和const

let和const是什么

  • let 和 const 是什么
  • let 和 const 的用法
  • 什么是变量 什么是常量

代码演示

<script>
    // 1.let和const是什么
    // 声明变量或声明常量
    // var 声明变量
    // let 代替 var 声明变量
    // const 声明常量 constant

    // 2.let 和 const 的用法
    // var 一样
    var username = "Alex"
    let age = 18
    const sex = "male"
    console.log(username,age,sex)

    // 3.什么是变量，什么是常量
    username = "ZS"
    agr = 28
    console.log(username,age)
    // 报错 常量
    // sex = "female"

    // var  let  声明的就是变量 变量一旦初始化之后 还可以重新赋值
    // const 声明的就是常量 一旦常量初始化 就不能重新赋值了 否则就会报错
</script>

1-2 const

const

  • 为什么需要 const
  • const 的注意事项
  • 什么时候用 const 什么时候用 let

代码演示

<script>
     // 为什么需要 const
     // let
     // let sex = "male"
     // // ...
     // sex = "female"
     // console.log(sex)

     // const
     // const sex = "male"
     // // ...
     // sex = "female"
     // console.log(sex)

     // const 就是为了那些一旦初始化就不希望重新赋值的情况设计的

     // 2.const 的注意事项
     // 2.1 适用const 声明常量 一旦声明 就必须立即初始化 不能留到以后赋值
     // const sex;
     // sex = "male"

    // const sex = "male"

    // 2.2 const 声明的常量 允许在补充下赋值的情况下修改它的值
    // 基本数据类型
    // const sex = "male"
    // sex = "female"

    // // 引用数据类型
    // const person = {username:"Alex"}
    // person = {}
    // person.username = "ZhangSan"
    // console.log(person)
        
    // 3.什么时候用 const 什么时候用let
    // var
    // for (let i = 0 ; i < 2 ; i++){}
    con. username = "Alex"

    // 不知道用什么先用const
    // 
    username = "ZhangSan"
</script>

1-3 let、const与var的区别

let、const与var的区别

  • 重复声明
  • 变量提升
  • 暂时性死区
  • window 对象的属性和方法(全局作用域中)
  • 块级作用域

演示代码

<script>
    // 1 重复变量声明
    // 已经存在的变量或常量 又声明了一遍
    // var 允许重复声明 let const 不允许
    // let a = 1
    // // 
    // let a = 2
    // console.log(a)

    // 报错 形参也是参数 不能重复声明
    // function func (a) {
    //     let a = 1
    // }
    // func()

    // 2 变量提升 
    // var 会提升变量的声明到当前作用域的顶部
    // console.log(a)
        
    // console.log(a)
    // var a = 1
    // 相当于
    // var a
    // console.log(a)
    // a = 1
    // console.log(a)

    // let const 不存在变量提升
    // console.log(a)
    // let a = 1
    // console.log(a)

    // 养成良好的编程习惯 对于所有的变量或者常量 做到先声明 后使用

    // 3 暂时性死区
    // 只要作用域存在let const 它们所声明的变量或者常量就自动"绑定"这个区域 不再受到外部作用域的影响
    // let const 存在暂时性死区
    // let a = 2
    // let b = 1
    // function func() {
    //     console.log(b)
    //     // console.log(a)
    //     // let a = 1
    // }
    // func()
    // 养成良好的编程习惯 对于所有的变量或者常量 做到先声明 后使用

    // 4 window 对象的书写和方法
    // 在全局作用域中 var声明的变量 通过 function 声明的函数 会自动编程window对象的属性或方法
    // let const 不会

    // var/function
    // var age = 18
    // function add () {
    //     console.log(window.age)
    //     console.log(window.add === add)
    // }

    // let/const
    // let age = 18
    // const add = function add () {
    //     console.log(window.age)
    //     console.log(window.add === add)
    // }

</script>

1-4 块级作用域

块级作用域

  • 什么是块级作用域
  • 作用域链
  • 有哪些块级作用域

代码演示

<script>
    // 块级作用域
    // 1 什么是块级作用域
    // var 没有会计作用域
    // for (var i = 0 ; i < 3 ; i++) {
    //     console.log(i)
    // }
    // console.log(i)

    // // let/const有块级作用域
    // for (let i = 0 ; i < 3 ; i++) {
    //     // i = i + 1
    //     // console.log(i)
    // }
    // console.log(i)

    // 2 作用域链
    // function func() {
    //     for(let i = 0 ; i < 3 ; i++) {
    //         console.log(i)
    //     }
    // }
    // fun()
    // console.log(i)
    // 作用域链 ： 内层作用域 -> 外层作用域 -> ... -> 全局作用域

    // 3 有哪些块级作用域
    // 只有 let 或 const 才可以叫作用域
    // {}
    // {
    // let age = 18
    // console.log(age)
    // }
    // console.log(age)
    // for() {}
    // while() {}
    // do{}while()
    // if(){}
    // switch() {}
        



    // function() {}
    // 对象不构成任何作用域
    // const person = {
    //     getAge:function() {

    //     }
    // }
</script>

1-5 let和const的应用

代码演示

<style>
    body {
        padding: 50px 0 0 150px;
    }

    btn {
        width: 100px;
        height: 100px;
        margin-right: 20px;
        font-style: 80px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <button class="btn">0</button>
    <button class="btn">1</button>
    <button class="btn">2</button>
<script>
    // 1 var
    // var btns = document.querySelectorAll(".btn")

    // for(var i = 0 ; i < btns.length ; i++) {
    //     btns[i].addEventListener(
    //         "click",function(){
    //         console.log(i)
    //     },false)
    // }

    // 2 闭包
    // var btns = document.querySelectorAll(".btn")

    // for(var i = 0 ; i < btns.length ; i++) {
    //     (function(index) {
    //         btns[index].addEventListener(
    //             "click",
    //             function() {
    //                 console.log(index)
    //             },false
    //         )
    //     }) (i)
    // }

    // 3 let/const
    let btns = document.querySelectorAll(".btn")

    for(let i = 0 ; i < btns.length ; i++) {
        (function(index) {
           btns[index].addEventListener(
                "click",
                function() {
                    console.log(index)
                },false
            )
        }) (i)
    }
</script>

image.png

image.png

image.png

模板字符串

2-1 模板字符串

模板字符串是什么

  • 认识模板字符串
  • 模板字符串与一般字符串的区别

代码演示

<script>
    // 1 认识模板字符串
    // ‘alex’
    // const username1 = 'alex'

    // // “alex”
    // const username2 ='alex'
    // console.log(username1,username2,username1 === username2)

    // // 模板字符串与一般字符串的区别
    const person = {
        username : "Alex",
        age : 18 , 
        sex : "male"
    }
    // const info = "我的名字是:" + person.username + "性别:" + person.sex + "今年" + person.age + "岁了"

    const info = "我的名字是:$(person.username),性别:$(person.sex),今年 $(person.age)岁了"
    console.log(info)


    // 和其他东西一起使用的时候 使用模板字符串 方便注入
    // 其他情况下使用模板字符串或一般字符串都行
</script>

2-2 模板字符串的注意事项

模板字符串的注意事项

  • 输出多行字符串
  • 输出 ` 和 \ 等特殊字符
  • 模板字符串的注入
<script>
    // 1 如何输出多行字符串
    // 一般字符串
    // const info = '第一行\n第二行'
    // console.log(info)

    // 模板字符串
    // const info = `第一行\n第二行`
    // console.log(info)
    // 模板字符串
    // const info = `第一行
    // 第二行`
    // console.log(info)

    // 模板字符串中 所有的空格 换行或缩进都会被保留在输出之中

    // 2 输出 ` 和 \ 等特殊字符
    // const info = `'\`\\`
    // console.log(info)

    // 3 模板字符串的注入
    // ${}
    const username = 'alex'
    const person = {
        age:18,
        sex:'male'
    }
    const getSex = function(sex) {
        return sex === 'male' ? '男' : '女'
    }

    const info = `${username},${person.age + 2},${getSex(person.sex)}` 
    console.log(info)

    // 只要最终可以得出一个值的就可以通过${}注入到模板字符串中
</script>

2-3、模板字符串的应用

代码演示

<style>
    body {
        padding: 50px 0 0 300px;
        font-size: 22px;
    }

    ul {
        padding: 0;
    }

    p {
        margin-bottom: 10px;
    }
</style>
</head>
<body>
    <p>学生列表</p>
    <ul class="list">
        <li style = "list-style: none;">信息加载中</li>
    </ul>
<script>
        // 数据
        const students = [
        {
            username:"Alex",
            age:18,
            sex:"male"
        },
        {
            username:"ZhangSan",
            age:28,
            sex:"male"
        },
        {
            username:"LiSi",
            age:20,
            sex:"female"
        }
    ]
    const list = document.getElementById("list")

    let html = ''
    for(let i = 0 ; i < students.length ; i++) {
        html += `<li>我的名字是:${students[i].username},${students[i].sex},${students[i].age}</li>`
    }
    console.log(html)
    list.innerHTML = html
</script>

箭头函数

3-1 箭头函数

箭头函数是什么

  • 认识箭头函数
  • 箭头函数的结构
  • 如何将一般函数改写成箭头函数

代码演示

<script>
    // 1 认识箭头函数
    // const add = (x,y) => {
    //     return x + y
    // }
    // console.log(add(1,1))

    // 2 箭头函数的结构
    // const/let 函数名 = 参数 => 函数体

    // 3 如何将一般的函数改写成箭头函数
    // function add () {}

    // 声明形式 => 函数表达形式
    // const add = function() {}

    // 函数表达式形式 -> 箭头函数
    // const add = () => {}
 </script>

3-2 箭头函数的注意事项

箭头函数的注意事项

  • 单个参数
  • 单个函数体
  • 单个对象

代码演示

<script>
    // 1 单个参数
    // 单个参数可以省略圆括号
    // const add = x => {
    //     return x + 1
    // }
    // console.log(add(1))

    // 无参数或多个参数不能省略圆括号
    // const add = () => {
    //     return 1 + 1
    // }
    // console.log(add())

    // const add = (x,y) => {
    //     return x + y
    // }
    // console.log(add(1,1))

    // 2 单行函数体
    // 单行函数体可以同时省略 {}和 return
    // const add = (x,y) => {
    //     return x + y
    // }
    // const add = (x,y) => x + y

    // console.log(add(1,1))

    // 多行函数体不能再化简了
    // const add = (x,y) => {
    //     const sum = x + y
    //     return sum
    // }

    // 3 单行对象
    // const add = (x, y) => {
    //     return {
    //         value: x + y
    //     }
    // }    
    // const add = (x, y) => {
    //     value: x + y
    //     // return (返回值) undefined
    // }  

    // 如果箭头函数返回单行对象 可以再 {} 外面加上 () 让浏览器不再认为那是函数体的花括号

    // const add = (x,y) => [x,y]
    // console.log(add(1,1))
</script>

3-3 this指向1

this指向

  • 全局作用域中的 this 指向
  • 一般函数 (非箭头函数) 中的this指向

代码演示

<script>
    // 1 全局作用域中的this指向
    // console.log(this)  // window

    // 2 一般函数(非箭头函数)中的this指向
    // function add() {
    //     console.log(this)
    // }
    // // 严格模式下就指向 undefined
    // // add() // undefined -> window (非严格模式下)
    // // window.add()

    // const calc = {
    //     add:add
    // }
    // // calc.add()  //calc
    // const adder = calc.add;
    // adder()  // undefined -> window (非严格模式下)

    // document.onclick = function() {
    //     console.log(this)
    // }
    // document.onclick() 

    // function Person(username) {
    //     this.username = username
    //     console.log(this)
    // }

    // const p = new Person('Alex')


    // 只有在函数调用的时候this指向才确定 不调用的时候 不知道指向谁
    // this 指向和函数在哪儿调用没关系 只是和谁在调用有关
</script>

3-4 this指向2

this指向

  • 全局作用域中的 this 指向
  • 一般函数 (非箭头函数) 中的 this 指向
  • 箭头函数中的 this 指向

代码演示

<script>
    // 1 箭头函数中的 this 指向
    // 箭头函数没有自己的 this

     // const calc = {
     //     add : () => {
     //         console.log(this)
     //     }
     // }
     // cale.add()   // window


     // 2 练习
     // 'use strict'
     const calc = {
         add : function() {
             // this
             const adder = () => {
                 console.log(this)
             }
             adder()
         }
     }
     // calc.add()   // calc
     const addFn = calc.add
     addFn()  // undefiner -> window
 </script>

3-5 不适用箭头函数的场景

不适用箭头函数的场景

  • 作为构造函数
  • 需要 this 指向调用对象的时候
  • 需要使用 arguments 的时候

代码演示

<script>
    // 1 作为构造函数
    // 箭头函数没有 this
    // const Person = () => {}
    // new Person()

    // 2 需要 this 指向调用对象的时候
    // document.onclick = function() {
    //     console.log(this)
    // }

    // document.addEventListener("click",() => {
    //     console.log(this)  //window
    // },false )

    // 3 需要使用 arguments 的时候
    // function add() {
    //     console.log(arguments)
    // }
    // add(1,2,3,4,5)

    // const add = () => console.log(arguments)
    // add()
    // 剩余参数 
</script>

3-6 箭头函数的应用

代码演示

<style>
    body {
        padding: 50px 0 0 250px;
        font-size: 22px;
        font-size: 30px;
    }

    #btn {
        width: 100px;
        height: 100px;
        margin-right: 20px;
        font-size: 30px;
        cursor: pointer;
    }
</style>
</head>

<body>
    <button id="btn">开始</button>
    <span id="result">0</span>

<script>
    const btn = document.getElementById("btn")
    const result = document.getElementById("result")

    // const time = {
    //     time:0,
    //     start:function() {
    //         btn.addEventListener("click",function() {
    //             setInterval(function() {
    //                 // this.time++;
    //                 // result.innerHTML = this.time
    //                 that:time++;
    //                 result.innerHTML = that.time
    //             },1000)
    //         },false)
    //     }
    // }



    const timer = {
        time: 0,
        start: function () {
            btn.addEventListener("click", () => {
                setInterval(() => {
                    console.log(this);
                    this.time++
                    result.innerHTML = this.time
                }, 1000)
            }, false)
        }
    }
    timer.start()
</script>

数组的解构赋值

4-1 数组的解构赋值

解构赋值是什么

  • 认识解构赋值
  • 什么是解构赋值

代码演示

<script>
     // 1 认识解构赋值
     // const arr = [1,2,3]
     // const a = arr[0]
     // const b = arr[1]
     // const c = arr[2]
     // console.log(a,b,c)

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


     // 2 什么是解构赋值
     // 解析某一数据的结构 将我们想要的东西提取出来 赋值给变量或常量
 </script>

4-2、数组解构赋值的原理

数组解构赋值的原理

  • 模式 (结构) 匹配
  • 索引值相同的完成赋值

代码演示

<script>
    // 1 模式(结构)匹配
    // [] = [1,2,3]

    // 2 索引值相同的完成赋值
    // const [a,b,c] = [1,2,3]
    // console.log(a,b,c)

    // 不取的 可以直接用逗号跳过
    const [a,[,,b],c] = [1,[2,4,5],3]
    console.log(a,b,c)

</script>

4-3 数组解构赋值的默认值

数组解构赋值的默认值

  • 默认值的基本用法
  • 默认值的生效条件
  • 默认值表达式

代码演示

<script>
    // 1 默认值的基本用法
    // const [a,b] = []
    // const [a,b] = [undefined,undefined]


    // const [a,b] = []
    // console.log(a,b)


    // 2 默认值的生效条件
    // 只有当一个数组成员严格等于 ( === ) undefined时 对应的默认值才会生效
    // const [a = 1 , b = 2] = [3,0]  // 3 0
    // const [a = 1 , b = 2] = [3,null]  // 3 null
    // const [a = 1 , b = 2] = [3]  // 3 2
    // console.log(a,b)

    // 3 默认值表达式
    // 如果默认值是表达式 默认表达式是惰性求值的
    const func = () => {
        console.log("我被执行了")
        return 2
    }
    const[x = func()] = [1]
        
    console.log(x)
</script>

4-4 数组解构赋值的应用

代码演示

<body>
    <p>111</p>
    <p>151</p>
    <p>121</p>
<script>
    // 1 常见的类数组的解构赋值
    // arguments
    // function func() {
    //     // console.log(arguments)
    //     // console.log(arguments.push)
    //     const [a,b] = arguments
    // }
    // func()
    // func(1,2)

    // NodeList
    // console.log(document.querySelectorAll("p"))
    // const [p1,p2,p3] = document.querySelectorAll("p")
    // console.log(p1,p2,p3)


    // 2 函数参数的解构赋值
    // const array = [1,1]
    // // const add = arr => arr[0] + arr[1]
    // const add = ([x,y])=> x + y
    // console.log(add(array))

    // 3 交换变量的值
    let x = 1;
    let y = 2;

    // let = tmp = x
    // x = y
    // y = tmp
    // console.log(x,y)

    [x,y] = [y,x];
    console.log(x,y)
</script>
</body>

对象的解构赋值

5-1 对象的解构赋值

对象的解构赋值的原理

  • 模式 (结构) 匹配
  • 属性名相同的完成赋值

代码演示

<script>
    // 1 模式(结构)匹配
    // {} = {}

    // 2 属性名相同的完成赋值
    // const {age,username} = {username:"Alex",age18}
    // const {age:age,username:username} = {username:"Alex",age:18}
    // console.log(age,username)

    // 取别名
    const {age:age,username:uname} = {username:"Alex",age:18}
    console.log(age,uname)
</script>

5-2 对象解构赋值的注意事项

对象解构赋值的注意事项

  • 对象解构赋值的默认值
  • 将一个已经声明的变量用于解构赋值
  • 可以取到继承的属性

代码演示

<script>
    // 默认值的生效条件
    // 对象的属性严格等于 undefined 时 对应的默认值才会生效
    // const {username = "ZhangSan",age = 0} = {username:"Alex"}
    // console.log(username,age)

    // 2 默认值表达式
    // 如果默认值是表达式 默认值表达式是惰性求值

    // 3 将一个已经声明的变量用于解构赋值
    // 如果将一个已经声明的变量用于对象的结构赋值 整个赋值需在圆括号中进行
    // let {x} = {x:1}
    // console.log(x)

    // let x = 2;
    // // ({x} = {x:1})
    // [x] = [1];
    // console.log(x)

    // 4 可以取到继承的属性
    // const {a = 1} = {}
    // console.log(a)

    const {toString} = {}
    // console.log(toString)
    // Object.prototype
    // console.log(Object.prototype)
    console.log({})
</script>

5-3 对象解构赋值的应用

代码演示

<script>
    // 1 函数参数的结构赋值
    // const logPersonlnfo = user => console.log(user.username,user.age)
    const logPersonlnfo = ({ age = 0, username = "ZhangSan" }) => console.log(username, age)
    // logPersonlnfo({username:"Alex",age:18})
    logPersonlnfo({})
    // {age,username:username} = {username:"Alex",age:18}

    // 2 复杂的嵌套
    const obj = {
        x: 1,
        y: [2, 3, 4],
        z: {
            a: 5,
            b: 6
        }
    }
    // const {x,y,z} = obj
    // console.log(x,y,z)
    const {
        y: y,
        y: [, yy],
        z, 
        z:{b:b}
    } = obj
    console.log(yy,y,z)
</script>

5-4 其他数据类型的解构赋值

其他数据类型的解构赋值

  • 字符串的解构赋值
  • 数值和布尔值的解构赋值
  • undefine 和 null 的解构赋值

代码演示

<script>
    // 1 字符串的解构赋值
    // "" = "hllo" x
    // 数组形式的结构赋值
    // const [a,b,,c] = "hello"
    // console.log(a,b,c)

    // 对象形式的结构赋值
    // const {0:a,1:b} = "hello";
    // console.log(a,b,length)
    // console.log("hello".length)

    // 字符串既可以按数组形式来解构赋值 也可以按对象形式来解构赋值

    // 2 数值和补二至的结构赋值
    // 先将等号右边的值转为对象
    // console.log(new Number(123))
    // const{a = 1 , toString} = 123
    // console.log(a,toString)

    // const { b = 2 , toString} = true
    // console.log(b,toString)

    // undefined 和 null 的结构赋值
    // 由于 undefined 和 null 无法转为对象 所以它们进行解构赋值 都会报错
    // const {toString} = undefined   //报错
    // const {toString} = null    //报错
</script>

对象字面量的增强

6-1 方括号语法

方括号语法

  • 方括号语法的用法
  • 方括号中可以放什么
  • 方括号语法和点语法的区别

代码演示

<script>
    // 方括号语法的用法
    // const prop = "age"
    // const person = {}

    // person.prop = 18
    // person[prop] = 18

    // 方括号语法可以写在对象字面量中
    // const person = {
    //     [prop]:18
    // }

    // console.log(person)

    // 2 方括号中可以放什么
    // ${}
    // [值或通过计算可以得到值的(表达式)]
    // const prop = "agea"
    // const func = () => "age"
    // const person = {
    //     // [prop]:18
    //     // [func()]:18
    //     // ["sex"]:18
    //     // ["s"+"ex"]:"male"
    // }
    // consoel.log(person)
    // 3 方括号语法和点语法的区别
    // 点语法是方括号语法的特殊形式
    // const person = {}
    // person.age 等价于 person["age"]

    // 属性名由数字 字母 下滑线以及 $ 构成 并且数字还不能大头的时候可以使用点语法
    // age18_$  √
    // 18age    ×
    // 合法标识符可以用来作为变量或者常量名
</script>

6-2 属性和方法的简洁表示法

属性和方法的简洁表示法

  • 对象字面量是什么
  • 属性的简洁表示法
  • 方法的简洁表示法

代码演示

<script>
    // 1 对象字面量是什么
    // const person = new Object()
    // person.age = 18
    // person.speak = function() {}

    // 对象字面量
    // const person = {
    //     age:18,
    //     speak:function(){}
    // }

    // 2 属性的简简洁表示法
    // 键名和变量或常量名一样的时候 可以只写一个
    // const age = 18
    // const person = {
    //     // "age":age
    //     age
    // }
    // console.log(person)

    //  3 方法的简洁表示法
    // 方法可以省略冒号和 function 关键字
    // const person = {
    //     // speak:function() {}
    //     speak(){}
    // }
    // console.log(person)
</script>

函数参数的默认值

7-1 函数参数的默认值

函数参数的默认值是什么

  • 认识函数参数的默认值
  • 函数参数默认值的基本用法

代码演示

script>
    // 1 认识函数参数的默认值
    // 调用函数的时候传参了 就用传递的参数 如果没传参 就用默认值
    // multiply(2,1)
    // multiply(2)

    // 2 函数参数默认值的基本用法
    // const multiply = (x,y) => {
    //     if(typeof y === 'undefined' ) {
    //         y = 1
    //     }

    //     return x * y
    // }
    // console.log(multiply(2,2))
    // const multiply = (x , y = 1) => x * y
    // console.log(multiply(2,2))
</script>

7-2 函数参数默认值的注意事项

函数参数默认值的注意事项

  • 默认值的生效条件
  • 默认值表达式
  • 设置默认值的小技巧

代码演示

<script>
    // 1 默认值的生效条件
    // // 不传参数 胡总明确的传递 undefined 作为参数 只有这两种情况下 默认值才会生效
    // const multiply = (x , y = 1) => x * y
    // console.log(multiply(2,0))
    // // console.log(multiply(2,null))
    // console.log(multiply(2,undefined))
    // console.log(multiply(2)

    // 2 默认值表达式
    // 如果默认值是表达式 默认值表达式是惰性求值的


    // 3 设置默认值的小技巧
    // 函数参数的默认值 最好从三处列表的右边开始设置
    // const multiply = (x = 8.5 , y ) => x * y
    // console.log(multiply(undefined,2))
</script>

7-3 函数参数默认值的应用

 <script>
    // 1 接收很多参数的时候
    // const logUser = (username = "ZhangSan" , age = 0 , sex = "male") => console.log(username,age,sex)
    // logUser("Alex",18,"male")
    // logUser()

    // 2 接收一个对象作为参数
    // const logUser = options => console.log(options.username,options.age,options.sex)
    // logUser({
    //     username:"Alex",
    //     age:18,
    //     sex:"male"
    // })

    // const logUser = ({username = "ZhangSan" , age = 0 , sex = "male"}) => console.log(username,age,sex)

    // const logUser = ({username = "ZhangSan" , age = 0 , sex = "male" }= {})=> console.log(username,age,sex)

    // logUser({
    //     username:"Alex",
    //     age:18,
    //     sex:"male"
    // })
    // logUser({username:"Alex"})
    // logUser()
    // logUser({username:"Alex"})
</script>

剩余参数

8-1 剩余函数

剩余参数是什么

  • 认识剩余函数
  • 剩余参数的本质

代码演示

<script>
    // 1 认识剩余参数
    // const add =(x,y,z,...args) => {}

    // 2 剩余参数的本质
    const add = (x, y, ...args) => {
        console.log(x, y, args)
    }
    // add()
    // add(1)
    // add(1,2)
    add(1, 2, 3, 4, 5)

    // 剩余参数永远是个数组 即使没有值 也是空数组

    // 3,4,5 -> [3,4,5]
</script>

8-2 剩余参数的注意事项

注意事项

  • 箭头函数的剩余参数
  • 使用剩余参数替代 arguments 获取实际参数
  • 剩余参数的位置

代码演示

<script>
    // 1 箭头函数的剩余参数
    // 箭头函数的参数部分即使使用一个剩余参数 也不能省略圆括号
    // const add =(...args) => {}
    // 2 使用剩余参数代替 arguments 获取实际参数
    // const add = function() {
    //     console.log(arguments)
    // }
    // add(1,2)

    // const add = (...args) => {
    //     console.log(args)
    // }
    // add(1,2)

    // 3 剩余参数的位置
    // 剩余参数只能是最后一个参数 之后不能再有其他参数 否则会报错
    // const add = (x,y,...args) => {
    //     console.log(args)
    // }
</script>

8-3 剩余函数的应用

代码演示

<script>
    // // 1 完成 add 函数
    // const add = (...args) => {
    //     let sum = 0

    //     for (let i = 0 ; i < args.length; i++) {
    //         sum += args[i]
    //     }
    //     return sum

    //     // reduce
    // }
    // // console.log(add())
    // console.log(add(1,1,3))

    // 2 与解构赋值结合使用
    // 剩余参数不一定非要作为函数参数使用
    // const [num,...args] = [1,2,3,4]
    // // 必须是最后一个
    // console.log(num,args)

    // const func = (num,...args) => {}
    // func(1,2,3)

    // const {x,y,...z} ={a:3,x:1,y:2,b:4}
    // console.log(x,y,z)

    // const func = ({x,y,...z}) => {}
    // func({a:3,x:1,y:2,b:4})

</script>

数组的展开运算符

9-1 数组的展开运算符

数组展开运算符的基本用法

  • 认识展开运算符
  • 数组展开运算符的基本用法

代码演示

<script>
    // 1 认识展开运算符
    // [3,1,2]
        
    // Math.min

    // console.log(Math.min([3,1,2]))
    // console.log(Math.min(3,1,2))

    // [3,1,2] -> 3,1,2

    // 2 数组展开运算符的基本用法
    // console.log(Math.min([...3,1,2]))
    // 相当于
    // console.log(Math.min(...3, 1, 2))
</script>

9-2 区分剩余参数和展开运算符.

区分剩余参数和展开运算符

  • 根本区别
  • 区分剩余参数和展开运算符

代码演示

<script>
    // 1 根本区别

    // 展开运算符
    // [3,1,2] -> 3,1,2

    // 剩余参数
    // 3,1,2- > [3,1,2]

    // 2 区分僧与参数和展开运算符
    // const add = (...args) => {
        // console.log(args)
        // console.log(...args)
        // console.log(...[1,2,3])
        // console.log(1,2,3)
    // }
    // add(1,2,3)


    // console.log([...[1,2,3],4])
    // 1,2,3- > [1,2,3] 
</script>

9-3 数组展开运算符的应用

代码演示

<body>
    <p>1</p>
    <p>1</p>
    <p>1</p>
<script>
    // 1 复制数组
    // const a = [1,2]
    // const B = a
    // a[0] = 3
    // console.log(b)

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


    // 合并数组
    // const a = [1,2]
    // const b = [3]
    // const c = [4,5]

    // console.log([...a,...b,...c])
    // console.log([...b,...a,...c])

    // console.log([1,...a,2,...b,3,...c])

    // 3 字符串转为数组
    // 字符串可恶意按照数组的形式展开
    // console.log(..."Alex")
    // console.log('A','l','e','x')
    // console.log([..."Alex"])
    // console.log("Alex".split(""))

    // 4 常见的类数组转化为数组

    // arguments
    // function fun () {
    // console.log(arguments.push)
    // console.log(...arguments)
    // }
    // fun(1,2)

    // NodeList
    // console.log(document.querySelectorAll("p"))
    // console.log([document.querySelectorAll("p")].push) 
</script>
</body>

对象的展开运算符

10-1 对象的展开运算符

基本用法

  • 展开对象
  • 合并对象

代码演示

<script>
    // 展开对象
    // const apple = {
    //     color : "红色",
    //     shape : "球形",
    //     taste : "甜"
    // }
    // console.log(...apple)
    // console.log([...apple])

    // 对象的展开 : 把属性罗列起来 用逗号分隔 放到一个 {} 中 构成新对象
    // console.log({ ...apple })
    // console.log({ ...apple } === apple)

    // 2 合并对象
    // const apple = {
    //     color: "红色",
    //     shape: "球形",
    //     taste: "甜"
    // }
    // const pen = {
    //     color: "黑色",
    //     shape: "圆柱形",
    //     use: "写字"
    // }
    // console.log(...pen)
    // console.log({...apple,...pen})

    // 新对象拥有全部属性 相同属性 后者覆盖前者
    // console.log({...pen,...apple})
    // 相当于
    // console.log({
    //     use: "写字",
    //     color: "红色",
    //     shape: "球形",
    //     taste: "甜"
    // })

    // console.log({...pen,apple}) 
 <script>

10-2 对象展开运算符的注意事项

注意事项

  • 空对象的展开
  • 非对象的展开
  • 对象中对象属性的展开

代码演示

<script>
    // 复制对象
    // const a = {x:1,y:2}
    // const b = a

    // constc = {...a}
    // console.log(c,c === a)

    // 2 用户参数和默认参数
    // add(1,2)
    // const logUser = ({
    //     username = "ZhangSan",
    //     age = 0,
    //     sex = "male"
    // } = {}) => {
    //     console.log(username, age, sex)
    // }
    // const logUser = userParam => {
    //     const defaultParam = {
    //         username: "ZhangSan",
    //         age: 0,
    //         sex: "male"
    //     }

        // const param = {...defaultParam,...userParam }
        // console.log(param.username)

        // const {username,sex,age} ={...defaultParam,...userParam}
        // console.log(username,age,sex)

    // }
    // logUser()
</script>

10-3 对象展开运算符的应用

代码演示

<script>
    // 1 复制对象
    // const a = {x:1,y:2}
    // const b = a

    // const c = {...a}
    // console.log(c,c===a)

    // 2 用户参数和默认参数
    // add(1,2)

    // const logUser = ({
    //     username = "ZhangSan",
    //     age = 0,
    //     sex = "male"
    // } = {}) => {
    //     console.log(username, age, sex)
    // }

    // const logUser = userParam => {
    //     const defaultParam = {
    //         username: "ZhangSan",
    //         age: 0,
    //         sex: "male"
    //     }

    //     const param = { ...defaultParam, ...userParam }
    //     console.log(param.username)

    // const param = {...defaultParam,...undefined}
    // const {username,age,sex} = {...defaultParam,...userParam}
    // console.log(username,age,sex)

    // }
    // logUser()
</script>

Set

11-1 Set是什么

代码演示

<script>
    // 1 什么是set
    // 集合

    // [1,2]
    // 数组是一系列有序的数据集合

    // Set 是一系列无序 没u有重复值的数据集合

    // 2 理解set
    // console.log([1,2,1])
    // console.log(new Array(1,2,1))

    const s = new Set()
    s.add(1)
    s.add(2)

    // Set中不能有重复成员
    s.add(1)
    console.log(s)

    // Set 没有下标去标示每一个值 所以set是无序的 也不能像数组那样通过下笔哎去访问Set成员
</script>

11-2 Set实例的方法和属性

  • 方法
  • 属性

代码演示

<script>
    // 1 方法
    // add
    const s = new Set()
    s.add(1).add(2).aff(2)
    // console.log(s)

    // has
    // console.log(s.has(1))
    // console.log(s.has(3))

    // delete
    // s.delete(1)
    // s.delete(3)
    // console.log(s)

    // clear
    // s.clear()
    // console.log(s)

    // forEach
    // s.forEach(function(value,key,set){
    //     // Set中的 value = key
    //     // console.log(value,key,set === s)
    //     // console.log(this)
    // },document)
    // console.log(s)

    // 按照成员添加进集合的顺序遍历


    // 2 属性
    // size
    // console.log(s.size)
    // console.log(s)
</script>

11-3 Set构造函数的参数

代码演示

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
<script>
    //  数组
    // const s = new Set([1,2,1])
    // console.log(s)


    // 字符串  arguments  NodeList  Set 等
    // console.log(new Set("hi"))
    // function func() {
    //     console.log(new Set(arguments))
    // }
    // func(1,2,1)
    // console.log(new Set(document.querySelectorAll("p")))

    // const s = new Set([1,2,1])
    // console.log(new Set(s) === s)
    // console.log(s)
         
</script>
</body>

11-4 Set的注意事项

  • 基本用法
  • 什么时候使用 Set
<body>
    <script>
        // 1.判断重复的方式
        const s = new Set([1,2,1])
        
        // console.log( 1 === 1 )
        // console.log( NaN === NaN )
        
        // Set 对重复值的判断基本遵循严格相等 ( === )
        // 但是对于 NaN 的判断与 === 不同 Set 中 NaN 等于 NaN
        // console.log(s)
    </script>
</body>
avatar
文章
阅读
粉丝