js笔记（7.8~7.19）

/Users/yangyangzi/Desktop/YangZi2/JavaScript/JavaScript.rtfd （公司电脑）

7.8

编译型语言：程序执行之前，需要专门的一个编译过程，把程序编译成为机器语言的文件，比如exe文件；强类型语言，java c++

解释型语言：程序执行之前，不需要编译，直接运行时边解析边执行的语言弱类型语言  python php ；

 

JavaScript的组成：

ECMAScript：ECMA即欧洲计算机制造商协会；ECMAScript是ECMA指定的脚本语言的标准，规定了一种脚本语言实现应该包含的基本内容

DOM：JavaScript操作网页上元素的API

BOM：JavaScript操作浏览器的部分功能的API

 

 

DOM树：Document Object Model，即文档对象模型

DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强，通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

https://baike.baidu.com/item/DOM/50288?fr=aladdin

 

 

BOM：Browser Object Model，即浏览器对象模型。浏览器在页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型

不同于DOM的标准化组织是W3C，JavaScript的语法标准是ECMA，BOM没有官方标准，对于现代浏览器，每个浏览器都有自己的BOM实现方法，所有直接使用BOM会有兼容性问题，但是为了利用JavaScript完成交互，现代浏览器几乎都实现了相同的方法和属性，这些方法和属性被称作BOM方法和属性

BOM包含：有个核心对象window，window包含6大核心模块，分别是：document对象，渲染引擎在解析HTML对象时，会生成一个document对象，即文档对象，它是HTML文档的根节点。每一个元素都会生成对应的DOM对象，由于元素之间有层级关系，整个HTML代码解析结束后，会生成一个由不同节点组成的树形结构，成为DOM树。用于描述DOM树的状态和属性，并提供了很多操作DOM的API

frames，即HTML自框架

History，页面历史记录；window.history对象包含浏览器的历史记录，window可以省略。这些历史记录以栈（FIFO）的形式保存。页面前进则入栈，页面返回则出栈

location，当前页面地址

navigator，浏览器相关信息

screen，用户显示屏幕相关属性

DOM

Js的所有全局对象、全局方法、全局变量全部自动被归为iwindow对象的方法和属性，在调用这些方法和属性时可以省略window。DOM是window对象的属性

BOM   https://www.jianshu.com/p/0c8b34111e95

 

 

1、js的样式（类似于css的三种样式，只不过js用而css用）：

行内样式：

 

页面演示：

 

外链样式：

注意：引入路径

Html用的是相对路径：

前端使用的相对路径 /; ./; ../../; ../../../;https://blog.csdn.net/cvper/article/details/79955412

前端入门—相对路径和绝对路径https://blog.csdn.net/qianduanshuo/article/details/90612917

 

7.11

常用输出方式

1、弹框输出；alert(“alert弹框”)

2、控制台输出；运行时F12，出现控制台打印；

      console.log(“sd”)  console.error(“错误输出”) console.warn(“警告输出”)

3、用户输入：prompt(“请输入用户名”)

4、确定取消弹框：confirm(“弹框”)  确定；取消

 

注释：单行多行注释同oc

单行注释可以包含多行注释

多行注释能包含单行注释

多行注释不能包含多行注释

 

常量，变量，标识符

变量：var 

 

关键字，保留字

标识符：可以自主命名的，可以有字母、数字、下划线$，不能以数字开头，不能是关键字；严格区分大小写；驼峰式写法，utf8支持的都可以

 

数据和数据类型

6种：

一、简单数据类型（栈）：

    1、数字类型：number  不区分浮点型和整型

    最大值；最小值；无穷大Infinity；无穷小 -Infinity

；NaN：NaN:not a number ，js中对数值进行计算时，如果没有结果，则返回NaN；整数可以保证精准值，小数时会丢失精度

（解决js的精度丢失问题：放大倍数，运算完再缩小回去https://blog.csdn.net/tinsine/article/details/77841031）

    2、字符串类型：string

    相同引号不能嵌套，不同引号可以嵌套：单引号内可以放双引号，不能放单引号；双引号内可以放单引号，但不能放双引号

    3、布尔类型：boolean  (逻辑类型 或 真假类型) 

       //任何非0都为true

    //任何非空字符串都是true

    //任何对象都是true

 

    4、变量未初始化：undefined

       Undefined是一种特殊类型，表示变量未赋值，这种变量有一种值就是undefined；只有一个值的数据类型

   小写的undefined和10，abc等一样是一个常量；大写的Undefined和Number，Boolean一样是一种数据类型；

   typeof()函数对没有初始化或没有赋值的变量都会返回undefined

    5、空类型：Null

       Null类型和Undefined一样只有一个特殊值的数据类型，这个特殊值就是null

     Null是一个空的对象，所有使用typeof检查null会返回一个Object类型

