js面试知识点笔记

    // 在数组这个类的原型上增加一个方法，那么以后数组的实例就可以使用这个方法了
    Array.prototype.unique=function(){
           // 克隆原有数组， 使去重后不影响现有数组
           let result=[].concat(this)
           //声明一个对象的属性为数组的值，如果存在这个属性说明数组已经有重复的值了，我们把删除即可
           let obj={}   
           for(let i=0;i<result.length;i++){
            let item=result[i]
            if(obj[item]){
            result.splice(i,1) 
          // 删除了数组的一个位数字，那么数组的长度最会往前减一，所以i要减1 
            i--             
            continue
            }
            obj[item]=true
           }
          return result
       }

  // 获取当前的数组项，和后面数组的每一项比较，如果存在相同就把他删除
   Array.prototype.unique = function () {
            let result = [].concat(this)
            for (let i = 0, iLen = result.length; i < iLen; i++) {
                let item = result[i]
                for (let j = i + 1, jLen = result.length; j < jLen; j++) {
                    if (item === result[j]) {
                        result.splice(i, 1)
                          // 这种删除数组方式性能上更好，因为splice每删除一次都要往前计算他的长度
                         // result[i]=result[result.length-1]
                        // result.length--
                        i--
                    }
                }
            }
            return result
        }

// 利用slice获取i+1到最后 和 i 项,用indexOf 查找后面是否有当前项 i项，有就删除
 Array.prototype.unique = function () {
            let result = [].concat(this)
            for (let i = 0, iLen = result.length; i < iLen; i++) {
                let item = result[i]
                let nextItemAll=result.slice(i+1)
                if(nextItemAll.indexOf(item)>-1){
                    result.splice(i,1)
                    i--
                }
            }
            return result
        }

  Array.prototype.unique = function () {
            let result =[]
            let ary=this.sort((a,b)=>{a-b}) //数组升序
            for (let i = 0, iLen = ary.length; i < iLen; i++) {
             let item=ary[i]
             let itemNext=ary[i+1]
             if(item!==itemNext){
                 result.push(item)
             }
            }
            return result
        }

把实现一个功能的JS代码进行封装，主要目的：“低耦合高内聚”

重载：方法名相同，参数的个数或者类型不同，此时名字相同的方法叫做方法的重载（后台语言中的重载），JS中不存在重载的

重写：子类重写父类的方法

子类继承父类的属性和方法

1. 原型继承

2. call继承

3. 寄生组合继承

4. ES6中class类实现继承

//=>根据传递参数的不同执行不同的方法（后台语言）
public void fn(int n,int m){

}
public void fn(string n,string m){

}
public void fn(int n,int m,int z){

}

 // 原型继承：让子类的原型指向父类的一个实例
 function Parent(){
   this.name="chimpanzee"
}
Parent.prototype={
   constructor:Parent,
   getName:function(){
   return this.name   
} 
}

function Son(){
 this.age=18
}
Son.prototype=new Parent()
let son=new Son()
   // Son {
        //     age: 18
        // }
        // age: 18
        // __proto__: Parent
        // name: "chimpanzee"
        // __proto__:
        //     constructor: ƒ Parent()
        // getName: ƒ()
        // __proto__: Object

 Son.prototype._proto_.getName=""

function Parent() {
            this.name = "chimpanzee"
        }
        Parent.prototype = {
            constructor: Parent,
            getName: function () {
                return this.name
            }
        }

        function Son() {
            Parent.call(this)
            this.age = 18
        }
        let son=new Son()
        console.log(son.name) // chimpanzee 

