原生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实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
随机推荐
- 《Linux就该这么学》培训笔记_ch00_认识Linux系统和红帽认证
<Linux就该这么学>培训笔记_ch00_认识Linux系统和红帽认证 文章最后会post上书本的笔记照片. 文章主要内容: 认识开源 Linux系统的种类及优势特性 认识红帽系统及红帽 ...
- Pycharm 个人认为舒服漂亮又好用的主题风格
又开始和code打交道了系列…… 实验室换了新电脑,故而,重新安装了各种软件,乃至重新配置 Pycharm主题,找了好久,终于找到,想着应该mark一下,以备下次需要. 个人认为 Monokai 这 ...
- 快速排序详解(C语言/python)
快速排序详解 介绍: 快速排序于C. A. R. Hoare在1960年提出,是针对冒泡排序的一种改进.它每一次将需要排序的部分划分为俩个独立的部分,其中一个部分的数比的数都小.然后再按照这个方法对这 ...
- 认识一下microbit扩展板robotbit
在我们买到的套件中,另一块叫robotbit扩展板,所谓扩展板,是把控制板上的针脚引出来,方便我们扩展驱动连接电机.舵机.及各种传感器以展功能. 介绍如下 :下面 反面: 官方文档:http://le ...
- Hyper-V虚拟机安装Ubuntu,启动的时候会出现:Please remove the installation medium,then press ENTER
Hyper-V虚拟机安装Ubuntu成功以后,重启的时候页面会一直卡在下面,并报Please remove the installation medium,then press ENTER,这是因为启 ...
- [IOT] - Raspberry Pi 4 Model B 系统初始化,Docker CE + .Net Core 开发环境配置
本教程为在 Docker 中配置 .Net Core,如果想在树莓派 Raspbian 系统中配置 .Net Core,请参考:[IOT] - 在树莓派的 Raspbian 系统中安装 .Net Co ...
- C语言是什么
大家对于Java可能并不陌生,那你对c语言了解多少呢,今天小编带大家来了解c语言是什么. c语言是一门面向过程.抽象化的通用程序设计语言,广泛应用于底层开发.C语言具有高效.灵活.功能丰富.表达力强和 ...
- Java | Spring Boot Swagger2 集成REST ful API 生成接口文档
Spring Boot Swagger2 集成REST ful API 生成接口文档 原文 简介 由于Spring Boot 的特性,用来开发 REST ful 变得非常容易,并且结合 Swagg ...
- docker compose项目
本文参考: https://www.cnblogs.com/jmcui/p/9395375.html https://www.cnblogs.com/jmcui/p/9512795.html 1.Do ...
- WebAPI 身份认证解决方案——Phenix.NET企业应用软件快速开发平台.使用指南.21.WebAPI服务(一)
21 WebAPI服务 ASP.NET Web API,是微软在.NET Framework 4.5上推出的轻量级网络服务框架,虽然作为ASP.NET MVC 4的一部分,但却是一套全新的.独立的 ...