前端WebsJavaScript开发集锦

Javascript基础篇小结

2016-09-24  本文已影响6909人  程序员poetry

转载请声明出处 博客原文

随手翻阅以前的学习笔记，顺便整理一下放在这里，方便自己复习，也希望你有也有帮助吧

第一课时 入门基础

知识点：

1、javascript介绍

2、基于对象的内存管理

3、变量

DOM在内存中的一些图示

DOM Tree DOM内存图 DOM内存图 DOM内存图

第二课时

回顾上节：

知识点：

1、window作用域

2、数据类型

如何判断js中的数据类型：
var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
最常见的判断方法：typeof 
alert(typeof a)   ------------> string
alert(typeof b)   ------------> number
alert(typeof c)   ------------> object
alert(typeof d)   ------------> object
alert(typeof e)   ------------> function
alert(typeof f)   ------------> function

alert(typeof a == "string") -------------> true
alert(typeof a == String) ---------------> false
判断已知对象类型的方法：instanceof 
alert(c instanceof Array) ---------------> true
alert(d instanceof Date) 
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false
根据对象的constructor判断：constructor 
alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true

      function A(){};
      function B(){};
      A.prototype = new B(); //A继承自B
      var aObj = new A();
      alert(aobj.constructor === B) -----------> true;
      alert(aobj.constructor === A) -----------> false;

      alert(aobj instanceof B) ----------------> true;
      alert(aobj instanceof B) ----------------> true;

      aobj.constructor = A; //将自己的类赋值给对象的constructor属性
      alert(aobj.constructor === A) -----------> true;
      alert(aobj.constructor === B) -----------> false; //基类不会报true了;
通用但很繁琐的方法： prototype 
alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;

Javascript的数据类型有六种（ES6新增了第七种Symbol）

内存中一共分为几种对象：

数据类型转换

转换函数
        var n1 = 12;
        var n2 = true;
        var a = [1, 2, 3];
        var o = {};
        function f(){}
        n1.toString(); //"12"
        n2.toString(); //"true"
        a.toString(); //"1,2,3"
        o.toString(); //"[object Object]"
        f.toString(); //"function f(){}"

       var n1 = "12";
       var n2 = "23hello";
       var n3 = "hello";
       parseInt(n1); //12
       parseInt(n2); //23
       parseInt(n3); //NaN

       var n1 = "1.2.3";
       var n2 = "1.2hello"
       var n3 = "hello"
       parseFloat(n1); //1.2
       parseFloat(n2); //1.2
       parseFloat(n3); //NaN
强制类型转换
        Boolean(123); //true
        Boolean(""); //false
        Boolean([]); //true
        Boolean({}); //true
        Boolean(null); //false
        Boolean(undefined); //false

        Number("123"); //123
        Number("123h"); //NaN
        Number(true); //1
        Number(false); //0
        Number(undefined); //NaN
        Number(null); //0
        Number([]); //0
        Number({}); //NaN

       String(123); //"123"
       String([1,2]); //"1,2"
       String(undefined) //"undefined"
       String(null) //"null"
       String({}) //"[object Object]"
隐式转换
null和undefined
 undefined==null   //结果为true,但含义不同。
 undefined===null //false,两者类型不一致，前者为“undefined”，后者为“object”

3、javascript脚本执行顺序

总结一下==运算的规则：(隐式转换)

第三课时

上节回顾：

知识点：

1、运算符

条件运符(表达式1?表达式2:表达式3)三元运算符

2、在js中 有四种被认为是非：

第四课时

上节回顾：

知识点：

1、console.log调试程序
2、条件结构
javascript中if语句优化写法
if (foo) bar(); else baz(); ==> foo?bar():baz();
if (!foo) bar(); else baz(); ==> foo?baz():bar();
if (foo) return bar(); else return baz(); ==> return foo?bar():baz();

if (foo) bar(); ==> foo&&bar();
if (!foo) bar(); ==> foo||bar();

第五课时

上节回顾：

知识点：

1、switch
2、for

第六课时

上节回顾：

1、switch

2、for

知识点：

1、while/do...while 没有谁好谁坏 只有适应场景不同

2、代码内存解析

闭包
闭包 作用域
//alert(x);//9:执行弹出x,结果x没定义,错误.
alert(i);//9:执行弹出i,然而i之前已经定义,只不过没地址,因此是undefiend
var i = 10;//1:var i;    10:把常量池中10的地址赋给栈中的i
var j = "你好";//2:var j;   11:把常量池中 你好 的地址复给栈中的j
var k = z = null;//3:var k,z;  12:把堆中null的地址赋值给z和k
var m = function(){//4:var m;   5:function匿名函数  13:把匿名函数在堆中的地址赋给栈中的m
    alert(2);
}
var b = document.body;//6:var b;    14:把堆中document.body对象的地址赋给栈中的b
var f = true;//7:var f; 15:把常量池中true的地址赋给栈中的变量f
function m(){//8:function m;
    alert(1);
}

