前端javascript知识(三)

  • 函数记忆,判断是不是质数.

    方法一:
    function isPrime1(n){
        if(n<=3){return true}
        else{
          for(var i=2;i<Math.sqrt(n);i++){
            if(n%i==0){return false;}
          }
          return true;
        }
    };
    方法二:hash
      var isPrime2=(function(){//hash
        var hash={};
        return function(n){
          if(n<=3){return true}
          else if(hash[n]!==undefined){
            return hash[n];
          }else{
            for(var i=2;i<Math.sqrt(n);i++){
              if(n%i==0){return hash[n]=false}
            }
            return hash[n]=true;
          }
        }
    })();
  • 数组去重
    方法一:
    var arr1=[1,2,3,2,1,2];
      function repeat1(arr){
        for(var i=0,arr2=[];i<arr.length;i++){
          if(arr2.indexOf(arr[i])==-1){
            arr2.push(arr[i]);
          }
        }//(遍历结束)
        return arr2;
    }
    方法二:hash
    function repeat2(arr){
        //遍历arr中每个元素,同时声明hash
        for(var i=0,hash={};i<arr.length;i++){
         //hash中是否包含当前元素值的建
      //如果不包含,就hash添加一个新元素,以当前元素值为key,value默认为1
          if(hash[arr[i]]===undefined){
            hash[arr[i]]=1;
          }
        }//(遍历结束)
        //将hash转为索引:
        var i=0;
        var arr2=[];
        for(arr2[i++] in hash);
        return arr2;
    }
    方法三:
    function repeat3(arr){
        return arr.sort()
                 .join(",,")
                 .replace(
                  /(^|,,)([^,]+)(,,\2)*/g,
                  "$1$2")
                 .split(",,");
      }
    console.log(repeat3(arr1));
  • 插入排序
    var arr=[2,4,1,5,3];
      function insertSort(arr){
        //遍历arr中每个元素(i从1开始)
        for(var i=1;i<arr.length;i++){
          //将当前元素临时保存在变量t中
          var t=arr[i];
          var p=i-1;//声明变量p=i-1
          //循环:(arr[p]>t&&p>=0){
          while(arr[p]>t&&p>=0){
         //将p位置的值,赋值给p+1位置
            arr[p+1]=arr[p];
            p--;//p--
          }//(循环结束)
          arr[p+1]=t;//将t放在p+1的位置上
        }//(循环结束)
      }
      insertSort(arr);
    console.log(String(arr));
  • 快速排序:
      function quickSort(arr){
        //如果arr的length<=1
        if(arr.length<=1){
          return arr;//就直接返回arr
        }
        //计算参照位p
        var p=Math.floor(arr.length/2);
        var left=[];
        var right=[];
        //删除p位置的元素
        var center=arr.splice(p,1)[0];
        //遍历arr中每个元素
        for(var i=0;i<arr.length;i++){
          if(arr[i]>=center){
            right.push(arr[i]);
          }else{
            left.push(arr[i]);
          }
        }
        return quickSort(left) .concat(center,quickSort(right))
      }
      var sortedArr=quickSort(arr);
      console.log(String(sortedArr));
  • 正则表达式
    (1) "ryan5 is6 not7 a8 good9 man10"
    var n=5;
    var str="ryan is not a good man";
    str=str.replace(/\b[a-z]+\b/g,function(kw){ return kw+n++;});
    console.log(str);
  • 统计字符串中每种字符出现的次数,出现次数最多的是? 出现?次
      var str="helloworld";
      方法一:用hash
      for(var i=0,hash={};i<str.length;i++){
        if(hash[str[i]]){
          hash[str[i]]++
        }else{
          hash[str[i]]=1;
        }
      }
      console.dir(hash);
    方法二:用正则
    var arr=str.split("")
      .sort()
      .join("")
      .match(/([a-z])\1*/g)
      .sort(function(a,b){
    return b.length-a.length; })
    console.log("出现最多的是: "+arr[0][0]
      +"共"+arr[0].length+"次");
    var hash={};
      arr.forEach(function(val){
        hash[val[0]]=val.length;
      });
      console.dir(hash);
  • 数组降维
    var arr=[
        [0,0,0,0],
        [0,0,0,0],
        [0,0,0,0],
        [0,0,0,0],
      ];
      //method 1:
      for(var r=0,arr1=[];r<arr.length;r++){
        for(var c=0;c<arr[r].length;c++){
          arr1.push(arr[r][c]);
        }
      }
      console.dir(arr1);
      //method 2:
      for(var r=0,arr2=[];r<arr.length;r++){
        arr2=arr2.concat(arr[r]);
      }
      console.dir(arr2);
    //method 3:
      var arr2=[].concat.apply([],arr);
      console.dir(arr2);
  • Function赋值
      var f=function(){var a=b=1;}
      f();
      console.log(b);//1
      console.log(a);//报错
      var f=function(){var a=b=1;}
      setTimeout(f,0);
      console.log(b);//报错
      f();
      var a,b=0, fn=function(){var a=b=2;}
      fn();
      console.log(a);//undefined
      console.log(b);//2
  • 函数currying(柯里华)
      var getN;
      function add(n){
        getN=function(){console.log(n);}
        return function(m){
          n+=m;
        arguments.callee.toString=function(){
            return n;
          }
          return arguments.callee;
        }
      }
      add(1)(2)(3); getN();//6
      add(1)(2)(3)(4); getN();//10
      alert(add(1)(2)(3));//6
      alert(add(1)(2)(3)(4));//10
  • 递归
    var emp={
     work:function(){//3,2,1
      var  sum=0;//+3+2+1 +2+1  +1
      for(vari=0; i<arguments.length&&arguments[0]>0;
            i++){
            sum+=arguments[i]
                +arguments.callee(
                  --arguments[i]
                );
          }
          return sum;
        }
      }
      console.log(emp.work(3,2,1));//10
  • 闭包
    (1)function fun(n,o){//外层函数
        console.log(o);
        return {
          fun:function(m){//内层函数 n
            return fun(m,n);
          }
        }
      }
      var a=fun(0);a.fun(1); a.fun(2); a.fun(3);
       //undefined  0      0       0
    var a=fun(0).fun(1).fun(2).fun(3);
    //undefined   0    1    2
    var a=fun(0).fun(1); a.fun(2); a.fun(3);
    //undefined  0       1      1
    (2)var a=0,b=0;
      function A(a){
        A=function(b){alert(a+b++)};
        alert(a);
      }
      A(1);//1
      A(12);//13
  • OOP
    (1)
    window.a=300;
      function fn1(){
        this.a=100;
        this.b=200;
        return function(){
                  alert(this.a)
                }.call(arguments[0])
      }
      function fn2(){ this.a=new fn1(); }
    var a=new fn1().b;//300
    var v=new fn1(fn2());//[object Object]
    (2)
    var number=2;//4  8
      var obj={
        number:4,//8
        fn1:(function(){
          //var number;
          this.number*=2;
    number*=2; //声明提前  undefined
          var number=3;
          return function(){
            this.number*=2;
            number*=3;
            alert(number);
          }
        })()
      }
      var fn1=obj.fn1;
      alert(number); fn1(); obj.fn1();
      //4           9      27
      alert(window.number);//8
      alert(obj.number);//8
    (3)
    function Foo(){
      getName=function(){alert(1);};
        return this;
    }
    Foo.getName=function(){alert(2);};
    Foo.prototype.getName=function(){
      alert(3);
    };
    var getName=function(){alert(4);};
    function getName(){ alert(5); };
    Foo.getName();//2
    getName();//4
    Foo().getName();//1
    getName();//1
    new Foo.getName();//2
    new Foo().getName();//3
    new new Foo().getName();//3
    (4)
    var a=1;
    var b={
      a:2,
      b:function(){
        console.log(this.a);//1
      }(),
      f:this.f=function(){
        console.log(this.a);
      }
    };
    function f(){ console.log(3); }
    f();//1
    b.f();//2
    (b.f)();//2
    (0,b.f)();//1
    (5)
    var foo=function(){
      console.log(this.a);
    }
    var obj={a:2,foo:foo};
    var a=10;
    var bar=obj.foo;
    var bar2=foo.bind(obj);
    bar();//10
    bar2();//2
    foo();//10
    obj.foo();//2
    setTimeout(bar,0);//10
    (6)
    function MyObj(){
      this.p.pid++;
    }
    MyObj.prototype.p={"pid":0}//2
    MyObj.prototype.getNum=function(num){
      return this.p.pid+num;
    }
    var _obj1=new MyObj(); //创建新对象,继承原型pid+1
    var _obj2=new MyObj(); //创建新对象,继承原型pid+2
    console.log(
      _obj1.getNum(1)+_obj2.getNum(2)
    );//7      2+1   +    2+2
  • 判断一个对象是不是数组类型,有五种方法:
    (1) typeof 无法判断 只能判断原始类型的值和函数
    (2)isPrototypeOf 判断父及对象   可检查整个原型链 //可能继承自数组
      console.log(Array.prototype.isPrototypeOf([])?"是数组":"不是数组");
      console.log(Array.prototype.isPrototypeOf({})?"是数组":"不是数组");
      console.log(Array.prototype.isPrototypeOf(function(){})?"是数组":"不是数组");
    (3)constructor 检查指定对象的构造函数 可检查整个原型链  //可能继承自数组
      var father={};
      var son={};
      father.__proto__=Array.prototype;
      son.__proto__=father;
      console.log(son.contructor==Array?"是数组":"不是数组")
      console.log({}.contructor==Array?"是数组":"不是数组");
      console.log(function(){}.contructor==Array?"是数组":"不是数组");
    (4)instanceof 检查一个对象是否是制定构造函数的实例 可检查整个原型链 //可能继承自数组
      var father={};
      var son={};
      father.__proto__=Array.prototype;
      son.__proto__=father;
      console.log(son instanceof Array?"是数组":"不是数组");
      console.log({} instanceof Array?"是数组":"不是数组");
      console.log(function(){} instanceof Array?"是数组":"不是数组");
    (5)强行用要检查的对象,调用原始的toString方法  不检查整个原型链
          //[object class]: class-Array Date Object
          //只能检查最初就是数组创建的对象。
          console.log(Object.prototype.toString.call([])=="[object Array]"?"是数组":"不是数组");
          console.log(Object.prototype.toString.call({}));
          console.log(Object.prototype.toString.call(function(){}));
          console.log(Object.prototype.toString.call(/\d/));
          var father={};
           var son={};
           father.__proto__=Array.prototype;
           son.__proto__=father;
          console.log(Object.prototype.toString.call(son)=="[object Array]"?"是数组":"不是数组");//不是
          //结论: 对象一旦创建,class属性就无法修改
                 //修改继承关系,也无法修改class属性
    (6) Array.isArray(obj)  不检查整个原型链
          console.log(Array.isArray([]));
          console.log(Array.isArray({}));
      //如果浏览器不支持isArray
      if(Array.prototype.isArray===undefined){//if(!Array.isArray)
          //给?添加isArray方法
          Array.prototype.isArray=function(arg){
              //强行调用原始toString方法,和"[object Array]"比较
              return Object.prototype.toString.call(arg)
              =="[object Array]"?"是数组":"不是数组";
          }
      }
  • 自定义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;
      }
  • 深克隆原理
    Object.clone=function(obj){//深克隆
    if(typeof(obj)=="object"){//如果obj是对象
      var o=//有必要区分数组和普通对象
      Object.prototype.toString.call(obj)=="[object Array]"?[]:{};
          for(var key in obj){//遍历obj的自有属性
              //如果key是obj的自有属性
              if(obj.hasOwnProperty(key)){
                  o[key]=arguments.callee(obj[key]);//arguments.callee调的是当前的Object.clone函数
                  }
          }
          return o;
          }else{//如果obj是原始类型的值,就直接返回副本
              return obj;
          }
      }
  • 如果浏览器不支持every属性,every的实现原理
      if(Array.prototype.every===undefined){
         Array.prototype.every=function(fun){
          //遍历当前数组中每个元素
          for(var i=0;i<this.length;i++){
              if(this[i]!==undefined){
    //调用fun,依次传入当前元素值,位置i,当前数组作为参数  ,将返回值,保存在变量r中
              var r=fun(this[i],i,this);
              if(r==false){//如果r为false
                 return false;//返回false
              }
              }
               }//(遍历结束)
           return true;//返回true
         }
      }
  • 如果浏览器不支持some属性,some的实现原理
      if(Array.prototype.some===undefined){
         Array.prototype.some=function(fun){
            for(var i=0;i<this.length;i++){
            if(this[i]!==unefined){
              var r=fun(this[i],i,this);
                  if(r==true){ return true; }
                    }
                }
            return false;
         }
      }
  • 浏览器不支持map属性,map的实现原理
      if(Array.prototype.map===undefined){
         Array.prototype.map=function(fun){
          //创建空数组: newArr
          var newArr=[];
          //遍历当前数组中每个元素
          for(var i=0;i<this.length;i++){
             //如果当前元素不是undefined
             if(this[i]!==undefined){//判断稀疏数组
    //调用fun传入当前元素值,位置i,当前数组,将结果保存在r中
                  //将newArr的i位置赋值为r
              var r=fun(this[i],i,this);
                      newArr[i]=r;
             }
          }//(遍历结束)
          return newArr;//返回newArr
         }
      }
  • 如果浏览器不支持reduce属性,reduce的实现原理
      if(Array.prototype.reduce===undefined){
         Array.prototype.reduce=function(fun,base){
           base===undefined&&(base=0);
           for(var i=0;i<this.length;i++){
          if(this[i]!==undefined){
             base=fun(base,this[i],i,this);
          }
               }
           return base;
             }
      }
  • 如果浏览器不支持bind属性, bind函数的实现原理
         if(Function.prototype.bind===undefined){
         Function.prototype.bind=function(obj/*,参数列表*/){
          var fun=this;//留住this
                  //*****将类数组对象,转化为普通数组
          var args=Array.prototype.slice.call(arguments,1);
          //args保存的就是提前绑定的参数列表
          /*function slice(1){
             var sub=[];
             for(var i=0;i<length;i++){
              sub.push(arguments[i]);
             }
             return sub;
          }*/
          return function(){
                     //将后传入的参数值,转为普通数组
             var innerArgs=Array.prototype.slice.call(arguments);//将之前绑定的参数值和新传入的参数值,拼接为完整参数之列表
             var allArgs=args.concat(innerArgs)
            //调用原始函数fun,替换this为obj,传入所有参数
            fun.apply(obj,allArgs);
          }
         }
      }
