js基础 | echo丶若梦

每日一题

发布日期: 2019-10-25

文章字数: 1.5k

阅读时长: 5 分

阅读次数:

document.load和document.ready的区别

页面加载完成有两种事件

load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
$(document).ready()是当DOM文档树加载完成后执行一个函数（不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

JavaScript 中如何检测一个变量是一个数据类型

万能prototype方法

alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;

replace 正则匹配方法、

去除字符串内所有的空格：str = str.replace(/\s*/g,"");
去除字符串内两头的空格：str = str.replace(/^\s*|\s*$/g,"");
去除字符串内左侧的空格：str = str.replace(/^\s*/,"");
去除字符串内右侧的空格：str = str.replace(/(\s*$)/g,"");

var str = " 6 6 ";
var str_1 = str.replace(/\s*/g, "");
console.log(str_1); //66

var str = " 6 6 ";
var str_1 = str.replace(/^\s*|\s*$/g, "");
console.log(str_1); //6 6//输出左右侧均无空格

var str = " 6 6 ";
var str_1 = str.replace(/^\s*/, "");
console.log(str_1); //6 6 //输出右侧有空格左侧无空格

var str = " 6 6 ";
var str_1 = str.replace(/(\s*$)/g, "");
console.log(str_1); // 6 6//输出左侧有空格右侧无空格

str.trim()方法、
trim()方法是用来删除字符串两端的空白字符并返回，trim 方法并不影响原来的字符串本身，它返回的是一个新的字符串。
缺陷：只能去除字符串两端的空格，不能去除中间的空格

var str = " 6 6 ";
var str_1 = str.trim();
console.log(str_1); //6 6//输出左右侧均无空格

JQ 方法：$.trim(str)方法

$.trim() 函数用于去除字符串两端的空白字符。

注意：$.trim()函数会移除字符串开始和末尾处的所有换行符，空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时，它们将被保留，不会被移除。

var str = " 6 6 ";
var str_1 = $.trim(str);
console.log(str_1); //6 6//输出左右侧均无空格

require 与 import 的区别

两者的加载方式不同、规范不同

两者的加载方式不同，require 是在运行时加载，而 import 是在编译时加载

require('./a')(); // a 模块是一个函数，立即执行 a 模块函数

var data = require('./a').data; // a 模块导出的是一个对象

var a = require('./a')[0]; // a 模块导出的是一个数组 ======> 哪都行

import $ from 'jquery';

import * as _ from '_';

import {a,b,c} from './a';

import {default as alias, a as a_a, b, c} from './a'; ======>用在开头

规范不同，require 是 CommonJS/AMD 规范，import 是 ESMAScript6+规范

require 特点：社区方案，提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。

import 特点：语言规格层面支持模块功能。支持编译时静态分析，便于 JS 引入宏和类型检验。动态绑定

在 css/js 代码上线之后开发人员经常会优化性能

从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理
dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。

.JavaScript 继承的方式和优缺点

原型链继承

缺点：
1.引用类型的属性被所有实例共享
2.在创建 Child 的实例时，不能向 Parent 传参

借用构造函数(经典继承)

优点：
1.避免了引用类型的属性被所有实例共享
2.可以在 Child 中向 Parent 传参
缺点：
1.方法都在构造函数中定义，每次创建实例都会创建一遍方法。

组合继承

优点：
1.融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。

原型式继承

缺点：
1.包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。

寄生式继承

缺点：
1.跟借用构造函数模式一样，每次创建对象都会创建一遍方法。

寄生组合式继承

优点：
1.这种方式的高效率体现它只调用了一次 Parent 构造函数，并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。
2.与此同时，原型链还能保持不变；
3.因此，还能够正常使用 instanceof 和 isPrototypeOf。
开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式

如何判断 NaN

```js
isNaN(NaN) // true
```

如何阻止冒泡与默认行为

阻止冒泡行为：非 IE 浏览器 stopPropagation()，IE 浏览器 window.event.cancelBubble = true

阻止默认行为：非 IE 浏览器 preventDefault()，IE 浏览器 window.event.returnValue = false

当需要阻止冒泡行为时，可以使用

function stopBubble(e) {
  //如果提供了事件对象，则这是一个非IE浏览器
  if (e && e.stopPropagation)
    //因此它支持W3C的stopPropagation()方法
    e.stopPropagation();
  //否则，我们需要使用IE的方式来取消事件冒泡
  else window.event.cancelBubble = true;
}

当需要阻止默认行为时，可以使用

//阻止浏览器的默认行为
function stopDefault(e) {
  //阻止默认浏览器动作(W3C)
  if (e && e.preventDefault) e.preventDefault();
  //IE中阻止函数器默认动作的方式
  else window.event.returnValue = false;
  return false;
}