javascript全程笔记_javascript笔记

一、js基础

1.内核

2.javascript组成

1.ECMA Script :【规定了js的语法，类型，语句，关键字，操作对象等 ES6 2015.6】
2.Dom (document object model ) 文档对象模型
3.Bom (browser object model) 浏览器对象模型

二、数据类型

弱类型语言:变量类型是由它所包含的数据决定的

1.数据类型

		1、typeof() 判断数据类型函数
		2、数值型number
		3、布尔bollean
		3、字符串string
		4、undefined
		5、null
		6、object
1
2
3
4
5
6
7

2.类型转换

（1）隐式类型转换：
（2）显式类型转换（强制类型转换）

  Number()    		【将其他数据类型转换成数值型】
	  Number("12.23")      //12
	  Number(true)   	   //1 
	  Number(false)        //0
	  Number("")           //0
	  Number("null")       //0
	  Number("undefined")  //NaN
	  Number("NaN")        //NaN
1
2
3
4
5
6
7
8

  parseInt()
        console.log(parseInt("hello"))          //NaN
        console.log(parseInt("23aa"))           //23
        console.log(parseInt(12.23))            //12
        console.log(parseInt(0.12))             //0
        console.log(parseInt(true))             //NaN
        console.log(parseInt(false))            //NaN
        console.log(parseInt(""))               //NaN
        console.log(parseInt(25,16))            //37    16进制数，输出10进制
        console.log(parseInt(25,8))             //21
        console.log(parseInt(1001,2))           //***9
        console.log(parseInt(25,10))            //25        				   
1
2
3
4
5
6
7
8
9
10
11
12

NaN:not a Number 非数值【一个本来要返回数值的操作数，而没有返回数值的情况】

 parseFlot()
	  console.log(parseFloat("23.34"))        //23.34
	  console.log(parseFloat("23.45.78"))     //23.45
1
2
3

3.进制转换

（1）其他进制转换成10进制

  parseInt(25,16)
  parseInt(25,8)
  parseInt(25,10)
  parseInt(101,2)
1
2
3
4

（2）十进制转换成其他进制

  v1 =23;
  v1.toString(16)
  v1.toString(8)
  v1.toString(2)
  v1.toString(10)
1
2
3
4
5

4. 常用方法

  	isFinite()  //判断是否是正负有穷
          console.log(isFinite(200e500))    //false
          console.log(isFinite(200e5))      //true
1
2
3

   isNaN()   //判断是否为非数值
        console.log(isNaN("hello"))     //true
        console.log(isNaN(true))        //false
        console.log(isNaN(false))       //false
        console.log(isNaN("10"))         //false
1
2
3
4
5

(1)任何涉及NaN的操作，都返回NaN

	console.log(NaN/8)  //NaN
    console.log(NaN+8)  //NaN
    console.log(NaN-8)  //NaN
    console.log(NaN*8)  //NaN
1
2
3
4

(2)NaN与任何值都不相等，包括t他本身NaN

	NaN==NaN        //false
	0/0             //NaN
1
2

5、常见面试题

console.log(null*5)   //**  0	【隐式转换】
NaN*3                 //NaN   
undefined*5           //**      NaN【undefined隐式转换undefined】
"hello"*5             //***     NaN【hello隐式转换NaN】
"23"+5                //235
"23"*5                //115
1
2
3
4
5
6

6、Boolean类型

  /*true  false*/    
  if(10>0){

  }else{ }

  if((10>5)==true){}  等价于  if(10>5){}
  if(!10>5){}
1
2
3
4
5
6
7

Boolean()

  console.log(Boolean(23))            //true
  console.log(Boolean(0))             //false
  console.log(Boolean("hello"))       //true
  console.log(Boolean(""))            //false
  console.log(Boolean(null))          //false
  console.log(Boolean(undefined))     //false
1
2
3
4
5
6

                 true      false
    数值型         非空       0
    字符型         非空串     " "
    undefined     返回false
    null          返回false
    object        任意对象返回都是true
1
2
3
4
5
6

7. undefined类型

1、 变量只声明，未赋值

   var a;
    console.log(typeof(a))  //undefined
    alert(a)                //undefined
1
2
3

2、 alert( c ) //报错

3、函数没有返回值，默认undefined

 function f1(){
        alert("hello")
    }
    var r=f1()
    console.log(r)          //undefined
1
2
3
4
5

4、调用函数时，应该提供参数，但没有提供，该参数返回undefined

    function f1(a,b){
        alert(a);
        alert(b);
    }
   f1(3)
    console.log(r)          //3  undefined
1
2
3
4
5
6

8、null 空类型 【对象】

var a=null
console.log(typeof(a))    //object    null 是一种特殊的object
var  b ={} 
b.a=23
b.f1=function(){}
b=null
if(b==null){}
1
2
3
4
5
6
7

9、object 对象类型

对象就是一定属性和方法的封装体，通过对象能够引用到这些方法和属性

三、流程控制语句

1、

 if(){
      
    }else if(){

    }else if(){

    }else{
    }
1
2
3
4
5
6
7
8

2、

switch(){
    case:语句体;
    break;
    case:语句体;
    break;
    case:语句体;
    break;
    default 语句体
}
1
2
3
4
5
6
7
8
9

3、

for(var i= 0;i<5;i++){
    语句体
}
for each  /  for in 
4.while循环
5.do while 循环 至少执行一次
6、break    立即跳出循环
7、continue 停止当前循环，进入下一次循环
1
2
3
4
5
6
7
8

四、字符串操作

1.字符串创建

		var s1 = "hello" 
		var s2 = new String("hello")
1
2

2.属性

		s1.length       //获取字符串长度
1

3.方法

（1）获取字符【只能从正向走(从左到右)】

charAt()—————— //只能返回单个给定位置的字符
charCodeAt()————//返回字符编码ASCII码

  		  var s1 = "hello" 
                    01234----索引和下标值
1
2

var s2="fdhvfdhDD"
console.log(s2.charAt(3))  //v  返回单个给定位置的字符   
var s2="fdhvfdhDD"
console.log(s2.charCodeAt(1))  //100 【位置1上的d Ascll码为100】
var s2=" fdhvf dhDD "
console.log(s2.charCodeAt())  //32 (space) 占位
1
2
3
4
5
6

console.log(s1[1])		//e返回给定位置的字符
console.log(s1[0])		//h
console.log(s1[2])		//l
1
2
3

（2）拼接字符串

var s1="hello";
//var s2=s1.concat("world");
var s2=s1.concat("world","student","!"); //helloworldstudent!     
1
2
3

（3）子字符串

1.substr(起始位置，长度)

substr(起始位置，长度) 从起始位置截取到指定长度的子字符串
如起始位置为负数，则倒数

	var s1 = "hello world"
    console.log(s1.substr(3))           //lo world 后面是长度
    console.log(s1.substr(3,6))           //lo wor
    console.log(s1.substr(0))           //hello world
    console.log(s1.substr(-3))           //rld 从后往前定位，从左向右数
    console.log(s1.substr(3,-4))           //语法出错    长度不能是负数，为负数语法出错
    console.log(s1.substr(8,3))           //rld
1
2
3
4
5
6
7

2.substring(起始位置，终止位置)

substring(起始位置，终止位置)：起始包含，终止不包含
遇到负数，自动转换为0
起始大于终止，则自动调换

		console.log(s1.substring(3))           //lo world
        console.log(s1.substring(3,7))           //lo w
        console.log(s1.substring(0))           //hello world
        console.log(s1.substring(-3))           //hello world   负数转为0
        console.log(s1.substring(3,-4))           //hel 负数都转0 0-3提
        console.log(s1.substring(8,3))           //lo wo （3，8）调换位置
1
2
3
4
5
6

3.slice(起始位置，终止位置)：

slice(起始位置，终止位置)：起始包含，终止不包含
优点：识别负数

		console.log(s1.slice(3))           //lo world
		console.log(s1.slice(3,6))           //lo 
		console.log(s1.slice(0))           //hello world
		console.log(s1.slice(-3))           //rld
		console.log(s1.slice(3,-4))           //lo w    3到-4
		console.log(s1.slice(8,3))           //
1
2
3
4
5
6

(4)字符串大小写转换

s1.toLowerCase() 小写
s1.toUpperCase() 大写

        var s2="fdhvfdhDD"
        console.log(s2.toLowerCase())  //fdhvfdhdd
        console.log(s2.toUpperCase())  //FDHVFDHDD
1
2
3

(5)去空格【s1.trim()】

s1=" he llo "
s1.trim() 去左右空格

var s2=" fdhvf dhDD "
console.log(s2.trim())  //fdhvf dhDD  去左右空格
1
2

(6)split (“指定的分隔值”，指定输出多少值) 字符串分割

   	s1 = "he,l,lo,wo,r,d"
    console.log(s1.split(","))  //[ "he", "l", "lo", "wo", "r", "d" ]
    console.log(s1.split("l"))      // [ "he,", ",", "o,wo,r,d" ]
    console.log(s1.split(",",2))    /[ "he", "l" ]	输出俩个数组的值

    s2 = "hellowol"
    console.log(s2.split(","))		//[ "hellowol" ]没有“，”，原样输出
    console.log(s2.split(",",2))    //[hellowol]
       

   var s1="he!lloworld"
   m=s1.split("")
   console.log(m) //[ "h", "e", "!", "l", "l", "o", "w", "o", "r", "l","d" ]
1
2
3
4
5
6
7
8
9
10
11
12
13

(7)字符串位置方法【indexOf()】

indexOf()：
1. 返回某个指定的字符串值在字符串中首次出现的位置。
2. 如找不到，返回-1， 第二个参数表示查找元素起始位置

lastIndexOf()： 首字母从后向前找，并不是位置从后往前数

    var s1="hello world"
    console.log(s1.indexOf("e") )   //1
    console.log(s1.indexOf("o"))    //4
    console.log(s1.indexOf("m"))    //-1
    console.log(s1.indexOf("o",6))  //7
1
2
3
4
5

	s1.lastIndexOf("o")			//7
	s1.lastIndexOf("l")			//9
	
	var s1="hello world"
	console.log(s1.lastIndexOf("e") )   //1
1
2
3
4
5

(8)replace替换

1)返回新字符串
2)只替换第一个匹配项

   s1="hello"
   s2=s1.replace("e","m")	//hmllo
   s2=s1.replace("1","m")  //hemlo
1
2
3

   while(s1.indexOf("1")>-1){
        s1.replace("1","m")
   }
1
2
3

正则表达式：i-忽略大小写 g-全局查找 reg=/a/ig

	s3=s2.replace(reg,"m")
1

（9）字符串删除

var s1="hello"
console.log(s1.replace("e",""))  //hllo
console.log(s1.replace(s1[2],"")) //helo
1
2
3

//*删除字符串中所有的数字
    function f1(n1){
        for(var i = 0;i<n1.length;i++){
            if(n1.charCodeAt(i)>=49&&n1.charCodeAt(i)<=57){
                var a = n1.charAt(i)
                n1 = n1.replace(a,"") 
                i=i-1
                }
            }
            alert(n1)
        } 
    f1("he123llo")
1
2
3
4
5
6
7
8
9
10
11
12

(10)字符串的比较***

(1) localeCompare:调用本地操作系统

s1="abc"
s2="edf"
localCompare(s2)
1
2
3

s4= "yellow".localeCompare("yellow")  //0
s4= "yellow".localeCompare("blue")      //1
s4= "yellow".localeCompare("zoo")       //-1
1
2
3

1.英文比较

v1.localeCompare(v2)
v1=v2 返回0
v1排在v2之前返回-1
v1排在v2之后返回1

s2= "3ellow".localeCompare("9oo")        //-1
s3= "3ellow".localeCompare("3oo")       //-1
s4= "3ellow".localeCompare("Zoo")       //-1
1
2
3

2.中文比较–按拼音

	s2 = "a".localeCompare("A")
	"北京".localeCompare("上海")
	alert("a">"A")
	
	//a1["哈尔滨"，"北京","杭州"，"上海"，"深圳"] 排序（升序）
	a1.sort((a,b)=>{retuwn a.localeCompare(b)})     //=>ES6函数
	a1.sort((a,b)=>{        //排序自带函数
	    retuwn a.localeCompare(b)
	    })
	console.log(a1)
1
2
3
4
5
6
7
8
9
10

（2）alert(“a”>“A”) //true 按ascii码比较

(11)字符串编码

(1)charCodeAt()

放索引

 	s1="a";
	console.log(s1.charCodeAt())  //97   对应的Unicode编码
	s2="海"
	console.log(s2.charCodeAt())  //28023  对应的Unicode编码
1
2
3
4

	s1="a";
	s3=s1.charCodeAt();
	s2="罗"
	s4=s2.charCodeAt(0)
	console.log(s3,s4)
	s5=s4.toString(16);
	console.log(s5)     //7f57