undefined值是由null值衍生出来的，所以如果比较undefined和null是否相等会返回true

 

== 值比较  ===值比较+类型比较

var aa = undefined

var bb = null

console.log(aa == bb) //true

console.log(aa === bb)//false

 

 

二、复杂数据类型（堆）：

    1、对象类型：Object

    2、数组类型：Array

 

查看类型 type of()

 

7.12

数据类型转化

一、其他类型转换成string

1、toString()

toString()函数不能用于undefined和null,但是可以用于NaN类型

 

2、String()

// 有些类型并没有toString()方法，这时候可以用String()函数；例如undefined和null

var num

console.log(String(num))

 

var num1 = null

console.log(String(num1))

 

var num2 = undefined

console.log(String(num2))

 

3、强转用+

任何数据和+都会转换成string类型

 

二、其他类型转换成Number

1、Number()函数

    1》、纯数字的字符串，则直接转换为数字

    2》、包含非数字内容的字符串，会返回NaN

  3》、空或一堆空格，返回0

  4》、undefined，返回NaN

  5》、null，返回0

  6》、Boolean，true返回1，false返回0

2、parseInt()函数 parseFloat()函数的

从左向右转化，遇到非数字则停止转换

var str3 = '123.33rr4.67'

console.log(parseInt(str3),typeof parseInt(str3),parseFloat(str3),typeof parseFloat(str3))

结果：123 "number" 123.33 "number"

 

Js的运算符：

Number类型打印结果是蓝色

字符串类型打印结果是黑色

一、算数运算符：

     1、加法运算符：num1 + num2

         1》非Number类型的值进行运算时，会先将这些值转化为Number类型然后在做运算；

         2》任何值和NaN运算时，都得NaN；

         3》任何值和字符串运算，都会先转换成字符串，再进行字符串的拼接操作

   2、减法运算符：num1 - num2

         1》非Number类型的值进行运算时，会先将这些值转化为Number类型然后在做运算；

         2》任何值和NaN运算时，都得NaN；

         3》字符串做减法会转换成Number :var num = 123 - '3' console.log(num);结果打印120；这点与加法运算符不同

 

  3、乘法运算符：num1 * num2

     注意点和减法一样（如下）

        1》非Number类型的值进行运算时，会先将这些值转化为Number类型然后在做运算；

        2》 任何值和NaN运算时，都得NaN；

        3》字符串做乘法会转换成Number 

 

  4、除法运算符：num1 / num2

     注意点和减法一样（如下）

         1》非Number类型的值进行运算时，会先将这些值转化为Number类型然后在做运算；

         2》任何值和NaN运算时，都得NaN；

         3》字符串做除法会转换成Number 

 5、取余运算符：num1 % num2 

  m % n 相当于 m / n获取余数

  n为0 返回NaN  注意此处和除法不同，取余分母为0结果为NaN，而除法分母为0结果为Infinity

  m为0 返回0  

  m>n 正常求余

  m

 其他规律和减法一样：

 非Number先转化Number，再运算

 任何值和NaN运算，都是NaN

 字符串取余会转化成Number

 

二、正负运算符：

 正号：+对数字无影响

          var var2 = - 12

     var var22 = +var2//还是-12

         对非Number类型的值会转换为Number，然后运算

          var var3 = + '13'//字符串 13

     var var4 = + true//布尔  +1

          var var6 = +null//null +0

 

 负号：-对数字进行负号取反

 

三、赋值运算符：

 简单赋值运算符:=

 复杂赋值运算符：*= ;/=;+= 

 

四、自增运算符：++ —

  i = i+1        i = i-1

  // a++ 先运算，再++

    var num1 = 20, num2 = 30

    var num3 = (num1 ++) + (num2 ++)

    console.log(num3,num1,num2);//50,21,31

 

// --a 先--，再运算

    var a1 = 20,a2 = 30

    var a3 = (--a1) + (--a2)

    console.log(a3,a1,a2);//48,19,29

 

五、关系运算符：返回值为true或false

 >

 <

 >=

 <=

 == 值等于

 !=  值不等于

 === 值和类型等于

 !==  值和类型不等于

 

 注意：

 对于非数值进行比较时，会将其转换为数字然后再比较

 如果符号两侧都是字符时，则会比较两侧字符串中字符的Unicode编码

 null、undefined、NaN比较

