原生js中的常用方法的写法

前端学堂      2022-02-14     540

关键词:

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(‘上海自来水来自海上‘));

 

js中的内置方法的兼容写法

1、如果浏览器不支持every属性,every的实现原理if(Array.prototype.every===undefined){Array.prototype.every=function(fun){//遍历当前数组中每个元素for(vari=0;i<this.length;i++){if(this[i]!==undefined){//调用fun,依次传入当前元素值,位置i,当前数组作为 查看详情

原生jsforeach()和map()遍历的区别以及兼容写法

一、原生JS forEach()和map()遍历共同点:    1.都是循环遍历数组中的每一项。  2.forEach()和map()里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。  3.匿名... 查看详情

js原生选项(包含无缝滚动轮播图)一

原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法;Improvelittlebylittleeveryday!1>基本选项卡: 思路:循环中先清除再添加,注意this的指向和自定义属性的应用html代码:<divid="tab"><inputclas... 查看详情

js定时器的4种写法及介绍

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。一、什么是定时器JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTimeout:设... 查看详情

js原生捕鱼达人

...戏大家都很熟悉吧,接下来的两三天,我会将整个游戏的原生js写法详细的写出来,整个游戏应用了面向对象的写法:创建构造函数,在构造函数上面添加对象的属性,然后在构造函数的原型上添加方法,当然这个程序使用了canv... 查看详情

关于js中的常用表单验证+正则表达式

一、非空验证  trim:去空格(去掉前后的空格),任何字符串都可以用这个方法。写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0。<body><formaction="Untitled-1.html"method="post"><inputtype="text"name="uid... 查看详情

原生js的一些dom/样式操作

写在前面的话:  一直写的jquery,原生的不用……写篇东西帮助自己整理记忆一下吧 ,虽然都很基础啊……1.js找dom对象,以及创建/删除节点 一贯的jquery操作:$(selector) 原生的写法(列一些常用的):document.getElementsByC... 查看详情

认识jquery,jquery的优势语法多库冲突js原生对象和jquery对象之间相互转换和dom操作,常用的方法

...JQuery      JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法      JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势    1)可以像CSS一样访问和操作DOM  ... 查看详情

javascript封闭函数常用内置对象js调试方法

1.封闭函数封闭函数是JavaScript中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数/在封闭函数前加’;‘,可以避免js压缩时出错/;(function(){alert(‘helloworld!‘);})();/*当i大于78时等于78,小于时等于89*/vari=90>78?78:8... 查看详情

js库写法

...为自己知识的积累。而目前版本的JavaScript并未提供一种原生的、语言级别的模块化组织模式,而是将模块化的方法交由开发者来实现。因此,出现了很多种JavaScript模块化的实现方式,以AMD为例,该规范使用define函数来定义模块... 查看详情

$(function(){})的原生写法

.......})我们知道这是等DOM元素加载完成之后执行的代码但是原生中如何等DOM元素加载完成之后再执行某段代码呢?functionDOMContentLoaded(){   alert 查看详情

理清js的各种遍历

...ap遍历Json。然而还有很多遍历方法for,forEach,forin等,有原生的有JQ的,他们有何区别呢?所以我决定写一写博客梳理我关于遍历的知识。首先,先分清原生js和jQuery的遍历方法:1.原生JS遍历方法:for、forin、forEach、forof、map2.jqu... 查看详情

ajax_原生ajax写法理解异步请求js单线程+事件队列封装原生ajax

1、原生Ajax  一定要理解Ajax出现的背景  Ajax通过url查询后端接口的数据,在前端做数据的解析和局部更新  1、隐藏帧iframe方式实现页面局部更新---只是为了比较好的用户体验     访问后台接口数据显示在iframe页面... 查看详情

js中的常用内置对象有哪些?并列举该对象的常用方法?

Arguments函数参数集合arguments[]函数参数的数组Arguments一个函数的参数和其他属性Arguments.callee当前正在运行的函数Arguments.length传递给函数的参数的个数Array数组length属性动态获取数组长度join()将一个数组转成字符串。返回一个字符... 查看详情

spring切点表达式常用写法

任意公共方法的执行:execution(public**(..))任何一个名字以set开始的方法的执行:execution(*set*(..))AccountService接口定义的任意方法的执行:execution(*com.xyz.service.AccountService.*(..))在service包中定义的任意方法的执行:ex... 查看详情

js常用方法

1.输出语句:document.write("");2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)5.得到表单中元素的名称和值:document.getElementById("表单 查看详情

单例模式常用写法总结(代码片段)

...态内部类和枚举没有隐患,双检锁是有隐患的,请看下文中的防反射攻击处理一节)三种方法比较如果想要懒加载:我更推荐静态内部类,因为细节少,写法简单,不容易错。如果不想要懒加载:推荐枚举,自带防反射攻击和防... 查看详情

熟悉js中的常用选择器及属性方法的调用

选择器、属性及方法调用的配合使用:<style>         #a{            width:200px;      查看详情