原生js中的常用方法的写法
1、js深度克隆的方法
//第一种
function deepClone(obj){
var str,newObj = obj instanceof Array? [] : {};
if(typeof obj !== 'object'){
return;
}else if(window.json){
str = JSON.stringify(obj);
newObj = JSON.parse(str);
}else{
for(var i in obj){
newObj[i]=typeof obj[i]==='object'?deepClone(obj[i]):obj[i]
}
}
return newObj;
}
//第二种
function deepClone(obj,newObj){
var newObj = newObj || {};
for(key in obj){
if(typeof obj[key] == 'object'){
newObj[key] = (obj[key].constructor === Array)?[]:{}
deepClone(obj[key],newObj[key]);
}else{
newObj[key] = obj[key]
}
}
return newObj;
}
2、js数组去重的方法
//第一种
function unique(ary){
var obj={};
for(var i=0;i<ary.length;i++){
var cur = ary[i];
if(obj[cur] == cur){
ary[i] = ary[ary.length-1];
ary.length--;
i--;
}
obj[cur] = cur;
}
return ary;
}
console.log(unique([2,3,2,4,3,5,6,1,1]));
//第二种
function unique(ary){
var arr1 = [];
var obj = {};
for(var i=0;i<ary.length;i++){
if(!obj[ary[i]]){
arr1.push(ary[i]);
obj[ary[i]] = 1; }
}
return arr1;
};
var arr = [3,1,1,2,2,3,3,4,4];
console.log(unique(arr));
3、js判断对象是不是数组
方法一: instanceof instanceof 用于判断一个变量是否某个对象的实例,左边操作数是一个对象,右边操作数是一个函数对象或者函数构造器。原理是通过判断左操作数的对象的原型链上是否具有右操作数的构造函数的prototype属性。
a instanceof b?alert("true"):alert("false") //注意b值是你想要判断的那种数据类型,不是一个字符串,比如Array。
举一个例子:
[javascript] view plain copy
var arr=[];
console.log(arr instanceof Array) //返回true
方法二之 constructor 在W3C定义中的定义:constructor 属性返回对创建此对象的数组函数的引用,就是返回对象相对应的构造函数。从定义上来说跟instanceof不太一致,但效果都是一样的。 那么判断各种类型的方法:
[javascript] view plain copy
console.log([].constructor == Array);
console.log({}.constructor == Object);
console.log("string".constructor == String);
console.log((123).constructor == Number);
console.log(true.constructor == Boolean);
注意:
使用instaceof和construcor,被判断的array必须是在当前页面声明的!比如,一个页面(父页面)有一个框架,框架中引用了一个页面(子页面),在子页面中声明了一个array,并将其赋值给父页面的一个变量,这时判断该变量,Array ==object.constructor;会返回false;
原因:
1、array属于引用型数据,在传递过程中,仅仅是引用地址的传递。
2、每个页面的Array原生对象所引用的地址是不一样的,在子页面声明的array,所对应的构造函数,是子页面的Array对象;父页面来进行判断,使用的Array并不等于子页面的Array。
第三种:判断对象原型类型
function isAry(obj){
return Object.prototype.toString.call(obj) === "[object Array]"
}
4、自定义Object.create()——手写
Object.create=function(father,props){
console.log("我的create");
/*使用setPrototypeOf方法
var o=Object();//1. 创建空对象
Object.setPrototypeOf(o,father);//2. 继承father
*/
/*不使用setPrototypeOf方法
function Constructor(){}
Constructor.prototype=father;
var o=new Constructor();
*/
Object.defineProperties(o,props);//3. 定义新属性
return o;
}
5、js判断是否是回文的方法
function isPalindrome(str){
str +="";
for(var i=0,j=str.length-1;i<j;i++,j--){
if(str.charAt(i) !== str.charAt(j)){
return false;
}
}
return true;
}
console.log(isPalindrome('上海自来水来自海上'));
6、js类数组(arguments,dom元素集合)转化为数组
let arrayLike = {
'0' : 'a',
'1' : 'b',
'2' : 'c',
length : 3
};
1、Array.prototype.slice.call()
利用数组slice的方法实现
let arr1 = Array.prototype.slice.call(arrayLike);
2、[].slice.call();
let arr2 = [].slice.call(arrayLike);
3、Array.from()
ES6新增的转换数组的方法
let arr3 = Array.from(arrayLike);
4、扩展运算符(…)
ES6中新增的方法,扩展运算符(…)也可以将某些数据结构转为数组
let arr4 = [...arrayLike]
原生js中的常用方法的写法的更多相关文章
- 关于原生js中函数的三种角色和jQuery源码解析
原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- 原生js中slice()方法和splice()区别
slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...
- ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题
问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- koa 基础(十七)原生 JS 中的类、静态方法、继承
1.app.js /** * 原生 JS 中的类.静态方法.继承 * es5中的类和静态方法 */ function Person(name, age) { // 构造函数里面的方法和属性 this. ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...
- 谈一谈原生JS中的【面向对象思想】
[重点提前说:面向对象的思想很重要!] 最近开始接触学习后台的PHP语言,在接触到PHP中的面向对象相关思想之后,突然想到之前曾接触的JS中的面向对象思想,无奈记性太差, ...
随机推荐
- 做成像的你不能不了解的真相7-两分钟测算相机增益(Gain)
前几期真相文章得到了读者积极的反馈,其中提问最多的就是这个公式: 首先,大家觉得这个公式太有用了.以前只能定性地评价图像质量,现在一下子就能直接算出信噪比,瞬间高大上了许多有木有.然而,杯具的现实是, ...
- 线程中调用service方法出错
public class PnFileTGIComputeThread implements Runnable { @Resource private AppUsedService appUsedSe ...
- django-crontab使用
用 django-crontab 为 Django 添加定时任务 需求 做后台开发的时候,有时候会遇到这样的需求,在某个固定时间或者一定时间间隔自动触发某一事件.比如说我有一个需求要求是,周一到周五早 ...
- CPU内核、用户模式
本文由是阅读该文章做下的笔记. CPU分内核与用户模式. 三言蔽之 内核模式下,应用可以直接存取内存,能够执行任何CPU指令.一般来说驱动运行在该模式下.内核模式的应用一旦崩溃,整个操作系统都会崩溃. ...
- Django连接SQL Server,安装相关扩展包及相关配置
1.python下载 https://www.python.org/downloads/windows/ 2.根据当前windows和python的版本,下载pymssql相应的exe安装文件. ht ...
- springboot学习笔记:5.spring mvc(含FreeMarker+layui整合)
Spring Web MVC框架(通常简称为"Spring MVC")是一个富"模型,视图,控制器"的web框架. Spring MVC允许你创建特定的@Con ...
- SQL提高性能
1.对外键建立索引,大数据量时性能提高明显(建索引可以直接[Merge Join],否则还须在查询时生成HASH表作[Hash Join]) 2.尽量少使用inner join,使用left join ...
- valgrind 的使用简介
zz自 http://blog.csdn.net/destina/article/details/6198443 感谢作者的分享! 一 valgrind是什么? Valgrind是一套Linux下 ...
- 吴裕雄--天生自然HTML学习笔记:HTML 框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. iframe语法: <iframe src="URL"></iframe> 该URL指向不同的网 ...
- 你相信吗:一加仑汽油可以给iPhone充电20年
一直以来,苹果公司的iPhone系列手机受到了全世界人民的喜欢,很多人就此成为了果粉.或许是由于我们过于在意iPhone系列手机出彩的外形,所以忽略了很多关于iPhone手机有意思的消息,我们今天就来 ...