我JS记重点 ｜ 青训营笔记

夏以棽
61 阅读8分钟

这篇主要记录一下直播课提到面试可能问的js相关问题

1

1.JS基本数据类型

}R}98H32~F4XF`TQXCEJS1C.png

  • String(字符串)
  • Number(数字)
  • Boolean(布尔值)
  • null(空值)
  • undefined(未定义，与null区别在于它并未赋值)
  • Symbol(符号，ES6新增)
  • object(对象)
    • Array(数组对象)
    • RegExp(正则对象)
    • Date(日期对象)
    • Math(数学函数)
    • Function(函数对象)

undefined类型只有一个值undefined，未赋值的变量值默认都是undefined

object又称为“复杂类型"，其他类型统称为“基本类型"

2.JS类型检测方法

1.typeof

主要用于判断基本数据类型。
使用方式：typeof(表达式)和typeof 变量名，第一种是对表达式做运算，第二种是对变量做运算。 typeof运算符的返回类型为字符串，值包括如下几种：

  1. 'undefined'：未定义的变量或值
  2. 'boolean'：布尔类型的变量或值
  3. 'string' ：字符串类型的变量或值
  4. 'number'：数字类型的变量或值
  5. 'object' ：对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)
  6. 'function' ：函数类型的变量或值

示例如下：

console.log(typeof a);   //'undefined' 
console.log(typeof(true)); //'boolean' 
console.log(typeof '123'); //'string'    
console.log(typeof 123);  //'number'    
console.log(typeof NaN);  //'number'    
console.log(typeof null); //'object'       
var obj = new String(); console.log(typeof(obj)); //'object'    
var  fn = function(){}; console.log(typeof(fn)); //'function'   
console.log(typeof(class c{}));  //'function'

typeof的不足之处：

  1. 不能区分对象、数组、正则，对它们操作都返回"object"；
  2. Safar5,Chrome7之前的版本对正则对象返回 'function'
  3. 在IE6,7和8中，大多数的宿主对象是对象，而不是函数；如：typeof alert; //object
  4. 而在非ID浏览器或则IE9以上（包含IE9），typeof alert; //function
  5. 对于null,返回的是object.

总结：
typeof运算符用于判断对象的类型，但是对于一些创建的对象，它们都会返回'object'，有时我们需要判断该实例是否为某个对象的实例，那么这个时候需要用到instanceof运算符。

2.instanceof

用于引用数据类型的判断。所有引用数据类型的值都是Object的实例。目的是判断一个对象在其原型链上是否存在构造函数的prototype属性。
用法如下
variable instanceof constructor
一个简单示例

// examplevar arr = []; 
由于：1. arr.constructor === Array
2. arr.__proto__ === Array.prototype
3. arr.__poto__.proto__ === Object.prototype 
所以, 以下都返回true
1. arr instanceof arr.constructor(Array)
2. arr instanceof arr.__proto__.constructor(Array)
3. arr instanceof arr.__proto__.__poto__.constructor(Object)  
很快就会得出一些结论：
1. 所有对象 instanceof Object 都会返回 true
2. 所有函数 instanceof Function 都会返回 true

总结：
instanceof不仅能检测构造对象的构造器，还检测原型链。instanceof要求前面是个对象，后面是一个构造函数。而且返回的是布尔型的，不是true就是false。

3.Array.isArray()

Array.isArray()可以用于判断数组类型，支持的浏览器有IE9+、FireFox 4+、Safari 5+、Chrome;
兼容实现：

if (!Array.isArray) {  
    Array.isArray = function(arg) {    
        return Object.prototype.toString.call(arg) === '[object Array]'; 
    };
}

示例如下:

// 1.
Array.isArray([1, 2, 3, 4]);  // --> true

// 2.
var obj = {    
    a: 1,    
    b: 2
};
Array.isArray(obj);  // --> false

// 3.
Array.isArray(new Array);  // --> true

//4.
Array.isArray("Array");  // --> false

总结：
isArray是一个静态方法，使用Array对象（类）调用，而不是数组对象实例。其中Array.prototype 也是一个数组，Array.isArray 优于 instanceof。

4.Object.prototype.toString.call()

Object的原型有toString方法，调用该方法，可以统一返回格式为 ‘[object Xxx]’ 的字符串，其中 Xxx 就是对象的类型，Xxx第一个首字母要大写（注意：使用 typeof 返回的是小写）。对于 Object 对象，直接调用 toString() 就能返回 [object Object]；而对于其他对象，则需要通过 call 来调用，才能返回正确的类型信息，如下所示。

Object.prototype.toString.call({})            // "[object Object]"
Object.prototype.toString.call(1)             // "[object Number]"
Object.prototype.toString.call('1')           // "[object String]"
Object.prototype.toString.call(true)          // "[object Boolean]"
Object.prototype.toString.call(function(){})  // "[object Function]"
Object.prototype.toString.call(null)          // "[object Null]"
Object.prototype.toString.call(undefined)     // "[object Undefined]"
Object.prototype.toString.call(/123/g)        // "[object RegExp]"
Object.prototype.toString.call(new Date())    // "[object Date]"
Object.prototype.toString.call([])            // "[object Array]"
Object.prototype.toString.call(document)      // "[object HTMLDocument]"
Object.prototype.toString.call(window)        // "[object Window]"

3.JS数据类型转换方式

1.强制类型转换

强制类型转换方式包括 Number()、parseInt()、parseFloat()、Boolean()等。

Number()：

  • 如果是布尔值，true 和 false 分别被转换为 1 和 0。
  • 如果是数字，返回自身。
  • 如果是 null，返回 0。
  • 如果是 undefined，返回 NaN。
  • 如果是字符串，遵循以下规则：如果字符串中只包含数字（或者是 0X / 0x 开头的十六进制数字字符串，允许包含正负号），则将其转换为十进制；如果字符串中包含有效的浮点格式，将其转换为浮点数值；如果是空字符串，将其转换为 0；如果不是以上格式的字符串，均返回 NaN。
  • 如果是 Symbol，抛出错误。
  • 如果是对象，并且部署了 [Symbol.toPrimitive] ，那么调用此方法，否则调用对象的 valueOf() 方法，然后依据前面的规则转换返回的值；如果转换的结果是 NaN ，则调用对象的 toString() 方法，再次依照前面的顺序转换返回对应的值。

parseInt() ：
除了字符串参数的第一个字符为数字返回的结果为数字外，其他都是NAN。

parseFloat()
和parseInt类似，如果给定值能被解析成浮点数，则返回浮点数。如果给定值不能被转换成数值，则会返回 NAN。

Boolean()：
除了 undefined、 null、 false、“”、 0（包括 +0，-0）、 NaN 转换出来是 false，其他都是 true。

2.隐式类型转换

凡是通过逻辑运算符 (&&、 ||、 !)、运算符 (+、-、*、/)、关系操作符 (>、 <、 <= 、>=)、相等运算符 (==) 或者 if/while 条件的操作，如果遇到两个数据类型不一样的情况，都会出现隐式类型转换。

以“==”和“+”为例重点讲解一下隐式转换的规则。

‘==’ 的隐式类型转换规则：

  • 如果其中一个操作值是 null 或者 undefined，那么另一个操作符必须为 null 或者 undefined，才会返回 true，否则都返回 false。
  • 如果其中一个是 Symbol 类型，那么返回 false。
  • 两个操作值如果为 string 和 number 类型，那么就会将字符串转换为 number。
  • 如果一个操作值是 boolean，那么转换成 number。
  • 如果一个操作值为 object 且另一方为 string、number 或者 symbol，就会把 object 转为原始类型再进行判断（调用 object 的 valueOf/toString 方法进行转换）。

‘+’ 的隐式类型转换规则：

‘+’ 号操作符，不仅可以用作数字相加，还可以用作字符串拼接。仅当 ‘+’ 号两边都是数字时，进行的是加法运算；如果两边都是字符串，则直接拼接，无须进行隐式类型转换。当然除了数字和字符串外，还有一些其他的类型规则，如下所示：

  • 如果其中有一个是字符串，另外一个是 undefined、null 或布尔型，则调用 toString() 方法进行字符串拼接。
  • 如果其中有一个是数字，另外一个是 undefined、null、布尔型或数字，则会将其转换成数字进行加法运算。
  • 如果其中一个是字符串、一个是数字，则按照字符串规则进行拼接。
  • 如果其中有一个是字符串，另外一个是对象的话，对象转换的规则，1、如果部署了 Symbol.toPrimitive 方法，优先调用再返回。2、调用 valueOf()，如果转换为基础类型，则返回。3、调用 toString()，如果转换为基础类型，则返回。4、如果都没有返回基础类型，会报错。

3.函数提升与变量提升，执行上下文，闭包

blog.csdn.net/m0_66451927…

4.流程控制

正常JS执行从上往下，流程控制即控制代码运行的顺序，这个就是简单的判断

  • 分支结构
    • if
    • if{} else{}
    • if{} else if{} else{}
    • switch...case
    • 三目表达式 A=(B>0)?C:D
  • 循环结构
    • while
    • do-while
    • for
    • for in

5.异步方案

www.cnblogs.com/liutianzeng…

6.DOM和BOM

blog.csdn.net/qq_52736131…
www.cnblogs.com/HeavyMetalC…

7.正则表达式

正则表达式可以很好的帮助我们进行模式匹配和文本检索与替换功能。
正则表达式提供了两种写法，一种采用new运算符，另一种采用字面量方式。

var box = new RegExp('box'); //第一个参数字符串
var box = new RegExp('box','ig'); //第二个参数可选模式修饰符

其中修饰符用于执行区分大小写和全局匹配

修饰符描述
i执行对大小写不敏感的匹配。
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m执行多行匹配。
var box = /Box/; //使用字面量方式的正则
var box = /Box/ig; //第二个斜杠后加模式修饰符

测试正则表达式

  • RegExp对象包含两个常用方法：test()和exec()，功能基本相似，用于测试字符串匹配。
  • test()方法在字符串中查找是否存在指定的正则表达式，并返回布尔值，如果存在则返回true，否则返回false。
  • exec()方法也用于在字符串中查找指定正则表达式，如果exec()执行成功，则返回包含该查找字符串的相关信息数据，否则返回null。（返回结果数组）
    示例如下：
var pattern = new RegExp('Box','i');
var str = 'box';
alert(pattern.test(str)); //true
var pattern = /Box/i;
var str = 'box';
alert(pattern.test(str)); //true
var pattern = /Box/i;
var str = 'This is a box';
alert(pattern.test(str)); //true
var pattern = /Box/i;
var str = 'box';
alert(pattern.exec(str)); //box返回的是数组，有就返回数组的值，没有匹配到就返回null
var str ='ss';
alert(pattern.exec(str)); //没有匹配到返回null

RegExp对象属性
参考W3school：www.w3school.com.cn/jsref/jsref…

常用正则使用场景

  1. 密码强度正则
//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
//输出 true
console.log("=="+pPattern.test("caibaojian#"));
  1. 邮箱正则
//Email正则
var ePattern = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;
//输出 true
console.log(ePattern.test("99154507@qq.com"));
  1. 手机号正则
//手机号正则
var mPattern = /^1[34578]\d{9}$/; //http://caibaojian.com/regexp-example.html
//输出 true
console.log(mPattern.test("15507621888"));
  1. 身份证号正则
//身份证号（18位）正则
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
//输出 true
console.log(cP.test("11010519880605371X"));
  1. url正则
//URL正则
var urlP= /^((https?|ftp|file)://)?([\da-z.-]+).([a-z.]{2,6})([/\w .-]*)*/?$/;
//输出 true
console.log(urlP.test("http://caibaojian.com"));
avatar
文章
阅读
粉丝