//如果左侧是数值，则右侧会先转换成数值再进行比较

console.log(a > false)//true

//如果左侧为字符则比较比较字符串中字符的unicode编码

console.log( "a" > "b")//false  a、b的unicode编码分别为97、98

 

console.log(null == 0)//false

console.log(undefined == 0)//false

console.log(NaN == 0)//false

console.log(0 == null)//false  Number(null)为0，所以这里感觉很奇怪

console.log(0 == undefined)//false

console.log(0 == NaN)//false

console.log(Number(null),Number(undefined),Number(NaN))// 0 NaN NaN

 

console.log(null == null)//true

console.log(undefined == undefined)//true

console.log(NaN == NaN)//false

 

console.log(null == undefined)//true

console.log(undefined == null)//true

console.log(null === undefined)//false

 

// isNaN()函数，专门判断是否是数字，如果参数是数字则返回false，参数为非数字则返回true

console.log(isNaN(mm));//false

console.log(isNaN(null));//false * ；可能是Number(null)结果为0，相当于判0

console.log(isNaN(undefined));//true ； 可能是Number(undefined)结果为NaN，相当于判NaN

console.log(isNaN(NaN))//true d

 

六、逻辑运算符：

&&（与）

&&的短路写法：条件 && 某种结果

console.log(Boolean(alert("d")))//false

console.log(alert('dd'))//undefined

var a = 123 && alert('短路写法')

console.log(a)//没有返回true，返回结果是undefined(并没有将alert('短路写法')自动转换为boolean后再计算)

a = true && alert('短路写法1')

console.log(a)//没有返回true，返回结果是undefined

a = false && alert('短路写法2')

console.log(a)//false

&&注意点：

1、如果&&两侧是非boolean，逻辑与会将其自动转换为boolean类型来判断（这句话对于短路写法有问题，上边返回undefined的示例则推翻此结论，故不要盲从）

   var b = 123 && 'abc'

   console.log(b);//abc

2、如果条件A不成立，则返回A

   b = false && 'abc'//false

   console.log(b);

3、如果条件A成立，则不管B成不成立都返回B

   b = true && 'abc'//abc

   console.log(b);

 

 

 || （或）

 ||注意点：

 1、如果A不成立，则不管B是否成立则返回B数值本身

 2、如果A成立，则返回A数值本身

 

！（非）

对一个值进行两次取反，其值不变

对非boolean值进行取反，则会将其转变为boolean值，然后取反，所有，要想将其它类型转换为Boolean类型除了Boolean()函数，还可以使用!!数值；

!!数值的形式实现原理和Boolean()函数一样

 

七、逗号运算符

在js中，逗号也是一种运算符，称为逗号运算符。其功能是将多个表达式连起来组成一个表达式，称为逗号表达式。

表达式1，表达式2，表达式3，…，…，表达式n；逗号表达式的运算过程是：表达式1，表达式2，表达式3，… 表达式n 

整个逗号表达式的运算值是最后一个表达式的值

逗号表达式用的比较少

使用注意：

1、程序中使用逗号表达式，通常是要分别求逗号表达式内各个表达式的值，并不一定是求整个逗号表达式的值；

2、并不是所有出现逗号的地方都是逗号表达式，例如多个变量在同一行的声明并不是逗号表达式

 

八、三目运算符

如果三目运算符？前的表达式不是boolean值，则会自动转化为boolean值

 

7.15

流程控制语句

注意点：

1、如果只有一条语句，后边的大括号可以省略

2、分号”；“也是一条语句，空语句

3、if else是一个整体，else先匹配最近的if

4、if小括号内的的语句，先转换成boolean类型的值，在进行判断

5、判断语句的常量与变量问题

6、if语句可以嵌套使用

 

7.16

If练习

仨数排序

选择排序：找最小的去对比

  //选择排序

var a = +prompt('第一个数')

var b = +prompt('第二个数')

var c = +prompt('第三个数')

 

var temp;

if (a > b){

    temp = b;

    b = a;

    a = temp;

}

if (a > c){

    temp = c;

    c = a;

    a = temp;

}

//a此时最小，找最小的

if (b > c){//c最大

    temp = c

    c = b

    b = temp

}

console.log(a,b,c)//从小到大

 

冒泡排序：找最大的去对比

var res;

var m = +prompt('一')

var n = +prompt('二')