function m(){
    c = 50;//在局部变量中找不到定义的c 沿着作用域链找到了全局变量的c
    alert('哈哈哈');
    //var c;
}

var c = 150; // 函数m()还未执行到 还没被销毁 此时全局c的值c=50
m();
var c = 20;//到这里一步 m()已经执行完了 函数已经销毁了  这里的c还是20
alert(c);//20


function m(){
    c = 50;//在局部变量中找不到定义的c 沿着作用域链找到了全局变量的c
    alert('哈哈哈');
    function inner(){
        c = 30;
        alert('嘻嘻');
    }
    inner();//c在函数内部找不到定义 所以沿着作用域链找到了全局的c
}

var c = 20;//到这里一步 m()还没执行 函数没被销毁  这里的c是30
m();

alert(c);//30

4、object对象

5、面向对象的程序设计

一些内存图示

闭包示例1 闭包示例2 闭包1 闭包2 闭包3

原型链的几张图解

原型链图解 js原型链演示00-new Object js原型链演示01-函数Foo声明 js原型链演示-对象继承模式-01-浅拷贝 js原型链演示02-new Foo() js原型链演示02-1-new 原理 js原型链演示03-Foo.prototype js原型链演示-对象继承模式-03-基于对象的原型继承 js原型链演示05-继承函数示例 js原型链演示06-继承prototype模式 js原型链演示07-继承prototype模式改进 js原型链演示08-继承prototype直接继承 js原型链演示08-继承prototype空对象中介 js原型链演示09-继承prototype空对象中介封装expend js原型链演示10-构造器拷贝继承

第七课时

上节回顾：

知识点：

1、object对象

new 原理详细解析
new创建对象的步骤
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log(this.name);
    };
}

function createPerson(P) {
    // 创建一个新对象
    var o = new Object();
    // 获取传递给Person函数的参数
    var args = Array.prototype.slice.call(arguments, 1);
    // 新对象的__proto__属性指向Person的原型对象
    o.__proto__ = P.prototype;
    // Person的原型对象的constructor指向Person
    P.prototype.constructor = P;
    // 把Person构造函数的作用域赋给新对象
    // 给这个新对象添加属性（name,age,say）
    P.apply(o, args);
    // 返回这个新对象
    return o;
}

var p = createPerson(Person, 'wang', 35);

2、面向对象的程序设计

多种构造函数
传统的创建对象

var person = new Object();

person.name = “lancer”;

person.age = 24;

person.job = “UI”;

person.sayName = function(){

alert(this.name);

}

person.sayName();
工厂模式

function createPerson(name,age,job){

var o = new Object();

o.name = name;

o.age = age;

o.job = job;

o.sayName = function(){

alert(o.name);

}

return o;

}

var person1 = createPerson(“lancer”,24,”UI”);

person1.sayName();
构造函数

function Person(name,age,job){

this.name = name;

this.age = age;

this.job =job;

this.sayName = function(){

alert(this.name)

}

}

var person1 = createPerson(“lancer”,24,”UI”);

person1.sayName();
原型模式

function Person(){

}

Person.prototype.name =”lancer”;

Person.prototype.age =24;

Person.prototype.job = “UI”;

Person.prototype.sayName = function(){

alert(this.name)

}

var person1 = new Person();

person1.sayName();

var person2 = new Person();

person2.name =”lara”

person2.sayName();
简单原型模式

function Person(){

}

Person.prototype = {

name : “lancer”,

age : 24,

job : “UI”,

sayName : function(){

alert(this.name)

}

};

var person1 = new Person();

person1.sayName();
构造函数和原型模式

function Person(name,age,job){

this.name = name;

this.age = age;

this.job =job;

}

Person.prototype = {

constructor :Person,

sayName : function(){

alert(this.name)

}

};

var person1 = new Person(“lancer”,”24″,”UI”);

person1.sayName();
动态原型模式

function Person(name,age,job){

this.name = name;

this.age = age;

this.job =job;

}

if(typeof this.sayName !=”function”){

Person.prototype = {

constructor :Person,

sayName : function(){

alert(this.name)

}

};

}

var person1 = new Person(“lancer”,”24″,”UI”);

person1.sayName();
稳妥构造函数

var Person = function(name,age,job){

var O = new Object();

O.sayName = function(){

alert(name);

};

return O

}

var person1 = Person(“lancer”,24,”UI”);

person1.sayName();

其他：

一些内存图示

