• js-知识点


    1.递归,数组选出最大值

    var arr = [9,8,55,66,49,68,109,55,33,6,2,1];   var max = arr[0]; function findMax( i ){  if( i == arr.length ) return max;  if( max < arr[i] ) max = arr[i];  findMax(i+1);}  findMax(1);console.log(max);
    View Code

     2.(博学谷视频--高级面向对象视频教程)

    之第一季和第二集

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
        <meta name="format-detection" content="telphone=no, email=no"/>
        <meta name="apple-touch-fullscreen" content="yes"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <title>in</title>
        <style type="text/css">
        </style>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        /*---复合类型
        * Array,Date,Number,String,Boolean,Object
        * RegExp,Math,function
        * ---条件运算符:> < == === >= <= != !==
        * ---创建对象:new 运算符 或者 字面量
        * ---07重要的概念:值类型与引用类型 按值传递:将变量中的数值完整的拷贝一份,赋值给新的变量
        */
        //undefined 类型 在js里直接转化成false
       var obj={"name":"honhou","age":16};
       var s1="name";
       var s2="age";
       //判断对象有某属性的方式--对象就是键值对的集合
        //1
       console.log(s2 in obj);
        //2
        if(s1 in obj){
            console.log("含有此属性");
        }
        //3
        if(obj.name){
            console.log("含有此属性");
        }
        //4.遍历方式判断
       var has=false;
        for(var k in obj){
            if(k == s1){
                has=true;
                break;
            }
        }
        //5.关联数组
        var s3="age";
        if(obj[s3]){
            console.log("含有此属性");
        }
        //6.鸭子变形
    
        //07-值变量 :
        var num=123;
        var num2=num;
        console.log("num="+num+"num2="+num2); //    num=123num2=123
        var num=1;
        console.log("num="+num+"num2="+num2); //num=1num2=123
        //引用类型:表示变量存储的是数据的(引用)地址。
        var o={ n: 123};
        var o2=o;
        console.log("o="+ o.n+"o2="+o2.n); //o=123o2=123
        var o2={n:121};
        console.log("o="+ o.n+"o2="+o2.n); //o=123o2=121
    
        //08
        var o3={
            m:[1,2,3],
            n:{m:123}
        }
        console.log(o3.m[1]+"n为"+o3.n.m);
    
        //逻辑
        function fun1(num){
            //如果传入了num,就打印num的值;如果没有传入,就打印没有参数
            if(num != undefined){
                console.log(num);
            }else{
                console.log("没有参数");
            }
        }
        fun1("123");
        fun1();
    </script>
    </html>
    View Code

     3.js进阶代码

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
        <meta name="format-detection" content="telphone=no, email=no"/>
        <meta name="apple-touch-fullscreen" content="yes"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <title>js严格模式</title>
    </head>
    <body>
    <a href="javascript:void (0);" class="clicka">点我</a>
    <a href="javascript:void (0);" class="clicka-btn">点我22</a>
    </body>
    <script type="text/javascript">
        'use strict';
        var arr=[1,3,4,5,9,12,6];
        function fun1(argument) {
            console.log("严格模式");
            // body...
        }
        fun1();
    
       /* function fun2(){
            var arguments = [];
            console.log("arguments 严格模式下不能再定义");
        }
        function arguments (){
            console.log("arguments 严格模式下不能再定义,非严格模式可以");
        }*/
    
    //隐式转换
    //字符串+其他  得到的仍是字符串
    console.log('8' | '1'); 
    
    //使用原始类型替代对象包裹(谨记:对象包装的原始类型和原始类型在比较相等的时候,它们具有不同的表现行为。)
    var s = new String('hello');
    var s2= new String('hello');
    var str=s+'world';
    console.log(typeof 'hello'); // string
    console.log(typeof s); // object
    console.log(s===s2); //false
    console.log(s==s2); //false
    //str.someProperty = 'some';
    //console.log(str.someProperty); // 输出undefined,但是如果 obeject.属性,则正确输出值
    
    //==  在比较两边的值时,会隐性的把它们转换成同一类型的值,然后才会进行比较
    //=== 直接比较,不涉及隐性类型转换。
      
    //尽量少用全局变量,尽量使用局部变量
    //若不加var则是隐性的定义了全局变量,所以定义变量时一定要加var
    
    // 闭包:熟练掌握闭包
    function Container(){
        var arr=[];
        return {
            getItem:function(index){
                return arr[index];
            },
            addItem:function(obj){
                var index=arr.push(obj);
                return index-1; //返回添加元素的第一个元素
            },
            length:function(){
                return arr.length;
            }
        }
    }
    var c = Container();
    console.log("con的长度"+c.length()); // 0
    var index1 = c.addItem({name: 'dreamapple'});
    console.log(index1); // 0
    console.log(c.length()); // 1
    console.log(c.getItem(index1)); // Object {name: "dreamapple"}
    
    //变量声明提升(代码块中的变量声明会被隐式地提升到封闭函数的顶部)
    console.log(test_bl);
    // ***相当于把 var test提升到顶部 赋值部分 test = 1 还是在原来的位置;
    var test_bl=9; //若此行注释,则会报错,若不注释,则输出 undefined
    
    //2.6 使用立即调用的函数表达式创建局部作用域
    // 新的函数才会产生新的作用域,JavaScript的循环没有新的作用域产生。
    var testArr=[4,5,6];
    function generateFun(arr){
        var result = [];
        var len=arr.length;
        for (var i=0; i <len; i++) {
            
           (
            function(j){
                result[j]=function(){
                    return arr[j];
                }
            }
            )(i);
        }
        return result; //返回,外面才会访问到result
    }
    // @2 产生新的函数
    var g2 = generateFun(testArr);
    console.log(g2[0]()); //4
    console.log(g2[1]()); //5
    console.log(g2[2]()); //6
    
    //2.6-2 闭包方式2
    function genetateFun2(arr){
        var result=[];
        var len=arr.length;
        for (var i = 0; i < len.length; i++) {
            (
                function(i){
                  var j=i; //注意此处
                  result[i]=function(){
                    return arr[j];
                  }
                }
    
                )()
        }
        return result;
    }
    var g3 = generateFun(testArr);
    console.log(g3[0]()); //4
    console.log(g3[1]()); //5
    console.log(g3[2]()); //6
    //2.7 命名的表达式函数
    function fun_right_mm(){
        console.log('fun_right_mm');
    }
    var fun_mm = function fun_mm_name(){
       console.log('fun本身');
       return  fun_right_mm();
    }
    console.log(fun_mm()); //undefined
    //console.log(fun_mm_name());// fun_mm_name is not defined
    //尽量用所以尽量使用匿名的函数表达式
    //2.8 局部函数调用
    
    //3.1理解函数调用,方法调用及构造函数调用之间的不同
    /*方法调用将被查找方法属性的对象作为调用接受者。
    构造函数需要通过new运算符调用,并产生一个新的对象作为其接受者。*/
    function heelo(){
        console.log('hello函数调用');
    }
    heelo();
    var heeloObj={
        welcome:function(){
            console.log('方法调用'+this.name);
        },
        name:"小红"
    }
    heeloObj.welcome();
    function HeeloContruct(name,age){
        this.name=name;
        this.age=age;
        console.log('构造函数的名字是'+this.name+', and my age is ' + this.age);
    }
    var heeloCon=new HeeloContruct('小明',26);
    //3.2熟练掌握高阶函数(高阶函数是那些将函数作为参数或返回值的函数。)[1,3,4,5,9,12,6]
    var arr_gj=arr.sort(function(x,y){
        if(x>y){
            return 1;
        }else{
            return -1;
        }
    })
    console.log(arr_gj);//排序
    var arr_gj2=arr.map(function(x) {
        return x*2+1;
    });
    console.log(arr_gj2);
    var arr_gj_aIndex='a'.charCodeAt(0);//于指定位置的字符的编码
    //使用高阶函数
    function creatStr(n,cb){
        var str='';
        for (var i = 0; i < n; i++) {
            str+=cb(i);
        }
        return str;
    }
    //创建一个随机字符串
    var str_sj_str=creatStr(10,function(){
        return String.fromCharCode(Math.floor(Math.random()*26)+arr_gj_aIndex);
        /*fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串*/
    })
      console.log(str_sj_str);
      //创建一个随机数
      var str_sj_num=creatStr(10,function(){
        return Math.floor(Math.random()*26);
      })
      console.log(str_sj_num);
      //3.3 使用call方法自定义接受者来调用方法
      var objCall={
        callWay:function(msg){
            console.log('callWay:'+this.name+'函数参数:'+msg);
    
        },
        name:"objCall-1-name"
      }
      var objCall2={
        name:"objCall2-name"
      }
      objCall.callWay.call(objCall2,'haha');// 第一个参数是方法的调用者,剩余的参数就是原函数的参数
    
      // 高阶函数使用call
    function compute(arg) {
        var sum = 0;
        for(var i = 0; i < arg.length; i++) {
            sum += arg[i];
        }
        return sum;
    }
    
    function highFunc() {
       //console.log(arguments.length); //5
        return compute.call(null, arguments);
    }
    
    console.log(highFunc(1, 2, 3, 4, 5)); // 15
    /*
    使用call方法自定义接受者来调用函数。
    使用call方法可以调用在给定的对象中不存在的方法。
    使用call方法定义高阶函数允许使用者给回掉函数指定接收者。*/
    //3.3  使用apply方法通过不同数量的参数调用函数
    /*使用apply方法指定一个可计算的参数数组来调用可变参数的函数。
    使用apply方法的第一个参数给可变参数的方法提供一个接收者。*/
    function compute2() {   //**使用arguments创建可变参数的函数
        var sum = 0;
        for(var i = 0; i < arguments.length; i++) {
            sum += arguments[i];
        }
        return sum;
    }
    function wrapper(arr) {
        return compute2.apply(null, arr); // 给compute函数传递多个参数
    }
    var apply_arr=[1, 2, 3, 4, 5];
    console.log(wrapper(apply_arr));
    /*call与apply的区别
        apply:最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里。如果argArray不是一个有效的数组或arguments对象,那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数,那么Global对象将被用作thisObj,并且无法被传递任何参数。
    
        call:它可以接受多个参数,第一个参数与apply一样,后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候,使当前this实例指针保持一致,或者在特殊情况下需要改变this指针。如果没有提供thisObj参数,那么 Global 对象被用作thisObj。 
    
        实际上,apply和call的功能是一样的,只是传入的参数列表形式不同。
    
    */
    //3.8 3.9 待研究
    
    //3.11  不要信赖函数的对象的toString方法。因为不同的引擎下调用toString方法的结果可能不同
    var str_tostring=45955444;
    console.log(typeof(str_tostring)); //number
    console.log(typeof(str_tostring.toString())); //string
    var str_tostring_hs=function(x) {
        return x + 1;
    }
    console.log(str_tostring_hs.toString());/*输出:function (x) {
        return x + 1;
    }*/
    console.log(typeof (str_tostring_hs)); //function
    console.log(typeof (str_tostring_hs.toString()));//string
    
    //4.1 prototype,getPrototypeOf和__proto__之间的不同
    /*C.prototype属性是new C()`创建的对象的原型。
    Object.getPrototypeOf(obj)是ES5中检索对象原型的标准函数。
    obj.__proto__是检索对象原型的非标准方法。
    类是由一个构造函数和一个关联的原型组成的一种设计模式。
    
    */
    function protoStudent(name,age){
        this.name=name;
        this.age=age;
    }
    protoStudent.prototype.sayHello=function(){
        console.log('hello prototype student'+this.name);
    }
    var s = new protoStudent('dreamapple', 22); //声明函数
    s.sayHello(); //调用方法
    
    console.log(protoStudent.prototype === s.__proto__); // true
    console.log(protoStudent.prototype === Object.getPrototypeOf(s)); // true 要常用getPrototypeOf()
    
    //4.7 只将实例状态存储在实例对象中
    /*
    共享可变数据可能会出现问题,因为原型是被所有的实例共享的。
    将可变的实例状态存储在实例对象中。*/
    function TreePro(value){
        this.value=value;
        //this.children=[];
    }
    TreePro.prototype={
        children:[],
        addChild:function(value){
            this.children.push(value);
        }
    };
    var left=new TreePro(1);
    left.addChild(2);
    left.addChild(3);
    console.log(left.children);//[2, 3]
    var right= new TreePro(2);
    right.addChild(4);
    right.addChild(5);
    console.log(right.children);//[2, 3, 4, 5]
    var top22= new TreePro(7);
    top22.addChild(left);
    top22.addChild(right);
    console.log(left.children);//[2, 3, 4, 5, {value:1}, {value:2}]
    console.log(top22.children);//同上
    // 可以发现,left right top22改变,则属性都跟着变化,所以,原型为所有实例共享,应该将可变的实例状态存储在实例对象中
    function TreePro1(value){
        this.value=value;
        this.children=[];
    }
    TreePro1.prototype={
        addChild:function(value){
            this.children.push(value);
        }
    };
    var left1 = new TreePro1(1);
    left1.addChild(2);
    left1.addChild(3);
    console.log(left1.children); // [ 2, 3 ]
    var right1 = new TreePro1(4);
    right1.addChild(5);
    right1.addChild(6);
    var top1 = new TreePro1(7);
    top1.addChild(left1);
    top1.addChild(right1);
    console.log(left1.children); // [ 2, 3 ]
    console.log(top1.children); // [ { value: 1, children: [ 2, 3 ] },{ value: 4, children: [ 5, 6 ] } ]
    
    //4.9 在子类的构造函数中调用父类的构造函数
    
    //定义一个父类
    function parentPro(name,age){
        this.name=name;
        this.age=age;
    }
    parentPro.prototype.sayHello=function(){
        console.log('my name is'+this.name);
    }
    //定义我们的子类
    function ChildPro(name,age,school){
        parentPro.call(this,name,age);
        this.school=school;
    }
    //**将子类与父类的原型关联
    // Object.create() 一种新的对象创建方式,第一个参数是要继承的原型,如果不是一个子函数,可以传一个null,第二个参数是对象的属性描述符,这个参数是可选的
    ChildPro.prototype=Object.create(parentPro.prototype);//使用Object.create()函数来构造子类的原型对象以避免调用父类的构造函数。
    ChildPro.prototype.getSchool = function(){
        console.log('my school is'+ this.school);
    } 
    var Childppro=new ChildPro('namehong',12,'guangming')
    Childppro.getSchool();//my school isguangming
    Childppro.sayHello();//my name isnamehong
    //4.12 将原形视为实现的细节 对象是接口,原型是实现。
    //提供参数默认值应当采用测试undefined的方式,
    // 6.5 使用结构类型(也称为鸭子类型)来设计灵活的对象接口。
    // 我们可以使用结构类型
    function rectangle1_jiegou(width, length) {
        var _width = width,
            _length = length;
        return {
            getArea: function() {
                return _width * _length;
            }
        }
    }
    var r2 = rectangle1_jiegou(100, 200);
    console.log(r2.getArea()); // 20000
    // 6.6 使用ES5提供的Array.isArray方法测试真数组。
    // 6.7避免过度的强制转换
    function square(x) {
        // 这里会进行强制的类型转换
        return x * x;
    }
    console.log(square('3')); //
    // 一种比较好的方式,我们在函数内部判断参数是否是一个数字
    function square1(x){
        if (typeof (x)==='number') {
           return x*x;
        }
      throw new Error('请传递正确的参数类型!');
    }
    console.log(square1(3));
    // 6.3 ***使用extend函数抽象出从选项对象中提取值的逻辑。
    //定义一个接受参数的选项对象的函数
    function AlertSelect(obj){
        this.level=obj.level;
        this.msg=obj.msg;
    }
    var ale = new AlertSelect({
        level:0,
        msg:"hello alertselect"
    });
    console.log(ale);//AlertSelect {level: 0, msg: "hello alertselect"}
    // 当然如果一些参数是必选的话,我们把他们单独拿出来,而且参数的选项对象上的属性不是必选的
    function AlertSelect1(level,msg,options){
        this.level=level;
        this.msg=msg;
        for (var p in options) {
            this[p]=options[p];//遍历属性并赋值给this
        }
    
    }
    var ale1=new AlertSelect1(1,'find error',{
        count:9,
        theme:'default'
    })
    console.log(ale1);//AlertSelect1 {level: 1, msg: "find error", count: 9, theme: "default"}
    //6.3的重点来啦
    // 使用extend函数扩展我们的参数对象
    function extend(target, source) {
        if(source) {
            for(var p in source) {
                var val = source[p];
                if('undefined' !== typeof val) {
                    target[p] = val;
                }
            }
        }
        return target;
    }
    // 升级原来的构造函数
    function Alert2(level, msg, options) {
        var opt = extend({
            level: level,
            msg: msg
        });
        opt = extend(opt, options);
        extend(this, opt);
    }
    var ale2 = new Alert2(2, 'bug', {
        count: 1,
        theme: 'highlight'
    });
    console.log(ale2);//Alert2 {level: 2, msg: "bug", count: 1, theme: "highlight"}
    
    //5.1 使用Object的直接实例构造轻量级的字典
    // 使用一个对象作为字典来使用
    var dict1 = {
        key1: 'value1',
        key2: 'value2',
        key3: 'value3'
    };
    // 使用Object.getPrototypeOf() 避免使用 __proto__
    var dict1P = Object.getPrototypeOf(dict1);
    dict1P.say2 = function(){};
    var props3 = [];
    for(var p in dict1) {
        props3.push(p);
    }
    console.log(props3); // [ 'key1', 'key2', 'key3', 'say' ]
    
    // 按照顺序的输出要使用数组,不能使用对象
    var info1 = [
        {name: 'dream'},
        {'1': '10'},
        {'A': function() {}}
    ];
    
    for(var i = 0; i < info1.length; i++) {
        for(var kk in info1[i]) {
            if(Object.hasOwnProperty.call(info1[i], kk)) {
                console.log(kk + ' : ' + info1[i][kk]);
            }
        }
    }
    //并其第5部分
    //5.9  在类数组对象上复用通用的数组方法
    function fn() {
        console.log(arguments);
        console.log([].slice.call(arguments, 0)); //[1, 2, 3]
        console.log(['array'].concat([].slice.call(arguments)));//[ 'array', 1, 2, 3 ]
    }
    fn(1, 2, 3);
    </script>
    </html>
    View Code
  • 相关阅读:
    Linux 文件 目录结构探索
    实践 : Ubuntu 上 Testlink 部署
    Linux 查找安装包所在目录的常用方法
    selenium + python 测试环境搭建 (WINDOWS)
    EntityFramework 学习 一 Entity Framework结构体系
    castle windsor学习-------Container Events 容器的事件
    castle windsor学习----ComponentModel construction contributors
    castle windsor学习----- CastleComponentAttribute 特性注册
    castle windsor学习-----Inline dependencies 依赖
    castle windsor学习-----Registering components by conventions
  • 原文地址:https://www.cnblogs.com/lanyueff/p/5201411.html
Copyright © 2020-2023  润新知