function Parent() {
            this.name = "chimpanzee"
        }
        Parent.prototype = {
            constructor: Parent,
            getName: function () {
                return this.name
            }
        }

        function Son() {
            this.age = 18
            Parent.call(this)
        }
        Son.prototype = {
            constructor: Son,
            getAge: function () {
                return this.name
            }
        }
       Son.prototype=Parent.prototype //这种方式可以轻易修改父类Parent原型的方法和属性
       // Object.create:内置Object类天生自带的方法
          创建一个空对象
          让新创建空对象的__proto__指向第一个传递进来的对象 
       Son.prototype=Object.create(Parent.prototype)
       Son.prototype.__proto__.getName=""
       let son=new Son()
       let parent=new Parent()
       console.log(parent.getName) // ""
       // index.html:56 Uncaught TypeError: son.getName is not a function 
       console.log(son.getName()) 
       console.log(Son.prototype.getName())
       console.log(Parent.prototype.getName()) //这个还是报错，老师讲的我理解的有误差，后面查资料解决

  class Woman {
            constructor() {
               this.name="linjiyou"
               this.age=18
            }
            getName() {
               return this.name
            }
            //设置静态方法和属性，static和实例是没有关系，调用只能是 Woman.[key]，只能设置方法不能设置属性
            static getAge(){
             return this.age
            }
        }
        // 这样写和往类里面添加方法一样实例可以使用
         Woman.prototype.getSex=function(){
            return this.sex
        }
        // 这种要类名才可以使用
        Woman.getMoney=function(){
            return "no money"
        }
        // 这个也是要类名才可以使用
        Woman.annualSalary=120000
 //

 class Preson extends Woman { //=>extends类似于实现了原型继承
          constructor() {
              super(); //=>类似于CALL继承：在这里SUPER相当于把A的CONSTRUCTOR给执行了，并且让方法中的THIS是B的实例，SUPER当中传递的实参都是在给A的CONSTRUCTOR传递
              this.y = 200;
           }
          getY() {
             console.log(this.y);
           }
      }

 function insertAfter(newEle, originEle) {
            let parent = originEle.parentNode
            let originEleNext = originEle.nextElementSibling
            if (originEle) {
                parent.insertBefore(newEle, originEleNext)
            } else {
                parent.appendChild(newEle)
            }

        }
        let originEle = app.querySelector(".a")
        let newEle = document.createElement("div")
        newEle.innerText = "3"
        insertAfter(newEle, originEle)

 let $attr = (domID, name, value) => {
            //1.先获取当前页面中所有的标签
            let tagList = document.getElementsByTagName('*');
            //2.在获取的所有标签中按照ID/NAME/VALUE进行筛选（数组内置方法：filter）
            tagList = [].slice.call(tagList); //=>把类数组转换为数组
            //=> tagList=[...tagList] 基于ES6中的展开运算符完成，让TAG-LIST等于一个数组，数组中的每一项是把之前的类数组展开后得到的
            tagList = tagList.filter(item => {
                //=>item.name:只有表单元素这样才可以获取到值,普通元素需要基于getAttribute获取值
                return item.id === domID && item.getAttribute(name) === value;
            });
            return tagList;
        };

let total = 0;
for (let i = 1; i <= 100; i++) {
    if (i % 15 === 0) {
        total += i;
    }
}
function fn(n) {
    if (n > 100) return 0;
    if (n % 15 === 0) {
        return n + fn(n + 1);
    }
    return fn(n + 1);
}

let result = [],
    fn = function (ary) {
        if (ary.length === 0) return;
        for (let i = 0; i < ary.length; i++) {
            let item = ary[i];
            if (typeof item === 'object') {
                fn(item);
            } else {
                result.push(item);
            }
        }
    };

let xxxRender=(function(){
    return {
        init:function(){

        }
    }
})();

Function.prototype.bind = function bind(context, ...arg) {
    return () => {
        fn.call(context, ...arg);
    }
};
document.onclick=fn.bind(obj, 10, 20);

let str = '54389',
    ary = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
str = str.replace(/\d/g, item => {
    //=>item =>arg[0] =>正则每一次捕获的内容 5/4/3/8/9
    //=>把捕获的数字做为索引，到ARY中找到对应的汉字，用找到的结果替换当前捕获的内容
    return ary[item];
});
console.log(str);

String.prototype.repeatify = function repeatify(n = 1) {
    //=>this:需要处理的字符串
    let result = '';
    for (let i = 0; i < n; i++) {
        result += this;
    }
    return result;
};
console.log('abc'.repeatify());

let ary1 = [1, 2, 3, 4, 5],
    ary2 = [2, 3, 4, 5, 6];
// let ary = ary1.concat(ary2).sort((a, b) => a - b);
let ary = [...ary1, ...ary2].sort((a, b) => a - b);

$(function () {
    /*//=>当页面结构加载完成执行函数
    $('#link').on('click', function () {
        $('<div class="center"></div>').appendTo(document.body);
    });*/
});

$('#nav>li>a').on('click', function (ev) {
    //=>this:当前点击的A
    //=>$(this):当前点击的A(JQ对象)

    //=>阻止点击A标签页面跳转的行为
    ev.preventDefault();

    //=>准备数据
    let $this = $(this),
        $p = $this.parent();
    let obj = {
        index: $p.index() + 1,
        name: $this.text(),
        link: $this.attr('href')
    };
    console.log(obj);
});

#myDiv {
  position: absolute;
  width: 100px;
  height: 100px;
  left: expression(document.body.offsetWidth - 110 + "px");
  top: expression(document.body.offsetHeight - 110 + "px");
  background: red;
}

 .container .link a{
    先找到所有的A，再筛选是在.link样式类中的，再次筛选是在.container样式类中的... 先找到的是所有的A，操作起来是消耗性能的，我们在使用CSS选择器的时候尽可能减少对标签选择器的使用
 }

.bg{
  background:url('xxx.png');
}
.box1{
   background-position:xx xx;
}
.box2{
   background-position:xx xx;
}

<div class='bg box1'></div>