var p = +prompt('三')

 

if (m > n){

    temp = m

    m = n

    n = temp

}

if (n > p){

    temp = n

    n = p

    p = temp

}

//p是最大的，找最大的

if (m > n){

    temp = m

    m = n

    n = temp

}

console.log(m,n,p)

 

switch：

使用注意事项：

1、case语句，判断的是===而非==；也就是说判断的是类型和数值，而不单单只是数值

2、case后可以是常量也可以是变量

3、表达式的判断问题：会先计算表达式，在做判断

4、case穿透：一般是忘记写break了；或者利用case穿透简写，例如输入月份判断季节

5、default：default可以省略；且位置可以随便放

 

流程控制-循环

while(){}

While循环注意点：

1、死循环，while条件语句永远是真时

2、任何值都有真假，while条件句执行结果如果不是boolean型，则会先转换为bollean再进行判断

3、while后大括号内只有一条语句时，则大括号可以省略

4、分号问题，类似于if的分号；分号代表一条空语句

5、最简单的死循环while(1);

 

Break治愈switch语句或循环语句（跳出当前循环）

 

Js基础-数组和函数

构造函数：

字面量；

数组常用函数

//1、join将数组转换成一个字符串，默认用逗号分割，传如的参数即分隔符

//2、向数组末尾添加元素，可以填多个（... items），并返回数组个数：push() ;

//   向数组末尾删除一个元素，并返回此删除的元素：pop()

//3 删除数组第一项，并返回第一项，如果数组为空，则返回undefined：shift()

//  将元素(可以是多个)添加到数组开头，并返回数组长度

//4 数组翻转，会影响到原数组：reverse()

//5 concat()将原数组copy一份，并将此函数的参数添加到copy后的数组末尾，如果此函数无参数，则只是copy一份数组

//注意concat与push区别；前者如果添加数组，则会展开数组再添加逐个元素；后者则是添加整个元素

//6、从前开始往后找：indexof(a,b);//a是元素，b是开始从哪个下标查起

// 从后开始往前查找：lastIndexOf(a,b);//a是元素，b是开始从哪个下标查起

//找不到的元素返回-1

 

7.17

Js的函数：

//函数的声明

//1、函数的一般声明

function test() {

    console.log(1+3);

}

test()

 

//2、函数表达式声明方式(无函数名)

var add = function () {

    console.log(1+4);

}

add()

 

//3、函数 使用Function构造函数

var addadd = new Function('console.log(4+6)')//加单引号的好像有问题

addadd()

 

var addaddaddadd = new Function(console.log(9+6))

addaddaddadd()

 

Js的形参和实参(别的语言：一般情况必须实参和形参个数相同，否则会报错)

Js的形参和实参个数可以不一致

如果实参个数比形参多，则按顺序取；同理实参比形参少也是按顺序取

 

//包含了传入函数中的所有参数，arguments并不是一个数组，只是与数组相似，除了length属性，数组的其他属性都不具备

//length 函数形参的个数

//函数的length此函数形参个数为0，实参不为零（js函数形参和实参个数可以不一样）

//arguments对象的length为形参个数

 

两个length属性：

//    注意函数的length属性和arguments对象的length属性的区别

//    前者是函数形参的个数，后者是实参的个数

 

    function testArguments(num1,num2) {

        console.log('hh',testArguments.length,arguments.length)

      if (testArguments.length === arguments.length){

        console.log('kk',testArguments.length,arguments.length)

      }

    }

    testArguments(1,3,5)

 

 

return：

函数的return使用注意点：

1、如果函数无返回值，默认返回undefined

2、如果函数只有return，return后无值，则返回undefined

3、 如果函数只有return，且return后有值，则返回此值

 

函数的声明方式中：

函数一般声明方式(即函数直接声明方式)和表达式函数声明方式的区别：

Js解析器首先会把当前作用域的函数声明提前到整个作用域的最前面，所以，即使是在函数谁声明前面调用这个函数也是可以的，但是表达式式函数声明不具备这种特点，因为用一个变量接收了此函数

 

匿名函数：没有命名的函数

作用：在绑定事件的时候，例如doucument.click = function(){}

         定时器 例如setInterval(function(){})

         自调用函数：即一进页面自发执行的操作：(function()(alert(‘hello’)))()

 

回调函数：

函数调函数

function fn(num1,num2,fun1) {

   return fun1(num1,num2);

}

console.log(fn(2, 3, add))//add是函数；add()是函数调用

console.log(fn(2, 3, minus));

