原生js的常用方法总结
=============== 通知:
博主已迁至《掘金》码字,博客园可能以后不再更新,掘金地址:https://juejin.im/post/5a1a6a6551882534af25a86b 请多多关照!!
-------------------在此谢过!-----------
前言:随着前端市场日新月异的发展,现如今的市场要的不只是会切切图的小仔、小妹了,而是需要真正懂原生js闭包,继承,原型链,node,以及熟读源码的大神,那么我们也不能太落后各位大神,撸起袖子,重新拾起原生js吧!
以下是个人总结,有一些是copy大神的,现在放到一起,方便以后查阅(有不对的地方,还望大家能够提出,我会尽快加以改正)。
一、!!强制转boolean
例如:
var nu=null;
var nul="";
var str="abcd"; console.log(!!nu) =>false;
console.log(!!nul) =>false;
console.log(!!str) =>true;
二、+obj 强制转Number
var a="88";
console.log(+a) =>88
var b="1606e";
console.log(+b) => NaN
三、不可靠的undefined 可靠的void 0
undefined
,那么我们通常会这样写:if(a === undefined){//...}
function foo2(){
var undefined=1;
console.log(undefined)
}
foo2(); =>1;
var undefined;
function foo2(){
undefined=1;
console.log(undefined)
}
foo2() =>undefined
void 0 或者 void (0):
undefined
,表达式为 0
时的运算开销最小: var str="sdfsd5565s6dfsd65sd6+d5fd5";
console.log(str.length) =>26
结果是有的,所以我们在判断类型时,不能单纯拿有没有length属性来判断是不是数组了,我们可以用下面的方法:
var obj=[1,2] ;
console.log(toString.call(obj) === '[object Array]');
先来创建一个数组:
var arr=[];
for(var i=0;i<10;i++){
arr.push(i)
}
console.log(arr) => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
接下来我们来打乱它:
arr.sort(()=>{
return Math.random() - 0.5
}) =》[1, 0, 2, 3, 4, 6, 8, 5, 7, 9] 第二种打乱方法:
arr.sort((a,b)=>{
return a>Math.random()*10;
}) =》[1, 2, 0, 6, 4, 3, 8, 9, 7, 5]
我们以前的正常排序是这样的:
arr.sort(function(a,b){
return b-a
});
解析:
先说正常的排序:
a-b输出从小到大排序,b-a输出从大到小排序。
var strr=" 1 ad dertasdf sdfASDFDF DFG SDFG "
// type 1-所有空格 2-前后空格 3-前空格 4-后空格 function trim(str,type){
switch (type){
case 1:return str.replace(/\s+/g,"");
case 2:return str.replace(/(^\s*)|(\s*$)/g, "");
case 3:return str.replace(/(^\s*)/g, "");
case 4:return str.replace(/(\s*$)/g, "");
default:return str;
} }
console.log( trim(strr,1)) =》 "1addertasdfsdfASDFDFDFGSDFG"
原始字符串:
var str="sdfwwerasfddffddeerAasdgFegqer";
function changeCase(str,type) { //这个函数是第三个大小写转换的方法
function ToggleCase(str) {
var itemText = ""
str.split("").forEach(
function (item) {
// 判断循环字符串中每个字符是否以a-z之间开头的并且重复大于0次
if (/^([a-z]+)/.test(item)) {
// 如果是小写,转换成大写
itemText += item.toUpperCase();
}
// 判断循环字符串中每个字符是否以A-Z之间开头的并且重复大于0次
else if (/^([A-Z]+)/.test(item)) {
// 如果是大写,转换成小写
itemText += item.toLowerCase();
}
else{
// 如果都不符合,返回其本身
itemText += item;
}
});
return itemText;
}
//下面主要根据传入的type值来匹配各个场景
switch (type) {
//当匹配
case 1:
return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
//v=验证本身 v1=s ; v2=dfwwerasfddffddeerAasdgFegqer
return v1.toUpperCase() + v2.toLowerCase();
});
case 2:
return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
//v=验证本身 v1=s ; v2=dfwwerasfddffddeerAasdgFegqer
return v1.toLowerCase() + v2.toUpperCase();
});
case 3:
return ToggleCase(str);
case 4:
return str.toUpperCase();
case 5:
return str.toLowerCase();
default:
return str;
}
} console.log(changeCase(str,1)) =>SdfwwerasfddffddeerAasdgFegqer

