原生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中的面向对象思想,无奈记性太差, ...
随机推荐
- day41-进程-管道
#1.管道Pipe:双向通信: from multiprocessing import Pipe p1,p2 = Pipe() p1.send('hello') print(p2.recv()) p2 ...
- CentOS7部署yum环境及虚拟机快照克隆
CentOS部署IP地址 第一种:nmtui 方向键.tab.空格.回车第二种:修改网卡配置文件 /etc/sysconfig/network-sripts/ifcfg- ...
- VBA引用管理工具(可用于32、64位Office,Win7 Win10均可)
VBAReferenceManager安装和使用方法,操作请看动态图: 下载地址: VBAReferenceManager.zip
- TPO1-1 Groundwater
If the pores are large,the water in them will exist as drops too heavy for surface tension to hold,a ...
- Pytorch中的variable, tensor与numpy相互转化的方法
1.将numpy矩阵转换为Tensor张量 sub_ts = torch.from_numpy(sub_img) #sub_img为numpy类型 2.将Tensor张量转化为numpy矩阵 sub_ ...
- Java Class Loader Retrospect
- understanding android build layer · Dylan
build / android 先看看Android官方的解释 Understand Build Layers The build hierarchy includes the abstraction ...
- SQL Server 查询分析器的执行计划中的扫描方式,举例理解
student表,id,name,address id上建立聚集索引,Name建索引,address无索引.1. [Table Scan]:遍历整个表,查找所有匹配的记录行.这个操作将会一行一行的检查 ...
- 3DMAX 卸载工具,完美彻底卸载清除干净3dmax各种残留注册表和文件
一些同学安装3dmax出错了,也有时候想重新安装3dmax的时候会出现这种本电脑windows系统已安装3dmax,你要是不留意直接安装,只会安装3dmax的附件,3dmax是不会安装上的.这种原因呢 ...
- vue-cli 项目结构介绍
感谢:https://www.jianshu.com/p/7006a663fb9f 总体框架 一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关 ...