1
2
3
4
5
6
7

(2)fromCharCode()

根据ascii或unicode的十进制码进行解析

console.log(String.fromCharCode(65))  //A
console.log(String.fromCharCode(28032)) //海
1
2

(3)escape()

escape() 输出unicode码
unescape(“\u6D77”) 海
encodeURI(s1) //%E6%B5%B7 加密
decodeURI("%E6%B5%B7 ") 解密

 s1 ="海"
 console.log(escape(s1))      //u6D77
 console.log(unescape("\u6D77")) //海
 console.log(encodeURI(s1))    //%E6%B5%B7     加密
 console.log(decodeURI("%E6%B5%B7 "))     //解密
1
2
3
4
5

五、操作符

1.算术操作符

= - * / % (取余)

	a=a+1 	--->	a++   
	a=a-1 	--->	a--   
1
2

++a 前置：先加减，后运算
a++ 后置：先运算，后加减

		var a= 1;
		console.log(a)      //1
		console.log(a++)     //1
		console.log(a)     //2
		
		var a= 1;
		console.log(a)      //1
		console.log(++a)     //2
		console.log(a)     //2
1
2
3
4
5
6
7
8
9

		// var a=1
		// b=a++ + ++a +a++
		// a=4	****
		// b=7

 		var a= 3;
        var b=a++ + --a+ ++a+a--        //14
        console.log(b)
1
2
3
4
5
6
7
8

+

	console.log(0+0)    //0
	console.log(-0+-0)  //-0
	console.log(Infinity+Infinity)  //ininfinity
	console.log(-Infinity+-Infinity)    //-infinity
	console.log(Infinity+Infinity)  //NaN
1
2
3
4
5

	var c=false;
    console.log(c++)    //0
    console.log(--c)    //-1
1
2
3

2.赋值运算符

	+=  -=   *=    /=  %=

a=1;
a=a+3   --->a+=3
1
2
3
4

 var a=12
    b=11
    c=a*=b+5
    c1=a/=b+3*(b+=4)   ***
    c2=a++ -4*b--
    c3=b-- + a++*(a-=3 + ++b)
    // console.log(c)      //192
    // console.log(c1)     //3.4285714285714284***
    // console.log(c2)      //-56.57142857142857*** 
    console.log(c3)         //-37.244897959183675***
1
2
3
4
5
6
7
8
9
10

3.关系运算符

< = == ===【恒等于（严格比较）】 >= <= !=

		a=2         数字型
		b="2"       字符型
		a==b        //true
		a===b       //false
1
2
3
4

	==代表相同，先检查两个操作数的数据类型，
                发现不同。可进行类型转换，再进行值的比较,
                如果相同，则调用===比较
                null==undefined           //true  都是空

    ===严格相同，如果类型不同，直接判断不同
                类型不同，一定不相等     
                null===undefined        //true
                NaN===NaN       //false 值很多
                console.log(null===null)        //true 按空算【不是转number】
                console.log(undefined===undefined)      //true 按空算【不是转number】
1
2
3
4
5
6
7
8
9
10
11

		console.log(NaN==NaN)       //false
		console.log(NaN===NaN)     //false
		console.log(null==0)       //false  
		console.log(undefined==0)     //false
		console.log(true==1)	     //true
		
		console.log("Black">"Mick")     //比较ASCII吗
		console.log("23"<"3")
		console.log("a"<"3")
1
2
3
4
5
6
7
8
9

4.逻辑运算符

&& -------> 都为真才为真，
|| ------>一个为真才为真
！ ------>真变假，假变真

短路运算符——js依次获取每一个操作数，将他们转换为布尔变量，如果是false， 则中断后面的处理，返回这个操作数的值，否则继续处理下一个操作数，返回最后操作数的值，以上称为逻辑判断的短路运算

		var a=100
        var b=false
        var c=(b&&(a=25))
        console.log(a)      //100 &&不进行后面运算
        var A="1" && true && 0 && false && "abc"  //A=0 false为假
1
2
3
4
5

特殊例子

		console.log(-0+-0)  //-0
		console.log(Infinity+Infinity)  //NaN
		console.log(Infinity*0) //*NaN
		console.log(0/0)    //NaN 0不能做分母
        console.log(Infinity/Infinity)  //NaN
        console.log("m"+1+1)  //m11  
        console.log(1+1+"m")//2m
        console.log("m"+(1+1))//m2

 		var b="001"     //当作1来用
        console.log(b++)    //1
        console.log(b--)    //2****
        console.log(NaN==NaN)       //false
		console.log(NaN===NaN)     //false
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5、typeof

 	console.log(typeof(1))      			//number
    console.log(typeof(NaN))    			//number
    console.log(typeof(Number.MAX_VALUE))   //number
    console.log(typeof(Number.MIN_VALUE))   //number
    console.log(typeof(Infinity))    		//number
    console.log(typeof("123"))      		//string
    console.log(typeof(true))       		//boolean
    console.log(typeof(Date))       		//function
    console.log(typeof(c))          		//undefined
    console.log(typeof(undefined))  		//undefined
    console.log(typeof([]))         		//object
    console.log(typeof(Math))       		//object
    console.log(typeof(window))     		//object
    console.log(typeof(document))   		//object
    console.log(typeof(null))       		//object
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(1)数值类型 typeof返回number

	console.log(typeof(1))      //number
    console.log(typeof(NaN))    //***number
    console.log(typeof(Number.MAX_VALUE))    //number
    console.log(typeof(Number.MIN_VALUE))    //number
    console.log(typeof(Infinity))    //number
1
2
3
4
5

(2)字符串类型，typeof返回 string

 typeof("123")   //string
1

(3)布尔类型，typeof返回boolean

  typeof(true)    //boolean
1

(4)对象、数组、null、typeof返回object

	  console.log(typeof([]))         //object
      console.log(typeof(Math))       //object
      console.log(typeof(window))     //object
      console.log(typeof(document))   //object
      console.log(typeof(null))       //object
1
2
3
4
5

(5)函数类型，typeof返回function

function f1(){
          }
          console.log(typeof(eval))
          console.log(typeof(f1));
          console.log(typeof(Date))       //function
1
2
3
4
5

(6)未定义的便力量或undefined，typeof返回 undefined

六、位运算符

【转换成二进制进行运算】

1.定义

     &   与      都为1结果为1
  	 |   或      只要有1结果为1
     ^   异或    相同为0不同为1
     ~   非       0变1，1变0  *****
     >>  右移
     <<  左移
1
2
3
4
5
6

2.非运算

     ~正数  ~n=>	-(n+1)		
     ~负数 （|n|-1）
1
2

		console.log(3&2)    //2	
【转化为二进制数011 & 010———>	相同为1，不同为0——> 010=>2】		
		console.log(3|2)    //3
		011 | 010==>011=>3
		console.log(3^2)    //1
		console.log(~3)     //-4
【011——>（取反）100——>减一011——>再取返100  变符号位】
		console.log(~25)     //-
11001 00110 00101*** 11010
		console.log(25&3)       //1
		console.log(25|3)       //27
		console.log(25^3)       //26
		console.log(~25)        //-24
		console.log(~(-27))     //26
		console.log(64>>5)      //2
		console.log(255&85)     //85
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.三元(目)运算符

        a=10
        if(a>0){
            alert("yes")
        }else{
            alert("no")
        }
————>
		a>0?alert("yes"):alert("no")
		c=a>0?alert("yes"):alert("no")
1
2
3
4
5
6
7
8
9

七.js内置对象

Date Math(数学运算)

1. Date 日期对象

var s1=new Date() 
    d1.getDate()  日
    d1.getDay()   星期  1 2 3 4 5 6 0-星期日
    d1.getHours() 小时 1.23 0
    d1.getMinutes() 分钟 1.59 0
    d1.getMonth()  月 0.11
    d1.getSeconds() 秒 1.59.0
    d1.getTime()   返回1970.1.1午夜（零时）开始到当前时间的“毫秒”数
    d1.getFullYear() 年
1
2
3
4
5
6
7
8
9

1.格式化日期对象

console.log(s1.toLocaleDateString())
console.log(s1.toLocaleString())
console.log(s1.toLocaleTimeString())

var s1=new Date() 
    console.log(s1.toLocaleDateString())  //2022/7/11
    console.log(s1.toLocaleString())   //2022/7/11 23:22:43
    console.log(s1.toLocaleTimeString())  //23:22:43
1
2
3
4

----原型封装-----

对象
Date.prototype

Date.prototype.formatDate=function(type){
            var t=new Date()
            var a=t.getFullYear()
            var b=t.getMonth()+1
            var c=t.getDay()
            switch(type){
                case "-":return a+"-"+b+"-"+c;break;
                case "/":return a+"/"+b+"/"+c;break;
                case ".":return a+"."+b+"."+c;break;
                default: return a+"年"+b+"月"+c+"日"
            }
        }
   	var d2= new Date()
    var ndate=d2.formatDate("-")
    alert(ndate)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

日期格式化—升级版

formatdate(“yyyy-MM-dd hh:mm:ss”)//年月日，
时分秒：formatdate(“yyyy-MM-dd”)

2. Math

1.基础

abs()———— 绝对值
sqrt(4)————2  开平方
pow(2,3)————2^3    返回X的Y次幂的值
1
2
3

2.浮点数测

(1)ceil() ————向上取整
(2)floor()————向下取整
(3)round()————四舍五入
(4)v1.toFixed()————截取位数，四舍五入【截取小数】
(5)sin(30)三角函数 -1~1之间

//23.67——23.7 round 【四舍五入,保留一位小数】
console.log(Math.round(23.67*10)/10);
1
2

3. random 随机数

每刷新一次都会出现一个新的数 Math.random()
返回0-1之间的随机浮点数——不包含0，1。

//（1）返回1-10之间的随机整数
        a=Math.random()*10+1
        console.log(Math.floor(a))
1
2
3

//（2）返回0-10之间的随机整数
        Math.round(Math.random() * 10)      //0-9
        Math.floor(Math.random()*11)        //0-10【0.99*11=10.89】
1
2
3

//（3）返回指定范围的随机整数
        f1(10,200) 包含10和200
       //【1】f1(起始，终止)  包含起始和终止
        console.log(Math.floor(Math.random()*(20-10+1))+10)
        Math.floor(Math.random() * (max - min + 1)) + min;
        //【2】f1(起始，终止)  包含起始和不包含终止
        console.log(Math.floor(Math.random()*(20-10))+10)

        //【3】f1(起始，终止)  不包含起始和不包含终止
        console.log(Math.ceil(Math.random()*(20-1-10))+10)
1
2
3
4
5
6
7
8
9
10

 //生成随机数,随机数去重，上下范围0.1
        function random_fun(rdata,min,max) {
            var r_number = (Math.random() * (max - min) + min).toFixed(1)
            if (rdata.length > 0) {
                if (rdata.indexOf(r_number) > -1) {
                    return random_fun(rdata, min, max)
                }
            }
        }
1
2
3
4
5
6
7
8
9

八、数组

数组定义：数组是保存任意类型的数据结合

1.构建数组

(1)构造函数方式实现
       var a1=new Array()  '空'数组
(2)直接量实现
	   var a2=[]
1
2
3
4

2.数组数据操作

(1)a1[0]赋值
1

var a1=[]
    a1[0]="hello"
    console.log(a1)

    var a1=["q","b","c"]
    console.log(a1[1])      //b
1
2
3
4
5
6

（2）长度 	 var a1=new Array(3)  指定长度(3)
1

  var a1=new Array(3)  指定长度(3)
    console.log(a1[0]) //undefined【相当于申明未赋值】
1
2

 var a1=new Array(3) 
    console.log(a1[0]) //undefined
    console.log(a1.length)//3

    var a2=[,,,,]   //最后一个逗号忽略，所以按4来提
    console.log(a2[2])  //undefined
    console.log(a2.length)//4 
1
2
3
4
5
6
7

3.数组的遍历【数组下标由0开始】

	var a1=[23,35,34,13]
		 (1)for(var i=0;i<a1.length;i++){
		    console.log(a1[i])
		   }
		(2)for in
		    for(var i in a1){
		        console.log(a1[i])
		    }
1
2
3
4
5
6
7
8

4. 数组去重

var arr1=[23,45,23,56,45,89]  去重  arr1=[23,45,56,89]

      //生成[1..36]数组，随机选择5个数，不重复
        // 如：12 23 3 7 29
        // var a=[];
        // var t=0
        // for(var i=0;i<=35;i++){
        //     a[i]=i+1;
        // }
        // var n=[]
        // while(t!=5){
        //     var num=parseInt(Math.random()*36)
        //     if(n.indexOf(a[num])==-1){
        //         n[t]=a[num]
        //         t++
        //     }
        // }
        // console.log(n)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5.数组的添加与删除——[push() unshift()]

