JS、CSS以及HTML复习

1.操作符

一.比较操作符

undefined >= undefined//false          undefined是NaN

null==0//false

undefined==0//false

NaN==0//false

''==0//true

' '==0//true

false==0//true

二.算术操作符

console.log(123+"123");//123123  字符串的拼接

console.log(123-"123");//0  隐式的数据类型转换   string-->number

// null/false/''  -->  0

console.log(+null);//0

console.log(-false);//-0

console.log(-'');//-0

// undefined/object/'aaaaa'-->NaN

console.log(-undefined);//NaN

var obj={};

var obj2={name:'zs'};

console.log(-obj,-obj2);//NaN,NaN

console.log(-"abc",-"123abc");//NaN NaN

//识别十进制和十六进制

'123' '0123'-->123  10进制

'0x123'-->16进制

console.log(-"123",-"0123",-"0x12");//-123 -123 -18

三.逻辑运算符

1.逻辑与 &&

假性值:NaN false undefined 0 "" null

如果第一个操作数为假，则直接返回该假性值,否则返回第二个操作数

     console.log(NaN&&true);//NaN

console.log(false&&true);//false

console.log(undefined&&true);//undefined

console.log(0&&true);//0

console.log(''&&true);//''   

console.log(null&&true);//null

2.逻辑或 ||

如果第一个操作数为假，则直接返回第二个操作数

console.log(100||false,'abc'||false);//逻辑有值||false-->原值     100 'abc'

console.log(false||100,false||'abc');//原值    100 'abc'

console.log(100||true,'abc'||true);//原值     100 'abc'

3.逻辑非 ！

    !取反 !!转换为布尔类型

    返回true false

console.log(!10);//false

console.log(!10>20);//false

2.数据类型转换

1）boolean-->

        转换为boolean为false的值是 ‘’ 0 NAN null undefined  假性值

        ①  !!

        ②  Boolean()包装器

              ‘’   false   空字符串

  ' '   true  空格字符串

2）string-->

        ① +' '

        ② toString()，除了null和undefined，其余均有

        ③ String()包装器

3）number-->

        ① +  -  

        ② Number()包装器

3.对象

1.检测属性

1. in 检测自有属性或继承属性

console.log('name' in obj);//true

console.log('toString' in obj);//true

2. hasOwnProperty()检测自有属性，继承属性返回false

obj.hasOwnProperty('name');//true

obj.hasOwnProperty('toString');//false

3. propertyIsEnumerable() 检测自有属性，并且该属性是可枚举的

obj.propertyIsEnumerable("name");//true

obj.propertyIsEnumerable("toString");//false

4.instanceof  判断类型

obj instanceof Object//true

obj instanceof String//false

4.this

谁调用指向谁

1.单独使用this指代全局

浏览器中指window对象

node环境中指global对象

2.函数内使用this

函数的所属者默认绑定到this上

3.事件中的this

this指向接收事件的HTML元素

5.作用域

作用域是一个变量可以使用的范围

1.全局作用域

1）运行环境的全局 name=’zs’;

2）文件内的全局   var name=’zs’;

2.函数作用域

函数内的作用域

3.块级作用域

有花括号的地方(对象)

注意：ECMAscript不存在块级作用域，在循环体内部定义的变量在外部也能访问到

6.继承

继承：每个构造函数都有一个指向原型对象的指针prototype，原型中都有一个指回构造函数的指针constructor,而实例中都有一个指向原型对象的指针__proto__。

当原型对象等于另外一个类型的实例就是继承。

1.原型链继承

//将子构造函数的原型指向父类的实例

Dog.prototype=new Animal();

注意：console.log(dog);不打印Animal中的属性name,color等等

1. 原型和实例的关系

   ①instanceof

dog instanceof Dog//true

dog instanceof Animal//true

dog instanceof Object//true   超类Object

   ②isPrototypeOf()

//是否是该原型派生出来的对象

Object.prototype.isPrototypeOf(dog)//true

