JS高级 第二天

黄某的前端奇妙冒险
115 阅读2分钟

JS第二天

面向对象案例

​ 需求：创建一个方法，输入哪个标签就把imgMole1标签插在哪，显示

<script>
        function MyImg(src) {
            let img = document.createElement(`img`)
            img.src = src

            this.dom = img
        }
        MyImg.prototype.append = function (parentSelect) {
            document.querySelector(parentSelect).appendChild(this.dom)
        }
        const imgMolel = new MyImg(`./img/01.jpg`)
        imgMolel.append(`li:nth-child(4)`)
</script>

原型链继承

​ 本质：call 借调 可以让一个对象 借用另外一个对象的方法

<script>
        function Person(name,age,height) {
            this.name = name
            this.age = age
            this.height = height
        }
        function Student(name,age,height,color) {
            Person.call(this,name,age,height)
            this.color=`red`
        }

        const s1 = new Person(`爸爸`,`55`,`180`)
        const s2 = new Student(`儿子`,`22`,`180`)
        console.log(s1);
        console.log(s2);
</script>

​ 语法：谁的.借什么.call（谁要用，借的东西的形参1，借的东西形参2）

<script>
        const obj = {
            name: `萧炎`,
            skill(what) {
                console.log(this.name + what)
            },
            add(jineng,jineng2){
                // 给obj添加对象
                this[jineng]=jineng,
                this[jineng2]=jineng2

                // 好理解
                this.jineng=jineng
                this.jineng2=jineng2
            }
        }

        obj.skill(`斗帝血脉`) // 斗帝血脉=what 传入skill方法中
        obj.add(`八极崩`,`佛女火炼`) // 两个字符串传入add方法
        obj[`我添加一个属性`]=`这是属性名`
        console.log(obj);
        
        const obj1 = {
            name: `黄某`
        }

        // 谁借调 this就是谁
        // call 然后传入参数（谁要借，被借的形参1，被借的形参2）
        // 不写形参，没有属性 输出undefined
        obj.skill.call(obj1,`我换个血脉`) 
        obj.add.call(obj1,`我的技能1`,`我的技能2`) 
        console.log(obj1);
</script>

​

​ 继承特性（方法继承）

<script>
        function Person(name,age,height) {
            this.name = name
            this.age = age
            this.height = height
        }

        Person.prototype.say=function(){
            console.log(this.name,this.age);
        }
        Student.prototype.say=Person.prototype.say

        function Student(name1,age,height,color) {
            //这里的形参 和 自己的构造函数形参有关
            Person.call(this,name1,age,height)
            this.color=`red`
        }

        const s1 = new Person(`爸爸`,`55`,`180`)
        const s2 = new Student(`儿子`,`22`,`180`)
        s2.say()
        console.log(s1);
        console.log(s2);
</script>

总结：

​ 1.属性的继承

​ person.call(this,其他形参)

​ 2.方法的继承

​ 儿子原型.say=父亲原型.say

继承案例

es6

​ 作用：提供了更加简单强大的代码能力，提高开发效率

​ 1.数字转换

<script>
    let a = 1;
    let b = 2;
    [b, a] = [a, b];
    console.log(a, b);// 2 1
</script>

​ 2.函数参数默认值

<script>
        function show(msg=`你好`,str=`大家好`) {
            console.log(msg,str);
        }

        show() //输出默认值你好 大家好
        show(`我好`) //msg=`我好` str不变
</script>

区别：

​ 1.之前写代码，如果传递形参就输出形参，如果没有形参输出undefined

​ 2.不想输出undefined需要自己去判断

​ 3.参数默认值，当没传入形参，自己给一个默认值。如果本身有参数，输入其参数而不是默认值。

​ 4.默认值不是重新赋值！！！

​

3.对象简写

<script>
        // 变量名如果和属性名一致，就可以简写
        const username = `黄某`
        const color = `yellow`

        function say() {
            console.log(`简写对象`);
        }

        let obj = {
            username,
            color,
            // say:say
            say
        }
        obj.say()

        console.log(obj);

        // 在对象中的方法也可以简写
        const person = {
            show:function(){
                console.log(`常规写法`);
            },
            // 简写方式
            showPro(){
                console.log(`简写大法`);
            }
        }
        person.show()
        person.showPro()
</script>

​ 4.解构

<script>
        const arr = [1, 2, 3]
        /* let a = arr[0]
        let b = arr[1]
        let c = arr[2] 
        console.log(a,b,c);// low爆写法*/

        const [a, b, c] = arr
        console.log(a, b, c); // 数组解构写法

        const obj = {
            username: `黄某`,
            color: `yellow`
        }

        /* const username = obj.username
        const color = obj.color
        console.log(username,color);  *///low 爆写法

        const { username, color } = obj
        console.log(username, color); 


        //解构 ＋ 默认值
        const arr1 = [1]
        /* const[a1,b1]=arr1 
        console.log(a1,b1);  a1=1 b1=undefined*/

        const[a1,b1=2]=arr1
        console.log(a1,b1); //b1=2是默认值

        const arr2 = [1,100]
        const[a2,b2=2]=arr2
        console.log(a2,b2);//虽然有给默认值，可是默认值定义时当没有值时，才会使用。现在b2是有值的
</script>

总结： 1650613140399

​ 5.剩余运算符

<script>
        const[a,...b1]=[1,2,3]
        console.log(a); // 输出1
        console.log(b1); // 输出数组[1,2,3]

        const{a2,...b}={a2:1,b:2,c:3}
        console.log(a2); //输出1
        console.log(b);// 输出数组{b:`2`,c:`3`}


        function cale(...args) {
            let sum = 0
            args.forEach((value)=>(sum+=value))
            console.log(sum);
        }
        cale(1,2,3)