时间: 2024-11-06 11:53:15

前端javascript知识(三)的相关文章

Javascript知识三

O(∩_∩)O...今天继续学习了Javascript的知识,下面就总结一下. 数组: 判断是否为数组(instanceof Array) 在JavaScript中,数组不一定是同一类型 var array = ["Hello", 18, true]; if (array instanceof Array) //判断是否为数组 { alert("OK"); } shift和unshift shift:仅仅输出数组中第一项,即索引为0: unshift:输出数组的长度

前端javascript知识(二)

documen.write和 innerHTML的区别 document.write只能重绘整个页面 innerHTML可以重绘页面的一部分 浏览器检测通过什么? (1) navigator.userAgent (2) 不同浏览器的特性,如addEventListener JavaScript有哪几种数据类型? 简单,Number,Boolean,String,Null,Undefined 复合,Object,Array,Function 截取字符串"abcdefghi"的"

Javascript知识四(DOM)

 [箴 10:4] 手懒的,要受贫穷:手勤的,却要富足. He becometh poor that dealeth with a slack hand: but the hand of the diligent maketh rich. O(∩_∩)O~~ 昨天总结了<Javascript知识三>后忘记发布了,呵呵,最近我的忘性很大啊O(∩_∩)O~~,今天是练习,所以把这周还未总结的写下来,和大家一起分享交流. 首先,还是先把function剩下的总结下: 函数的自定义: 例如这道题,是定

