JavaScript中常用的简洁高级技巧总结
作者:0.0君 发布时间:2024-04-19 10:47:30
前言
编程是一件很快乐的事,实现一个目的,我们可以有很多方法路径,在这篇文章我们介绍一些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); // 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 (此处省略)
来源:https://juejin.im/post/5c81c9b9f265da2d8763a167
猜你喜欢
- MYSQL初学者使用指南与介绍 一、连接MYSQL。 格式: mysql -h主机地址 -u用户名 -p用户密码 1、例1:连接到本机上的M
- 如果一个模型里包含了ManyToManyField,在admin后台可能会显示成object,例如解决方法:在定义这个类的时候,加多一个函数
- 在 MySQL 中,可以使用 ALTER TABLE 语句来添加表字段。以下是一些示例代码,可以批量添加多个字段:1 m
- 今天做了一个很简单的小项目,感受到了paramiko模块的强大,也深感自己Linux的功力不行~~一、需求二、简单需求分析及流程图需求很少,
- 1、查询时间区间日期列表,不会由于数据表数据影响select a.date from ( select curda
- 为什么要做这个?mock 第三方服务时,需要使用,另外包括自身开发,有时也会用到python#!/usr/bin/env python2#
- 区块链比特币从诞生到现在已经10年了,最近接触到了区块链相关的技术,为了揭开其背后的神秘面纱,我就从头开始构建一个简单的区块链。从技术上来看
- FP代表频繁模式(Frequent Pattern),算法主要分为两个步骤:FP-tree构建、挖掘频繁项集。FP树表示法FP树通过逐个读入
- 目的:在numpy数组中知道指定元素的索引函数: np.argwhere>>>x>>>array([[0
- ASP 内建对象Active Server Pages 提供内建对象,这些对象使用户更容易收集通过浏览器请求发送的信息、响应浏览器以及存储用
- 第二次遇到FF下正则兼容性问题( 第一次是关于"g"全局标志的,现在网上已有很多相关文章介绍)。以下正则在FF和IE下的
- 如果你忘记了你的MYSQL的root口令的话,你可以通过下面的过程恢复。1. 向mysqld server 发
- 简介概念散列算法(Hash Algorithm),又称哈希算法,杂凑算法,是一种从任意文件中创造小的数字「指纹」的方法。与指纹一样,散列算法
- 1 慢查询定义指mysql记录所有执行超过long_query_time参数设定的时间阈值的SQL语句。慢查询日志就是记录这些sql的日志。
- 1、列表的创建与遍历与整数和字符串不同,列表要处理一组数据。因此,列表必须通过显式的数据赋值才能生成,简单将一个列表赋值给另一个列表不会生成
- RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用。RSS搭建了信息迅速传
- redo log的写入策略InnoDB提供了innodb_flush_log_at_trx_commit参数,它有三种可能取值:设置为0的时
- 引言在做接口测试的时候,我们不仅需要将测试结果以报告的形式展示,还需要将测试结果以邮件的形式发送到需要知道的人手中。那么如何发送邮件呢?邮件
- 废话少说直接上代码样例如下import tensorflow as tfimport osfrom tensorflow.python.to
- Go语言中符号 “ ^ ” 不再用于次方,而是表示“按位异或的运算”具体的运算规则如下:按位异或 ^ : 两位一个为 0, 一个为 1 ,结