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

前言

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

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

一、数据类型检测

1.1类型

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

1.2实例f

var str="这是一个简单的字符串";var num=1111 var boolean=true var und=未定义；var nl=nullvar sb=符号(' 1111 ');var obj={ }；//非原始类型数据字面量定义console.log(字符串的字符串实例);//假控制台。日志(编号的实例数);//falseconsole.log(布尔型的布尔实例);//falseconsole.log(对象的北纬实例);//假控制台。日志(符号的某人实例)；//假控制台。日志(对象的obj instance of//true var STrn=new String('这是一个简单的字符串');var numN=新号码(1111);var booleanN=新布尔值(真);var objN=新对象();控制台。日志(字符串的StRN实例)；//真控制台。日志(NumBer的NumN实例)；//真控制台。日志(布尔值的布尔值实例)；//真控制台。日志(对象的对象实例)；//trueinstanceof运算符用于测试构造函数的原型属性是否出现在对象的原型链中的任何位置；

由上结果，字面量产出的原始数据类型无法使用实例f判断。

1.3对象。比例类型。字符串

对象。原型。tostring。调用(' string ')；//'[对象字符串]'对象。原型。tostring。拨打(1111)；//'[对象号]'对象。原型。tostring。通话(真)；//'[对象布尔值]'对象。原型。tostring。调用(null)；//'[object Null]'对象。原型。tostring。呼叫(未定义);//'[对象未定义]'对象。原型。tostring。呼叫(符号(' 111 '))；//'[对象符号]'对象。原型。tostring。调用({ })；//'[对象对象]'上述方法最为便捷有效

1.4施工方

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

var a={ } a .构造函数===Object//true var b=' 111 '；b .构造函数===String//true var STrn=new String(' 11111 ')；斯特伦。构造函数===String//true var c=true；c.constructor===布尔值//true var d=Symbol(' Symbol ')d .构造函数===Symbol//true 1.5道具类型

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

var a={ } a . _ _ proto _ _===对象。原型//真var t=新日期()；t . _ _ proto _ _===日期。prototype//true var str=' sting '；字符串_ _ proto _ _===字符串。prototype//true var STrn=new String(' 11111 ')；strN ._ _ proto _ _===字符串。原型//真实二、数据特殊操作

2.1 交换两个值

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

var a=3；var b=4a ^=b；//a=a ^ bb ^=a；^=b；console.log(a，b)；2.1.2 使用ES6解构赋值

设a=1；设b=2；[b，a]=[a，b]；console.log(a，b)；2.2 小数取整

var num=123.123//常用方法控制台。日志(ParSeint(num))；//123//"双按位非"操作符控制台。log(~ ~ num)；//123//按位或控制台。日志(编号| 0)；//123//按位异或控制台。日志(数字^ 0)；//123//左移操作符控制台。日志(数字0)；//1232.3 数字金额千分位格式化

2.3.1 使用号码。原型。tolocalestring()

var num=123455678 var num 1=123455678.12345 var format num=num。托洛克斯特林(' en-US ')；var格式num 1=num 1。托洛克斯特林(' en-US ')；控制台。日志(格式号)；//123，455，678控制台。日志(format num 1)；//123,455,678.1232.3.2 使用正则表达式

var num=123455678 var num 1=123455678.12345 var format num=字符串（数字)。替换(/\B(？=(\d{3})(？\d))/g '，')；var formatNum1=字符串(Num1).替换(/\B(？=(\d{3})(？\d))/g '，')；控制台。日志(格式号)；//123，455，678控制台。日志(format num 1)；//123,455,678.12,345三、对象数据常用操作

3.1 深度克隆技巧

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

函数DeepClone(obj){返回JSON。解析(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: '前端工程师，skill: ['React '，' Vue '，' Angular ' } } console . log(Deepclone(obj))从打印结果可以得出以下结论：

未定义、符号、功能类型直接被过滤掉了日期类型被自动转成了字符串类型3.1.2 常用方式简单递归

函数深度克隆(obj){ var new obj=数组的obj实例？[] : {};for(let I in obj){ new obj[I]=obj[I]的类型===' object '？深度克隆返回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: '前端工程师，skill: ['React '，' Vue '，' Angular ' } } console . log(Deepclone(obj))从打印的结果来看，这种实现方式还存在很多问题：这种方式只能实现特定的目标的深度复制（比如对象、数组和函数),不能实现空以及包装对象数字、字符串、布尔值、以及日期对象，RegExp对象的复制。

3.2 对象遍历方式

3.2.1供入

函数A(){这个。A=1这个。b=1 } A .原型={ c : 1，d : 2 } var A=新A()为(A中的var I){控制台。日志(一)由上打印结果可知，for-in会遍历对象属性，包括原型链中的属性

3.2.2对象条目()

函数A(){这个。A=1这个。b=1 } A .原型={ c : 1，d : 2 } var A=新A()var et=对象。条目(一)控制台。日志由上结果可知，条目返回一个给定对象自身可枚举属性的键值对数组

3.2.3对象。键()、对象。值()

函数A(){这个。A=1这个。b=1 } A .原型={ c : 1，d : 2 } var A=新A()var key=对象。键值=对象。价值观(一)控制台。日志(关键字、值)由上结果可知、键、值返回一个给定对象自身可枚举属性数组，自身可枚举属性值的数组

四、数组常用操作

4.1 数组去重

4.1.1设置去重

var arr=[1，2，1，1，22，4，5，6]；arr1=[.新集合(arr)]；4.1.2 结合使用数组过滤器方法和indexOf()方法

var arr=[1，2，3，2，6，' 2 '，3，1]；函数uniqueArr(arr){ return arr。过滤器(函数(ele，index，array) { //利用数组indexOf()方法，返回找到的第一个值的索引//如果数组元素的索引值与索引关于方法查找返回的值不相等，则说明该值重复了，直接过滤掉返回数组。index of(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().拆分(',')。地图（数字);控制台。日志(result arr)；//[1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]4.3 一行代码实现获取一个网页使用了多少种标签

[.新集合([.文件。queryselectorall(' * ').映射(node=node.tagName))].长度；4.4 如何实现a==1 a==2 a==3

4.4.1 改写数组的转换对象为字符串方法

var a=[1，2，3]；//a . join=a . shift；//的a .值=a . shifta . ToString=a . shift控制台。log(a==1a==2a==3)；//真原理：当复杂类型数据与基本类型数据作比较时会发生隐性转换，会调用toString()或者valueOf()方法

4.4.2 改写对象的转换对象为字符串方法

var a={ value: 1，tostring : function(){ return a . value；} }控制台。log(a==1a==2a==3)；//true4.5统计字符串中相同字符出现的次数

var str=' aabbbccc 66 AABB c 6 '；var strInfo=str.split(').reduce((p，c)=(p[c] || (p[c]=1)，p)，{ })；控制台。日志(strInfo)；//{6: 3，a: 5，b: 5，c: 4}4.6将类数组对象转成数组

4.6.1 使用数组。原型。切片

var likeArrObj={ 0: 1，1: 2，2: 3，length : 3 } var arr 1=array . prototype . slice . call(likerobj)；//或使用[]. slice . call(likerobj)；console . log(arr 1)；//[1，2，3]4.6.2使用数组

var likeArrObj={ 0: 1，1: 2，2: 3，length : 3 } var arr=array . from(likerobj)；console . log(arr)；//[1，2，3]4.6.3使用Object.values(此处省略)

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。