JavaScript中常用的简洁高级技巧总结

编程是一件很快乐的事,实现一个目的,我们可以有很多方法路径,在这篇文章我们介绍一些JavaScript的奇技淫巧,仅供大家参考,各路大神在平时的代码编写时,如很多简洁高效的书写方式;

下面话不多说了,来一起看看详细的介绍吧

一、数据类型检测

1.1 typeof

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

JavaScript中常用的简洁高级技巧总结

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); // false console.log(num instanceof Number); // false console.log(boolean instanceof Boolean); // false console.log(nl instanceof Object); // false console.log(sb instanceof Symbol); // false console.log(obj instanceof Object); // true var 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); // true console.log(numN instanceof Number); // true console.log(booleanN instanceof Boolean); // true console.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 // true var b = '111'; b.constructor === String // true var strN = new String('11111'); strN.constructor === String // true var c = true; c.constructor === Boolean // true var d = Symbol('symbol') d.constructor === Symbol // true

1.5 propotype

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

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

二、数据特殊操作

2.1 交换两个值

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

var a = 3; var b = 4 a ^= b; // a = a ^ b b ^= 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 << 0); // 123

2.3 数字金额千分位格式化

2.3.1 使用Number.prototype.toLocaleString()

var num = 123455678; var num1 = 123455678.12345; var formatNum = num.toLocaleString('en-US'); var formatNum1 = num1.toLocaleString('en-US'); console.log(formatNum); // 123,455,678 console.log(formatNum1); // 123,455,678.123

2.3.2 使用正则表达式

var num = 123455678; var num1 = 123455678.12345; var formatNum = String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ','); var formatNum1 = String(num1).replace(/\B(?=(\d{3})+(?!\d))/g, ','); console.log(formatNum); // 123,455,678 console.log(formatNum1); // 123,455,678.12,345

三、对象数据常用操作

3.1 深度克隆技巧

3.1.1 JSON.stringify 转换成字符, JSON.parse重新生成JSON数据类型

function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); } var obj = { number: 1, string: 'abc', bool: true, undefined: undefined, null: null, symbol: Symbol('s'), arr: [1, 2, 3], date: new Date(), userInfo: { name: 'Better', position: 'front-end engineer', skill: ['React', 'Vue', 'Angular', 'Nodejs', 'mini programs'] }, func: function () { console.log('hello better'); } } console.log(deepClone(obj))

从打印结果可以得出以下结论:

undefined、symbol、function 类型直接被过滤掉了

date 类型被自动转成了字符串类型

3.1.2 常用方式 简单递归

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/4aad2780ac832be503116ded55d53bac.html