当前位置: 首页 > news >正文

JavaScript(JS进阶)

目录

00闭包

01函数进阶

02解构赋值

03通过forEach方法遍历数组

04深入对象

05内置构造函数

06原型


00闭包
<!-- 闭包 -->

<html>

<body>
    <script>
        // 定义:闭包=内层函数(匿名函数)+外层函数的变量(s)
        // 作用:封闭数据,提供操作,外部可以访问函数内部变量
        function fun() {
            let s = 'Hello World'
            return function () {
                document.write(s)
            }
        }
        let f = fun()
        f()
    </script>
</body>

</html>
01函数进阶

1>函数参数

        1.动态参数

                arguments是函数内置的伪数组,包含传入的所有实参(函数声明时形参列表为空)

        2.剩余参数

                将不定数量的剩余参数表示为数组

                形参列表形如(形参列表 , ...剩余参数数组名)

        3.展开运算符(...)

<!-- 展开运算符 -->

<html>

<body>
    <script>
        let arr = [1, 2, 3]
        console.log(...arr) // 1 2 3
        // 不改变原数组
    </script>
</body>

</html>

2>箭头函数

        1.基本语法:

                function(){} 等效于 () => {}

                只有一个形参,小括号可省略

                只有一行函数体,大括号可省略

        2.箭头函数参数:

                无动态参数,有剩余参数

02解构赋值
<!-- 数组解构 -->

<html>

<body>
    <script>
        // 定义:将数组各值快速批量赋值给一系列变量
        let arr = [1, 2, 3]
        let [a, b, c] = arr
        console.log(a) // 1
        console.log(b) // 2
        console.log(c) // 3
    </script>
</body>

</html>
<!-- 对象解构 -->

<html>

<body>
    <script>
        // 定义:将对象属性和方法快速批量赋值给一系列变量
        // 注意:新变量名和对应的属性名要相同
        let obj = { myname: 'Tian', age: 20 }
        let { myname, age } = obj
        console.log(myname) // Tian
        console.log(age) // 20
    </script>
</body>

</html>
03通过forEach方法遍历数组
<!-- 通过forEach方法遍历数组 -->

<html>

<body>
    <script>
        let arr = ['one', 'two', 'three']
        arr.forEach(function (item, index) {
            console.log(item) // 数组元素
            console.log(index) //索引号
        })
        // one
        // 0
        // two
        // 1
        // three
        // 2
    </script>
</body>

</html>
04深入对象

1>构造函数

<!-- 构造函数 -->

<html>

<body>
    <script>
        function Std(uname, age) { // 约定:函数名首字母大写
            this.uname = uname
            this.age = age
        }
        console.log(new Std('罗哲秀', 20))
        console.log(new Std('雷淇', 19))
    </script>
</body>

</html>

 2>实例成员&静态成员

        实例成员:实例对象的属性和方法(实例属性和实例方法)

        静态成员:构造函数的属性和方法(静态属性和静态方法)

05内置构造函数

1>Object常用静态方法

        Object.keys(obj)【返回对象obj的键(数组)】

        Object.values(obj)【返回对象obj的值(数组)】

        Object.assign(obj1,obj2)【obj2拷贝给obj1,追加不覆盖】

2>Array常用方法

<!-- reduce方法 -->

<html>

<body>
    <script>
        let arr = [1, 2, 3]
        // reduce的参数为回调函数和初始值
        let ans1 = arr.reduce((pre, cur) => pre + cur) // 箭头函数为回调函数
        console.log(ans1) // 6
        let ans2 = arr.reduce((pre, cur) => pre + cur, 60) // 60为初始值
        console.log(ans2) // 66
    </script>
</body>

</html>
<!-- find方法 -->

<html>

<body>
    <script>
        // 以对象数组为例--------------------
        let arr1 = [{ uname: '罗哲秀', age: 20 }, { uname: '雷淇', age: 19 }]
        console.log(arr1.find(array => array.age === 19))

        // 以字符串数组为例--------------------
        let arr2 = ['罗哲秀', '雷淇']
        console.log(arr2.find(uname => uname === '雷淇'))
        
        // 箭头函数 uname => uname === '雷淇'
        // 等价于
        // function myfind(uname) {return uname === '雷淇'}
    </script>
