JS高级02

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量68 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rcj15651130122/article/details/131195834
版权
本文介绍了JavaScript中构造函数的求和方法，原型对象的继承机制，call方法的使用，以及如何通过call实现继承。此外，还详细讲解了forEach方法用于遍历数组并进行操作，如求和与页面渲染，以及filter方法在过滤数组中的应用。最后讨论了字符串处理，如去除空格，以及map方法用于批量修改数组元素内容。
摘要由CSDN通过智能技术生成

一、构造函数求和

<body>
    
    <script>
        Array.prototype.sum=function(){
            // this指向创建的对象
            // 初始化一个变量
            var sum=0
            for(var i=0;i<this.length;i++){
                sum+=this[i]
            }
            console.log(this);//[1, 2, 3]
            return sum
        }
        var arr = new Array(1,2,3)
        console.log(arr);
        console.log(arr.sum());
    </script>
    <script>
        Object.prototype.sum=function(){
            // this指向创建的对象
            // 初始化一个变量
            var sum=0
            for(var i=0;i<this.length;i++){
                sum+=this[i]
            }
            console.log(this);//[1, 2, 3]
            return sum
        }
        var arr = new Array(1,2,3)
        console.log(arr);
        console.log(arr.sum());
    </script>
</body>

二、原型对象继承

<body>

    <script>
        function Father(uname,age){
            this.uname=uname
            this.age=age
        }
        Father.prototype.money = function(){
            alert('1000万')
        }

        function Son(uname,age){
            this.uname=uname
            this.age=age
        }  
        // 儿子想继承爸爸的1000万
        // Son.prototype.money=function(){
        //     alert('1000万')
        // }
        // 赋值给儿子的原型对象
        // Son.prototype=Father.prototype //Father.prototype
        Son.prototype=new Father('董事长',50) //Father.prototype
        // 手动指回son构造函数
        Son.prototype.constructor=Son
        var father = new Father('董事长',50)     
        var son = new Son('富二代',20)  
        console.log(father);   
        console.log(son);
        son.money()   
    </script>
</body>

三、call方法

<body>
    
    <script>
        /* 
        call()
        call可以调用函数(立即调用函数)，改变函数的this指向，call(函数需要指向谁就写谁，参数1，参数2...)
        */
    //    普通函数this指向window
       function fn(x,y){
        console.log(x+y)
        console.log(this)
       }
       var obj = {
        name:'王多磊'
       }
    //    fn(1,2)
    console.log(obj)//this指向window
    fn.call(obj,1,2)//this指向obj
    </script>
</body>

四、使用call继承

<body>

    <script>
        // 父构造函数
        function Father(uname,age){
            this.uname=uname
            this.age=age
        }
        Father.prototype.money = function(){
            alert('1000万')
        }
        // 子构造函数
        function Son(uname,age,sex){
            Father.call(this,uname,age)
            // this.uname=uname
            // this.age=age
            this.sex=sex
        }  

        // 赋值给儿子的原型对象
        Son.prototype=Father.prototype //Father.prototype
        // 手动指回son构造函数
        Son.prototype.constructor=Son
        var father = new Father('董事长',50)     
        var son = new Son('富二代',20,'女')  
        console.log(father);   
        console.log(son);
        // son.money()   
    </script>
</body>

五、forEach遍历数组

<body>
    
    <script>
        // 数组里面可以写任意类型数据
        // 实际开发中数组基本上存储的都是对象形式的数据
        // 数组中的对象属性，如果想要拿到对象属性的话可以通过arr[1].name拿到

        // var arr = ['1',1,true,{}]
        var arr = [
                {name:'li'},
                {name:'wang'},
                {name:'zhang'}
        ]
        console.log(arr.length);//3
        console.log(arr[1].name);//wang

        // forEach遍历数组，array代表需要遍历的数组 item：数组中的元素(必须项) index：数组元素的索引(可选项)
        // 语法：array.forEach(function(item，index){})
        // forEach就是单纯的遍历数组，没有返回值

        var arr = [1,2,3,4]
        var sum = 0
        arr.forEach(function(item,index){
            sum+=item
        })
        console.log(sum);//10
    </script>
</body>

六、使用forEach渲染页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            width: 200px;
            list-style: none;
            float: left;
        }
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <ul>

    </ul>
    
    <script>
        var arr = [
                {img:'1.webp',name:'li',price:'￥1999'},
                {name:'zhou',price:'￥788'},
                {name:'wang',price:'￥599'},
                {name:'zhao',price:'￥109'},
        ]

        var ul = document.querySelector('ul')
        arr.forEach(function(item,index){
            var li = document.createElement('li')
            ul.appendChild(li)
            li.innerHTML='<p>'+item.name+'</p>'+"<img src="+item.img+">"+'<p>'+item.price+'</p>'
        })
    </script>