1. 尾部增加：push() 数组尾部增加一个或多个数据，对原数组进行修改，返回修改后的数组长度 。
2. 尾部删除：pop() 删除数组尾部的一个元素，对原数组进行修改，返回的是被删除的元素
3. 头部增加：unshift( ) 数组的头部增加元素，对原数组进行修改，返回修改后的数组长度
4.头部删除：shift() 删除数组的头部元素，对原数组进行修改，返回被删除元素

var a=[12,32,19,4,23]
        a.push(54)
        console.log(a)  //[ 12, 32, 19, 4, 23, 54 ]
        b=a.push(54)
        console.log(b)      //6
1
2
3
4
5

var a=[15,32,12,4,42]
	a.pop()
	console.log(a) //[ 15, 32, 12, 4 ]
1
2
3

 var a=[15,32,12,4,42]
    // a.unshift(23)
    // console.log(a) //[ 23, 15, 32, 12, 4, 42 ]
    console.log(a.unshift(23))  //6
1
2
3
4

 var a=[15,32,12,4,42]
        a.shift()
        console.log(a) // [ 32, 12, 4, 42 ]
        console.log(a.shift()) //32
1
2
3
4

九、数组的操作方法

1.reverse()

对原数组进行反转，不会创建新数组

var a1=[23,12,56,34]
console.log(a1.reverse())   //[34，56，12，23]
1
2

2.join ()

可以指定分隔符，指定分隔符将数组转化为字符串，生成新的字符串

(1) 字符串转数组

	var a1="he,ll,oo,mm"
	var a2=a1.split(",")   
	 //[ "he", "ll", "oo", "mm" ]字符串默认带双引号
1
2
3

(2) 数组转字符串

a2.join(" ")

	var a1= [ "he", "ll", "oo", "mm" ]
	    a2=a1.join("")
	    console.log(a2) //helloomm
	    console.log(typeof(a2))
	
		a2.join("3") //he3ll3oo3mm
1
2
3
4
5
6

	var a1=[2,3,4] //alert只接收字符串
	    a2=a1.toString()
	    console.log(a2) //2,3,4
1
2
3

(3) concat

1. 连接数组，将数据加到末尾
2. 不修改原数组，生成新数组
3. 只能打散一维数组，不会打散数组中包含的数组

a1=[1,2,3]
a2=[4,5,6]
a1.concat(a2)   //[1,2,3,4,5,6]
a1.concat(55,66) //[1, 2, 3, 55, 66]
a1.concat([33,88],[44,77])  //[1, 2, 3, 33, 88, 44, 77]
a1.concat([[11,22]],[33,44],"abc")  //[1, 2, 3, [11, 22], 33, 44, 'abc']
1
2
3
4
5
6

(4) slice : 截取子数组

(1) 不修改原数组，生成新数组
(2) a2=a1.slice(2,4) 起始包含，终止不包含
(3) a2=a1.slice(2) 从起始到数组末尾
(4) a2=a1.slice(-4,-2) 如为负数从右到左截取

   var a1=[12,34,45,67,89]
   a2=a1.slice(2,4)   //[45, 67]
   a2=a1.slice(2)     //[45, 67, 89]
   a2=a1.slice(2,10)  //[45, 67, 89]
   a2=a1.slice(-4,-2) // [34, 45]  负4查到负2【起始包含，终止不包含】
   12,34,45,67,89
    0 1  2  3  4
   -5 -4 -3 -2 -1
1
2
3
4
5
6
7
8

(5) splice 增加和删除元素

修改原数组，返回删除的元素

splice(arg1,arg2,arg3…)
arg1————起始位置
arg2————被删除的元素个数
arg3及后面的所有参数————要插入的元素

a1=[1,2,3,4,5,6,7]
    a1.splice(1,2,3,4,5)
    console.log(a1) //[1, 2, 3, 4, 5, 6, 7]

    a1.splice(2)
    console.log(a1) // [1, 2]
//a1.splice(2) //如只有一个参数，从起始位置删除后面的所有元素

    a1.splice(2,2)
    console.log(a1) //[1,2,5,6,7]

    a1.splice(2,0)
    console.log(a1)     //[1, 2, 3, 4, 5, 6, 7]

    a1.splice(2,0,0,0,0)
    console.log(a1)        //[1, 2, 0, 0, 0, 3, 4, 5, 6, 7]

    a1.splice(6,2,3,4)****
    console.log(a1)      //[1, 2, 3, 4, 5, 6, 3, 4]
 //六位开始，删除2位数，不够就只删一个，向后补arg3及后面的所有参数[34]

    a1.splice(-2,-3,6,7,8)     
    console.log(a1)      // [1, 2, 3, 4, 5, 6, 7, 8, 6, 7]
//如果第一个参数为负数，则从右到左查找, 如第二个参数为负数，按0处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

(6) 数组删除

1. splice()
2. delete 删除元素本身,不能删除空间,不改变数组大小

	var a1=[2,3,4]
        delete a1[0]
        console.log(a1)  //[empty, 3, 4]
        console.log(a1.length)  //3
1
2
3
4

(7) 字符串拼接的操作效率

  var s1="hello"
      var sums1=""
      var arr1=[]
      var begintime=new Date().getMilliseconds()
//      for(var i=0;i<1000000;i++){
//          sums1=sums1+s1      //耗时最多
//      }
//      for(var i=0;i<1000000;i++){
//            sums1.concat(s1)
//        }
        for(i=0;i<1000000;i++){
            arr1.push(s1)
        }
        arr1.join("")

      var endtime=new Date().getMilliseconds()
      console.log(endtime-begintime)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

(8) 数组检测

var a1=[2,3,4]
console.log(typeof(a1))  			//object
1
2

数组检测
1. Array.isArray(a1) //true
2. if(a1 instanceof Array){ } //true
3. if(a1.constructor==Array){ } //true

        var a1=[2,3,4]
        // console.log(Array.isArray(a1)) //true
        if(a1 instanceof Array){
            console.log(true)
        }//true
        if(a1.constructor==Array){
            console.log(true)
        }//true
1
2
3
4
5
6
7
8

(9) 数组的toString()

所有对象都有toString() valueof() toLocalstring()

toString():返回每个值的字符串形式,以 " , "拼接数组转字符串

扩展:

var a1=[2,3,4] //alert只接收字符串
        a2=a1.toString()
        console.log(a2) //2,3,4
        // p1={"name":"zs"}
        // console.log(p1)
        // console.log(p1.toString())      //[object Object]

        p1={"name":"zs",
            toString:function(){
                return "hello"
            }
        }
        console.log(p1.toString())      //hello
1
2
3
4
5
6
7
8
9
10
11
12
13

5.封装原型函数:toArray()

方法一:
        String.prototype.toArray=function(arr){
                arrNew1=arr.split("")
                return arr
        }
        var arrNew2=new String().toArray("abcd")
        console.log(arrNew2)

方法二:
              String.prototype.toArray=function (a){
                var b=[]
                for(i=0;i<a.length;i++){
                   b= b.concat(a.charAt(i)) 
                }
              return b;

            }
           var f= new String().toArray("abcd")
              console.log(f)
方法三:
        String.prototype.toArray=function(){
            arr=this.split("")
            return arr
        }
        var x="abcd".toArray()
        console.log(x)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

(10) 数组下标

var a1=[4,5,6,7]
1.a1[0] 0----下标
2.范围 :【大于0 小于 2^32 -1整数】
3.如下标是负数,浮点数,布尔型等,js会自动将其转换为字符串

    var a1=[4,5,6,7]
    // console.log(a1[true])       //undefined

    console.log(a1[-2])  //undefined
    console.log(a1[2.3])  //undefined 

	4. 下标是可以不断递增的表达式****
	var a1=[]      
	for(var i=0;i<10;i++){
	    a1[i++]=i
	}   
1
2
3
4
5
6
7
8
9
10
11

(11) sort 排序

sort排序
数组.sort(比较函数)
比较函数——具有两个参数f1(a,b)

			   函数值判断返回值
                返回值大于0     a排在b的后面
                返回值小于0   a排在b的前面
                返回值等于0     a,b不动
1
2
3
4

1.
    var a1=[23,,4,5,12,78,16]
    a1.sort()
    console.log(a1)  //[12,16,23,4,5,78]  localcompare()先比较第一位，在比较第二位

2. 
   var a1=[23,4,5,12,78,16]
        function f1(a,b){
            //return a-b      a在b的后面
            if(a-b>0){
                return 1   //a在b的后面
            }else if(a-b<0){
                return -1  //a在b的前面
            }else{
                return 0   //a b不动
            }
        }
        a1.sort(f1)
        console.log(a1)  //[4, 5, 12, 16, 23, 78]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.数组函数

1. indexOf

返回数组中第一个找到的元素的位置，不存在返回-1
var a1=["ab",23,45,67]
    var a2= a1.indexOf("ab")
    console.log(a2)     //0
1
2
3
4

2. forEach

数组.forEach(function(当前元素值【元素本身】，当前元素索引，数组对象){})

  var a1=["a","b","v",7,8]
        for(var i=0;i<a1.length;i++){
            a1[i]
        }
            // a1.forEach(function(item,index){//放的要调用的函数 item元素本身，index索引
            //     console.log(item,index)
            // })  
        a1.forEach(function(item,index,arr){//放的要调用的函数 item元素本身，index索引
            console.log(item,index.arr)
        })  
1
2
3
4
5
6
7
8
9
10

 for(var i=0;i<10;i++){
            arr[i]
            循环体
        }
        for(var i in 数据结合){
            arr[]
            循环体
        }
1
2
3
4
5
6
7
8

扩展：前后台数据传输格式

{ } json / 对象
{“name”:“zs”,“age”:23,“number”:“00123”}
{“name”:“ls”,“age”:23,“number”:“00123”}
{“name”:“ws”,“age”:23,“number”:“00123”}

    var data=[
         {"name":"zs","age":23,"number":"00123"}
         {"name":"ls","age":23,"number":"00123"}
         {"name":"ws","age":23,"number":"00123"}  
    ] 
    data1[0].name
    data1[1].age
    data1[2].number
1
2
3
4
5
6
7
8

3.map

