JavaScript常用的简洁高级技巧

最新推荐文章于 2024-09-02 18:49:22 发布
最新推荐文章于 2024-09-02 18:49:22 发布
阅读量298 收藏
点赞数
文章标签： javascript 前端 css css3 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/china_coding/article/details/125827747
版权

前言

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

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

vara = {}
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

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

vara = {}
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解构赋值

leta = 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()

varnum = 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 使用正则表达式

varnum = 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))
复制代码

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

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

  2. 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

functionA() {
	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()

functionA() {
	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 去重
vararr = [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 多维数组一行代码实现一维转换

vararr = [ [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方法

vara = [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

varlikeArrObj = {
    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.cn/post/6844903792769499150
javascript 高级技巧
04-06
NULL 博文链接：https://xieyaxiong.iteye.com/blog/1559264
一些老手都不一定知道的JavaScript技巧
10-25
JavaScript作为一门广泛应用于前端开发的脚本语言，其本身具备许多不为人知的高级技巧，即便是经验丰富的老手也可能对此了解不深。本文就将向大家介绍一些不太常用但非常强大的JavaScript技巧，无论你是新手还是资深...
JS高级技巧
weixin_34227447的博客
09-03 123
本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验，进行扩展延伸，同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测这个问题是怎么安全地检测一个变量的类型，例如判断一个变量是否为一个数组。通常的做法是使用instanceof，如下代码所示：let data = [1, 2, 3]; cons...
你不知道的 10 个 JavaScript 高级技巧
最新发布
2401_86113453的博客
09-02 1626
JavaScript 是一门功能丰富的语言，可以帮助你编写更简洁、更高效的代码。通过将这些高级技巧融入你的编码实践中，你可以提高你的生产力并增强代码的可读性。从带别名的解构到柯里化、防抖、节流等等，这些技巧可以使你的代码更简洁、更高效。祝你编程愉快！
JS高级技巧(简洁版)
qq_40126542的博客
05-15 483
高级函数由于在JS中，所有的函数都是对象，所以使用函数指针十分简单，也是这些东西使JS函数有趣且强大安全的类型检测JS内置的类型检测机制并不是完全可靠的typeof操作符返回一个字符串，表示未经计算的操作数的类型，在大多数情况下很靠谱，但是当然还有例外正则表达式typeof /s/ === 'function'; // Chrome 1-12 , 不符合 ECMAScript 5.1 typeof...
JavaScript 高级技巧
weixin_34162695的博客
03-14 147
1 安全类型检测 javascript内置类型检测并不可靠 safari某些版本（<4）typeof正则表达式返回为function 建议使用Object.prototype.toString.call()方法检测数据类型 function isArray(value){ return Object.p...
js高级技巧
齐枫的博客
07-30 257
js高级技巧 安全的类型检测 let data = [1,2,3,4] console.log(data instanceof Array) 但是上面的方法在iframe下访问父窗口变量的时候会失败 &lt;iframe src="./iframe.html" frameborder="0"&gt;&lt;/iframe&gt; &lt;script&gt; let ...
JavaScript高级技巧：数据类型检测与instanceof用法详解
本文主要介绍了JavaScript中常用的一些简洁高级技巧，着重于数据类型检测的方法。首先，我们探讨了`typeof`操作符，它返回一个字符串，表示操作数的数据类型，例如： - 对于字符串变量`str`，`typeof str`会返回`'...
js之高级技巧
weixin_40322503的博客
04-24 843
安全的类型检测 js内置的类型检测方法并不安全。 ①typeOf 不能用于检测array只能返回object，不能检测null只能返回object，但是出乎意料的是可以检测symbol、function和undefined。类型返回值都是字符串、而且都是小写打头。 ②instanceOf是用来判断是不是某个东西的实例对象的，比如一道经典的题： var isArray = value in...
JavaScript高级技巧
大灰狼的小绵羊哥哥的博客
06-23 317
本文简单介绍了一些 JavaScript 常用的高级技巧。 1. 高级函数 函数是 JavaScript 最有趣的部分之一，是 JavaScript 的一等公民。 1.1 安全的类型检查 functionisObject(value){ returnObject.prototype.toString.call(value)==="[objectObject]"; } ...
JS高级技巧汇总
万少博-FE
11-09 2276
更新时间：2017年11月09日12:26:37 《我的博客地图》 1、函数节流     场景：监听页面滚动到距离底部小于等于10px，触发请求分页数据；但监听滚动事件，每滚动一帧会触发一次函数，当用户快速滚动页面到达底部，会连续触发10次请求，因此需要设定，在具体的时间(比如1000ms)内，只能触发一次函数；     函数节流技术：解决频繁触发函数性能问题 请求数据的函数：getDa...
js高级技巧大总结
zwy1231的博客
12-07 438
-----------------------------------JS高级技巧总结------------------------------------ 一.js代码的预编译 在js引擎执行js代码时会首先进行一个预解析，预解析中会有声明的提升，这是一个重要的问题。 会提升var变量名和function的函数，在提升时有一些注意事项，var只提升函数名，function提升的是函数名和...
5个高级JS技巧
小马甲
12-14 1155
JavaScript中，有一些被异常低估的技巧，恰恰我认为这些技巧对于前端朋友们拉高自己代码层次是非常有帮助的，它们分别是FlatMap、数组方法链的顺序、充分使用reduce、充分使用generator、充分使用原生JS类。本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
【二十二】javascript高级技巧
博勋的博客
04-18 315
高级函数、防止对象篡改、定时器、函数节流
高效前端：JS高级技巧
flying meng的菜鸟居
10-07 915
柯里化 柯里化就是函数和参数值结合产生一个新的函数。（说的这么高大上，其实就是把常用的东西整成一个函数，随时调用…） 假设有一个curry的函数： function add(a,b){ return a+b; } let add1=add.curry(1); console.log(add1(5)); //6 console.log(add1(2)); //3 是不是感觉很简洁？ 怎样...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值