</script>

计算数字最值案例

<script>
        function getMax(...arr) { 
            //方法1
            let max = arr[0]
            arr.forEach((value)=>{
                if(value>max){
                    max=value
                }
            })
            console.log(max);
            
            //方法2
            //log => arr=[1,2,3....]
            console.log(...arr);// 输出1,2,3...
            let max1 = Math.max(...arr)
            console.log(max1);
        }
        getMax(1,2,3,345,345,34,5,345,567,563,5,34)
</script>

最大值运用剩余运算符

<script>
        function getMax(...arr) { 
            let max = arr[0]
            arr.forEach((value)=>{
                if(value>max){
                    max=value
                }
            })
            console.log(max);
            
            //arr=[1,2,3....]
            console.log(...arr);// 输出1,2,3...
            let max1 = Math.max(...arr)
            console.log(max1);
        }
        getMax(1,2,3,345,345,34,5,345,567,563,5,34)
</script>

拓展（剩余）运算符用法

<script>
        const obj = {
            name:`悟空`,
            height:180
        }
        // 新创一个对象 有obj所有属性 同时多一个color属性

        /* const obj1 = obj
        obj1.color = `yellow`
        console.log(obj1);
        console.log(obj);  旧对象 也发生影响 不行 */

        const obj2 = {...obj,color:`yellow`} //开辟新空间 互不影响
        obj2.name=`八戒`
        console.log(obj2);
        console.log(obj);



        const arr = [`a`,`b`,`c`]
        const newArr = [`first`,...arr,`d`]
        console.log(newArr); // 实现新增 arr.push arr.unshift
</script>

总结：

​ 1.数组中 const[a,...b]=[1,2,3] b=[2,3]

​ 2.对象中使用与数组相似

​ 3.应用场景 伪数组转换为真数组

​ 4.log(...arr) 会把数组展开

​ 5.利用展开属性可以实现数组，对象的新增效果且不影响原来的数组或对象

​ 6.数组去重案例

some方法

<script>
        let ul = document.querySelector(`ul`)
        let inp = document.querySelector(`input`)
        let arr = []
        inp.addEventListener(`keydown`,function(e){
            if(e.key===`Enter`){
                //如果arr数组中值只要有一个和输入值相同，返回true 
                const isHas = arr.some((value)=>value===this.value)
                if(isHas){
                    alert(`重复了`)
                }else{
                    arr.push(this.value)
                    render()
                }
            }
        })

        function render() {
            let lis = arr.map((value) => `<li>${value}</li>`).join(``)
            ul.innerHTML = lis
        }
    </script>

for方法

<script>
        let ul = document.querySelector(`ul`)
        let inp = document.querySelector(`input`)
        let arr = []
        inp.addEventListener(`keydown`, function (e) {

            if (e.key === `Enter`) {
                //和some方法相似
                let isHas = false
                for (let index = 0; index < arr.length; index++) {
                    if(arr[index]===this.value){
                        isHas=true
                        break
                    }
                    
                }
                if(isHas){
                    console.log(`不给你输`);
                }else{
                    arr.push(this.value)
                    render()
                }
            }
        })

        function render() {
            let lis = arr.map((value) => `<li>${value}</li>`).join(``)
            ul.innerHTML = lis
        }
</script>

filter方法

<script>
        // 我数组 ['a','c','d']
        // 输入"d" 数组过滤 不包含 "d"  => ['a','c']
        // ['a','c'] 再次添加 'd' 进去 就可以了
        let ul = document.querySelector(`ul`)
        let inp = document.querySelector(`input`)
        let arr = []
        inp.addEventListener(`keydown`, function (e) {

            if (e.key === `Enter`) {
                // 如果输入值与数组中不相同 就把不相同拿出来放入新数组
                let newArr = arr.filter((value) => value !== this.value)
                // 把不含有相同值的数组 重新返回就数组中
                arr = newArr
                // 再把这个数组插入 新的值
                arr.push(this.value)
                render()
            }
        })

        function render() {
            let lis = arr.map((value) => `<li>${value}</li>`).join(``)
            ul.innerHTML = lis
        }
</script>

下标方法

<script>
        // 先找到 “b” 在我数组的索引 位置
        // 执行 数组 删除元素  arr = [a,c]
        // 然后 再去执行 添加元素的操作
        let ul = document.querySelector(`ul`)
        let inp = document.querySelector(`input`)
        let arr = [`a`, `b`]
        render()
        inp.addEventListener(`keydown`, function (e) {
            let i = -1 // -1 没找到 初始判断值
            for (let index = 0; index < arr.length; index++) {
                //如果数组中有值和输入框相同
                if (arr[index] === this.value) {
                    // 判断值下标等于这个数组下标
                    i = index
                    break
                }

            }
            // 判断如果没找到相同 就添加输入框值
            if (i === -1) {
                arr.push(this.value)
            } else {
                //如果找到相同的，根据索引下标删除这个数组，再添加相同的输入内容
                arr.splice(i, 1)
                arr.push(this.value)
            }
            render()
        })

        function render() {
            let lis = arr.map((value) => `<li>${value}</li>`).join(``)
            ul.innerHTML = lis
        }
</script>

总结：

​ 1.some和for方法思路有相似之处，设置一个变量判断true或false，围绕布尔类型做需求

​ 2.filter和下标方法思路有相似之处，利用数组做增删变化。

avatar
文章
阅读
粉丝