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


Posted in Javascript onMarch 10, 2019

前言

编程是一件很快乐的事,实现一个目的,我们可以有很多方法路径,在这篇文章我们介绍一些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 常用方式 简单递归

function deepClone(obj) {
 var newObj = obj instanceof Array ? [] : {};
 for (let i in obj) {
  newObj[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
 }
 return newObj;
}

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))

从打印的结果来看,这种实现方式还存在很多问题:这种方式只能实现特定的object的深度复制(比如对象、数组和函数),不能实现null以及包装对象Number,String ,Boolean,以及Date对象,RegExp对象的复制。

3.2 对象遍历方式

3.2.1 for-in

function A() {
	this.a = 1
	this.b = 1
}

A.prototype = {
	c: 1,
	d: 2
}

var a = new A()

for(var i in a) {
 console.log(i)
}

由上打印结果可知,for-in 会遍历对象属性,包括原型链中的属性

3.2.2 Object.entries()

function A() {
	this.a = 1
	this.b = 1
}

A.prototype = {
	c: 1,
	d: 2
}

var a = new A()
var et = Object.entries(a)
console.log(et)

由上结果可知,entries 返回一个给定对象自身可枚举属性的键值对数组

3.2.3 Object.keys()、 Object.values()

function A() {
	this.a = 1
	this.b = 1
}

A.prototype = {
	c: 1,
	d: 2
}

var a = new A()
var keys = Object.keys(a)
var values = Object.values(a)
console.log(keys, values)

由上结果可知,keys, values 返回一个给定对象自身可枚举属性数组,自身可枚举属性值的数组

四、数组常用操作

4.1 数组去重

4.1.1 Set 去重

var arr = [1,2,1,1,22,4,5,6];
arr1 = [...new Set(arr)];

4.1.2 结合使用数组filter方法和indexOf()方法

var arr = [1, 2, 3, 2, 6, '2', 3, 1];
function uniqueArr (arr) {
 return arr.filter(function (ele, index, array) {
  // 利用数组indexOf()方法,返回找到的第一个值的索引
  // 如果数组元素的索引值与indexOf方法查找返回的值不相等,则说明该值重复了,直接过滤掉
  return array.indexOf(ele) === index;
 })
}

4.2 多维数组一行代码实现一维转换

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

var resultArr = arr.toString().split(',').map(Number);

console.log(resultArr); // [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]

4.3 一行代码实现获取一个网页使用了多少种标签

[...new Set([...document.querySelectorAll('*')].map(node => 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 相关文章推荐
window.parent与window.openner区别介绍
Apr 12 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
Javascript实现信息滚动效果
May 18 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 #Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 #Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 #Javascript
vue模块拖拽实现示例代码
Mar 09 #Javascript
Vue中的验证登录状态的实现方法
Mar 09 #Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 #Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 #Javascript
You might like
php实现单链表的实例代码
2013/03/22 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
iOS10推送通知开发教程
2016/09/19 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
vue router demo详解
2017/10/13 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Python接口自动化测试的实现
2020/08/28 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
数学教研活动总结
2014/07/02 职场文书
热情服务标语
2014/10/07 职场文书
入股协议书范本
2014/11/01 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
房产电话营销开场白
2015/05/29 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