</body>
</html>

七、filter过滤数组

<body>
    
    <script>
        var arr = [12,53,5435,345,523]
        /* 
        filter 过滤器 返回符合条件的数据组成一个新数组(返回一个新数组)
        item 代表数组中的元素 index代表数组索引
        Array.filter(function(item,index){})
        */
       var arr1=arr.filter(function(item,index){
        console.log(item,index)
        return item>50
       })
       console.log(arr1);
       console.log(arr);
    </script>
</body>
</html>

八、filter案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 500px;
            height: 100px;
            margin: 0 auto;
        }

        .box {
            width: 200px;
            height: 500px;
            margin: 0 auto;
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <div class="main">
        请输入手机价格（输入能接受的最高价格）： <input type="text">
    </div>
    <div class="box">

    </div>

    <script>
        var arr = [
            {
                name: '小米',
                price: 2999,
            },
            {
                name: '红米',
                price: 2000,
            },
            {
                name: '魅族',
                price: 2599,
            },
            {
                name: '华为',
                price: 7999,
            },
            {
                name: '荣耀',
                price: 2899,
            },
            {
                name: '联想',
                price: 999,
            },
            {
                name: '三星',
                price: 9999,
            },
            {
                name: '苹果',
                price: 7999,
            },
            {
                name: '诺基亚',
                price: 299,
            },
            {
                name: 'vivo',
                price: 2399,
            },
            {
                name: 'oppo',
                price: 2499,
            },
        ]

        var box = document.querySelector('.box')
        var input = document.querySelector('input')
        input.onblur = function () {
            // box.innerHTML=''
            var newArr=[]
            newArr = arr.filter(function (item) {
                return item.price < input.value
            })
            console.log(newArr)
            if (newArr.length < 1) return alert('没有符合的商品')
            box.innerHTML=''
            newArr.forEach(function (item) {
                
                var div = document.createElement('div')
                box.appendChild(div)
                div.innerHTML = '<p>' + item.name + '</p><p>' + item.price + '</p>' + '<br/>'
            })
        }
    </script>
</body>

</html>
    <script>
        // 民政局决定分配对象，凡是年龄大于20岁都可以分配一个白富美

        //  filter筛选出来的数据是数组中每条数据内所有的内容，不是单一返回筛选的某个条件
        var arr = [
            {
                id: 1,
                name: '张三',
                age: 20
            },
            {
                id: 2,
                name: '李四',
                age: 18
            },
            {
                id: 3,
                name: '王五',
                age: 22
            },
            {
                id: 4,
                name: '麻子',
                age: 21
            },
        ]
        var arr1 = arr.filter(function (item) {
            return item.age > 19
        })
        console.log(arr1)

        //    找到张三和李四的数据，把他们的id转化为'1,3'字符串
        var arr2 = arr.filter(function (item) {
            return item.name == '张三' || item.name == '王五'
        })
        console.log(arr2)
        var arr3 = []
        arr2.forEach(function (item) {
            arr3.push(item.id)
        })
        console.log(arr3)
        console.log(arr3.join(','))
    </script>

九、every遍历数组

    <script>
        // every 检查数组中是否有满足条件的元素，如果有不符合条件的会返回false，只有全部符合条件才会返回true
        // 特点：只要找到不符合条件的数据就会终止查找(遍历打印的时候包括不符合条件的数据)，直接返回结果
        var arr = [37,66,35,63,88]
        var flag = arr.every(function(item,index){
            console.log(item,index);
            return item>35
        })
        console.log(flag);//false
    </script>

十、some遍历数组

    <script>
        // some 检查数组中是否有满足条件的元素，如果有一个或以上就会返回true，否则返回false
        // 特点：只要找到符合条件的数据就会终止查找(遍历打印的时候包括符合条件的第一个数据)，直接返回结果
        var arr = [37,35,66,63,88]
        var flag = arr.some(function(item,index){
            console.log(item,index);
            return item>50
        })
        console.log(flag);//true
    </script>

十一、reduce累加器

    <script>
        // reduce 累加器
        // Array.reduce(function(上一次的值,当前的值){},起始值)没有起始值默认为0
        var arr = [1,2,3,4,5]
        var sum = arr.reduce(function(old,now){
            return old+=now
        },10)
        console.log(sum);//25
    </script>

十二、find遍历数组

    <script>
        // find 返回满足条件的第一个元素，如果查不到符合条件的元素就会返回undefined
        // 只要查到有满足条件的元素就会终止查询(遍历打印的时候一直到(包括)符合条件的数据)，直接返回符合条件的元素

        var arr = [1,2,3,4,5,6,7,8]
        var a = arr.find(function(item,index){
            console.log(item,index);
            return item>5
            // return item>10//undefined
        })
        console.log(a);//6
    </script>

十三、findIndex遍历数组

    <script>
        // findIndex 查找符合条件元素的下标，只返回第一个符合条件元素的下标，只要找到符合条件的元素就会终止查询
        // (遍历打印的时候一直到(包括)符合条件的数据)，如果找不到符合条件的就会返回-1.和indexOf类似
        var arr = [1,2,3,4]
        var a = arr.findIndex(function(item,index){
            console.log(item,index);
            // return item>2//2
            return item>3//3
            // return item>6//-1
        })
        console.log(a);
    </script>

十四、去除字符串空格

<body>
    <input type="text">

    <script>
        // trim() 去除字符串前后的空格，中间的空格会默认为成字符，不去除
       var str=' he llo '
       var str1='hello'
       console.log(str.trim())
       console.log(str1)
    var input=document.querySelector('input')
    input.onblur=function(){
        console.log(input.value.trim())
        if(input.value.trim()){
            alert('我有值')
        }else{
            alert('请输入内容')
        }
    }
    </script>
</body>

十五、map批量修改数组元素内容

    <script>
        // map 对原始数组的一一映射，批量修改数组中的元素就会用到map，会返回一个新数组(不会改变原来的数组)
        var arr = [2,3,4,5]
        var newArr=arr.map(function(item,index){
            // console.log(item,index);
            return item*2
        })
        console.log(newArr.join());
    </script>

rcj15651130122
关注
JavaScript高级程序设计
hello_helloworld的博客
08-31 7395
这是我对《JavaScript高级程序设计》的详细学习笔记，主要内容包括html中的JavaScript，变量基础，变量、作用域与内存，基本引用类型、集合引用类型，迭代器与生成器，对象、类与面向对象编程，函数，期约与异步函数，BOM,DOM,DOM扩展，DOM2和DOM3，事件......
JS高级
qq_49029709的博客
04-18 1162
01-课程介绍 1.1-课程特点 1.js高级是对js基础语法的一个补充说明，本质上还是对ECMAScript语法的一个延伸与进阶 2.js高级所要学习的语法相比而言没有js基础的多，但是会更加晦涩难懂 更加侧重的是理解(不求甚解) 1.2-课程大纲 1.对象进阶 （2天） 2.函数进阶 ( 1天 ) 3.ES6新语法( 1天 ) 02-面向对象编程 1.1-面向对象编程介绍 本小节知识点 1.理解什么是面向对象编程 面向对象不是一门技术，而是一种解决问题的思维方式 面向对象的本质是对面
【JavaScript高级】02-深入JS执行原理：AO、VO及作用域链
SevgiliD的博客
11-14 1148
JavaScript的代码执行过程：执行上下文，GO,AO,VO，变量查找的作用域链顺序
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1075
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
计算机后端-PHP视频教程. JS高级02 外联形式绑定事件.wmv
05-22
计算机后端-PHP视频教程. JS高级02 外联形式绑定事件.wmv
day02-js高级-课件.rar
04-18
在"day02-js高级-课件.rar"这个压缩包中，我们可以预见到一系列深入讲解JavaScript高级特性的教学资料。这些课件将帮助我们深入理解并掌握JS的核心概念，以便于提升我们的前端开发技能。 首先，我们要关注的是...
JavaScript高级第02天笔记1
08-03
本文主要探讨JavaScript的高级特性，重点关注对象、构造函数、原型以及实例之间的关系。 1. 对象与属性 在JavaScript中，对象是键值对的集合，可以使用花括号 `{}` 创建。例如： ```javascript var obj = {uname: ...
js高级教你学好前端
09-28
在"js高级-02"这个文件中，可能涵盖了上述部分或全部内容的深入讲解，包括实例演示和实践练习，以帮助开发者巩固理论知识并提升实际操作能力。学习JavaScript的高级内容，不仅能够提升个人技术水平，也能为团队协作...
高级软件人才培训专家-day02-JavaScript-Vue
03-10
### 高级软件人才培训专家-day02-JavaScript-Vue #### 一、JavaScript简介 **JavaScript** 是一种广泛使用的脚本语言，用于增强网页的互动性。它由 Netscape 的 Brendan Eich 于 1995 年创建，并在同年被 Netscape...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 869
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 575
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 461
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 892
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 276
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 257
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 623
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 738
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
echarts饼图内容循环播放实现
qq_39877681的博客
09-12 302
echarts饼图内容循环播放实现
require.js实战：解析JavaScript高级模块化加载
在传统的HTML页面中，JavaScript文件通常是顺序加载的，如示例中的`index02.js`。这种方式可能导致页面加载阻塞，直到所有脚本加载完成才能继续渲染页面内容。而使用require.js，我们可以改变这种状况。 以下是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值