Animal.prototype.isPrototypeOf(dog)//true

   谨慎定义

   要把给原型（Dog)添加方法放在继承后面

2.经典继承

//继承Animal

Animal.call(this,name,age);

缺点：不能继承父类原型中的方法

3.组合继承

原型链继承实现原型属性和方法的继承

经典继承实现实例属性的继承

Dog.prototype=new Animal();

Animal.call(this,name,age);

7.数组

1.sort()参数的使用及其内部机制

  1）默认排序：arr.sort();该方法会调用每个数组项的toString() 方法，然后按照ASCII排序

  2）自定义排序：以比较函数作为参数

     function compare(v1,v2){

if(v1>v2){return -1;}

else if(v1<v2){return 1;}

else{return 0;}

}

arr.sort(compare)返回降序排序；如果升序排序就v1>v2返回正值，v1<v2返回负值

实现机制就是对数组进行两两比较，如果返回值是负值，顺序就互相调换，正值或者零就不变

8.数组类型的检测

    1）typeof

console.log(typeof arr);//object

    2）instanceof

//小-->大   当前变量是某个构造函数对应的原型链上吗

console.log(arr instanceof Array);//true

    3）isPrototypeOf

//大-->小  当前变量是否是我的子孙后代吗？

console.log(Array.prototype.isPrototypeOf(arr));//true

    4）isArray

console.log(Array.isArray(arr));//true

9.数组序列化

1）arr.toString()

默认情况下以逗号分隔字符串的形式返回数组项

2）arr.join();

使用指定的字符串来分割数组字符串

var arr=["terry","larry","boss"];

arr.jion("||");//terry||larry||boss

3）JSON

  ①JSON.stringify(obj); 序列化：  对象，数组-->string

  ②JSON.parse(jsonStr); 反序列化：  string-->对象，数组

10.变量和函数声明提升

1.变量声明提升

使用var声明的变量会提升到作用域最前面

2.函数声明提升

1.函数的提升会放在作用域的最顶部

2.有使用var声明的变量在函数提升之后进行变量提升

3.变量名和函数名重复

console.log(say);//[Function:say]

say();//say

function say() { console.log('say') };

//变量名与函数重名，后面的变量声明覆盖前面的函数，say不再是一个函数

var say = 'name';

console.log(say);//name

//say();//error!

3.两种函数定义方式提升的区别

1）函数声明

console.log(print);//[Function:print]

print();//print

function print(){console.log('print')}

2）函数表达式

console.log(foo);//undefined

foo();//不打印error!不能这样调用

var foo=function(){console.log('foo')};

11.值传递与引用传递

1）基本数据类型

   ①可以直接操作保存在变量中的实际的值

   ②参数传递的时候传递的是实际值

2）引用数据类型

   ①不能直接操作对象的内存空间，实际上是在操作对象的引用。可以为引用类型变量添加属性和方法，也可以改变和删除其属性和方法

   ②参数传递的时候传递的是引用地址

12.基本数据类型和引用数据类型的区别

基本数据类型：null,undefined,string,boolean,number

引用数据类型：Object,Function,Array等等

1）声明变量时的内存分配

①基本数据类型的值存储在栈中

②引用数据类型在栈内存中保存的是对象在堆内存中的引用地址

2）不同的访问机制

①基本数据类型的值可以直接访问到

②引用数据类型：首先在栈中得到这个对象在堆内存中的地址，然后按照地址获取对象中的值

3）复制变量时的不同

①基本数据类型：将原始值的副本赋值给新变量，它们有相同的值，但是它们是完全独立的

②把内存地址赋值给新变量，这两个变量都指向了堆内存中的同一个对象，相互影响

4）参数传递的不同

①基本数据类型：把变量的值传递给参数，参数和变量互不影响

②引用数据类型：把内存地址传递给参数

13.块级与行内元素区别