console.log(fn(4, 2, divide));

console.log(fn(2, 3, mutiply));

 

变量的作用域：

全局变量：定义在script或者不属于某个函数的变量

局部变量：定义在函数内的变量

注意：1、函数内部可以访问到该函数所属的外部作用域的变量（作用域链）,反之不行

         2、不使用var声明的变量是全局变量，即使是在函数内部不使用var声明的变量也是全局变量

         3、局部变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

         

 作用域链：如下，在最小作用域打印a值，a为3，如果注释掉3处，则a为2，注释掉3处和2处，a为1，即找a变量的时候，从小范围到大范围去寻找，这就是作用域链条

    {

        var a = 1//1

        {

            var a = 2//2

            {

                var a = 3//3

                console.log(a);

            }

        }

    }

 

作用域注意:

//1、注意函数内声明的带var的变量才是局部变量

var num = 4;

if (num > 2){

    var sum = 4

}

console.log(sum);//注意sum为全局变量(没在函数内)

 

//2、for循环的i变量，在for循环结束依旧能取到

for (var i =0 ;i < 3;i++){

    console.log(i)

}

console.log('出来后：',i);//i依旧可以取到

 

作用域进阶：深刻理解js的作用域

 //1、

 var num = 10

 fun();

 function fun() 

     console.log(num);

     var num = 20;

 }

 // fun();即使在此调用fun函数，结果也是undefined

 

 //执行结果undefined

 /*

 * fun函数中，console.log(num);会优先从当前{}中找num变量；

 * 找到其下行的var num = 20;

 * 但是在此{}中，只是提前了num局部变量的声明，即fun函数相当于

 * function fun() {

 *   var num；

     console.log(num);

     num = 20;

    }

 * 故运行结果为undefined

 * 与fun函数的调用位置无关

 * */

 

 //2、

 var a = 18;

 f1();

 function f1() {

     var b = 9;

     console.log(a);

     console.log(b);

     var a = '123'

 }

 /*

 * 结果：undefined 9

 * 原因同上边的1

 * 即f1函数的声明相当于

 * function f1() {

     var b = 9;

     var a;

     console.log(a);//调用的是当前作用域的a

     console.log(b);//调用的是当前作用域的b

     a = '123'

   }

   与f1函数的调用位置无关

 * */

 

 console.log('来来来\n')

 

 

 //3、

 f2();

 console.log(p);//9

 console.log(n);//9

 console.log(m);//报错 m is not defined

 function f2() {

     var m = n = p = 9;

     console.log(m);//9

     console.log(n);//9

     console.log(p);//9

 }

/**

 * 注意：同时声明并初始化多个变量的时候要注意：作用域的区别

 *

 *f2的函数声明相当于

 * function f2() {

     var m = 9;//局部变量

     n = 9;//全局变量

     p = 9;//全局变量

     console.log(m);//9

     console.log(n);//9

     console.log(p);//9

   }

 * 故在f2函数外不能调用m

 * */

 

Js作用域与swift作用域对比：

 override func viewDidLoad() {

        super.viewDidLoad()

        view.backgroundColor = UIColor.green

        // Do any additional setup after loading the view, typically from a nib.

        

        var name = "丽丽"

        func testZYY(){

            print(name);

            var name:String = "小芳";

        }

        testZYY()

        

    }

相同的情况，swift不存在js这种奇葩作用域解析方式

 

作用域进阶总结：

Js的函数的声明和变量的声明都会被提前到当前作用域的最前面；

而变量的声明和初始化如果在变量的调用的后边，则提前到此作用域最前面的只有变量的声明，而变量的初始化的位置不变（出现undefined现象）；

 

Js基础-对象和面向对象：

面向对象：可以创建自定义类型、很好的支持继承、多态  c++ java c#

基于对象：无法创建自定义类型、不能很好的支持继承和多态 javascript，但有方法解决上述问题

 

Js的常见对象：

1、无序属性的集合：

 1》其属性可以包含基本值、对象或函数

 2》对象就是一组没有顺序的值

 3》js的对象想象成键值对，值可以是数据和函数

2、对象的行为和特征：特征 。。。属性；行为。。。方法

3、字面量对象

   var dog = {

    //属性

    name:'旺财',

    age:12,

    dogFriends:['花花','小黄','小黑'],

    //方法

    eat:function () {

        console.log('吃')

    },

    run:function () {

        console.log('跑')

    }

 }

 

                               

对象的遍历

for (var i = 0 ; i < dog.left; i++){//无打印

    console.log(dog[i])

}

 