</body>

</html>
<!-- every和some方法 -->

<html>

<body>
    <script>
        let arr = [{ uname: '罗哲秀', age: 20 }, { uname: '雷淇', age: 19 }]

        // every方法--------------------
        // 全部的元素符合条件
        let flag = arr.every(array => array.age >= 18)
        console.log(flag) // true

        // some方法--------------------
        // 存在符合条件的元素
        flag = arr.some(array => array.age >= 20)
        console.log(flag) // true
    </script>
</body>

</html>

3>String常用属性和方法

        实例属性:length

        实例方法:

                1.split(分隔符)【将字符串分割为数组】

                2.substring(indexStart[, indexEnd])【截取字符串,不包括indexEnd】

                3.startsWith(Str[, pos]【检测字符串是否以Str开头,从pos开始检测,不写默认为0】

                4.includes(Str[, pos])【检测字符串是否含有Str,从pos开始检测,不写默认为0】

06原型
<!-- 利用原型对象实现方法共享 -->

<html>

<body>
    <script>
        // 构造函数
        function Stu(uname, age) {
            this.uname = uname
            this.age = age
        }

        // 通过原型prototype,向构造函数添加方法共享
        Stu.prototype.say = function () {
            console.log(`我叫${this.uname},今年${this.age}岁`);
        };

        //实例化,并调用共享函数 
        let LQ = new Stu('雷淇', 19)
        let QQ = new Stu('清浅', 20)
        LQ.say()
        QQ.say()
    </script>
</body>

</html>
<!-- 原型继承 -->

<html>

<body>
    <script>
        // 父亲"人"
        function people() {
            this.hair_color = '黑'
            this.leg_number = '两'
            this.say = function () {
                console.log(`我有${this.hair_color}色的头发和${this.leg_number}条腿`)
            }
        }

        // 孩子"LQ"
        function LQ() {
            this.dance = () => console.log('跳舞')
        }
        LQ.prototype = new people
        let lq = new LQ

        // 孩子"QQ"
        function QQ() {
            this.sing = () => console.log('唱歌')
        }
        QQ.prototype = new people
        let qq = new QQ

        // 调用共享方法和私有方法,验证原型继承
        lq.say() // 我有黑色的头发和两条腿
        lq.dance() // 跳舞
        qq.say() // 我有黑色的头发和两条腿
        qq.sing() // 唱歌
    </script>
</body>

</html>
http://www.dtcms.com/a/123298.html

相关文章:

  • 【AI论文】OmniSVG:一种统一的(可扩展)矢量图形生成模型
  • STM32单片机入门学习——第31节: [10-1] I2C通信协议
  • 需求开发与需求管理的全景解析
  • 4.10学习总结
  • MQTT:基于Keil开发工具移植入MQTTClient-C开源库
  • JS—同源策略:2分钟掌握同源策略
  • vue2添加背景水印-手动实现(无组件模式)
  • 4月10(信息差)
  • linux系统下如何提交git和调试
  • +++++背到厌倦。持续更新
  • python基础语法:缩进规则
  • netty中的ChannelPipeline详解
  • 认知风险→风险转移→保障未来
  • AUTOSAR图解=>AUTOSAR_SWS_TimeSyncOverEthernet
  • C++: unordered_map、unordered_set
  • 3DGS之光栅化
  • Python爬虫第10节-lxml解析库用 XPath 解析网页
  • 【Pandas】pandas DataFrame head
  • C#容器源码分析 --- List
  • Web前端之Vue+Element实现表格动态不同列合并多行、localeCompare、forEach、table、push、sort、Map
  • 每日算法-250410
  • 队列缓冲最新请求结合线程池的优化方案
  • STM32Cubemx-H7-14-Bootloader(上)-ST和串口烧录
  • django寻味美食分享与交流网站-计算机毕业设计源码74984
  • 重载和重写的区别
  • 年龄增长,特发性震颤为何愈发严重 ?
  • 详解如何从零用 Python复现类似 GPT-4o 的多模态模型
  • [ctfshow web入门] web38
  • 背包问题(java)实现
  • GPU通讯-基础篇