第十课时

上节回顾：

1.继承

2.call apply bind方法的使用

知识点：

API application program interface

常用API

日期型函数Date
Date 对象方法 
var myDate = new Date(); //系统当前时间

var myDate = new Date(yyyy, mm, dd, hh, mm, ss);

var myDate = new Date(yyyy, mm, dd);

var myDate = new Date(“monthName dd, yyyy hh:mm:ss”);

var myDate = new Date(“monthName dd, yyyy”);

var myDate = new Date(epochMilliseconds);

var myDate = new Date();

myDate.getYear(); //获取当前年份(2位)

myDate.getFullYear(); //获取完整的年份(4位,1970-????)

myDate.getMonth(); //获取当前月份(0-11,0代表1月)

myDate.getDate(); //获取当前日(1-31)

myDate.getDay(); //获取当前星期X(0-6,0代表星期天)

myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) 时间戳！！

myDate.getHours(); //获取当前小时数(0-23)

myDate.getMinutes(); //获取当前分钟数(0-59)

myDate.getSeconds(); //获取当前秒数(0-59)

myDate.getMilliseconds(); //获取当前毫秒数(0-999)

myDate.toLocaleDateString(); //获取当前日期

myDate.toLocaleTimeString(); //获取当前时间

myDate.toLocaleString( ); //获取日期与时间

var myDate = new Date();

myDate.setDate(myDate.getDate() + 10); //当前时间加10天//类似的方法都基本相同,以set开头,具体参考第2点

var i = daysBetween(beginDate,endDate); //返回天数

var i = beginDate.getTimezoneOffset(endDate); //返回分钟数

//checkDate() 只允许”mm-dd-yyyy”或”mm/dd/yyyy”两种格式的日期
if( checkDate(“2006-01-01”) ){ }

//正则表达式(自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种)

var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/;if( r.test( myString ) ){ }
字符串String型函数API
js下常用的字符串方法 
var myString = new String(“Every good boy does fine.”);

var myString = “Every good boy does fine.”;

var myString = “Every ” + “good boy ” + “does fine.”;

var myString = “Every “; myString += “good boy does fine.”;

//截取第 6 位开始的字符

var myString = “Every good boy does fine.”;

var section = myString.substring(6); //结果: “good boy does fine.”

//截取第 0 位开始至第 10 位为止的字符

var myString = “Every good boy does fine.”;

var section = myString.substring(0,10); //结果: “Every good”

//截取从第 11 位到倒数第 6 位为止的字符

var myString = “Every good boy does fine.”;

var section = myString.slice(11,-6); //结果: “boy does”

//从第 6 位开始截取长度为 4 的字符

var myString = “Every good boy does fine.”;

var section = myString.substr(6,4); //结果: “good”

var myString = “Hello”;

var lcString = myString.toLowerCase(); //结果: “hello”

var ucString = myString.toUpperCase(); //结果: “HELLO”

var aString = “Hello!”;

var bString = new String(“Hello!”);

if( aString == “Hello!” ){ } //结果: true

if( aString == bString ){ } //结果: true

if( aString === bString ){ } //结果: false (两个对象不同,尽管它们的值相同)

var myString = “hello everybody.”;

// 如果检索不到会返回-1,检索到的话返回在该串中的起始位置

if( myString.indexOf(“every”) > -1 ){ } //结果: true

var myString = “I is your father.”;

var result = myString.replace(“is”,”am”); //结果: “I am your father.”

var myString = “hello”;

var code = myString.charCodeAt(3); //返回”l”的Unicode编码(整型)

var char = String.fromCharCode(66); //返回Unicode为66的字符

var myString = “hello all”;

var code = encodeURI(myString); //结果: “hello%20all”

var str = decodeURI(code); //结果: “hello all”

//相应的还有: encodeURIComponent() decodeURIComponent()
Math对象型
Number型 常用的数字函数
var i = 1;

var i = new Number(1);

var i = 1;

var str = i.toString(); //结果: “1”

var str = new String(i); //结果: “1”

i = parseInt(str); //结果: 1

i = parseFloat(str); //结果: 1.0

//注意: parseInt,parseFloat会把一个类似于”32G”的字符串,强制转换成32

var i = 123; var str = “string”;

if( typeof i == “number” ){ } //true

//某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number)

//请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!!

i = parseInt(str);

if( isNaN(i) ){ }

//此知识与[字符串比较]相同

- **小数转整数**

var f = 1.5;

var i = Math.round(f); //结果:2 (四舍五入)

var i = Math.ceil(f); //结果:2 (返回大于f的最小整数)

var i = Math.floor(f); //结果:1 (返回小于f的最大整数)

var i = 3.14159;

