zoukankan      html  css  js  c++  java
  • 前端面试题目总结1

    数据类型

    js中的数据类型有两类:值类型和引用类型

    值类型:numberstringbooleanSymbolundefined
    引用类型:null数组对象

    使用typeof能用来干什么

    1. 判断是否是值类型
    typeof obj !== 'object' || typeof obj == null
    
    1. 判断是否是函数
    typeof obj === 'function'
    
    1. 判断是否是引用类型
    typeof obj === 'object'
    

    值类型和引用类型的区别

    每声明一个值类型的变量,就会去开辟一个新的内存空间去存储变量的值

    // 值类型
    let a = 10;  // 在内存中开辟一个空间给变量 a,a的地址为 100,值为 10
    let b = a;  // 在内存中开辟一个空间给变量 b,b 的地址为 200,并且把 a 的值赋值给 b,为10
    a = 20;  // 查找 a 的地址,并把 a 的值更改为20
    console.log(a);  // 20,查找 a 的地址 100,然后找到对应的值 20
    console.log(b);  // 10,查找 b 的地址 200,然后找到对应的值10
    

    而引用类型的值,则是放在堆中的,在复制的时候引用的状态,

    // 引用类型
    // 在内存中开辟一个空间给变量 obj1,
    // 然后在堆中创建一个对象 { age: 20 }, 并把堆中的这个对象的内存地址 600 赋值给 obj1
    let obj1 = { age: 20 };  
    // 在内存中开辟一个空间给变量 obj2,然后把 obj1 的值 地址600 赋值给 obj2,
    // 而 obj1 存的是 对象 { age: 20 } 的地址,故 obj2 存的就是该对象的地址 600
    let obj2 = obj1;
    // obj1存的是地址,故 obj1.age = 30 修改的是 地址 600 的内容,修改为30
    obj1.age = 30;
    // 故打印出来的 obj1.age 和 obj2.age 都是 30
    console.log(obj1.age);  // 30
    console.log(obj2.age);  // 30
    

    之所有引用类型是因为担心性能的问题,若一个对象的特别大,那么如果按照值类型的话,那么就特别占用内存。

    类型转换

    1. 字符串拼接
    2. ==
    3. if 语句和逻辑运算

    字符串拼接

    10 + '10' // 1010
    10 + false // 10false
    

    双等==

    除了 == null 之外、其它一律使用 ===
    a == null 相当于 a === undefined || a === null

    if语句和逻辑运算

    在 js 中的 if 语句中的条件语句的值实际上是 truelyfalsely,这和c语言可能有点不一样。
    以下都是 falsely 变量,除此之外都是 truely 变量

    !!0 === false
    !!NaN === false
    !!'' === false
    !!null === false
    !!undefined === false
    !!false === false
    

    深拷贝

    因为引用的类型的存在,我们有时候需要赋值的不对原来的对象造成影响,那么我们就需要拷贝该引用对象。

    function deepClone(obj) {
      // 判断是否是值类型以是否是null
      if (typeof obj !== 'object' || typeof obj == null) {
        // 只有当 obj 是值类型或者 obj 为 null 或者 undefined 时,才会直接返回
        return obj;
      }
    
      // 初始化返回值类型
      let result;
      if (obj instanceof Array) {
        result  = []
      } else {
        result = {}
      }
    
      // 递归遍历设置值
      for (let key in obj) {
        // 判断是否是自身的属性
        if (obj.hasOwnProperty(key)) {
          // 若是自身的属性就去赋值,并通知递归判断是否需要再次拷贝
          result[key] = deepClone(obj[key])
        }
      }
    
      return result;
    }
    
    // 测试
    let obj1 = { age: 20 };  
    let obj2 = deepClone(obj1);
    obj1.age = 30;
    console.log(obj1.age);  // 20
    console.log(obj2.age);  // 30
    

    如何准确判断一个变量是不是数组

    instanceof

    手写一个简易的jQuery,考虑插件和扩展性

    class jQuery {
      constructor(selector) {
        const els = document.querySelectorAll(selector);
        const length = els.length;
        this.length = length;
        this.selector = selector;
        for (let i = 0; i < length; i++) {
          this[i] = els[i]
        }
      }
      
      html(val) {}
    
      css() {}
    
    }
    
    // 插件
    jQuery.prototype.style = function() {}
    
    // 扩展性
    class myJquery extends jQuery {
      constructor(selector) {
        super(selector)
      }
    
      on() {}
    
      each() {}
    }
    

    原型

    原型关系

    每个构造函数都有一个现实原型prototype,每个实例都有一个隐式原型__proto__,每个实例的隐式原型指向其构造函数的显示原型。

    基于原型的执行规则

    获取属性或执行方法时,先在自身身上查找,倘若找不到就去隐式原型__proto__上去寻找,层层向上,直到null为止

    class People {
      constructor(){}
      eat(){}
    }
    
    class Student extends People{
      constructor(name) {
        super();
        this.name = name;
      }
      study(){}
    }
    
    const stu = new Student('George');
    // stu 自身上有study方法
    stu.study();
    // stu 自身上没有eat方法,故去 stu 的隐式原型__proto__上去寻找,
    // stu.__proto__指向People.prototype,而People.prototype上有 eat 方法
    stu.eat();
    // stu 自身上没有toString方法,故去stu的隐式原型__proto__上去寻找,
    // stu.__proto__指向People.prototype,而People.prototype上没有toString方法,
    // 则继续去People.prototype.__proto__上去寻找,
    // 而People.prototype.__proto__指向的是Object.prototype
    // Object.prototype有toString方法,则找到
    stu.toString();
    

    作用域

    在js中,作用域一共有三种

    1. 全局
    2. 函数
    3. 块级

    自由变量

    1. 一个变量在当前作用域没有被定义,但被使用
    2. 若当前作用域找不到该变量则向上层作用域寻找,层层向上,直到找到为止
    3. 若全局作用域也没找到,则操作xxx is not defined

    ps:自由变量的查找是在函数定义的作用域向上找,而不是执行的作用域

    // 案例1
    function foo() {
      let a = 2;
      function bar() {
        console.log(a);  // 2
      }
      bar();
    }
    foo();
    
    // 案例2
    function foo() {
      let a = 2;
      bar();
    }
    let a = 10;
    function bar() {
      // 自由变量的查找是在函数定义的作用域向上找,而不是执行的作用域
      console.log(a);  // 10
    }
    foo();
    

    闭包

    闭包是作用域应用的特殊情况,有两种表现

    1. 函数作为参数传递
    2. 函数作为返回值

    闭包在实际开发中的应用

    闭包经常用来隐藏数据,做私有变量

    // 在这个例子中,无论怎样都无法去直接获取data的值,只能通过方法去设置或获取对应的值
    function store() {
      // 永远无法直接操作该数据 data
      const data = {};
      return  {
        get(key) {
          return data[key];
        }
        set(key, value) {
          data[key] = value;
        }
      }
    }
    
    const s = store();
    s.set('a', 'asd');
    console.log(s.get('a'));  // asd
    

    闭包的影响

    变量会常驻内存,得不到释放,所以闭包不要乱用

    • 自由变量:内存会被释放
    let a = 1;
    function fn1() {
      let b = 10;
      function fn2() {
        let c = 20;
        function fn3() {
          let d = 30;
          return a + b + c + d;
        }
        fn3(); // 1. fn3执行完后 c、d 就被释放
      }
      fn2();  // 2. fn2执行完后 b 就被释放
    }
    fn1();  // 3. fn1执行完后 a 就被释放
    
    • 函数作为返回值:内存不会被释放
    function store() {
      // 永远无法直接操作该数据 data,data永远不会被释放
      const data = {};
      return  {
        get(key) {
          return data[key];
        }
        set(key, value) {
          data[key] = value;
        }
      }
    }
    
    const s = store();
    s.set('a', 'asd');
    console.log(s.get('a'));  // asd
    

    this

    1. 作为普通函数被调用
    2. 使用callapplybind改变this指向
    3. 作为对象方法被调用
    4. 在class的方法中被调用
    5. 箭头函数,其this是上级作用域的值
      this的指向实在函数执行的时候确定的,不是在函数定义的时候确定的,而作用域是在定义的时候确定的
    function fn1() {
      console.log(this);  
    }
    
    fn1();  // this = window
    
    fn1.call({ x: 100 });  // this = {x:100}
    const fn2 = fn1.bind({ x: 200 })
    fn2();  // this = { x: 200 }
    
    const zhang = {
      name: 'zhang',
      sayHi() {
        console.log(this);   // 当前对象
      },
      wait() {
        console.log(this);  // 当前对象
        setTimeout(function() {
          console.log(this);  // window,这个函数是setTimeout调用的,而setTimeout指向的是window
        });
      },
      wait() {
        setTimeout(() => {
          console.log(this);  // 当前对象
        });
      }
    };
    
    class People {
      constructor(name) {
        this.name = name;
      }
      sayHi() {
        console.log(this); // People的实例对象
      }
    }
    new People().sayHi();
    

    手写一个bind函数

    Function.prototype._bind = function() {
      // 将arguments参数转换为数组
      const args = Array.prototype.slice.call(arguments);
    
      // 取出args中的第一个元素,这个元素作为this的范围,并删除第一个元素
      const cxt = args.shift();
    
      // 返回一个函数
      return function() {
        return this.apply(ctx, args)
      }
    }
    

    手写一个apply函数

    // apply的第一个参数是上下文,第二个参数是数组
    Function.prototype._apply = function() {
      // 将arguments参数转化为数组
      const args = Array.prototype.slice.call(arguments);
    
      // 取出args中的第一个元素,这个元素作为this的范围,并删除第一个元素
      const ctx = args.shift();
      
      // 当前this指向的是调用的函数,把this绑定到ctx即obj上
      // 将要当前调用的函数绑定到新的this上
      ctx._fn = this;
    
      // 通过ctx来执行_fn函数,此时的this指向的是ctx对象,此时foo的this就指向为obj对象,从而改变了this的指向
      // 执行调用的函数
      ctx._fn(...args[0]);
    
      // 删除ctx上的_fn删除
      // 删除调用的函数
      delete ctx._fn;
    };
    
    function foo(name, age) {
      console.log(this);  // 指向 obj 对象
      this.name = name;
      this.age = age;
    }
    const obj = { a: 2 };
    foo._apply(obj, ["leo", 20]);
    

    手写一个call函数【和apply的原理一样】

    Function.prototype._call = function() {
      // 将arguments参数转化为数组
      const args = Array.prototype.slice.call(arguments);
    
      // 取出args中的第一个元素,这个元素作为this的范围,并删除第一个元素
      const ctx = args.shift();
      console.log(args);
      // 将this即foo函数绑定到ctx即obj上
      ctx._fn = this;
      // 通过ctx来执行_fn函数,此时的this指向的是ctx对象,此时foo的this就指向为obj对象,从而改变了this的指向
      ctx._fn(...args);
      // 删除ctx上的_fn删除
      delete ctx._fn;
    };
    
    function foo(name, age) {
      this.name = name;
      this.age = age;
    }
    const obj = { a: 2 };
    foo._call(obj, "leo", 20);
    

    单线程和异步

    js是单线程的语言,只能同时做一件事,浏览器和nodejs已支持js启动进程,如web worker,js和dom渲染公用一个线程,因js可修改dom结构,遇到等待(请求、定义)不能卡住,使用异步的用调用callback形式。

    异步的使用场景

    1. 网络请求
    2. 定时任务

    异步的出现会出现一个问题就是callback hell,就会一直嵌套,如果有100个请求那就会嵌套100次

    $.get(url, function(res) {
      $.get(url1, function(res1) {
        $.get(url2, function(res2) {
          $.get(url3, function(res3) {
            
          })
        })
      })
    })
    

    为了解决解决callback hell【地域回调】,现在最佳的方式是使用Promise,这样就不会出现地域回调的问题

    $.get(url).then(res => {
      return $.get(url1)
    }).then(res => {
      return $.get(url2)
    }).then(res => {
      return $.get(url3)
    })
    

    JS Web API

    在如今各种框架的盛行的时代,让开发人员手动操作DOM的机会越来越少,像Vue、React这样的框架,内部都封装了各种DOM操作,但是DOM操作一直都会是前端工程师的基础,也是必备的知识,只会Vue而不会DOM操作的前端工程师不会长久。

    DOM(Document Object Model)是哪种数据结构(DOM的本质)

    DOM是树形结构,所以在操作DOM的时候才会有各种方法,比如获取父节点、子节点、相邻的节点

    DOM操作常见的API

    • 节点操作
    • 结构操作
    • property操作
    • attribute操作

    DOM节点操作

    document.getElementById()
    document.getElementsByClassName()
    document.getElementByTagName()
    document.getElementByName()
    

    property操作

    通过js属性的形式操作样式,修改dom元素对应的js属性,不会提现到html结构中

    div.style.width = '20px'
    

    attribute操作

    会修改html标签上的属性,会体现在html结构上

    div.setAttribute('data-name', 'xxx');
    console.log(div.getAttribute('data-name'));  // xxx
    

    PS:通过property和attribute的方式,都会引起DOM渲染,但尽量使用property操作,attribute会改变页面的html结构,所以attribute一定会使页面宠幸渲染,而property可能会使页面重新渲染

    DOM结构操作

    1. 新增节点

    const div = document.createElement('div')
    

    2. 插入节点

    document.body.appendChild(div)
    

    3. 删除节点

    document.body.removeChild(div)
    

    4. 移动节点

    // 未移动前的DOM结构
    <div id="div1">
      <p id="p1">p1</p>
      <p>p2</p>
      <p>p3</p>
    </div>
    <div id="div2">
      <p>p4</p>
    </div>
    
    // 移动操作
    <script>
      const p1 = document.getElementById('p1');
      const div2 = document.getElementById('div2');
      div2.appendChild(p1);  // 这里的p1是一个现有元素,故能够移动
    </script>
    
    // 移动后的DOM结构
    <div id="div1">
      <p>p2</p>
      <p>p3</p>
    </div>
    <div id="div2">
      <p>p4</p>
      <p id="p1">p1</p>
    </div>
    

    5.获取子元素列表

    div.childNodes
    

    childNodes会获取各种节点,如元素节点、注释节点、文本节点。所以我们必须使用nodeName和nodeType属性来判断是不是你想要的元素

    // 获取所有的元素节点
    nodeList.filter(child => child.nodeType === 1)
    

    6. 获取父元素

    div.parentNode
    

    DOM操作是十分昂贵的,所以应该避免频繁的DOM操作,对DOM查询进行缓存,将多次的操作转化为一次性操作。

    <div id="div1">
      <p>p1</p>
      <p>p2</p>
      <p>p3</p>
    </div>
    
    <script>
    	// 对div1缓存
    	const div1 = document.getElementById("div1");
    	// 缓存div1的子元素
    	const children = Array.prototype.slice
    		.call(div1.childNodes)
    		.filter(child => child.nodeType === 1);
    	// 缓存长度
    	const length = children.length;
    	for (let i = 0; i < length; i++) {
    		console.log(children[i].innerHTML);
    	}
            // 将多次的操作转化为一次性操作
    	const fragment = document.createDocumentFragment();
    	for (let i = 0; i < length; i++) {
    		const p = document.createElement("p");
    		p.id = "p" + i;
    		p.innerHTML = "this is p " + i;
    		fragment.appendChild(p);
    	}
            // 一次性去操作DOM
    	div1.appendChild(fragment);
    </script>
    

    BOM(Browser Object Model)操作

    1. navigator

    // 获取浏览器的信息
    const ua = navigator.userAgent
    

    2. screen

    3. location

    location.href // 全网址
    location.protocal  // 协议
    location.host  // 域名
    location.search  // 查询参数
    location.hash  // 井号后面的内容
    location.pathname // 网站的路径,包括井号
    

    4. history

    5. window

    6. document

    事件冒泡

    顺着DOM结构向上冒,事件源本身没有事件

    <div id="div1">
    	<a href="#">a1</a>
    	<a href="#">a2</a>
    	<a href="#">a3</a>
    </div>
    <script>
    	const div1 = document.getElementById("div1");
    	div1.addEventListener("click", function(ev) {
    	    ev.preventDefault();  // 阻止默认行为,这里是a标签,a标签默认会跳转,这里阻止a的默认跳转行为
    		console.log(ev.target);  // 点击什么元素,它就是什么元素
    	});
    </script>
    

    事件代理

    事件代理是在事件冒泡的机制上去实行的。其优点是代码简洁,减少浏览器的内存占用,但不要滥用。使用场景,比如有一个很长的列表,这时候要判断店家的是哪个item,这个时候就可以使用事件代理

    <div id="div1">
    	<a href="#">a1</a><br />
    	<a href="#">a2</a><br />
    	<a href="#">a3</a><br />
    </div>
    <button>add</button>
    <script>
    	const div1 = document.getElementById("div1");
    	document.body.addEventListener("click", function(ev) {
    		ev.preventDefault();
    		const target = ev.target;
    		const nodeName = target.nodeName;
    		console.log(nodeName);
    		if (nodeName === "A" || nodeName === "p") {
    			console.log(target.innerHTML);
    		} else if (nodeName === "BUTTON") {
    			const fragment = document.createDocumentFragment();
    			for (let i = 0; i < 5; i++) {
    				const p = document.createElement("p");
    				p.id = "p" + i;
    				p.innerHTML = "this is p " + i;
    				fragment.appendChild(p);
    			}
    			div1.appendChild(fragment);
    		}
    	});
    </script>
    

    编写一个通用的事件监听函数

      <body>
        <div id="div1">
    	<a href="#">a1</a><br />
    	<a href="#">a2</a><br />
    	<a href="#">a3</a><br />
        </div>
        <button>add</button>
      </body>
    
    // 事件监听和事件代理
    function bindEvent(el, type, fn, selector, prevent) {
    	el.addEventListener(type, ev => {
    		if (prevent) {
    			ev.preventDefault();
    		}
    		const target = ev.target;
    		const nodeName = target.nodeName;
    		if (selector) {
    			if (
    				typeof selector === "string" &&
    				selector.toUpperCase() === nodeName
    			) {
    				// 将fn的this指向target
    				fn.call(target, ev, target);
    			}
    		} else {
    			fn.call(target, ev, target);
    		}
    	});
    }
    const div1 = document.getElementById("div1");
    bindEvent(
    	document.body,
    	"click",
    	function(ev) {
    		console.log(this);
    		console.log(this.innerHTML);
    	},
    	"a"
    );
    

    手写一个简易的ajax

    function ajax({url, method, body, query, async = true}) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open(method.toUpperCase(), url, async) ;  // async表示是否异步,true为异步
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              resolve(xhr.responseText && JSON.parse(xhr.responseText));
            } else {
              reject(xhr)
            }
          }
        }
      xhr.send(body)
      })
    }
    

    xhr.readyState

    1. 未初始化,还未调用send()方法
    2. 载入完成,已调用send()方法,正在发送请求
    3. 交互,正在解析响应内容
    4. 完成,响应内容解析完成,可在客户端调用

    同源策略

    ajax请求时,浏览器要求当前网页和server必须同源(安全)
    同源:协议、域名、端口,三者必须一致
    加载图片、css、js可无视同源策略

    跨域

    所有的跨域,都必须经过server端的允许和配合
    未经server端允许实现跨域,说明浏览器有漏洞,危险信号

    JSONP基本源流

    script可绕过跨域限制
    服务器可以任意动态拼接数据返回
    所以,script就可以用来回去跨域的数据,只要服务器愿意返回

    window.cb = function(res) {
      console.log(res);  // 服务器返回的数据
    }
    <script src="xxx?user?callback=cb"></script>
    
    // 服务器返回数据格式
    cb({ name: "xxx" })
    

    描述cookie和localStorage和sessionStorage的区别

    从容量和API易用性角度。

    1. cookie 本身用于浏览器和 server 通讯,被“借用”到本地存储
    2. api为document.cookie,不够友好
    3. 容量最大为4kB
    4. http请求时需要一同发送到服务器,增加了请求的数据量

    localStorage和sessionStorage

    1. 专为本地存储而设计的,最大为5MB
    2. API简单易用,setItemgetItem
    3. 不会随http请求发送出去
    4. localStorage数据永久存储,除非被动删除
    5. sessionStorage中存在当前会话,浏览器关闭后就会清空

    从输入URL到渲染出页面的整个过程

    1. DNS解析:域名 -> IP地址
    2. 浏览器根据IP地址向服务器发送http请求
    3. 服务器处理http请求,并返回给浏览器
    4. 根据html代码生成DOM树
    5. 根据CSS代码生成CSSOM
    6. 将DOM树和CSSOM整合成RenderTree
    7. 根据RenderTree渲染页面,遇到script标签则暂停渲染,优先加载脚本并执行js代码,完成后再继续。暂停是因为JS进程和渲染进程是公用一个线程的,js可能会改变DOM结构
    8. 直到渲染完成

    其中link要放在head中,因为放在后面可能会造成再次渲染问题,js放在最后,是因为JS进程和渲染进程是公用一个线程的,而且有可能js加载时间很长,然后就会造成页面卡顿现象,img标签不会暂停渲染,不会阻塞DOM渲染,不会造成重排现象。

    window.onload和DOMContentLoaded的区别

    window.addEventListener('load', function() {
      // 页面全部资源加载完才会执行,包括图片、视频
      console.log('load');  // 后输出
    })
    document.addEventListener('DOMContentLoaded', function() {
      // DOM渲染完成即可执行,此时图片、视频可能还未加载完成
      console.log('DOMContentLoaded');  // 先输出,所以操作 js 最好在这个方法里面
    })
    

    性能优化

    原则:

    1. 多使用内存、缓存
    2. 减少CPU计算,减少网络加载耗时
    3. 以空间换取时间

    从何入手

    1. 让加载更快

    1.1 减少资源的体积:压缩代码
    1.2 减少访问次数:合并代码、SSR渲染、缓存
    1.3 使用更快的网络

    2. 让渲染更快

    2.1 css放在head部分,js放在body最后
    2.2 尽早执行js,用DOMContentLoaded触发
    2.3 懒加载:图片懒加载、上滑加载更多
    2.4 对DOM查询缓存
    2.5 频繁DOM操作,合并到一起插入DOM结构
    2.6 节流和防抖

    防抖debounce

    场景:监听一个输入框的文字,变化后触发change事件,直接用keyup事件,则会频繁触发change事件,使用防抖,只有在用户输入结束或暂停的时候,才会触发change事件

    <input type="text" id="input1" />
    
    <script>
    	function debounce(fn, delay = 300) {
    		let timer = null;
    		return function() {
    			if (timer) {
    				clearTimeout(timer);
    			}
    			timer = setTimeout(() => {
    				fn.call(this, arguments[0]);
    				timer = null;
    			}, delay);
    		};
    	}
    	const input = document.getElementById("input1");
    	input.addEventListener(
    		"keyup",
    		debounce(function(e) {
    			console.log(this.value, e);
    		})
    	);
    </script>
    

    节流throttle

    场景:拖拽一个元素师,要随时拿到该元素的拖拽位置,直接用drag事件,则会频繁触发,很容易造成卡顿,此时使用节流的话,无论拖拽速度多快,都快每隔一段时间触发一次

    <div
    	id="div1"
    	draggable="true"
    	style=" 200px;height: 100px;background: rebeccapurple;"
    />
    
    <script>
    	function throttle(fn, delay = 100) {
    		let timer = null;
    		return function() {
    			if (timer) {  // timer不为空就什么都不做
    				return;
    			}
    			timer = setTimeout(() => {
    				fn.call(this, arguments[0]);
    				timer = null;
    			}, delay);
    		};
    	}
    	const div = document.getElementById("div1");
    	div.addEventListener(
    		"drag",
    		throttle(function(e) {
    			console.log(e.offsetX, e.offsetY);
    		})
    	);
    </script>
    

    如何捕获异常

    1. try...catch
    2. window.onerror = funtion(message, source, lineNumber, colNumber, error) {}

    var 和let、const的区别

    • var是ES5语法,let和const是ES6语法,var有变量提升
    • var和let是变量,可修改,const是常量,不可改变
    • let和const有块级作用域,var没有

    手写一个深度比较

    // 判断是否是对象
    function isObject(target) {
    	return typeof target === "object" && target !== null;
    }
    function isEqual(source, target) {
    	// 只要其中有一个不是对象,那就直接比较
    	// 如 isEqual(1, { a: 2 })
    	// 如 isEqual(1, 1)
    	if (!isObject(source) || !isObject(target)) {
    		return source === target;
    	}
    	// 如过两个都引用的是一个对象,直接比较
    	// 如 isEqual(a, a)
    	if (source === target) {
    		return true;
    	}
    	//  两个都是对象或数组,而且不相等
    	// 1. 先取出 source 和 target 的keys, 比较个数
    	const sourceKeys = Object.keys(source);
    	const targetKeys = Object.keys(target);
    	if (sourceKeys.length !== targetKeys.length) {
    		return false;
    	}
    	// 以 source 为基准,和 target 依次递归比较
    	for (let key in sourceKeys) {
    		const res = isEqual(source[key], target[key]);
    		// 如果 res 中有一个为false,那就直接返回false
    		if (!res) {
    			return false;
    		}
    	}
    	// 如果res都为true
    	return true;
    }
    const a = { a: 1, b: 2, c: { x: 3, y: 4 } };
    const b = { a: 1, b: 2, c: { x: 3, y: 4 } };
    const c = { a: 1, b: 2, c: { x: 3, y: 4 }, d: 5 };
    const d = { a: 1, b: 2, c: { x: 3, y: 44 } };
    
    console.log(isEqual("aa", "aa")); // true
    console.log(isEqual(11, 1)); // false
    console.log(isEqual(a, b)); // true
    console.log(isEqual(a, c)); // false
    console.log(isEqual(a, d)); // false
    

    获取URL参数

    // 传统方法
    function getURLQueryParams(_url) {
    	const params = {};
    	const url = _url || location.href; // _url 存在则用 _url, 不存在则用location.href
    	const search = url.split("?");
    	if (!search[1]) {
    		return params;
    	}
    	const searches = search[1].split("&");
    
    	searches.map(item => {
    		const items = item.split("=");
    
    		params[items[0]] = items[1];
    	});
    	return params;
    }
    console.log(getURLQueryParams("http:www.baidu.com?name=xxx&age=20")); // {name: "xxx", age: "20"}
    
    
  • 相关阅读:
    星时代曹波涛:分享一个测试数据生成的工具
    myabtis-plus 分页
    吴恩达机器学习_55过拟合问题/56代价函数
    吴恩达机器学习_51高级优化/52多元分类:一对多
    吴恩达机器学习_49代价函数/50简化代价函数与梯度
    吴恩达机器学习_46分类/47假设函数/48决策边界
    Windows10下安装VMware workstation 15.1虚拟机+配置Ubuntu16系统
    编程作业ex1:附加练习
    编程作业ex1:线性回归
    吴恩达机器学习_43矢量
  • 原文地址:https://www.cnblogs.com/georgeleoo/p/12430564.html
Copyright © 2011-2022 走看看