a1.map(function(item,index)(){ }）
对数组每一项进行遍历 [返回一个新的数组]

	a1=[3,4,5,6] 生成 a2=[6,8,10,12]
	var a1.map(function(item,index,arr){
	    return item*2
	})
1
2
3
4

 var data1=[
        {"name":"zs","age":23,"number":"00123"},
        {"name":"ls","age":23,"number":"00123"},
        {"name":"ws","age":23,"number":"00123"}  
    ] 
    //data1[0].name
    //data1[1].age
    //data1[2].number

    var Maxage=0
    data1.forEach(function(item,index,arr){
        console.log("名字："+data1[index].name+"年龄："+data1[index].age+"号："+data1[index].number)
        Maxage=data1[index].age+Maxage;
    })
    console.log(parseInt(Maxage/3))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

map 与forEach区别

1.forEach只是遍历，而map能够生成新的数组
2.map效率要比forEach速率快
3.map可以进行链式操作

 var a1=[3,4,5,6]
        var a2= a1.map(function(item,index,arr){
            return item*2
        }).map(function(item1){
            return item1*10
        }) //
        console.log(a2)
1
2
3
4
5
6
7

4. filter(过滤器)数据过滤

arr.filter(function(当前元素值，当前元素索引，数组对象){})
(1) 返回新数组，不对原数组进行修改，
(2) 对返回”true“的结果过滤，false的结果忽略。

            var a1=[10,20,10,30,40,50,20,40]
                a2=a1.filter(function(item,index,arr){
                    if(arr.indexOf(item)!==index)
                    return true
                    
                })
                console.log(a2)  //[ 10, 20, 40 ]
1
2
3
4
5
6
7

5. reduce()

接收一个函数作为累加器，数组中的每一个值，从左到右开始缩减
最终计算为一个值

 arr.reduce(function(初始值,当前元素值，当前元素索引，数组对象){}，初始值(可省略)) 
1

6. some()

判断数组中是否有满足条件的元素
(1)a1.some(function(item,index,arr){})
(2)函数内部，返回true，找到了满足条件的元素，则循环结束
返回false，没找到，循环继续
(3)函数的执行次数不一定等于数组长度

> //a1=[10,30,60]判断数组是否有大于20的元素
        a1.some(function(item,index,arr){
                return item>20
            })
            console.log(a2)
1
2
3
4
5

7. every()

检测数组中所有元素是否都满足条件
(1)a1.every(funnction(item,index,arr){})
(2)有一项不满足就返回false，都满足才返回true
(3)函数的执行次数不一定等于数组长度

var a1=[10,30,5,60]
        a2=a1.every(function(item,index,arr){
            return item >0
        })
        console.log(a2)
1
2
3
4
5

4.浮点精度

1.产生原因

js数值型不管是整数，还是浮点，都是Number类型 ，通通按64位表示【弱类型语言：给啥就是啥】

最高位--符号位     存储指数    尾数位(有效数位)---超出部分自动舍弃
     1              11位         52位
1
2

0.1
    0.0001 1001 1001 1001....(1100的循环)
0.2
    0.0011 0011 0011 0011....(0011的循环)
754 标准的 64 位双精度浮点数的小数部分最多支持53位二进制位，多余的会被舍去，产生误差
1
2
3
4
5

2.解决方法

(1)乘以10，再计算
  (0.1*10+0.2*10)/10=0.3
(2)toFixed() 截取位数，四舍五入
		a=0.1+0.2
		a.toFixed(1)  //0.3
(3)第三方库

1
2
3
4
5
6
7

3.tofixed()的局限性

 var a=1.35
     console.log(a.toFixed(1))  //1.4
     console.log(1.336.toFixed(2)) //1.34
     console.log(1.3335.toFixed(3)) //1.333
1
2
3
4

4.优化tofixed()

【对toFixed()进行封装】

 //方法1
         Number.prototype.mytoFixed=function(b){
            var a = this.toString()
            var c = (a.substring(0,a.indexOf(".")+1)).length
            var num =String(a).substring(0,c-1+b)
                 if(String(a)[c+b] >= 5){
                     num = num + (Number(String(a)[c-1+b])+1)
                     
             }else{
                     num = num + (String(a)[c-1+b])
             }
             return num
        }
        var a = 11.334
        console.log(a.mytoFixed(2))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

将获取的小数转换为字符串 根据小数点的下标判断截取小数位数的下标 判断截取小数的后一位 四舍还是五入 对截取小数位进行操作

  // 方法2
function myFixed(num, digit) {
if(Object.is(parseFloat(num), NaN)) {
    return console.log(`传入的值：${num}不是一个数字`);
}
num = parseFloat(num);
return (Math.round((num + Number.EPSILON) * Math.pow(10, digit)) / Math.pow(10, digit)).toFixed(digit);
}
1
2
3
4
5
6
7
8

//方法3
        Number.prototype.mytoFixed=function(num,n){
            var a=num.toFixed(n+1)-num.toFixed(n)
            var b=a.toFixed(n+1)*Math.pow(10,n+1)
            if(b==5||b==6){
            return (Number(num.toFixed(3))+Number(Math.pow(0.1,n).toFixed(n))).toFixed(n)
        }else{
            return num.toFixed(n)
        }
        }
        var a=new Number().mytoFixed(1.335,2)
        console.log(a)
1
2
3
4
5
6
7
8
9
10
11
12

用toFixed获取需要截取位数的后面那一位，该位置上的数若等于5或者6，就让截取位上的数加1，否则返回正常的toFixed用法

5.包装类型

包装类型(引用类型之一)：Number Boolean String 用new形式创建

基本数据类型 ：string （s1=“hello”）

1、包装类型中的String

(1) new String() new创建
(2) typeof() 返回object
(3) s2=new String(1,2,3,4)当有多个参数时，只处理第一个，只输出1
(4) s1=new String(++n,n++,++n)当有多个参数时，虽然只处理第一个, 但js会将所有代码执行完，所以n=4

---

  s1="hello"  //后台操作——s1=new String("hello")
  s1.substring(2)       
  s2=s1.substring(2)		//方法必须是对象, 但在此处s1=new String("hello")
  s1=null  销毁
1
2
3
4

   var s1="hello"
        s2=new String("hello")
        console.log(typeof(s1)) //string
        console.log(typeof(s2)) //object
1
2
3
4

   var n=1
        s1=new String(++n,n++,++n)
        console.log(s1)  //2
        console.log(n)  //4
        s2=new String(1,2,3,4)
        console.log(s2)  //1
1
2
3
4
5
6

2、包装类型中的 Boolean

  v1=false
  v2=v1&&true      false
1
2

v1 =new Boolean(false)
    v2 =v1&&true
    console.log(v1)  //Boolean { false }  是对象
    console.log(v2)  //true v1强制转换成对象为true
1
2
3
4

(1)

var v3=false
    v4=new Boolean(false)
    console.log(typeof(v3)) //boolean
    console.log(v4) //Boolean {false}包装对象
    console.log(v3 instanceof Boolean) //false
1
2
3
4
5

(2) instanceof 判断是否是对象实例

  v3 instanceof Boolean //false
  v4 instanceof Boolean //true
1
2

3. 包装类型的Number

  		var v1=23
        v2=new Number(23) 
        console.log(v1) //23 number
        console.log(v2) //Number
        console.log(v1 instanceof Number) //false
        console.log(v2 instanceof Number) //true 
1
2
3
4
5
6

6.值类型与引用类型

1、值类型

值类型的传递空间大小固定，采用基本数据类型
    string   number   null   undefined
1
2

存储在栈内存中，
占据的空间是固定的

2、引用类型

引用类型采用地址传递： 数组（array），函数(function)，对象(object)
堆中存储的一般都是对象，通过一个地址编号(也叫引用指针)传递给栈内存的变量

读取数据的时候，由引用指针(地址编号)到堆内存中查找数据块
占据的空间是不固定的

3、 值传递，引用类型传递

  var a=2
        function f1(x){
            x=4
        }
        f1(a)
        console.log(a)  //2
    值传递

        a1=[1,2,3]
        function f1(x){
            x[0]=50
        }
        f1(a1)
        alert(a1[0])  //50
    引用类型地址传递 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

7、拆箱与装箱

装箱：将值类型包装为对应的引用类型对象

	var a=12
	b=new Number(12)     装箱
1
2

拆箱：将引用类型转换为值类型 valueof()

   c =new Number(23)
    var d=c.valueOf()
    typeof(d) number
1
2
3

8.深拷贝与浅拷贝

1.浅拷贝

针对都是引用类型，拷贝基本数据类型不受影响，拷贝引用类型源对象会被修改，仅拷贝对象地址

白话文：假如b复制了a，当修改a时，b也跟着变化【b复制a,改a,b变】

	a1=[1,2,3]
    a2=a1
    console.log(a1,a2) //数组123
    a1.push(4)
    console.log(a1,a2) //数组1234   
1
2
3
4
5

2.深拷贝：

拷贝一个对象之前，先给拷贝到对象创建一个堆地址， 这样当拷贝到对象指向堆中的数据，被拷贝的对象不会改变。

白话文解释：b复制了a，当修改a时，b也不变 实现深拷贝的方法【b复制a,改a,b不变】

(1) 创建新数组，for循环复制

 		/*深拷贝处理*/
        var a1=[1,2,3]
        a2=[]
        for(var i in a1){
            a2.push(a1[i])
        }
        a1.push(4)
        console.log(a1,a2)//a1[1,2,3,4] a2[1,2,3]
1
2
3
4
5
6
7
8

（2）数组方法slice

    var arr1 = [1,2,3];
    var arr2 = arr1.slice(0);
    arr2[1] = 7;
    console.log("数组的原始值：" + arr1 );  //数组的原始值：1,2,3
    console.log("数组的新值：" + arr2 );    //数组的新值：1,7,3
1
2
3
4
5

3.数组方法concat

   var arr1 = [1,2,3];
    var arr2 = arr1.concat();
    arr2[1] = 7;
    console.log("数组的原始值：" + arr1 ); //数组的原始值：1,2,3
    console.log("数组的新值：" + arr2 );  //数组的新值：1,7,3
1
2
3
4
5

4.Json.parse(JSON.stringfy)

【弊端：只能拷贝Number, String, Boolean, Array, 扁平对象，即那些能够被 JSON 直接表示的数据结构。】

	    var arr1 = ["1","2","3"];
	    var arr2 = JSON.parse(JSON.stringify(arr1));
	    arr1.push(4)
	    console.log(arr1)  //[ "1", "2", "3", 4 ]
	    console.log(arr2)  // [ "1", "2", "3" ]
1
2
3
4
5

	  	   var test={
	            a:"ss",
	            b:"dd"       
	        };
	        var test1 = JSON.parse(JSON.stringify(test));
	        test.a="cc"
	        console.log(test);  //Object { a: "cc", b: "dd" }
	        console.log(test1); //Object { a: "ss", b: "dd" }
1
2
3
4
5
6
7
8

  var test={
        name:"hyw",
        age:23 ,
        friends:["dwz1","dwz2","dwz3"]      
    };
    var test1 = JSON.parse(JSON.stringify(test));//拷贝数组,注意这行的拷贝方法
    test.friends[0]="dwz4"
    console.log(test);  //Object { name: "hyw", age: 23, friends: (3) […] }
    console.log(test1); //Object { name: "hyw", age: 23, friends: (3) […] }
1
2
3
4
5
6
7
8
9

5. 手动封装深浅拷贝

copyfun(对象，true)  true进行深拷贝 false进行浅拷贝
                     return 拷贝后的对象
var a1=[1,2,3]
a2=copyfun(a1,false) //浅拷贝 a1变，a2变
a3=copyfun(a1,true)  //深拷贝 a1变，a3不变

typeof(obj) 判断对象
a1 instanceof Array 判断数组
1
2
3
4
5
6
7
8

 Object.prototype.copyfun=function (a,b){
            if(typeof(a)=="object"){
                if(b==true){
                    return a2=JSON.parse(JSON.stringify(this))
                }else{
                    return a3=a
                }
            }else{
                return a1=a
            }
        }
        var f1=([1,2,3])
        f2=f1.copyfun(f1,false)
        f1.push(4)
        console.log(f1,f2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

十. 函数

1.定义：

完成某一功能的语句，接收0或多个参数，执行函数体完成某个功能，最后返回处理结果

2.基础语法：

  function 函数名(参数){
        函数体
        return 结果
    }
1
2
3
4

3.函数的定义方式

（1）普通函数

//function student() 
function f1(参数【可为空】){ 
  语句体:var a=10
        var b=10*2
        return b
}
	函数调用:
	var result=f1()  20
1
2
3
4
5
6
7
8

(2) 函数表达式

var f1=function(){
    函数体
}
	函数调用:
	var result=f1()  20
1
2
3
4
5

(3) 立即执行函数(匿名函数)

(function(){alert("world")})()
(function(a){
    alert(Math.pow(a,2))
})(19)
1
2
3
4

(4) 函数对象创建

var f1=new Function(前面为参数，最后一个为函数体及返回值) 参数可以有很多个

var f1=new Function("alert(23)")
    f1()
   var f1=new Function("alert(23)")
    f1() //23

    var f1=new Function("a","alert(a*10)")
    f1(3) //30

    var f1=new Function("a","return a*10")
    var c=f1(3)
    console.log(c)  //30

    var f1=new Function("a","b","c","return a+b+c")
    var c=f1(3,4,5)
    console.log(c)  //12

    var f1=new Function("a","b","c=a*b;return c")
    var d=f1(3,4)
    console.log(d)   //12
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4.函数的参数与返回值

（1）普通函数

function f1(a,b){ //形参
    return a+b
}
f1(2,3)  //实参
1
2
3
4

（2）ES6函数参数

默认参数 :默认参数可以有多个，但必须放在形参末尾

  function f1(b=4,m=12,a){
            return a+b+m
                }
        var c= f1(2)  
        console.log(c)  //NaN
1
2
3
4
5

        function f1(a,b){
        console.log(a,b)  
        if(b==undefined)
        b=0;//只有一句可以省略{}
        return a+b
    }
	    var c=f1(2)  //2 undefined
	    console.log(c)  //2
1
2
3
4
5
6
7
8

不定参数 …

	function f1(a,b,c){
	    m=a+b+c
	    return m
	}f1(2,3,4)
	console.log(m)  //9
1
2
3
4
5

function f1(...arg){
             //m=a+b+c
             var sum=0
             var n=arg.map((item)=>{return sum+=item})
             return sum
         }
         var result=f1(2,3,4)
         console.log(result)
1
2
3
4
5
6
7
8

参数管理器 arguments

arguments:不知数组，但可以按数组的方式用
可以用数组的形式调实参值

 function f1(){
            console.log(arguments.length)  //4
            console.log(arguments instanceof Array)  //false
            console.log(arguments instanceof Object) //true
        }
        f1(2,3,4,5)
1
2
3
4
5
6

 function f1(){
        var n=0
            for(var i in arguments){
                n+=arguments[i]
            }
            console.log(n)
            //reduce --不允许使用
        }
        f1(2,3,4,5)
1
2
3
4
5
6
7
8
9

形参—函数名.length

  function f1(a,b){
            // arguments[0]
            // arguments.length  //实参的长度
            console.log(f1.length) //2形参长度
        }
        f1(2,3)
    //形参与实参个数相同的判断
    arguments.length==f1.length
1
2
3
4
5
6
7
8

(5)返回值 —只能有一个

1. 多个参数可返回数组

function f1(a,b){
            c=a+b
            d=a-b
            return [c,d]
        }
        f1(2,3)
1
2
3
4
5
6

2.函数套函数

 function f1(a,b){
                function f2(){
                    return a+b
                }
                return f2
            }
            var resault=f1(2,3)()
            console.log(resault)function f1(){

    }
1
2
3
4
5
6
7
8
9
10

3.返回函数自身

var a=1
        function f1(){
            a++
            return f1
        }
        f1(1)()()()
        console.log(a)
1
2
3
4
5
6
7

5.声明变量

1.var 定义变量

var + 变量名

(1)函数体外声明的变量—全局变量【体外体内都可以使用】

   var x=5
    function f1(){
        alert(x)  //5
    }
    f1()
    alert(x)    //5
1
2
3
4
5
6

(2) 函数体内定义的变量—局部变量

function f1(){
        var y=5
        alert(y)  //5
    }
    f1()
    alert(y)  //报错
1
2
3
4
5
6

(3)没有var，直接声明变量会进行—隐式声明全局变量

    x=5
    function f1(){
        alert(x) //5
        y=6 【这里写var就是局部，不写var变量变成全局变量】
    }
    f1()
    alert(x)  //5
    alert(y)  //6
1
2
3
4
5
6
7
8

(4)window对象声明全局

   function f1(){
                var y=6
                window.x=5  //【等同于x=5】
            }
            f1()
            alert(x)  //5
1
2
3
4
5
6

显示与隐式全局的区别

	var v1="a"
	v2="b"
	window.v4="d";
	(function(){
	    v3="c"
	})()
	console.log(delete v1)  //false  var定义的全局变量不能被删除
	console.log(delete v2)  //true 没经过var定义的全局变量，无论是函数体内还是函数体外都可被删除
	console.log(delete v3)  //true
	console.log(delete v4)  //true
// var定义的全局变量不能被删除
   没经过var定义的全局变量，无论是函数体内还是函数体外都可被删除
1
2
3
4
5
6
7
8
9
10
11
12

2、变量提升

将变量提升到函数的top位置，只能提升变量的声明，不会提升赋值

(1)

	x=1
	function f1(){
	    alert(x) //undefined***
	    var x=2 //出现重名  预编译var x
	    alert(x)  //2
	    var y=5
	    alert(y)  //5
	    // 如函数内部要访问全局，采用window.x或window['x']
	    alert(window.x)  //1 或
	    alert(window['x'])  //1
	}
	f1()
1
2
3
4
5
6
7
8
9
10
11
12

(2)

 	x=1;
        (function(g){
            alert(x)  //undefined
            alert(g.x)//1  alert(window.x)不想明文可使用alert(g.x)
            var x=2
        })(window)
1
2
3
4
5
6

3.变量提升—全局作用域

预编译–变量提升

（1）

   //var i
    //var m
    //var k
    for(var i=0;i<3;i++){
                console.log(i,m,k)  //0 undefined undefined 【变量提升】 1 3 3 ||  2 3 3
                for(var m=0;m<3;m++){
                    var k=m+1 
                }
                console.log(k)  //3
            }
1
2
3
4
5
6
7
8
9
10

（2） 变形

for(var i=0;i<3;i++){
            console.log(i,m,k)    //报错 预编译K值提不上去
            for(var m=0;m<3;m++){
                k=m+1   //k为隐式的全局变量，没有变量提升
            }
            console.log(k) 
        }
1
2
3
4
5
6
7

（4） 异步情况下变量传递

  console.log(1)
  //异步函数 延迟时间后再输出，所以2最后输出
        setTimeout(function(){
            console.log(2)
        },100)
        console.log(3)   //1   3   2

    for(var i;i<3;i++){
    setTimeout(function(){
        console.log(i)
      },100)
    }  
    // 3 3 3 异步调用 ，循环结束
1
2
3
4
5
6
7
8
9
10
11
12
13

解决:立即执行函数

for(var i=0;i<3;i++){
    setTimeout((function(m){
        return function(){console.log(m)}
    })(i),100)
    
}    //0 1 2
1
2
3
4
5
6

6、作用域

1.ES5----函数作用域【函数控制代码块】

function f1(){
            var y=5
            alert(y)  //5
        }
        f1()
        alert(y)  //报错
1
2
3
4
5
6

2.ES5----全局作用域

for(var i=0;i<3;i++){
            console.log(i,m,k)  //0 undefined undefined 【变量提升】 1 3 3 ||  2 3 3
            for(var m=0;m<3;m++){
                var k=m+1  //3
            }
            console.log(k)
        }
1
2
3
4
5
6
7

3.ES6—新增 块级作用域

{ }，if,for中的{}都属于块级作用域

	//(1)
	  {
	        var a=1;
	        console.log(a) //1
	    }
	//(2)
	    if(true){
	        var a=2
	    }
	    console.log(a) //2
	//(3)
	    for(i=0;i<4;i++){
	        var d=10
	    }
	    console.log(i)  //4   for循环外部能访问---渗透
	    console.log(d)  //10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

变形：

 		{
            var a=1;
            console.log(a) //1
            let b=2
            console.log(b)  //2
        }
        console.log(a)   //1
        console.log(b)  //报错


        if(true){
            var a=2
            let b=3
        
        }
        console.log(a) //2
        console.log(b) //报错

        
        for(let i=0;i<4;i++){
            let d=10
        }
        console.log(i)  //报错
        console.log(d)  //报错

        function f1(){
                    let b=2
                    var a=1
                }
                f1()
                console.log(a)  //报错
                console.log(b)  //报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

7、setTimeout与setInterval

setTimeout：定时器 指定时间后执行 【主线程完成】

 var timmer=setTimeout(csh, 3000);
        function csh() {
            console.log('javascript')
        }
   clearTimeout(timmer)//清除定时器
1
2
3
4
5

setInterval：间歇调用，每隔一定时间调用内容

   var timmer=setInterval(csh, 3000);
            function csh() {
                console.log('javascript')
            }
       clearInterval(timmer)//清除定时器
1
2
3
4
5

setTimeout和setInterval都属于JS中的定时器，可以规定延迟时间再执行某个操作，不同的是setTimeout在规定时间后执行完某个操作就停止了，而setInterval则可以一直循环下去

8、var let const区别

ES6新增----

var 对函数作用域有效，对块级作用域无效
允许一个变量声明多次
可以进行变量提升(暂时性死区)
声明的变量会成为window对象的属性window.a
for循环中的迭代变量（var i），var声明会渗透到循环体外

let 对函数作用域和块级作用域都有效
不允许一个变量声明多次
不可以进行变量提升(暂时性死区)
声明的变量不会成为window对象的属性
for循环中的迭代变量（let i），let声明不会渗透到循环体外

const 定义常量
不允许修改–特殊：const定义的引用类型仅保证不发生改变，
块级作用域，函数作用域都有效
不允许重复定义变量

（1）

    var a
    var a
    let b
    let b  //报错  不允许出现冗余声明(不允许一个变量声明多次)
1
2
3
4

（2）

  var a=5
    let a=6
    console.log(a)  //报错 不允许出现冗余声明(不允许一个变量声明多次)
1
2
3

（3）

  function f1(){
    alert(a)  //undefined
    var a=1
    alert(b)
    let b=1   //报错  不可以进行变量提升(暂时性死区)
}
f1()
1
2
3
4
5
6
7

(4)

 var a=5
    alert(window.a) //5
    let b=6
    alert(window.b)  //undefined  声明的变量不会成为window对象的属性
1
2
3
4

(5)

   for(var i=0;i<5;i++){}
    console.log(i)  //5
    for(let i=0;i<5;i++){}
    console.log(i)  //报错    for循环中的迭代变量(let i)，let声明不会渗透到循环体外
1
2
3
4

const举例

（1）

   {
            const a=5
            a=6
            console.log(a)  //报错
        }
        // console.log(a)  //报错 不允许更改
1
2
3
4
5
6

（2）

function f1(){
            const a=5
        }
        console.log(a) //报错  ***块级作用域有效，函数作用域有效
1
2
3
4

（3）

 const p1={"name":"zs","age":23}
    p1.name="ls"
    console.log(p1) //ls  不允许修改 --特殊:const定义的引用类型仅保证指针不发生改变 ，内容允许被修改
1
2
3

  const p1={"name":"zs","age":23}
        // p1.name="ls"
        p1={}   //报错  改变地址 
        console.log(p1) //ls
1
2
3
4

9、this

this是js的一个关键字

1.函数的应用——普通函数调用，this指向window，没有意义

   function f1(){  //this-->window
        this.x=1
        alert(this.x)  //1
    }
    f1()

    var x=1
    function f1(){
        alert(this.x)  //1
    }f1()
1
2
3
4
5
6
7
8
9
10

2.对象调用——this执行当前的调用对象

  function f1(){
        // alert("hello")
        alert(this.x)  //指向当前对象  【谁调指向谁】
    }
        var ol={}
        ol.x=2
        ol.method1=f1

        ol.method1() 
1
2
3
4
5
6
7
8
9

3.window == this

this是指向调用值所在函数所绑定的对象浏览器中，不是函数内的this指向的是window

  console.log(window==this)  //true
        function f1(){
            x=1
        }
        f1()
        // alert(this.x)  //1
        alert(window.x)   //1
1
2
3
4
5
6
7

 var x=1
    function f1(){
        console.log(this)  //
        consoel.log(this.x)  
    }
    var obj1={}
    obj1.x=2
    obj1.m1=f1
    obj1.m1()
1
2
3
4
5
6
7
8
9

    var obj1={
        x:1,
        m1:function(n){this.x=n},
        m2:function(){return this.x}  
    }  
    obj1.m1(2)
    console.log(obj1.m2())  //2  this.x=n  -->this指向x改根本上的数，全局作用域变成x=2
    obj1.m1(3)
    console.log(obj1.m2())  //3
1
2
3
4
5
6
7
8
9

4. this与DOM元素

（1）this——div DOM元素

<div onclick="console.log(this)">确定</div>
   
1
2

(2)

<div onclick="" id="id01" title="abc" a1="123">q</div>
   window.onload=function(){
        function f1(){
            console.log(this.id)
        }
        document.getElementById("id01").onclick=function(){
            console.log(this)  //div
            console.log(this.id)  //id01
            console.log(this.title)  //
            // f1()  //f1函数内部的this指向window
        }
}
1
2
3
4
5
6
7
8
9
10
11
12

3.this整理

1.如在全局范围内使用this，this为当前的window对象

  console.log(window==this)
    window.alert(12)
    this.alert(12)
1
2
3

2.如是纯粹的函数，this指向window

 var x=1
    function f1(){
        console.log(this)  //window
        console.log(this.x) //1
    }
    f1()
1
2
3
4
5
6

3.如函数中使用this，this代表什么是根据运行此函数在什么对象被调用 即函数中的this指向是在运行时决定的

 var x=1
    function f1(){
        console.log(this)  //{x=2,m1=f}
        console.log(this.x) //2
    }
    var obj1={};
    obj1.x=2
    obj1.m1=f1  //绑定对象，让对象去调用
    obj1.m1()
1
2
3
4
5
6
7
8
9

4.this与DOM元素

this表示指向当前对象

(1)指向dom元素本身

  <div onclick="console.log(this)">确定</div>
  <div onclick="this.style.color='red'">确定</div> //点击变红
1
2

(2)直接用f1

  <div onclick="f1()">确定</div>
  function f1(){
                console.log(this)  //window
                this.style.color='red'  //报错  因为window里没有color属性
                // alert("a")
            }
1
2
3
4
5
6

(3)加个事件源：event参数

 <div onclick="f1(event)">确定</div>
     function f1(event){
                // console.log(event.srcElement)//事件源--调用函数的dom对象
                event.srcElement.style.color='red'
            }
1
2
3
4
5

(4)

<div id="id01">确定</div>
     window.onload=function(){
                document.getElementById("id01").onclick=function(){
            console.log(this) //
            this.style.color='red'  
        }
            }
(5)应用

            var x=1
            var obj1={
                x:2,
                m1:function(){
                    console.log(this.x)  //2
                }
            }
            obj1.m1()

            var x=1
            var obj1={
                x:2,
                m1:function(){
                    function m2(){
                        console.log(this.x)  //1
                    }
                    return m2
                } 
            }
            console.log(obj1.m1())  //m2
            obj1.m1()()  //m2--this--window

    指向obj1
            var x=1
            var obj1={
                x:2,
                m1:function(){
                    var that=this
                    function m2(){
                        console.log(that)  //{x: 2, m1: ƒ}
                        console.log(that.x)  //2
                    }
                    return m2
                } 
            }
            obj1.m1()() 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

6.改变this指针----call apply

var x=1
function f1(){
    console.log(this.x) //obj 2
}
var obj={}
obj.x=2
obj.m=f1
obj.m()
1
2
3
4
5
6
7
8

 //指向window
 var x=1
    function f1(){
        console.log(this.x) // 2
    }
    var obj={}
    obj.x=2
    // obj.m=f1
    f1.apply(window) //1
    f1.apply(obj) //2 没必要obj.m=f1
    // obj.m()
1
2
3
4
5
6
7
8
9
10
11

4.call和apply

1.本质将特定函数当作一个方法绑定到指定对象上进行调用
2.语法 函数.apply(对象，[参数1，参数2。。。]) 函数.call(对象，参数1，参数2。。。)

参数—传递给函数的参数【传递的参数传递方式不同】

   function f1(x,y){
            return x+y
        }
        var obj={}
        v1=f1.call(obj,3,4)  
        // 等价于：obj.m1=f1【把obj函数绑定到m1上】 
                //    obj.m1(3,4) 
                //    delete obj.m1

        console.log(v1)  //7
1
2
3
4
5
6
7
8
9
10

function f1(x,y){
    return x+y
}
var obj={}
v1=f1.apply(obj,[3,4])  
// 等价于：obj.m1=f1【把obj函数绑定到m1上】 
        //    obj.m1(3,4) 
        //    delete obj.m1

console.log(v1)  //7
1
2
3
4
5
6
7
8
9
10

3.call，apply目的运行函数，用完后马上删除，避免资源的浪费
4.call，apply可以改变this指向

   var x=1
        function f1(){
            console.log(this.x)//2
        }
        var obj={}

        var x=1
        function f1(){
            console.log(this.x)//2
        }
        var obj={}
        obj.x=2
        f1.apply(obj)  //
1
2
3
4
5
6
7
8
9
10
11
12
13

（2）

		function f1(){}
        var obj={}
        f1.call(obj)
        obj.f1()  //报错,call调用完立即删除了
1
2
3
4

（3）

   window.color="red"
    var obj={color:"blue"}
    function saycolor(){console.log(this.color)}
    // saycolor()
    saycolor.call(this)  //red
    saycolor.call(window)  //red
    saycolor.call(obj)  //blue
1
2
3
4
5
6
7

5.面向对象

  function Person(name,age){
        console.log("P---",this)
        this.name1=name
        this.age1=age
    }
    function Student(name,age,grade){
        console.log("s---",this)
        this.grade1=grade
        return Person.apply(this,arguments)
      }
    Student()
    var s1=new Student("hyw",22,3)
    console.log(s1)
1
2
3
4
5
6
7
8
9
10
11
12
13

6.bind–就是call与apply的升级版 【扩大函数作用域】

返回函数本身，需要再执行
    color="red"
    var obj={color:"blue"}
    function saycolor(){console.log(this.color)}
    var v1=saycolor.bind(obj)
    // console.log(v1) //
    v1()  //blue
1
2
3
4
5
6
7

7.ES6箭头函数(arrow function)和this

箭头函数定义在哪，this就指向哪

 var obj1={
            "name":"zs",
            "f1":function(){
                [23,34].map((item)=>{
                    console.log(this)  //指向obj
                })
                
            }
        }
        obj1.f1()
        var obj1={
            "name":"zs",
            "f1":function(){
                [23,34].map(function(item){
                    console.log(this)  //指向window
                })
            }
        }
        obj1.f1() 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

十一.闭包

1. 定义

有权访问另一个函数作用域中断变量的函数 缺点:闭包比其他函数占用更多内存，不以过量使用

2. 闭包有哪些

(1) 通过作用域链在全局环境中查找变量x，f1就是闭包

var x=1
function f1(){
    alert(x)
}
f1()
1
2
3
4
5

(2)嵌套在f1中的f2就是闭包
即访问上层函数的作用域的内层函数就是闭包

   function f1(){
        var x=1
        function f2(){
            alert(x)        //f2是闭包
        }
        f2()
    }
1
2
3
4
5
6
7

(3) f2在f1函数作用域中声明，在全局作用域中被调用，f2就是闭包
即指在函数声明时的作用域以外的地方被调用的函数需要通过将该函数作为返回值或参数传递，叫闭包

  function f1(){
        var x=1
          function f2(){
                alert(x)       
             }
            return f2
    }
    f1()()
    
    //参数传递
     function f1(){
        var x=1
          function f2(){
                alert(x)       
             }
            f3(f2)
    }
	     function f3(n){
	            n()
	     }	
    f1()   //1    作为参数传递，f2为闭包
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3.闭包特性

(1)自闭特性：

闭包内部声明的变量外部无法访问，除非闭包主动向外界提供访问接口

	var x=1
        function f1(){
            alert(x)
            var a=2
        }
        f1()
        alert(a)  //报错
1
2
3
4
5
6
7

(2)包裹特性【占用内存】

1. 普通函数调用完毕,系统会自动注销函数,释放资源
2. 当外部函数被调用后，闭包结构依然被保存在系统中，从而实现包裹数据的目的

function f1(a){
        var x=a
        var y=function f2(){
            return x
         }
    	return y
    }
    var c=f1(1)()
    console.log(c)
1
2
3
4
5
6
7
8
9

4.闭包应用

(1)使用闭包，能够跟踪动态环境中数据的实时变化

	function f1(){
	    var a=1
	    var b=function f2(){
	        return a
	    }
	    a++
	    return b
	}
	var c=f1()()
	alert(c)  //2
1
2
3
4
5
6
7
8
9
10

   function f1(){
        var a=1
        var b=function f2(){
            return a
        }
        a++
        a=a+10  //2+10
        return b
    }
    var c=f1()()
    alert(c)  //12 实时返回
1
2
3
4
5
6
7
8
9
10
11

(2)闭包不会因为外部环境的注销而消失

当f1执行完毕，并没有被销毁，因为闭包引用了变量a，而继续存在

  function f1(){
        var a=1
        b=function(){alert(a)}
        c=function(){alert(a++)}
        e=function(){alert(a)}
        d=function(x){alert(a=x)}
        b() //1
        c() //1 
        e()  //2
        d(5)  //5
    }
    f1()
1
2
3
4
5
6
7
8
9
10
11
12

5.闭包的底层原理

(1) 作用域链

1.当某个函数被调用时，会创建一个执行环境和一个相应的作用域链，同时初始化函数的活动对象
2.在作用域链中，该函数处于第一层，函数的外部函数处于第二层，外部的外部处于第三层，直到作用域的终点被称为全局作用域环境.
3.作用域的查找是由低到高，逐级查找

由图可知：

1.匿名函数可以使用f1的所有变量
2.f1执行完毕后，其他活动对象不会被销毁
因为匿名函数的作用域链仍在引用这个活动对象
3.f1=null通知GC-垃圾回收历程将其清除，
作用域，全局作用域一并删除

(2) 闭包重点

<div>aaaa</div>
<div>bbbb</div>
<div>cccc</div>
<script>
    function f1(){
        var arr=document.getElementsByTagName("div")
        for(var i=0;i<arr.length;i++){
            arr[i].onclick=function(){
                alert(i)
            }
        }
    }
    f1()
1
2
3
4
5
6
7
8
9
10
11
12
13

6. js代码运行机制

1.js是描述性的语言，不需要编译成中间语言， 是由浏览器动态解析与执行
2.js是按<script>代码块分割，进行编译和执行 代码块直接互相独立，变量和方法共享

 	<script>
        alert(a)  //报错
        alert("代码块一")
        var b=1
    </script>
    <script>
        alert("代码块二")
        alert(b) //undefined
    </script>
1
2
3
4
5
6
7
8
9

3.浏览器对每个代码块进行独立的扫描，在对全局的代码块进行"顺序"执行 在一个块中函数可以在调用之后在进行定义在两个块中，定义函数所在的块必须在函数被调用的块儿之前

	<script>
	    alert("代码块一")
	    var b=1
	    function f1(){alert("hello")}
	</script>
	<script>
	    alert("代码块二")
	    alert(b)
	    f1()  //代码块一  代码块二 1 hello
	</script> 
1
2
3
4
5
6
7
8
9
10

    <script>
        f1()   //报错 f1未定义
    </script>
    <script>
        function f1(){alert("hello")}  
        //两个块中，定义函数所在的块必须在函数被调用的块儿之前                                                     
    </script>
1
2
3
4
5
6
7

	<script>
	    f1()     //hello
	    function f1(){alert("hello")}
	</script>
1
2
3
4

  <script>
    f1()  //函数2
    function f1(){alert("函数1")}
    function f1(){alert("函数2")}  
    //js顺序执行：执行到函数1，函数1变量提升，执行到函数2，变量提升，覆盖了函数1。
  </script>
1
2
3
4
5
6

十二.面向对象

创建方式

对象——属性、方法

1.面向对象创建方式

(1) 普通方式 new Object()

 var obj=new Object()
    //添加对象属性
    obj.a=12
    obj.b="hello"
    //添加对象方法
    obj.m1=function(){alert("m1...")}
    obj.m2=function(){alert("m1...")}
    console.log(obj)  //Object { a: 12, b: "hello", m1: m1(), m2: m2() }
1
2
3
4
5
6
7
8

	var obj=new Object()
	//添加对象属性
	obj.a=12
	obj.b="hello"
	//添加对象方法
	obj.m1=function(){alert("m1..."+this.a)}  //闭包调外部元素得this指向，否则单纯的a是调不了的
	obj.m2=function(){alert("m1...")}
	console.log(obj)
	//对象的调用
	console.log(obj.a)
	console.log(obj.m1) 
1
2
3
4
5
6
7
8
9
10
11

 var obj=new Object()
        //添加对象属性
        obj.a=12
        obj.b="hello"
        //添加对象方法
        obj.m1=function(){alert("m1..."+this.a)}  //必须this指向否则无法调用
        obj.m1()  //调用函数
1
2
3
4
5
6
7

  var obj=new Object()
    //添加对象属性
    obj.a=12
    obj.b="hello"
    //添加对象方法
    obj.m1=function(){
        console.log(this)
        alert("m1..."+this.a)
    }
    obj.m2=function(){alert("m1...")}
    console.log(obj)
    //对象的调用
    obj.m1()
1
2
3
4
5
6
7
8
9
10
11
12
13

(2) 直接量方式 var obj1={ }

 var obj1={
            a:12,
            b:"hello",
            m1:function(){return("m1..."+this.a)},
            m2:function(){alert("m1...")}
        }
        console.log(obj1)
        console.log(obj1.m1())  //undefined
1
2
3
4
5
6
7
8

(3) 函数对象方法 new Function( )

1.函数

  function f1(a,b){return a+b}
   //转换
  var f1=new Function('a','b',"alert(a+b)")
  f1( ，)  //有数传进去，不需要this指向

1
2
3
4
5

2. 对象

	var obj=new Function('this.a=12;this.b="hello";this.m1=function(){alert("m1..")};this.m2=function(){alert("m2..")}')
	//调用
	var o1=new obj()
	console.log(o1.a)  //用this的方式可以调用方法中的属性值，
	o1.m2()
1
2
3
4
5

(4) 构造函数方式function Person ( ) { this.=}

 function Person(){
        this.name = "zs"
        this.age = 23
        this.say = function(){alert("hello")}
        this.eat = function(){alert("ganguoji...")}
    }
    // var a=new Person()
    // a.say()
    
    var hyw1 = new Person()
    console.log(hyw1.name)
    hyw1.eat()
    var hyw2 = new Person()
    console.log(hyw2.age)
    hyw2.eat()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(5) 原型方式创建 function Person(){Person.prototype.=}

	  function Person(){
	    Person.prototype.name="zs"
	    Person.protype.age=23
	    Person.prototype.say=function(){
	        alert("hello...")
	    }
	    Person.prototype.eat=function(){
	        alert("ganguoji")
	    }
	}
	//创建实例
	var p1=new Person()
	p1.age
	p1.eat()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.构造函数–扩展

(1)

  function Person(){
        this.name="zs"
        this.say=function(){
            alert("I am "+this.name)
        }
    }
    var p1=new Person()  //创建实例化对象【将函数框架转化为具体的】
    console.log(p1) //Person {name: 'zs', say: ƒ}
1
2
3
4
5
6
7
8

	    function Person(){
	    this.name="zs"
	    this.say=function(){
	        alert("I am "+this.name)
	    }
	}
	    var p1=new Person()
	    console.log(p1.say())
	    console.log(p1)  //{ name: "zs", say: say() }
1
2
3
4
5
6
7
8
9

(2)

function Person(name,age){
        this.name=name   //
        this.age=age
        this.say=function(){
            alert("I am "+this.name+","+"今年"+this.age)
        }
    }
    var p1=new Person("网红李柯锋",22)
    p1.say()//{ name: "网红李柯锋", age: 22, say: say() }
1
2
3
4
5
6
7
8
9

(3)构造函数与普通函数区别

1.构造函数最好是大写字母开头
2.构造函数没有ruturn语句
3.构造函数创建实例必须用new

(4)constructor

p1\p2是person对象的不同实例
每个实例都有constructor属性，这个属性指向对象本身

     function Person(name,age){
        this.name=name
        this.age=age
        this.say=function(){
            alert("I am "+this.name+"我今年"+this.age+"岁了")
        }
    }
	var p1=new Person("网红李柯锋",22)
	// console.log(p1)
	console.log(p1.constructor) //输出函数
	p1.say()
	var p2=new Person("李柯凤",3)
	console.log(p2)
1
2
3
4
5
6
7
8
9
10
11
12
13

(5)构造函数的问题

构造函数的每一个方法都要在每个实例中创建一遍——导致浪费内存空间
1

	function Person(name,age){
	        this.name=name   //
	        this.age=age
	        this.say=function(){
	            alert("I am "+this.name+","+"今年"+this.age)
	        }
	    }
	var p1=new Person("网红李柯锋",22)
	    var p2=new Person("李柯凤",3)
	    console.log(p1.say==p2.say)  //false
1
2
3
4
5
6
7
8
9
10

    function Person(name,age){
        this.name=name   //
        this.age=age
    }
var say=function(){
            alert("I am "+this.name+","+"今年"+this.age)
        }
    var p1=new Person("网红李柯锋",22)
    console.log(p1.say()) //报错
    var p2=new Person("李柯凤",3)
    console.log(p1.say==p2.say)  //true  因为都没找着(undefined)----没有根本上解决
1
2
3
4
5
6
7
8
9
10
11

3、原型–扩展

特性1：

每一个函数都有一个原型属性，该属性都会指向一个对象，对象中包含所有实例共享的属性和方法

	function Person(){
	    Person.prototype.name="zs"
	    Person.prototype.say=function(){
	        alert("I am "+this.name)
	    }
	}
	//创建实例
	var p1=new Person()
	console.log(p1.name)
	p1.say()
	var p2=new Person()
	console.log(p1.say==p2.say) //true
1
2
3
4
5
6
7
8
9
10
11
12

特性2：hasOwnProperty()

hasOwnProperty():检测一个属性是否在实例中，在返回true，不在返回false

	alert(p1.hasOwnProperty("name"))  //false  检测来自于实例还是原型
	alert(p2.hasOwnProperty("name")) //true
1
2

	function Person(){
	Person.prototype.name="zs"
	Person.prototype.say=function(){
	    alert("I am "+this.name)
	    }
	}
	var p1=new Person()
	console.log(p1.name)
	console.log(p2.name)
	var p2=new Person()
	p2.name="ls"
	console.log(p1.name)  //zs  name来自于原型的属性
	console.log(p2.name)  //ls  name来自于实例的属性
    alert(p1.hasOwnProperty("name"))  //false  检测来自于实例还是原型
    alert(p2.hasOwnProperty("name")) //true
    alert("name" in p1) //true
    alert("name" in p2) //true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

特性3——in 操作符：

只要通过对象能够访问到的属性，返回true

    console.log("name" in p1)  //true
    console.log("name" in p2)  //true
1
2

	//创建函数，判断是否为原型属性
	hasPrototypeProperty(p1,"name")
1
2

特性4

访问原型的name

	p2.name="ls"
	delete p2.name  //zs
	alert(p2.name)
1
2
3

特性5：

	Object.keys()  //返回对象定义的属性和方法
	               //官方：列举出所有可枚举(可用for in 遍历)的属性和方法
	Object.getOwnPropertyNames()：无论是否为枚举类型都会列出
	Object.keys(Person.prototype)  //[ "name", "say" ]
	Object.getOwnPropertyNames(Person.prototype)  //[ "constructor", "name", "say" ]
1
2
3
4
5

特性6：

优化原型写法

  function Person(){
        Person.prototype.name="zs"
        Person.prototype.say=function(){
            alert("I am "+this.name)
        }
    }

    //优化1：
     function Person(){}
     Person.prototype.name="zs"
     Person.prototype.say=function(){
            alert("I am "+this.name)
        }


     //优化2：
         function Person(){}
	     Person.prototype={
	            constructor:Person,   //默认指向object，我需要重新指向
	            name:"zs",
	            say:function(){
	            alert("I am "+this.name)
	            }
	    }
    var p1=new Person()  //object
    console.log(p1)
    // p1.say()
    // var p2=new Person()
    // console.log(p2.name)
	 function Person(){}
	      Person.prototype={
	            name="zs",
	            say=function(){
	            alert("I am "+this.name)
	            }
	      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

特性7：

(1)原型模式省略了构造函数传递参数的环节
所以所有实例默认情况下，都会取得相同的值

  function Person(){}
    Person.prototype={
            constructor:Person,   //默认指向object，我需要重新指向
            name:"zs",
            say:function(){
            alert("I am "+this.name)
            }
    }
    var p1=new Person()  //object
    console.log(p1)
    p1.name   //zs  缺陷不能往里传值
    // p1.say()
    // var p2=new Person()
    p2.name   //zs 
    // console.log(p2.name)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(2)原型属性被实例共享，如对引用类型属性修改，所有实例可能会出现问题

 function Person(){}
    Person.prototype={
            constructor:Person,   //默认指向object，我需要重新指向
            name:"zs",
            friends:["lkf","ly","lyg"],
            say:function(){
            alert("I am "+this.name)
            }
    }
    var p1=new Person()
    p1.friends.push("wee")
    console.log(p1.friends)
    var p2=new Person()
    console.log(p2.friends)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4、组合构造函数模式与原型模式

	 function Person(name,age){
	    this.name=name,
	    this.age=age,
	    this.friends=["aa","bb"]
	}
	Person.prototype={
	    constructor:Person,
	    sex:"man",
	    say:function(){
	        alert(this.name+","+this.age+","+this.sex+","+this.friends)
	    }
	}
	var p1=new Person("lkf",22)
	p1.friends.push("ly")
	p1.say()
	var p2=new Person("whlkf",12)
	p2.say()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

继承

【vue原理底层】
vue—MVVM

一、对象属性设置–defineProperty

1、Object.getOwnPropertyDescriptor()获取对象属性

  var Person={
            name:"zs"
        }
        var des=Object.getOwnPropertyDescriptor(Person,"name")
        console.log(des.value)  //zs
        console.log(des.configurable)  //true
        console.log(des.writable)  //true
        console.log(des.enumerable)  //true
1
2
3
4
5
6
7
8

2. 对象的数据属性

	value           属性的属性值
	configurable    能否删除属性的值
	writable        能否修改属性的值
	enumerable      能否遍历(枚举)属性的值
1
2
3
4

(1)var Person={}定义空，默认不可删除属性的值，修改属性的值，遍历(枚举)属性的值
1

  var Person={}
    Object.defineProperty(Person,"name",{value:"zs"})
    var des=Object.getOwnPropertyDescriptor(Person,"name")
    console.log(des.value)  //zs
    console.log(des.configurable)  //false
    console.log(des.writable)  //false
    console.log(des.enumerable)  //false
1
2
3
4
5
6
7

(2)允许修改
1

   var Person={}
    Object.defineProperty(Person,"name",{value:"zs",writable:true}) //自定义属性  ---允许修改
    console.log(Person.name)
    console.log(Person.name="ls")  //没有修改成功
    console.log(Person.name)
1
2
3
4
5

(3)可遍历
1

Object.defineProperty(Person,"age",{value:"23",enumerable:true}
var v1=Object.keys(Person)
console.log(v1)

   var Person={}
      Object.defineProperty(Person,"name",{value:"zs",configurable:true})
      Object.defineProperty(Person,"age",{value:23,configurable:false})
      delete Person.name //  delete(Person.name)
      console.log(Person.name) // //添加值//undefined
      Person.name="ls"  //添加值
      console.log(Person.name)
      delete Person.age
      console.log(Person.age)
1
2
3
4
5
6
7
8
9
10
11
12
13

(4)对象的访问属性
1

  get：在读取属性时调用的函数
  set：在写入属性时调用的函数
1
2

    var Person={"name":"ze"}
    Object.defineProperty(Person,"name",
    {get:function(){
        console.log("get....")
        return this.name
    }
})
    console.log(Person.name)
1
2
3
4
5
6
7
8

   var Person={"_name":"ze","age":23}  //代表私有
    var v1=""
    Object.defineProperty(Person,"name",
    {get:function(){
        console.log("get....")
        return this._name
    },
    set:function(val){
        console.log("set...",val)
        if(val=="ls"){
            v1="he is "+val
            this.age=55
        }
    }
})
    // console.log(Person._name)  //只有zs
    Person.name="ls"
    // console.log(Person.name)   //
    console.log(v1,Person.age)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

二、js继承

1、约定

	    function Person(){
	    var name="zs"    //私有的基本属性
	    var friends=["ls","ww"]  //私有的应用类型
	    function f1(){}  //私有的函数
	}
	function Person(){
	    this.name="zs"  //实例的基本属性
	    this.friends=["ls","ww"] //实例的应用类型
	    this.f1=function(){}  //实例的函数
	}
	
	function Person(){
	    Person.prototype.name="zs"  //原型的基本属性
	    Person.prototype.friends=["ls","ww"]  //原型的引用类型
	    Person.prototype.f1=function(){}  //原型的函数
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2、原型链继承

创建一个对象，Animal，构造函数+原型的函数
name 引用类型 方法say eat
js继承

	function Animal(){
	        this.name="animal"
	        this.friends=['wb','b']
	        this.say=function(){
	            console.log("say...");
	    }
	        }
	    Animal.prototype.eat=function(){console.log("eat...")}
	    function Cat(){}
	    //继承
	    Cat.prototype=new Animal()
	    //实例
	    var c1=new Cat()
	    console.log(c1.name)
	    console.log(c1.say)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function Animal(){
        this.name="animal"
        this.friends=['wb','b']
        this.say=function(){
            console.log("say...");
    }
        }
    Animal.prototype.eat=function(){console.log("eat...")}
    function Cat(){}
    //继承
    Cat.prototype=new Animal()
    Cat.prototype.name="cat"
    //实例
    var c1=new Cat()
    c1.name="jfm"
    console.log(c1.name)
    console.log(c1.say)
    c1.friends.push("jfcat01")
    var c2=new Cat()
    console.log(c2.name)
    console.log(c2.friends)  //写下构造函数里能看到
总结：
核心：Cat.prototype=new Animal()　拿父类实例充当子类原型对象
原型链查找顺序：先在实例中查找实例对象的构造函数－－＞实例对象原型－－＞父类构造函数－－＞父类原型，
优点：简单易于实现
缺点：原型的引用类型属性是所有实例共享的
    　创建子实例时，无法向父类构造函数传参
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3、原型链原理：

function Animal(){}
    Animal.prototype.name="animal"
    Animal.prototype.say=function(){console.log("hello")}
    console.log(Animal)
    // 指向函数本身
    console.log(typeof Animal.prototype)  //object
    console.log(Animal.prototype.constructor) // Animal
   
1
2
3
4
5
6
7
8

(1)每个函数都有一个显示的“prototype”属性，该属性指向原型对象
(2)原型对象中的“constructor”属性，指向函数本身

  var a1=new Animal()
// console.log(a1)   
console.log(a1._proto_)   //undefined 内部隐藏属性
console.log(a1.prototype)  //undefined
1
2
3
4

(3)new创建的对象，没有prototype属性

function Animal(){}
    Animal.prototype.name="animal"
    Animal.prototype.say=function(){console.log("hello")}
    var a1=new Animal()
    // console.log(a1)   
    console.log(a1._proto_)   //undefined 内部隐藏属性
    console.log(a1.prototype)  //undefined
1
2
3
4
5
6
7

 function Animal(){5}
    Animal.prototype.name="animal"
    Animal.prototype.say=function(){console.log("hello")}
    //继承
    function Cat(){}
    Cat.prototype=new Animal()
    var c1=new Cat()
    var c2=new Cat()
    console.log(c1._proto_==Cat.prototype)
    console.log(Cat.prototype._proto_==Animal.prototype)
    console.log(Animal.prototype._proto_==Object.prototype)
    console.log(c1._proto_._proto_==Animal.prototype)
    console.log(Object.prototype._proto_==null)  //原型链结束
1
2
3
4
5
6
7
8
9
10
11
12
13

(4)每个对象都与有一个“proto”内部隐藏属性， 指向她所对应的原型对象(chrome–[[]] firfox–<>)
(5)原型链利用原型上一个引用类型继承另一个引用类型的方法 (6)Object.prototype.proto==null //原型链结束

4、(借用)构造函数继承

Animal.call(this,arg) //继承
1

	function Animal(val){
	    this.name=val
	    this.friends=["a","b"]
	    this.say=function(){cobsole.log("say...")}
	}
	function Person(arg){
	    Animal.call(this,arg) //继承
	}
	var p1=new Person("zs")
	console.log(p1.name)  //zs
	p1.friends.push("ww")
	var p2=new Person("ls")
	console.log(p2.name)  //ls
	console.log(p2.friends) //["a","b"]
	console.log(p1.say==p2.say)  //false
	总结：
    核心：借用父类的构造函数来增强子类的实例，完全没用到原型
    有点：1.解决了子类实例共享父类引用属性的问题
          2.创建子类时可以向父类构造函数传参
    缺点：无法实现函数的复用，每个子类实例都持有一个新的function函数，消耗内存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5、组合继承(构造函数+原型链)

—常用

   function Animal(val){
        this.name=val
        this.friends=["a","b"]
    }
    Animal.prototype.say=function(){console.log("say...")}

    function Person(arg){
        Animal.call(this,arg)  //继承父类基本属性和引用属性，并保持了传参的特点
    }
    Person.prototype=new Animal() //继承父类函数，实现了函数复用
    var p1=new Person("zs")
    console.log(p1.name)
    p1.friends.push("dvg")
    var p2=new Person("ls")
    console.log(p2.name)
    console.log(p2.friends)
    console.log(p1.say==p2.say)
 核心：把实例函数都放在原型对象上，以实现函数复用，并保留构造函数的优点
    优点：
        1、不存在引用类型属性共享问题
        2、可传参
        3、函数可复用
    缺点：
        1、因为父类的构造函数被调用了两次，生成了两份，浪费内存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

6.原型式继承(了解)

	function Beget(obj){  //生孩子函数
	    function F(){}
	    F.prototype=obj
	    return new F()
	}
	function Animal(){
	    this.name="animal"
	    this.friends=["ls","ww"]
	}
	var Person=new Animal()
	var p1=Beget(Person)
	console.log(p1.name)  //animal
	p1.name="zs"
	p1.friends.push("zl")
	var p2=Beget(Person)
	console.log(p2.name)  //animal
	console.log(p2.friends) //["ls","ww","zl"]
	核心：用生孩子函数得到一个“纯洁”的（没有实例属性）的新对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

7.寄生式继承

	function Beget(obj){  //生孩子函数
	    function F(){}
	    F.prototype=obj
	    return new F()
	}
	function Animal(){
	    this.name="animal"
	    this.friends=["ls","ww"]
	}
	function getSubject(obj){
	    var clone=Beget(obj)
	    clone.age=23
	    return clone
	}
	var Person=getSubject(new Animal())
	console.log(Person.name)  //animal
	console.log(Person.age)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

8.寄生组合式继承—最佳

   function Beget(obj){  //生孩子函数
            function F(){}
                F.prototype=obj
                return new F()
        }
        function Animal(){
            this.name="Animal"
            this.friends=["ls","ww"]
        }
        Animal.prototype.say=function(){
            console.log("say...")
        }
        function Person(){
            Animal.call(this)
        }
        //核心代码 --切掉了原型对象上多余的那份父类实例属性
        var p=Beget(Animal.prototype)
        p.constructor=Person
        Person.prototype=p

        var p1=new Person()
        console.log(p1.name)    //Animal
        console.log(p1.friends) //["ls","ww"]


优点：完美
缺点：没有
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

十三. BOM编程

browser object model 浏览器对象模型

window--|--document
        |--navigator
        |--history
        |--location
        |--screen
        |--frames
1
2
3
4
5
6

1、window对象

1.对话框

    (1)alert()      消息提示框
   		 window.alert("hello")  //window可以省略
    (2)prompt()     消息输入框
    (3)confirm()    消息确认框
    var v1=window.confirm("确定删除吗")
        确定 v1--true
1
2
3
4
5
6

2.间歇调用与超时调用

setInterval(): 间歇调用,按照时间间隔执行代码，直到间歇调用取消或页面被卸载
取消间歇调用：clearInterval()

   window.setInterval(function(){alert("hello")},1000)
    var n=0
    function f1(){
        n++
        if(n==5){
            clearInterval(timmer)
        }
    }
    var timmer=setInterval(f1,1000)
1
2
3
4
5
6
7
8
9

setTimeout():超时调用，指定时间后执行代码
取消超时调用：clearTimeout()
只要指定时间没到，调用该方法，取消超时调用

  window.setTimeout(function(){alert("hello")},1000)
1

3. open打开窗口

window.open(“index.html”)

var w1=window.open("demo.html","新窗口",
                    "width=300px,height=221px,scrollbars=yes,screenX=150px,screenY=500px")
 //scrollbars滚动条
1
2
3

如果w1==null 窗口没弹出 —>窗口被拦截
window.close()关闭窗口

4.窗口滚动

scrollTo 窗口滚动到指定位置
scrollBy 在原位置滚动调整
    window.scrollTo(0,1000)
    window.scrollBy(0,100)
1
2
3
4

滚动条demo

1、setInterval实现

 window.scrollTo(0,1000)
        function f1(){
            var s=10;
            time=1
            n=0
            var aee=window.setInterval(function(){
                window.scrollBy(0,s)
                n++
                if(n==1000/s){
                    clearInterval(aee)
                }
            },time)
        }

    <button onclick="f1()">确定</button>
    <div style="width:200px;height:2000px;background-color:red"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2、setTimeout实现

   function f1(n){
        if(n==0){
            return 1
        }
        return setTimeout(function(){
            window.scrollBy(0,1)
            f1(n-1)
        }, 1);
      
    }
    <button onclick="f1()">确定</button>
    <div style="width:200px;height:2000px;background-color:red"></div>
1
2
3
4
5
6
7
8
9
10
11
12

2、history

保存用户上网的历史记录，从窗口打开的那一刻算起

保存用户上网的历史记录，从窗口打开的那一刻算起
	window.history.back() //前一页==history.back()
	history.forward()   后一页
	history.go(-1)      前一个
	history.go(-2)      前两页    
	history.go(0)       当前页
	history.go(1)       后一页
1
2
3
4
5
6
7

3、location 页面跳转

1、页面跳转功能

	window.location.href="demo.html"
	location.href="demo.html"
	location.assign("demo.html")
	window.document.location.href="demo.html"
1
2
3
4

2、获取url属性

   location.host     //服务器名及端口号
   location.hostname //服务器名
   location.port     //端口号
   location.protocol //使用协议
   location.pathname //路径
   location.search   //参数
1
2
3
4
5
6

	http://127.0.0.1:5501/yu/d16_Bom/index1.html？a=12&b=23
	    location.host   //'127.0.0.1:5501'  服务器名称即端口号
	    location.hostname //'127.0.0.1'  服务器名
	    location.port    //'5501'  端口号
	    location.proticol //undefined  //协议
	    location.pathname //'/yu/d16_Bom/index1.html'  路径
	    location.search   //'a=12&b=23' 参数
1
2
3
4
5
6
7

3.页面重新加载

	location.reload()   如果缓存区有就从缓存区里拿，如果没有从服务器上加载
	location.reload(true)  直接从服务器加载
1
2

4.页面替换

location.replace() 跳转页面，不会产生历史记录

4、navigator——浏览器内核处理

1、参数解析

	 	console.log(navigator.userAgent)    //用户代理
	    console.log(navigator.appName)      //Netscape
	    console.log(navigator.appCodeName)  //浏览器代码名称
	    console.log(navigator.appVersion)    //浏览器版本
	    console.log(navigator.platform)    //win32 操作系统  mac--苹果  linux--linux操作系统  x11--unix操作系统
	    console.log(navigator.mimeType)  //获取浏览器资源媒体类型----一般指插件 返回数组
1
2
3
4
5
6

2、浏览器内核

定义： 浏览器内核也叫排版引擎，也叫渲染引擎，主要功能获取网页内容(html，图像等)，整理信息(加入css等) 计算网页的显示方式，输出到显示器或其他媒介上

(1)webkit   苹果的开源内核  safari  chorme
            js引擎  safari--Nitro
                    chorme--v8
            html引擎 KHTML
(2)blink    webkit的一个分支，早期的safari chrome

(3)Trident  IE内核
(4)Gecko    firefox ff内核
            js引擎   JagerMonkey
            html引擎 Gecko
(5)persto   opera 早期内核
1
2
3
4
5
6
7
8
9
10
11

5、screen 客户端显示器信息

	screen.width        //屏幕的像素宽
	screen.height       //屏幕的像素高
	screen.availWidth   //浏览器窗口所占最大宽度
	screen.availHeight  //浏览器窗口所占最大高度
	screen.screenTop    //浏览器距离顶部的距离
	window.screenLeft   //浏览器距离左面的距离
1
2
3
4
5
6

    console.log(v1.offsetWidth)  //元素当前可视窗口的宽
    console.log(v1.offsetHidth)  //元素当前可视窗口的高
    console.log(v1.scrollHeight) //元素实际的高
    console.log(v1.scrollWidth)  //元素实际的宽
    console.log(v1.offsetLeft)   //元素相对于浏览器边界的偏移
    console.log(v1.offsetTop)    
1
2
3
4
5
6

6、iframe

1. 内联框架：在html文件中嵌入另一个文档

 <iframe name="if01" src="test02.html"
            width="300" height="400" frameborder="10"
            style="border:10px solid red; background-color:yellow"
            ><iframe>  //出现一个框
1
2
3
4

2、iframe框架传参

1、同域

iframe名称.window.子框架函数名(传递内容)

父：

	<iframe name="if01" src="test02.html"></iframe>
	<button onclick="f1()">确定</button>
	   <script>
	      function f1(){
	          if01.window.subfun("hello my son!")
	       }
	  </script>
1
2
3
4
5
6
7

子：

	function subfun(arg){
	       document.getElementById("show").innerText="父框架传递来的数据："+arg
	}
	<div id="show"></div>
1
2
3
4

2、跨域

postmessage ：可实现跨域通信、
语法：窗口对象.postMessage(消息内容，目标窗口)
(1)父——>子

    //发送信息
    if02.contentwindow.postMessage("hell sub wanghao","http://10.10.255.44:5500")
    //接收信息
    window.addEventListener("message",function(event){
            alert(event.data)
        })//全局事件监听
1
2
3
4
5
6

十四、DOM编程

DOM—Document Object Model 文档对象模型

	<!DOCTYPE html>>
	<html>
	<head>
	    <title></title>
	</head>
	<body>
	    <div></div>
	    <p></p>
	</body>
	</html>
1
2
3
4
5
6
7
8
9
10

  window.onload=function(){
        console.log(document.childNodes[0])  //声明头
        console.log(document.childNodes[1])  //声明body
        console.log(document.childNodes[1].childNodes[2].childNodes[1])  //查div
        }
 //页面按照顺序加载，先加载了script，然后再加载带有id的标签，导致了script无法找到正确的id。window.onload可以让页面加载完毕后再执行里面的代码块。
1
2
3
4
5
6

1、childNodes

childNodes:每个节点都有集合属性，数组对象
—————— 表示该节点的所有节点的集合
注意：***会将元素之间的空格当作文本节点 ***

	document.childNodes[0]  
	element.firstchild
	element.lastchild
	element.parentNode    
	element.nextSibling   //相邻节点下一个
	element.previousSibling   //相邻节点上一个
1
2
3
4
5
6

	 //通过ccc的标签查找ddd aaa，title
	    window.onload=function(){
	        var a=document.childNodes[1].childNodes[2].childNodes[3].childNodes[1]
	        console.log(a)
	        var b=a.nextSibling.nextSibling
	        console.log(b)
	        var c=a.parentNode.parentNode.previousSibling.previousSibling.childNodes[1]
	        console.log(c)
	    }
1
2
3
4
5
6
7
8
9

childNodes.length 长度

2、节点信息

  (1) nodeType    节点类型
        标签节点返回    1
        文本节点返回    3
  (2) nodeValue 节点值 
    元素节点    null
    文本节点    文本内容
  (3) hasChildNodes()判断是否有子节点
1
2
3
4
5
6
7

	console.log(document.body.nodeType)  //1
1

nodeType 属性返回以数字值返回指定节点的节点类型
如果节点是元素节点，则 nodeType 属性将返回 1。
如果节点是属性节点，则 nodeType 属性将返回 2。

3、childrens

childrens 返回所有子节点，忽略所有空格和文本节点，注释
只返回元素节点

		element.firstElementchild
		element.lasttElementchild
		element.parenttElementNode
		element.nexttElementSibling
		element.previoustElementSibling
1
2
3
4
5