//格式化为两位小数的浮点数

var str = i.toFixed(2); //结果: “3.14”

//格式化为五位数字的浮点数(从左到右五位数字,不够补零)

var str = i.toPrecision(5); //结果: “3.1415”


var i = parseInt(“0x1f”,16);

var i = parseInt(i,10);

var i = parseInt(“11010011”,2);

//返回0-1之间的任意小数

var rnd = Math.random();

//返回0-n之间的任意整数(不包括n)

var rnd = Math.floor(Math.random() * n)
5.Regex 
//在这个最大的对象的原型上加一个extends方法 使得下面所有的原型 都有这个方法
 //这个原型的作用是通过迭代 复制传进来的构造器的所有的原型的方法

 Object.prototype.extends = function(parent){
     //console.log(parent.prototype);

    for(var prop in parent.prototype){
        //console.log(prop);//eat extends
        this.prototype[prop] = parent.prototype[prop];//复制传进来的构造器的所有的原型的方法给当前正在调用这个方法的对象
    }
 }

 function Person(name){
    this.name = name;
 }
 Person.prototype = {
    eat:function(){
        alert(this.name+"在吃饭");
    }
 };

 function Father(name){
    this.name = name;
 }

 Father.extends(Person);//extends方法是最大的对象Object加的方法 所有的子孙 构造器都有这个方法

 var f = new Father("小头爸爸");
 f.eat();

一些图示

第十一课时

上节回顾：

知识点：

String.prototype.isEmail = function(){

  email = this;
  if (email.indexOf("@")!=-1&&email.indexOf(".")!=-1)
  {
    if(email.indexOf("@")<email.lastIndexOf("@")){
      alert("邮箱不合法");
    }else{
      alert("邮箱合法");
    }
  }

}
var email = "jingguanliuye@gmail.com";
email.isEmail();

//===============================日历练习(方法简洁 高效)======================================

//var year = parseInt(prompt("请输入日历年份："));
//var month = parseInt(prompt("请输入日历月份："))-1;

Date.prototype.printCalendar = function(){

var year = this.getFullYear(),month = this.getMonth();
var date = new Date(year,month,1);

//alert(date.toLocaleString());
document.write("<div class='date'>"+year+"年"+(month+1)+"月</div>");
document.write("日 一 二 三 四 五 六<br />");

var day = date.getDay();
for(var i=0;i<day;i++){
  document.write('  ');
}

var count = new Date(year,month+1,0).getDate();//这里的0返回一个月的最后一天
for(var i=1;i<=count;i++){
  document.write(i+'  ');
  if((i+day)%7==0){
    document.write('<br/>');
  }
}
}
new Date(2012,2).printCalendar();

第十二课时

上节回顾：

新知识点：

第十三课时

上节回顾：

新知识：

1.BOM 浏览器对象模型

BOM

2.DOM 文档对象模型

第十四课时

上节回顾：

新知识点：

1.DOM 文档对象模型

document
element

DOM 操作：

操作DOM对象：

节点的查找：（最重要）

DOM中查找节点的思路：（由大到小 个别情况 由子到父）

继续查找：

//============给Object原型加一个方法 消除文本节点对DOM操作的影响 例如：nextSibling` `previousSibling` `firstChild` `lastChild （受到换行 和文本节点影响）

Object.prototype.next = function(){
  //NodeType == 3 text的代号
  //NodeType == 1 tag的代号
  if(this.nextSibling){//判断下一个兄弟节点是否存在
  switch(this.nextSibling.nodeType){
    case 1:
      return this.nextSibling;
    case 3:
      return this.nextSibling.nextSibling;
  }
}else{
  return null;
}
console.log(div1.next().next().innerText);

DOM与节点的关系：

//var p = document.createElement('p');
//p.innerHTML = "this is a p";
//var child = document.getElementsByTagName('div');

//给Div的HTMLDivElement构造器原型加一个创建元素的方法 要所有的元素都有这个方法 改成 Object
HTMLDivElement.prototype.createElement = function(tagName){
  var child = document.createElement(tagName);
  this.appendChild(child);
  return child;
}
var child = document.getElementsByTagName('div')[2].createElement("p");
child.innerHTML = 'pppppp';
DOM属性小结
DOM方法小结

第十五课时

上节回顾：

1.DOM 文档对象模型

document

新知识点：

1.事件（事故）基础

2.常用事件

浏览器事件注意事项：

总结

学编程最佳实践 DOM基本操作 javascript函数基础 JavaScript数据类型 window对象 javascript变量 JavaScript字符串函数 JavaScript正则表达式 JavaScript流程控制 JavaScript运算符 JavaScript数组
上一篇 下一篇

猜你喜欢

热点阅读