蓝桥杯Web组备赛笔记4

最新推荐文章于 2024-04-09 08:00:00 发布

五秒法则

最新推荐文章于 2024-04-09 08:00:00 发布

阅读量363

点赞数 3

分类专栏：蓝桥杯Web组文章标签：前端 javascript 蓝桥杯

本文链接：https://blog.csdn.net/qq_51478745/article/details/129527048

版权

蓝桥杯Web组专栏收录该内容

8 篇文章 22 订阅

订阅专栏

1、第一种：ES6前，vue2数据响应式的原理

2、第二种Proxy

学习es6前，小编有本ES6入门教程推荐给小伙伴们学习🧐

ES6 入门教程https://es6.ruanyifeng.com/

一、es6新增特性

1、定义常量及其简单的使用

<script>
    const a = new Set()
    a.add(1)//添加1
    a.add(2)
    console.log(a);
    console.log(a.has(1));//判断a中是否有1
</script>

2、set()函数

（1）数组内容不能重复，其成员的值都是唯一的

（2）根据这个特性，可以很好的用于去重

<script>
    const a = new Set()
    const arr = [2, 3, 5, 4, 5, 2, 2]    //实际定义const arr = new Array([1,2,3,6,3,2,6])
    arr.forEach(function(e){    //forEach相当于一个迭代器
        a.add(e)
    })
    console.log(a);
</script>

3、构造器

<script>
    class Person{//通过class定义了一个Person
        constructor(name,sex,age){
            this.name = name
            this.sex = sex
            this.age = age
        }
        run(){
            console.log('个人信息：'+this.name);
        }
    }
    const people = new Person('申小兮','男',18)
    people.run()
</script>

<script>
    class Person{//通过class定义了一个Person
        constructor(name,sex,age){
            this.name = name
            this.sex = sex
            this.age = age
        }
        run(){
            console.log('个人信息：'+this.name);
        }
    }
    
    Person.prototype.run = function(){
        console.log('被我改掉了吧');
    }

    const people = new Person('申小兮','男',18)
    people.run()
</script>

4、构造函数

<script>
    function Text(text){
        this.text = text
        this.log = function(){
            console.log('这是打印内容：'+this.text);
        }
        function run(){
            console.log(this.text);
        }
    }

    Text.prototype.add = function(){
        console.log("Text的add方法");
    }

    Text.prototype.run = function(){
        console.log('又被改掉了吧');
    }

    const text = new Text('申小兮')
    text.log()
    text.add()
    text.run()

</script>

二、高阶函数

1、filter()：过滤器

（1）会返回一个新数组

（2）相当于迭代器，自身会进行一次循环

（3）return后是真 / 假值

<script>
    const arr = [1,2,3,4,5,6,7]
    const newArr = arr.filter((e)=>{
        return e<5
    })
    console.log(newArr);
</script>

2、find()

（1）返回值是一个对象

（2）当找到对应值时，返回第一个满足的，找不到对应值时，返回undefined

<script>
    const arr = [
        {
            "name": "申小兮",
            "age": 18
        },
        {
            "name": "张三",
            "age": 14
        },
        {
            "name": "李四",
            "age": 69
        },
        {
            "name": "王五",
            "age": 38
        }
    ]
    // arr.find(e=>{
    //     return e.name === "申小兮"
    // })
    const obj = arr.find(e => e.name === "申小兮")
    console.log(obj);
</script>

三、13届蓝桥真题（9）

1、解题思路

（1）由上面构造函数的学习，我们知道myarray.js中是自定义了一个myarray函数，并且有一个返回值cb相对于filter的返回参数

// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
  // TODO：待补充代码
};

（2）我们知道filter执行后会返回一个新数组，那么在这个自定义函数中，我们也应该定义一个新数组newArr，然后返回这个新数组newArr

// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
  // TODO：待补充代码
  const newArr = []

  return newArr
};

（3）这时候我们知道filter相对于迭代器，会有自身的循环，那么我们也可以在函数中对该对象的数据进行循环

// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
  // TODO：待补充代码
  const newArr = []
  this.forEach(e=>{
    if(cb(e)){
      newArr.push(e)
    }
  })

  return newArr
};

2、拓展find()原理

（1）按照上题的思路，会有以下情况

<script>
    const arr = [
        {
            "name": "申小兮",
            "age": 18
        },
        {
            "name": "张三",
            "age": 14
        },
        {
            "name": "李四",
            "age": 69
        },
        {
            "name": "王五",
            "age": 38
        }
    ]
    Array.prototype.myFind = function(cb){
        this.forEach(e=>{
            if(cb(e)){
                return e
            }
        })
        return undefined
    }
    console.log(arr.myFind(e => e.name === "申小兮"));
</script>

出现这个问题是因为forEach是个迭代器，不允许return来跳出该循环，所以这时候就用普通的for循环

<script>
    const arr = [
        {
            "name": "申小兮",
            "age": 18
        },
        {
            "name": "张三",
            "age": 14
        },
        {
            "name": "李四",
            "age": 69
        },
        {
            "name": "王五",
            "age": 38
        }
    ]
    Array.prototype.myFind = function(cb){
        for(let i = 0;i<this.length;i++){
            if(cb(this[i])){
                return this[i]
            }
        }
        return undefined
    }
    console.log(arr.myFind(e => e.name === "申小兮"));
</script>

四、数据劫持

1、第一种：ES6前，vue2数据响应式的原理

直接处理原数据

<script>
    let obj = {
        name:'申小兮',
        age:18,
    }
    //defineProperty数据拦截
    Object.defineProperty(obj,'age',{
        get(){
            return '我不告诉你年龄'
        },
        set(newval){
            return newval
        }
    })
    console.log(obj.name);
    console.log(obj.age);
</script>

2、第二种Proxy

通过new一个Proxy实例对象，让它代理去拦截原数据的某元素

（1）于第一种不同的是，这里的get()，set()都有三个参数

<script>
    let obj2 = {
        name:'张三',
        age:48,
    }
    
    let objProxy = new Proxy(obj2,{
        get(target,prokey,self){
            console.log(target);
            console.log(prokey);
            console.log(self);
        },
        set(target,prokey,self){
        }
    })
    console.log(objProxy.name);
</script>

（2）通过控制get()的return值，编写给用户看到的内容

<script>
    let obj2 = {
        name:'张三',
        age:48,
    }
    
    let objProxy = new Proxy(obj2,{
        get(target,prokey,self){
            console.log(target);
            console.log(prokey);
            console.log(self);
            return target[prokey]
        },
        set(target,prokey,self){
        }
    })
    console.log(objProxy.name);
</script>

（3）set()可以实现是否允许用户改值

<script>
    let obj2 = {
        name:'张三',
        age:48,
    }
    
    let objProxy = new Proxy(obj2,{
        get(target,prokey,self){
            console.log('get',target);
            console.log('get',prokey);
            console.log('get',self);
            return target[prokey]
        },
        set(target,prokey,self){
            console.log('set',target);
            console.log('set',prokey);
            console.log('set',self);
            if(prokey === 'age'){//不让改age值
                throw "你都这么老了，改不动了，不让改了"    //当检测到用户改age值时，抛出异常
            }else{
                target[prokey] = self
            }
        }
    })
    objProxy.name = '李四'
    objProxy.age = '3'
    console.log(objProxy.name);
    console.log(objProxy.age);
</script>