JavaScript数组方法与事件处理-CSDN博客

本文链接：https://blog.csdn.net/weixin_54228045/article/details/117091577

查找数组重复项

var find = function(arr=[]){
        var result = []
        // 遍历数组
        arr.forEach(item=>{
            // 如果item首次出现的位置和最后出现的位置的下标不同,则说明该item至少重复出现1次
            if(arr.indexOf(item)!==arr.lastIndexOf(item)&&!result.includes(item)){
                result.push(item)
            }
        })
        return result
    }
var arr = [2,5,1,6,2,1,2,5]
console.log(find(arr));  //2,5,1

在这里插入图片描述
主要是利用了数组的两个方法indexOf和lastIndexOf,indexOf可以返回元素在数组中首次出现的位置相对应的索引,lastIndexOf可以返回元素在数组中最后出现的位置对应的索引,如果item首次出现的位置和最后一次出现的位置的下标不同,就说明item至少是出现了1次

数组扁平化

就是将一个嵌套多层的数组(可以是任何层数)转换为只有一层的数组

实现的基本方式

对数组的每一项进行遍历
判断该项是否是数组
如果该项不是数组则将其直接放到新数组
是数组则回到1,继续迭代
当数组遍历完成,返回这个新数组

第一种方法:递归

var find1 = function(arr){
        let result = []
        // 遍历数组
        arr.forEach(item=>{
            // 如果item是一个数组,需要再次调用函数,执行递归
            if(Array.isArray(item)){
                // 递归出来的结果与result拼接
                result=result.concat(find1(item))
            }else{
                // 如果不是,push到result中
                result.push(item)
            }
        })
        // 返回
        return result
    }
var arr = [1,3,5,[1,4,3,[6,3]]]
console.log(find1(arr)); // [1,3,5,1,4,3,6,3]

在这里插入图片描述
通过数组遍历,利用Array.isArray()来判断item是否是一个数组,不是数组push到result,是数组进行递归,结果与result进行拼接,返回最后的结果

第二种方法:join split map

var find2 = function(arr){
        let result = []
        // 用join将数组分割成字符串,用split将字符串拼接成数组,map返回一个新的数组
        result = arr.join(',').split(',').map(item=>{
            // 将item转为数字类型
            return Number(item)
        })
        // 返回
        return result
    }
    var arr = [1,3,5,[1,4,3,[6,3]]]
    console.log(find2(arr));

在这里插入图片描述

用join()方法将数组分割成字符串,用split()再将字符串转为数组,将item转换为数字类型,不转为数字类型的话,出来的结果是这个样的 [“1”, “3”, “5”, “1”, “4”, “3”, “6”, “3”]

iframe

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

优点:

能够原封不动的把嵌入的网页展示出来
如果有多个网页引用iframe,那么只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷
网页为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用
如果遇到加载缓慢的第三方内容,比如图标和广告,这些问题就可以由iframe来解决

缺点:

会产生很多页面不易管理
iframe框架个数多的话,可能会出现上下,左右滚动条,会分散访问者的注意力,用户体验差
代码复杂,无法被一些搜索引擎引到,这一点很关键,现在的搜索引擎爬虫还不能很好地处理iframe中的内容,所以使用iframe会不利于搜索引擎优化
很多的移动设备无法完全显示框架,设备兼容性差
iframe框架页面会增加服务器的http请求,对于大型网站是不可取的

iframe和frame的区别:

frame不能脱离frameSet单独使用,iframe可以
frame不能放在body中,否则不会正常显示,frame不能和body同时使用,iframe可以
嵌套在frameSet中的iframe必须放在body中,不嵌套在frameSet中的iframe可以随意使用
frame的高度只能通过frameSet控制,iframe可以自己控制,不能通过frameSet控制
iframe可以放到表格里面,frame不可以

this

