原生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实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
随机推荐
- 关于Class: ES6 JavaScript的class的静态方法、属性和实例属性。
1.什么叫做静态方法? 1.1.类相当于实例的原型, 所有在类中定义的方法, 都会被实例继承.如果在一个方法前,加上Static关键字,就表示该方法不会被继承,而是直接通过类来调用,这被称为 “静态方 ...
- 利用TCHART做分离饼形图
https://www.cnblogs.com/gaodu2003/archive/2009/06/18/1505720.html unit Unit1; interface ……type TFor ...
- C语言输入单字符避免回车的四种方法
在scanf()中使用'\n'屏蔽回车符号. scanf("%d\n", &n); scanf("%c", &c); 2.在scanf()格式串 ...
- 【转载】数字IC设计流程及开发工具
原文链接:https://www.zhihu.com/question/28322269/answer/42048070 Design Flow &lt;img src="h ...
- using 语句(C# 参考)(转载)
using 语句 提供可确保正确使用 IDisposable对象的方便语法. 示例 下面的示例演示如何使用 using 语句. using (var font1 = new Font("Ar ...
- axios捕获401 赋值token
//捕获401 // http request 拦截器 axios.interceptors.request.use( config => { const token = localStorag ...
- JXL 简单示例
JXL 1 Overview 1 Overview Home page: http://jexcelapi.sourceforge.net/ JXL 是一个开源的 Excel 开发库,支持 Excel ...
- 第一个Golang程序
1. 第一个 HelloGolang 程序 1.1 Go 源程序的基本概念 Go 源程序就是一个特殊格式的文本文件,可以使用任意文本编辑软件做 Go 的开发 Go 程序的 文件扩展名 通常都是 .go ...
- PostgreSql那点事(文件读取写入、命令执行的办法)
• 2013/07/9 作者: admin PostgreSql那点事(文件读取写入.命令执行的办法) 今天无意发现了个PostgreSQL环境,线上学习了下,一般的数据注射(读写数据库)差异不大,不 ...
- 英语apyrite红碧玺apyrite单词
红碧玺(apyrite)是粉红.桃红.玫瑰红.深红.紫红等以红色调为主的碧玺,矿物学上主要属于锂电气石和镁电气石.红色起因可能与微量锰及锂和铯有关. 红色是碧玺中价值最高的,其中以紫红色和玫瑰红色最佳 ...