原生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中的面向对象思想,无奈记性太差, ...
随机推荐
- okhttp 拦截问题
builder.addInterceptor(chain -> { Request request = chain.request(); Response response = chain.pr ...
- js使用心得——避免全局变量冲突的小技巧
在写js代码的时候,经常会因为这样或者那样的原因用到全局变量,如果全局变量只在一个js里使用,那就没问题,但如果变量在不同的js文件里出现,这时隐藏的问题就会开始暴露,也许你能很快修复出现的BUG,又 ...
- COMET探索系列三【异步通知服务器关闭数据连接实现思路】
在小编络络 COMET实践笔记一文中注意事项中有这么一段话 使用长连接时, 存在一个很常见的场景:客户端需要关闭页 面,而服务器端还处在读取数据的阻塞状态,客户端需要及时通知服务器端关闭数据连接.服务 ...
- 基于phathomjs token 不定时无响应问题排查
问题描述 基于phathomjs的token池项目,基本原理是,打开淘宝页,获取匿名cookie,再由cookie中提取有效token,调用方通过该token获取淘宝数据 为方便基他人应用,封装了部分 ...
- es6变量和函数的提升、暂时性死区?
es6变量和函数的提升.暂时性死区?
- 使用dtree构建框架导航
前言: 该例子就是个框架导航 , 左边包含dtree的框架,点击上面的节点右边框架显示 说明步骤: 1. 首先获得dtree http://www.destroydrop.com/javascrip ...
- java中的深拷贝
对象拷贝有时让我们忽视其重要性,又或者因为想当然而导致若干程序问题. 浅拷贝 浅拷贝即普通拷贝,即对要拷贝的对象进行复制.例如对于Entity类: class Entity{ int a; Strin ...
- 博客已搬迁到 blog.vivym.xyz
博客已搬迁到 blog.vivym.xyz
- kendoUI 免费部分开发部分经验。
kendo分多个版本,核心UI免费版.NET,JAVA,PHP对应的前后端开发版. 基础免费版开放的UI经多个测试,与收费封装的UI并无区别,收费版提供了后端代码和前端封装语法,使不懂JS前端的也可简 ...
- 谁来破解公交WiFi的尴尬困局?
在咖啡馆.饭店坐定,菜单可以待会再看,远远看见服务员迎上来,赶紧先问一句:"这里有无线网吗,密码是多少",和笔者一样养成类似习惯的人越来越多.所以,当公交WiFi"大 ...