①块级独占一行，行内与其他元素共享一行
②块级元素可以直接设置宽高，行内不能直接设置宽高，需要结合display来设置
③块级元素可以嵌套块级与行内元素，而行内只能包含行内元素

14.清除浮动  父子级  兄弟级

父子级：
    1.在子集元素后添加一个无意义的空元素，设置clear:both;
    2.给父级元素设置overflow:hidden;
    3.父元素::after{
        content:"";
        display:block;
        clear:both;
        }
兄弟级：clear:left;清除左浮动元素带来的影响
              clear:right;清除右浮动元素带来的影响
              clear:both;清除左右两侧浮动元素带来的影响

15.水平垂直居中

1）margin-top,margin-left移动
2）父相对定位，子绝对定位，绝对定位top,left为50%，然后margin-top=-子元素的高度/2，margin-left=-子元素的宽度/2
3）父相对定位，子绝对定位，绝对定位top,right,bottom,left为0，margin:auto
4）父元素设置display:flex，且justify-content:center;align-items:center;

16.一个盒子在另一个盒子中水平居中的方法

1）margin:0 auto;
2）浮动布局
3）定位布局，父相子绝，绝对定位left为50%，margin-left=-子元素的宽度/2；
                       父相子绝，绝对定位right，left为0，margin:auto
4）弹性布局：父元素设置display:flex，且align-items:center;

17.文本在盒子中垂直居中的方法

1）单行文本：①固定高度：line-height等于盒子height
                 （如果要水平居中text-align:center;）
           ②未知高度：设置上下的padding值一样
2）多行文本：①display:flex    align-items:center
           ②定位布局，父相子绝，绝对定位top为50%，margin-top=-子元素的高度/2；

18.图片垂直居中的方法

背景法：background: url(1.jpg)  no-repeat  center  center;

7.数据类型转换
1）-->string
     ①+‘’
     ②toString()，除了null和undefined其他都有
     ③String()包装器
2）-->boolean
假性值：‘’0  NaN null  undefined转换为false
     ①！！
     ②Boolean()包装器
3）-->number
     ①+  -
     ②Number()包装器

19.对象

1）创建对象
①使用构造函数创建
var obj=new Object();
obj.name='zs';
obj.age=13;

②字面量
var obj={
      name:'zs',
      age:13,
      print:function(){
           console.log("print");
      }
}

2）访问
属性的访问：①对象名.属性名②对象名['属性名']
方法的访问：对象名.方法名;  返回function
        对象名.方法名();  方法的使用，执行函数内容

3）遍历
for(var key in obj){
    console.log(key+"--"+obj[key]);
  }
  // name--briup
  // age--12
  // salary--10000

4）删除，新增，修改
①删除：只能删除对象的自有属性
              delete 对象名.属性名 /delete 对象名['属性名']
              delete 对象名.方法名
②新增：对象名.新属性名=value
③修改：点表示法覆盖，重新赋值
              对象名.属性名 = value;

20.对象序列化

1）JSON.stringify(obj);    序列化：     对象，数组-->string        
2）JSON.parse(jsonStr);    反序列化：string-->对象，数组        

10.数组类型的检测
1）typeof
typeof arr
2）instanceof
arr instanceof Array
3）isPrototypeOf
Array.prototype.isPrototypeOf(arr)
4）Array
Array.isArray(arr)

21.数组序列化

1）arr.toString()
默认情况下以逗号分隔字符串的形式返回数组项
2）arr.join();
使用指定的字符串来分割数组字符串
var arr=["terry","larry","boss"];
arr.jion("||");//terry||larry||boss
3）JSON
  ①JSON.stringify(obj);    序列化：     对象，数组-->string        
  ②JSON.parse(jsonStr);    反序列化：string-->对象，数组

22.基本数据类型和引用数据类型的区别

