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

网络编程 2024/12/31 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

前言

编程是一件很快乐的事，实现一个目的，我们可以有很多方法路径，在这篇文章我们介绍一些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("color: #ff0000">三、对象数据常用操作


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 "htmlcode">

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常用技巧,javascript高级技巧

标签：

javascript常用技巧,javascript高级技巧

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“JavaScript中常用的简洁高级技巧总结”

暂无JavaScript中常用的简洁高级技巧总结的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月31日

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

javascript常用技巧,javascript高级技巧

详解vue2.6插槽更新v-slot用法总结

angular 实现下拉列表组件的示例代码

评论“JavaScript中常用的简洁高级技巧总结”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接