原生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中的面向对象思想,无奈记性太差, ...
随机推荐
- Cisco路由器配置基本命令
特权模式:enable Router1 # show running-config Router1 # show ip route Router # show ip interface brief S ...
- jmeter测试get post 笔记
0 环境 系统环境:win7 1 操作 1 post 新建线程组 2 get 和post新建类似 http请求 只是新建一个参数化我测试的2个url http://127.0.0.1:8080/cry ...
- [LC] 102. Binary Tree Level Order Traversal
Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...
- 为什么前两年大热的VR创业突然冷了?
不得不说,如果不是<头号玩家>在国内的热映,人们似乎都要忘记VR这个行业了.<头号玩家>中那些带有极强真实色彩的游戏,其实就是VR进化的目标,甚至是巅峰!而里面的角色佩戴的设备 ...
- 基于hibernate的BaseDao及其实现类的设计
以前做设计的时候dao接口和它的实现了,这样子就不必写这么多的重复代码了.但由于对反射没有了解,除非依赖hibernate的其他组件,否则写不出来.不过,有了反射,我们可以通过泛型来实现我们想要做的功 ...
- Java IO: FileOutputStream
原文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) FileOutputStream可以往文件里写入字节流,它是OutputStream的子类, ...
- js new 与 return
前置: 默认情况下, 函数的返回值是 undefined (即没有定义返回值). new 操作符 js 中的 new 操作符,可以是我们像 java 一样,获得一个新的对象,例如: function ...
- Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传
本文为原创文章,转载请标明出处 目录 安装插件 导入 app.module.ts 创建 provider 更多 效果图 1. 安装插件 终端运行: ionic cordova plugin add c ...
- win+E 出现“未指定错误“修复方案
windows7 (win7) win+E 出现"未指定错误----"解决方法 出现该问题的原因:大家使用某种注册表优化所致,如使用优化大师等优化注册表-- 解决方法: 1.如果优 ...
- 吴裕雄--天生自然 python数据分析:葡萄酒分析
# import pandas import pandas as pd # creating a DataFrame pd.DataFrame({'Yes': [50, 31], 'No': [101 ...