基本数据类型：null,undefined,string,boolean,number
引用数据类型：Object,Function,Array等等
1）声明变量时的内存分配
①基本数据类型的值存储在栈中
②引用数据类型在栈内存中保存的是对象在堆内存中的引用地址
2）不同的访问机制
①基本数据类型的值可以直接访问到
②引用数据类型：首先在栈中得到这个对象在堆内存中的地址，然后按照地址获取对象中的值
3）复制变量时的不同
①基本数据类型：将原始值的副本赋值给新变量，它们有相同的值，但是它们是完全独立的
②把内存地址赋值给新变量，这两个变量都指向了堆内存中的同一个对象，相互影响
4）参数传递的不同
①基本数据类型：把变量的值传递给参数，参数和变量互不影响
②引用数据类型：把内存地址传递给参数

23.定位布局        

静态定位    position:static    不脱离文档流
相对定位    position:relative    不脱离文档流
绝对定位    position:absolute    脱离文档流    没有定位祖先的相对于浏览器视口左上角定位；有定位祖先的相对于定位祖先进行定位
固定定位    position:fixed    脱离文档流    相对于浏览器视口定位
粘性定位    position:sticky    不脱离文档流    没有定位祖先的相对于浏览器视口左上角定位；有定位祖先的相对于定位祖先进行定位

粘性定位
position:sticky;    配合top,left使用，不脱离文档流    
注意：需要粘性定位的元素的宽度不能超过其父元素宽度，否则失效

24.函数声明方式

1）函数声明
function 函数名（形参列表）{
    //函数体
}
函数名（实参列表）；
2）函数表达式
var 函数名=function（形参列表）{
    //函数体
}
函数名（实参列表）；

25.数组API

栈
1）push        尾部插入        要插入的元素    返回新数组长度newarr.length
2）pop        尾部删除        无参数        返回删除的项arr[length-1]
队列
3）unshift    头部插入        要插入的元素    返回新数组长度newarr.length    
4）shift        头部删除        无参数        返回删除的项arr[0]

5）sort
6）reverse

sort要用一个比较函数来排序
return a-b;升序
return b-a;降序

26.改变原数组的API

1.队列：①shift；②unshift
2.栈：①push；②pop
3.数组：splice
4.排序：①sort；②reverse；③sort(fcname)；

27.数据类型

基本数据类型：null  undefined  string  number  boolean
引用数据类型：Object  Function  Array  String  Number  Boolean...内置构造函数  自定义构造函数

28.闭包是什么，写一个简单的闭包

闭包：函数内部包裹函数，作用域链得不到释放，造成内存消耗
解决了在一个函数内部也有权限访问另一个函数内部的变量

优点：
        ①保护函数内的变量安全，实现封装，防止变量流入其他环境发生命名冲突
        ②在内存中维持一个变量，可以做缓存
        ③匿名执行函数可以减少内存消耗
缺点：
        ①作用域链得不到释放，造成内存消耗
        ②性能损失
解决方法：①置空null
     ②立即执行函数，创建函数后就立即执行，只执行一次（function（）{}）{}

29.原型和原型链

1）原型：显式原型prototype,又称为函数原型；隐式原型__proto__,又称为对象原型
2）prototype：Object构造函数中有一个prototype属性指向object原型，object原型中有一个指针constructor指回Object构造函数
3）__proto__：__proto__用于指向创建这个对象的Object构造函数的原型。如果要获取这个对象的属性或方法，先在自身属性或者方法上查找；如果找不到就通过__proto__向上寻找，由此形成原型链

30.作用域

作用域是一个变量可以使用的范围
①全局作用域指window     运行环境的全局，文件内的全局
②函数作用域指函数内
③块级作用域指有花括号的地方（对象）

31.this

谁调用指向谁
1）单独使用this，全局
  浏览器中  window对象
  node  global对象
2）函数中使用this
  在函数中，函数的所属者默认绑定到 this 上
3）事件中的 this
  在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素

32.call、apply和bind

call apply改变this指向
1）.call(执行环境对象,实参列表);
2）.apply(执行环境对象,实参列表数组);
3）.bind(执行环境对象)(实参列表);