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);

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>

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()); //

var index1 = c.addItem({name: 'dreamapple'});

console.log(index1); //

console.log(c.length()); //

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]()); //

console.log(g2[1]()); //

console.log(g2[2]()); //

//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]()); //

console.log(g3[1]()); //

console.log(g3[2]()); //

//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)); //

/*

使用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()); //

// 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>

js-知识点的更多相关文章

JS知识点整理(二)
前言这是对平时的一些读书笔记和理解进行整理的第二部分,第一部分请前往:JS知识点整理(一).本文包含一些易混淆.遗漏的知识点,也会配上一些例子,也许不是很完整,也许还会有点杂,但也许会有你需要的,后 ...
Node.js知识点学习
Node.js知识点学习一.基本概念 Node.js,或者 Node,是一个可以让 JavaScript 运行在服务器端的平台.可以说,Node.js开创了javascript模块化开发的先河,早期 ...
JS知识点整理(一)
前言本文把平时的一些读书笔记和理解进行了整理归纳,包含一些易混淆.遗漏的知识点,也会配上一些例子,可能不是很完整,还会有点杂,但也许会有你需要的(目前先整理了一部分,笔记有点多,后续会持续更新). ...
vue.js 知识点（四）
看完了vue.js的官方文档,大概对这些知识有了那么一点的了解了,但是很多具体的运用还不太清楚,现在就总结一下,关于其中的一些知识点的运用: v-bind: 动态绑定指令,默认情况下,是给html ...
fabric.js 知识点整理
fabric.js是一个很好用的 canvas 操作插件,下面整理了一些平时项目中用到的知识点: //1: 获得画布上的所有对象: var items = canvas.getObjects(); / ...
JS知识点查漏补缺
知识点1: 判断语句中遇到NaN即为 False 只需要注意遇到False即为False即可使用join(),toString()皆可以将数组转化为字符串二者的相同点在于都可以转化数组为字符串二 ...
前端必备的js知识点（转载）
1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.2.js是一门什么样的语言及特点? ...
Node.js知识点
1. 入口文件app.js里的路由,按顺序执行: 2.
JS知识点备忘
做前端久了,会发现很多比较杂的知识点,平时很少用到(往往在面试的时候经常见到),但是遇到的时候会很揪心...所以遇到的时候把它记录下来,但求有个印象,再次遇到时,可以在这里快速找到解决. 1.文档碎片 ...
JS知识点概况
1.什么是JavaScript a) JavaScript 被设计用来向 HTML 页面添加交互行为. b) JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言). c) ...

随机推荐

Haskell Seq函数和严格计算
参考链接http://stackoverflow.com/questions/11046590/the-seq-function-and-strictness https://wiki.haskell ...
常见IT面试题
1.爬楼梯问题,有个N阶的楼梯,一个人可以一次爬1阶,也可以爬2阶,求问总计有多少种爬法? F(N)= F(N-1)+F(N-2). N=1时,有1种爬法,N=2时,有2种爬法.该题可以用递归方法求解 ...
SQL总结之对比和备份
-----用户解锁select * from wfuser for update ----------------------修改金额select * from bp_account where ac ...
ios在项目中打开word文档、ppt等总结
最近在项目开发中遇到下载附件文档预览需求,在这里总结一下我的实现方法,本文最后会附带我写的demo下载地址这里我总结了三种实现方法(1)用webView预览(2)通过UIDocumentIntera ...
基于React Native的58 APP开发实践
React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...
ES 6 : Math对象的扩展
ES6在Math对象上新增了17个与数学相关的方法.所有这些方法都是静态方法,只能在Math对象上调用. 1.Math.trunc() Math.trunc方法用于去除一个数的小数部分,返回整数部分. ...
Python初识与简介【开篇】
目录 1.扯淡 2.Python历史 3.Python简介 4.Python应用 5.为什么是python而不是其他语言? 6.Python的种类 7.Python的特点 8.Python设计哲学 9 ...
LNA
low noise amplifier ,低噪声放大器. PA主要侧重输出功率,LNA侧重噪声系数,所以LNA用于前级,PA用作末级.
yahoo给出的关于网站优化的建议
1.使用CDN 内容分发服务器会根据用户的位置选择最近的服务器响应用户的请求,静态资源放在CDN的性能将提升20%左右. 2.设置Expires和Cache-Contral头将静态资源的过期时间设置 ...
ECOS-Ecstore证书生产失效问题排查
无法生成证书问题排查无法生成证书问题排查 author :James,jimingsong@vip.qq.com since :2015-03-02 名称解释(官方) 常见错误 1. 名称解释(官方 ...

js-知识点

js-知识点的更多相关文章

随机推荐

热门专题