全局范围内this指向window对象
函数中,this永远指向最后调用他的那个对象
构造函数中,this指向new出来的实例本身
call,apply,bind中this被强制绑定在指定的那个对象身上
箭头函数中,this始终指向父级上下文(父级的作用域)
(前四种都是在调用的时候就确定的,而箭头函数的this指向是声明的时候就已经确定的)

事件模型:事件委托,代理?如何让事件先冒泡后捕获

事件委托:又叫做事件代理,利用事件冒泡,把子元素的事件都绑定到父元素上,如果子元素阻止了事件冒泡,那么委托也就没有办法实现了
好处:减少了事件绑定,减少内存占用,提高性能

事件先冒泡后捕获

给一个元素绑定两个addEventListener,第一个的第三个参数设置为false,第二个的第三个参数设置为true,调整他们的代码顺序,将设置为false的监听事件放在前面,设置为true的监听事件放在后面
语法:addEventListen("事件类型",function,true/false(true为事件捕获,false为事件冒泡))
默认的是false事件冒泡

事件为捕获时,先执行body的事件,在执行div的事件
事件为冒泡时,先执行div的事件,在执行body的事件
向上执行的过程中,已经执行过的捕获事件不会再次执行,只会执行冒泡事件

代码

<body>

    <div id="A" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
        <div id="B" style="height:200; background:#0000ff;top:100px;position:relative;">
            <div id="C" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
        </div>
    </div>

</body>

<script>
    window.onload = function () {
        var A = document.getElementById("A");
        var B = document.getElementById("B");
        var C = document.getElementById("C");

        // 事件冒泡
        A.addEventListener('click', function () {
            alert("bubble1");
        }, false);
        B.addEventListener('click', function () {
            alert("bubble2");
        }, false);

        // 事件捕获
**加粗样式**        A.addEventListener('click', function () {
            alert("capture1");
        }, true);
        B.addEventListener('click', function () {
            alert("capture2");
        }, true);
    };
    </script>

对象和面向对象

对象:万物皆对象,属性和方法的集合叫做对象

面向对象:首先是找到对象,如果该对象不具备所需要的的方法和属性,那就给他添加,面向对象是一种编程思维的改变,通过原型的方式来实现面向对象编程
模型化的,有三大特性
		1.封装:数据封装的实体就是对象,对象就是类的实例化,低耦合高内聚
		2.继承:继承是面向对象的重要特点,可以提高代码的复用性
		3.多态:重载和重写

垃圾回收机制

垃圾回收机制会定期的找出那些不在继续使用的变量,然后释放内存,他会按照固定的时间间隔,定期的执行这一操作,只有函数内的变量才会被使用
如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。

window的onload事件和domcontentload事件

onload:
当页面载入完成后执行的js代码,一个资源及其依赖资源已完成加载时,触发的事件
domcontentload:
文档加载完成触发的事件,即dom加载完成,不需要考虑其他的资源,例如图片,当初始的HTML文档被完全加载和解析完成之后,才会触发这个事件
onload事件会被样式表,图像阻塞,domcontentload事件不会

for…in和for…of区别

遍历数组的角度,for…in遍历出来的是key(下标),for…of遍历出来的是value(值)
遍历字符串的角度,同数组一样
遍历对象的角度,for…in会遍历出来为对象的key,for…of会报错(obj is not iterable)
如果要使用for…of遍历普通对象,需要配合object.key()一起使用

函数柯里化(卡瑞化,加里化)

把接受多个参数的函数变换成接受一个单一参数的函数,并返回接受剩余的参数并且返回结果的新函数
通俗理解就是,只传递给函数一部分参数来调用它,让他返回一个函数去处理剩下的参数

特点:

接收单一参数,将更多的参数通过回调函数来搞定
返回一个新的函数,用于处理所有想传入的参数
利用call,apply,bind与arguments对象收集参数
返回的这个函数正是用来处理收集起来的参数的

作用;

能进行部分的传值,而传统函数调用则需要预先确定所有的实参,如果你在代码某一处只获取了部分的实参,然后再另一处确定另一部分实参,这个时候柯里化就可以派上用场