var str="abc";
var number=555;
function repeatStr(str, count) {
//声明一个空字符串,用来保存生成后的新字符串
var text = '';
//循环传入的count值,即循环的次数
for (var i = ; i < count; i++) {
//循环一次就把字符串+到我们事先准备好的空字符串上
text += str;
}
return text;
}
console.log(repeatStr(str, )) =>"abcabcabc"
console.log(repeatStr(number, 3)) =>"555555555"
let str="abacdasdfsd" function replaceAll(str,AFindText,ARepText){
raRegExp = new RegExp(AFindText,"g");
return str.replace(raRegExp,ARepText);
}
console.log(replaceAll(str,"a","x")) =>xbxcdxsdfsd
str:需要编辑的字符串本身
AFindText:需要替换的内容
ARepText:被替换成的内容
解析:创建正则,匹配内容,替换
function checkType (str, type) {
switch (type) {
case 'email':
return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
case 'phone':
return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
case 'tel':
return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
case 'number':
return /^[0-9]$/.test(str);
case 'english':
return /^[a-zA-Z]+$/.test(str);
case 'chinese':
return /^[\u4E00-\u9FA5]+$/.test(str);
case 'lower':
return /^[a-z]+$/.test(str);
case 'upper':
return /^[A-Z]+$/.test(str);
default :
return true;
}
}
console.log(checkType ('hjkhjhT','lower')) =>false
原生js的常用方法总结的更多相关文章
- 原生js仿jquery一些常用方法
原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原 ...
- 【转】原生js仿jquery一些常用方法
现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 ? 1 2 3 4 5 6 7 8 9 10 //hide() Object.prototype.hide = function(){ ...
- 原生JS 基础总结
0. 好习惯 分号 ; 花括号 {}, var 弄清楚 null , undefined 区别 , isNaN, === 与 == 区别 1. prompt , confirm , alert 不同框 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
随机推荐
- 日志篇 貌似win10有个磁盘bug,非常非常严重... 硬盘解密之后无法访问,参数错误 BitLocker解密
程序员就是要穷尽一切猜想... 我的加密的硬盘解密后无法访问了,我从一年前就遇到了,现在又突然出现了..... 然后找到一个人回答,他这个回答能从形式上解决,点我去原帖 用cmd管理员模式,执行,I要 ...
- OpenSTF 平台搭建
什么是OpenSTF? OpenSTF(Smartphone Test Farm)是一个web端移动设备管理平台,可以从浏览器端远程调试.远程管理设备.其实有点类似于我们现在很火热的云测平台,如:te ...
- idea 2019.2 版本把菜单栏隐藏了恢复办法
一不小心把idea的菜单栏给隐藏了(如图) ,搞了半天也恢复不了,网上也没有找到什么办法,可是搞得我焦头烂额呀,怎么找也找不到,也不见大神有过提示,最后没办法,想着去看看它的配置文件吧,于是便找到了默 ...
- 利用TCHART做分离饼形图
https://www.cnblogs.com/gaodu2003/archive/2009/06/18/1505720.html unit Unit1; interface ……type TFor ...
- 基于网络拓扑图通过RCMS对网络进行配置
目录 基于网络拓扑图通过RCMS对网络进行配置 一些基本命令 对网络拓扑图1的简单配置 二层交换机S3 三层交换机 S2 实验结果 对网络拓扑图2的简单配置 NAT.ACL配置公网IP 基于网络拓扑图 ...
- BZOJ3926 ZJOI2015诸神眷顾的幻想乡(广义后缀自动机)
对多串建立SAM的一种方法是建trie再对trie建SAM.构造方式分为在线(也即不建trie而是依次插入每个串,或在trie上dfs)和离线(也即建好trie再bfs).其中离线构造与单串的构造方式 ...
- thymeleaf是用于编写html模版的编程语言(工具语言)
一.编程语言 用于编写html模版的编程语言. thymeleaf一种命令式和声名式混合的寄生语言. html与thymeleaf的结合是dsl与命令式语言的结合. html与thymeleaf的结合 ...
- java变量的声明和数据类型
一.关键字 java程序语言的关键字只有53个.具体如下: 访问控制:private.protected.public 修饰类.方法.属性和变量:abstract.class.extends.fina ...
- 整理:WPF中Binding的几种写法
原文:整理:WPF中Binding的几种写法 目的:整理WPF中Bind的写法 <!--绑定到DataContext--> <Button Content="{Bindin ...
- IIS 7.5绑定中文域名转码启动站点报“值不在预期的范围内”
问题现象 IIS 7.5在绑定中文域名转码后,启动站点会出现[值不在预期的范围内]: 解决方案 此问题是由于中文域名绑定错误导致的,IIS 7.5针对中文域名会自动转换为punycode码,所以不需要 ...