//    js对象的遍历不能用上边这种for循环，可以用for in

    for (var key in dog){

        console.log(key,dog[key])

    }

 

构造函数：能产生对象的函数

 

 

this的使用：

1、this在哪个对象中，this就代表这个对象

2、谁调用，this就是谁

  function test() {

      console.log(this)//这里的this是window，实际是用window调用test()

  }

  test()

 

  person.sleep();//sleep()函数中的this是person

 

3、构造函数中的this，始终是new的当前对象

 

 

构造函数：

1、通过object的构造函数

   function Person() {

    var obj = Object()

    //属性

    obj.name = null;

    obj.age = null;

    obj.weight = null;

    console.log('dd',this,'sd');

    //方法

    obj.study = function () {

        console.log(this.name,'在学习');

 

    }

    obj.sleep = function () {

        console.log(this.name,'在睡觉')

    }

    return obj;

}

var person = Person();

person.name = '刘伟';

person.age = 12;

person.study();

person.sleep()

console.log(person);

 

 

2、直接用this的构造函数

   function Dog(name,age,friends) {

    //属性

    this.name = name;

    this.age = age;

    this.friends = friends;

 

    //方法

    this.eat = function (someThing) {

        console.log(this.name,'吃',someThing)

    }

    this.run = function (someWhere) {

        console.log(this.name,'跑到',someWhere)

    }

 

}

var do1 = new Dog('白白',12)

do1.eat('肉肉')

do1.run('home')

 

var  bigDog = new Dog('大黄',14,[do1,'丽丽','花蛤']);

bigDog.eat('骨头');

bigDog.run('森林');

console.log(bigDog);

 

console.log(do1 === bigDog)

 

 

字面量对象构造函数

//构造函数 将构造函数的参数，转换为字面量对象，在用构造函数创建对象时，直接传整体（字面量对象）//也可以用延展操作符 ...

 

function Dog(option) {

//属性

this.name = option.name;

this.age = option.age;

this.friends = option.friends;

}

var do1 = new Dog({name:'白白',age:12})

do1.eat('肉肉')