菜鸟学前端--javascript基础

在学习过css相关的知识,有了前端工程师的一些基础知识.但要较好的掌握前端,必须要学习好javascript的知识. 下面将从基本语法.变量.关键字.保留字.语句.函数.BOM等角度阐释. 一.基本语法 javacript作为一种面向对象的.脚本级的轻量语言,与java一脉相承. 命名:区分大小写,弱类型定义(一般采用var,不限制类型). 行末分号可有可无(从经验上来看,推荐写,可以提高代码阅读质量). 括号用于代码段. 注释与C.java类型,单行用"//",段注释用"/

前端开发知识体系部

1. 前言 本文把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识--做web前端需要的比这三大块要多得多. 在看内容之前,先看一下这个知识框架的预览图.图太大不好展示,看不清除,可在此下载清晰版:http://pan.baidu.com/s/1hqIUvUc (内有整个知识体系的图片和xmind文件) 2. 分类 所有知识框架,那肯定是一个结构型的展现,就是一棵树.web前端的知识点非常多,

一些前端冷知识

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开

web前端工程师知识汇总

分类: Web开发应用 一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发.制作标准优化的代码,并增加交互动态功能,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验. Web前端工程师成长之路--知识汇总 图1.前端技术MSS W

前端JavaScript面试技巧

第1章 课程简介从几个常见面试开始,讨论针对一个题目的分析思路,总结题目对应的知识点.最后列出所有 JS 知识点的集合 -- JS 知识体系框架.1-1 课程简介(导学)1-2 前言1-3 几个面试题1-4 如何搞定所有面试题 第2章 JS基础知识(上)讲解 JS 基础语法相关的面试题,分析原理以及解答方法.这一章节讲解了基础知识的第一部分:变量的类型和计算.以及JS "三座大山" -- 原型.作用域和异步中的第一座大山:原型.2-1 变量类型和计算-12-2 变量类型和计算-22-3

JavaScript的三种工业化玩法

JavaScript的三种工业化玩法 软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScript同样需要软件调试技术,希望本文总结的三种工具会对大家的学习有所帮助. 任何语言的学习都离不开实践,不写代码是永远学不会编程的,当然javascript也不例外,很多人推荐直接浏览器调试,个人觉得这个推荐应该是非常初级的,比如Chrome, Firefox确实提供了实用的前端调试工具,但是个人认为