What are the concise and advanced techniques commonly used in JavaScript

这篇文章主要介绍了JavaScript常用的简洁高级技巧是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript常用的简洁高级技巧是什么文章都会有所收获，下面我们一起来看看吧。

一、数据类型检测

1.1 typeof

typeof操作符返回一个字符串，表示未经计算的操作数的类型;该运算符数据类型（返回字符串，对应列表如图）

1.2 instanceof

var str = "This is a simple string"; var num = 1111;var boolean = true;var und = undefined;var nl = null;var sb = Symbol('1111');var obj = {}; // 非原始类型数据字面量定义console.log(str instanceof String); // falseconsole.log(num instanceof Number); // falseconsole.log(boolean instanceof Boolean); // falseconsole.log(nl instanceof Object); // falseconsole.log(sb instanceof Symbol); // falseconsole.log(obj instanceof Object); // truevar strN = new String("This is a simple string");var numN = new Number(1111);var booleanN = new Boolean(true);var objN = new Object();console.log(strN instanceof String); // trueconsole.log(numN instanceof Number); // trueconsole.log(booleanN instanceof Boolean); // trueconsole.log(objN instanceof Object); // true

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置;

由上结果，字面量产出的原始数据类型无法使用instanceof判断。

1.3 Object.propotype.toString

Object.prototype.toString.call('string'); //"[object String]"Object.prototype.toString.call(1111); //"[object Number]"Object.prototype.toString.call(true); //"[object Boolean]"Object.prototype.toString.call(null); //"[object Null]"Object.prototype.toString.call(undefined); //"[object Undefined]"Object.prototype.toString.call(Symbol('111')); //"[object Symbol]"Object.prototype.toString.call({}); //"[object Object]"

上述方法最为便捷有效

1.4 constructor

比较对象的构造函数与类的构造函数是否相等

var a = {}a.constructor === Object // truevar b = '111';b.constructor === String // truevar strN = new String('11111');strN.constructor === String // truevar c = true;c.constructor === Boolean // truevar d = Symbol('symbol')d.constructor === Symbol // true

1.5 propotype

比较对象的原型与构造函数的原型是否相等

var a = {}a.__proto__ === Object.prototype // truevar t = new Date();t.__proto__ === Date.prototype // truevar str = 'sting';str.__proto__ === String.prototype // truevar strN = new String('11111');strN.__proto__ === String.prototype // true

二、数据特殊操作

2.1 交换两个值

2.1.1 利用一个数异或本身等于0和异或运算符合交换率

var a = 3;var b = 4a ^= b; // a = a ^ bb ^= a;a ^= b;console.log(a, b);

2.1.2 使用ES6解构赋值

let a = 1;let b = 2;[b, a] = [a, b];console.log(a, b);

2.2 小数取整

var num = 123.123// 常用方法console.log(parseInt(num)); // 123// "双按位非"操作符console.log(~~ num); // 123// 按位或console.log(num | 0); // 123// 按位异或console.log(num ^ 0); // 123// 左移操作符console.log(num node.tagName))].length;

4.4 如何实现a == 1 && a == 2 && a == 3

4.4.1 改写数组的toString方法

var a = [1, 2, 3];// a.join = a.shift;// a.valueOf = a.shift;a.toString = a.shift;console.log(a == 1 && a == 2 && a == 3); // true

原理：当复杂类型数据与基本类型数据作比较时会发生隐性转换，会调用toString()或者valueOf()方法

4.4.2 改写对象的toString方法

var a = { value: 1, toString: function () { return a.value++; }}console.log(a == 1 && a == 2 && a == 3); // true

4.5 统计字符串中相同字符出现的次数

var str = 'aaabbbccc66aabbc6';var strInfo = str.split('').reduce((p, c) => (p[c]++ || (p[c] = 1), p), {});console.log(strInfo); // {6: 3, a: 5, b: 5, c: 4}

4.6 将类数组对象转成数组

4.6.1 使用Array.prototype.slice

var likeArrObj = { 0: 1, 1: 2, 2: 3, length: 3}var arr1 = Array.prototype.slice.call(likeArrObj); // 或者使用[].slice.call(likeArrObj);console.log(arr1); // [1, 2, 3]

4.6.2 使用Array.from

var likeArrObj = { 0: 1, 1: 2, 2: 3, length: 3}var arr = Array.from(likeArrObj);console.log(arr); // [1, 2, 3]

4.6.3 使用Object.values (此处省略)

关于"JavaScript常用的简洁高级技巧是什么"这篇文章的内容就介绍到这里，感谢各位的阅读!相信大家对"JavaScript常用的简洁高级技巧是什么"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。