do1.run('home’)

var  bigDog = new Dog({name:'大黄',age:14,friends:[do1,'丽丽','花蛤']});

bigDog.eat('骨头');

 

 

js可以动态的添加属性或方法

//1、字面量创建方式

 var array = [];

 var obj = {};//字面量创建对象

//2、构造函数创建方法

 var array1 = new Array()

 var obj1 = new Object();

//    3、

//    constructor属性 对象的构造方法都有此属性，通过此属性可获得构造函数

//    prototype属性 对象的构造方法都有此属性，通过此属性可为整个类添加属性或函数

//通过构造方法产生的Per及字面量方法对象dod都有constructor呢？系统api就这样吧

//   4、js的对象的属性和函数可以任意改，也可以对某个对象任意添加属性或方法，但是如果想对所有对象都添加方法或属性需要修改其构造方法（通过prototype属性修改构造函数）

//     4.1 任意修改对象的属性、函数

stu1.name = '小丽'

stu1.study = function () {

    console.log('小丽在学习')

}

//     4.2 某个对象任意添加属性或方法

//    添加属性

stu1.age = 12;

//    添加方法

stu1.sleep = function () {

    console.log(stu1.name,'在学校睡觉');

}

 

//    4.3如果想对所有对象都添加方法或属性需要修改其构造方法（通过prototype属性修改构造函数）

     //为整个类添加属性

Student.prototype.major = '数学';

 //为整个类添加函数

Student.prototype.play = function () {

    console.log('学生玩篮球');

}

//在添加属性和函数之前创建的对象，也能调用新添加的属性和函数

 

只能用类来调用prototype属性,不能通过对象添加属性和函数

 

 

7.18

09-js基础-对象和面向对象

构造函数中用prototype添加的属性和函数与正常添加的属性和函数对比

//结论：比较prototype创建的属性和正常创建的属性的地址（===），没有可比性，因为属性不是对象，只是值对比

//     比较prototype创建的函数和正常创建的函数的地址 p1.eat === p2.eat；p1.run === p2.run，则说明

//      prototype相当于对象的共享库，且函数是一种object（对象），所有无论p1,p2是否重写run方法，即使是重写成一样的，run函数的比较都是false

//      而无论哪种方式创建的属性，只要属性值一样，则对比为true

//     故为了节省内存考虑，也要用prototype的形式添加函数

 

构造函数的终极写法

function Person(option) {

    // this.name = option.name;

    // this.age = option.age;

 this._init(option)

}

Person.prototype = {//字面量对象方式来写

    _init:function(option){//属性可以这样写在prototype中，也可以直接写在Person构造方法中

        this.name = option.name;

        this.age = option.age;

    },

    eat:function (something) {

        console.log(this.name,'吃',something);

    },

    run:function (someplace) {

        console.log(this.name,'go',someplace);

    },

 

}

 

Js中数据类型和内存分析

栈区：编译器自动分配释放，存函数参数值，局部变量等

堆区：有程序员分配释放，如果开发者不释放，程序在结束时会回收

内存：可以理解为栈区，放小的且常用的，基本数据类型

硬盘：可以理解为堆区，放体积大的，复杂数据类型，有地址

 

Js中的数据类型：

简单（基本）数据类型：String，Number，Boolean，Undefined，Null  存储在栈区

复杂（引用）数据类型：Array，Object，Date  存储在堆区

注意：堆区的东西要通过栈区来取，栈区存的是复杂类型的地址值，堆区存的是实在的复杂类型的内容

 

 

Js的内置对象：js已经创建好的对象，直接使用即可，不需要再定义了

常见内置对象：Date，Array，Math，RegExp（正则），Error，String。。。

 

Array高级API：1~3对数组的操作都会改变原数组 5~8不会改变原数组

1  sort() 排序，必须加回调函数控制升序排序，亲测不加会有问题(课程说不加默认升序)   内部用冒泡

console.log(array.sort(function (a,b) {//[1, 4, 23, 32, 54]

    return a - b;//小-》大

}))

console.log(array.sort(function (c,d) {//[54, 32, 23, 4, 1]

    return d - c;//大-》小

}))

 

 

2  slice() 截取数组，俩参数

var arr1 = array.slice(1);//[1,最后]

var arr2 = array.slice(1,4);//[)

var arr3 = array.slice(1,-2)//[1,-2+array.length)

var arr4 = array.slice(-4,-1)//[-4+array.length,-1+array.length)

 

3  splice() 插入 删除 修改，仨参数

删除

var removeArr = array.splice(0,3);

插入

array.splice(2,0,'ad','sd')//从2下标开始，添加元素ad sd

删除 插入

array.splice(2,4,'k','p');//从下标2开始删除四个（不够4个，则有几个删几个，再加插入ad，sd）

 

// 清空数组

// array = [] //清空方法一

array.splice(0)//清空方法二

 

 

4  foreach() 遍历 回调函数方式

//    forEach可以避免同步异步问题？？？

    array.forEach(function (a,b) {

        console.log(a,b);//value,key

    })

 

5 map() 映射 返回函数调用结果组成的数组

 

6 filter() 过滤,产生新数组

 

7 every() 数组中都满足条件返回true 返回boolean

 

8 some() 数组中只要有满足条件的就返回true

 

 

Js的特效-DOM BOM

Js是事件驱动型语言

事件源：标签/document/节点

获取事件源方法（获取节点）

var btn = document.getElementById('btn')//id

var btn1 = document.getElementsByClassName('classbtn')[1]//类

var btn2 = document.getElementsByTagName('button')[0]//标签

 

// querySelector 默认选第一符合条件的标签  选择器

var btn3 = document.querySelector('#btn')//id选择器 #

var btn4 = document.querySelector('.classbtn')//类选择器 .

var btn5 = document.querySelector('button')//标签

 

//querySelectorAll

var btn6 = document.querySelectorAll('#btn')[0];

var btn7 = document.querySelectorAll('.classbtn')[1];

var btn8 = document.querySelectorAll('button')[0]

var x = document.querySelectorAll("p.intro")[0]

 

DOM访问关系：

1、获取父节点

var span = document.getElementById('span')

var node = span.parentNode

2、获取兄弟节点

var span = document.getElementById('span')

var previous = span.previousElementSibling || span.previousSibling //不同浏览器获取的方法会有区别所以用||

var next = span.nextElementSibling || span.nextSibling//不同浏览器获取的方法会有区别所以用||

3、单个节点

 1》第一个节点

 第一个节点（兼容不同浏览器） firstChild firstElementChild

 

 2》最后一个节点（兼容不同浏览器）  lastElementChild  lastChild

 

 3》所有子节点 （兼容不同浏览器） childNodes  children

 3.1》 childNodes:注意：火狐、谷歌等高版本会把换行看做子节点

    是标准属性，返回指定元素的子元素集合；包括元素节点、属性节点、文本节点，以上三种节点根据nodeType区分，nodeType取值分别是1、2、3；因此要获得所有元素节点要做遍历

var nodeListArray = new  Array();

for (var i = 0;i < nodeList.length;i++){

    var node = nodeList[i]

    if (1 === node.nodeType) nodeListArray.push(node)

}

 

 3.2》 children：注意：在IE6/7/8中包含注释节点，IE6/7/8中注释节点不要写在里面；新版浏览器多用child

 

补充：获取任意兄弟节点（获取父节点，通过父节点获取任意兄弟节点）

 

 

 

DOM节点操作：

一、节点的crud：

1、创建节点 ：createElement()

document.createElement('img')

2、 增加节点:append() appendChild() insertBefore()

div.append(img);

document.body.appendChild(newDiv)

div.insertBefore(img,btn)

3、 删除节点  removeChild()  remove()

通过父节点删除 deletBtn.parentNode.removeChild(deletBtn)

自己remove  deletBtn.remove()

4、 复制节点（节点自己复制自己）  cloneNode(true)

cloneCode()：参数是boolean类型，true深拷贝，拷贝此节点及其子节点；false浅拷贝，只拷贝此节点，不拷贝其子节点

 

二、节点的属性：

1、获取属性

imga.src

imga.getAttribute('src')

 

2、设置属性

imga.setAttribute('src','refresh3.png');

 

设置自定义属性

//2.1、自定义属性setAttribute

imga.setAttribute('src','refresh3.png');//设置哪个属性为哪个值

imga.setAttribute('aaa','AAA')

console.log(imga);//能打印出aaa属性和值

 

//2.2、自定义属性 .

imga.index = 1

console.log('hhh',imga)//无index属性和其值

console.log(imga.index);//单独打印，能打印出index，可以用

 

3、删除属性

imga.removeAttribute('aaa')

 

三、节点的内容

1、innerHtml

有子节点 ：包括子标签 及 各标签内容

无子节点：

 

2、innerText：各子标签的内容：只打印双标签的text，类似input等单标签不会打印，当然input有另一个值表示其字符，即value

 

3、value：

var inpu = document.getElementsByTagName('input')[0]

inpu.value = '我是美女'

 

无子节点时，innerText与innerHTML相等 都是当前标签内容

 

练习案例小结

点击a标签时避免a的herf的响应（响应方式是打开新的网页）：在a的onclick事件 return false

<a href="refresh3.png">百度一下a>

var aad = document.getElementsByTagName('a')[0]

aad.onclick = function () {

    alert('a标签')

    console.log('dfghjk')

    return false//这里是点a标签不跳转的关键

}

 

2、ul.getelemnt 缩小范围：不要写document.getelementby.. 而要把document改成最小范围的父节点

var didd = document.getElementById('aa')

var list1 = didd.getElementsByTagName('button')

 

Css的属性而不是HTML标签属性时，需要通过style调用

 

7.19

同步异步：在换肤实例中给li标签添加自定义属性index，从而实现点击图片换图（通过此index属性获取图片名称）操作，而没有用for循环里的索引i，因为for循环是异步的，在for里通过i获取图片时，i值一直是最后一次的值

 

Input标签

获取焦点事件：onfocus

失去焦点事件：obblur

 

取整：

Math.ceil(a);  //不管小数是多少，都入，取整

Math.floor(a); //不管小数是多少，都舍，取整

Math.round(a)//四舍五入

parseInt 取整数，参数可以是是number也可以是string

parseFloat 取小数，参数可以是是number也可以是string

 

用js改变元素的样式：inp.className = 'red' （red是类选择器）

 css样式的优先级，id选择器高于class选择器,所有如果二者同时作用，则默认是id选择器的style，如果，想默认是类选择器的样式，则在此项样式后加!important：

border-color: yellow !important;

 

排他思想 选项卡注意点：

//问题：for循环与事件源的同步异步问题

//解决方式一：添加属性

  for (var i = 0; i < btnList.length;i++) {

      var btn = btnList[i]

      console.log('iiii'+i);

      btn.index = i;

      btn.onclick = function () {

          console.log(this.index);//0 1 2 3 4 5

      }

  }

  

 //解决方式二:使用闭包

  for (var i = 0; i < btnList.length;i++) {

 

      (function (i) {

          console.log('iiirri'+i);

          btnList[i].onclick = function () {

              console.log(i);//0 1 2 3 4 5

          }

      })(i);

 

  }