JS高级. 01 复习JS基础

1. JavaScript 包含: ____, ____, 和 ____.
2. JavaScript 的基本类型有 ____, ____, 和 ____. 3. JavaScript 的复合类型有 ____, ____, ____, ____, ____, ____, 和 ____. 还有两个核心类型: ____ 和 ____. 4. JavaScript 还有两个空类型: ____ 和 ____. 5. JavaScript 中获得类型的运算符是 ____. 使用该运算符返回的结果是什么类型? ____. 6. JavaScript 中 === 和 == 有什么区别? ____. 7. JavaScript 中 in 运算符有什么用? ____. 8. JavaScript 的关系运算符是: ____. 9. JavaScript 中创建对象使用 ____ 运算符. 10. 什么是引用类型, 什么是值类型? ____. 11. JavaScript 什么叫逻辑中断: ____. 12. JavaScript 中 delete 运算符的作用是 ____. 13. JavaScript 中循环语句有 ____ 种. 分别是: ____, ____, ____, 和 ____. 14. JavaScript 中分支语句有 ____ 种. 分别是: ____, ____. 15. JavaScript 中跳转语句 break 与 continue 如何使用? ____.

JavaScript  包含三大部分：

　　ECMAScript： 规定js的语法规范

　　DOM：Document Object Model ： 提供了一套完整的操作页面元素api

　　BOM：Browser Object Model ：浏览器对象

JS基本类型

d)  string\boolean\number

复杂数据类型(引用类型):

1. Array Date Obeject RegExp String Boolean Number
2. 核心类型Object function
3. 获取数据类型typeof()
   1. (typeof是个关键字)
   2. (返回值是字符串)
   3. typeof 变量名;
4. 首字母大写的是函数
5. 空类型
6. null:
   1. 变量不可能为null值,除非手动设置
   2. 解除对象的占用的时候给对象赋值null
7. undefined:定义之后未赋值

===和==的区别

===:类型和数值必须全等

==:数值相等即可

in关键字

1. 用法一
   1. for…in:变量对象的键
   2. for(var 变量;in 对象名)
   3. 对象的键名为字符串类型
2. 用法二
   1. 判断属性(数值就是索引值)是否存在对象中
   2. ‘关键字’ in 对象名

a)  判断关键字是否在关键字

b)  返回值是boolean类型

1. 用法三
   1. 判断数组是否存在某个键      
   2. in关键字判断数组的时候是判断索引是否存在,而不是值
   3. 如何判断数组中是否存在指定的值
      1. indexOf
      2. ar.indexOf(要查找的值)
      3. 找到返回指定元素的索引值,
      4. 没有找到返回-1

console.log(3 in arr );      // 判断数组中是否有3这个索引值
console.log(arr.indexOf('b')); //  判断数组中是否含有'b'这个值

关系运算符:> < >= <= =

创建对象使用new对象

a)  var obj = new Date();

b)  GMT:格林尼治标准时间

c)  UTC:世界协调时间

类型

1. 值类型

　　　　a)  储存的就是数据本身的变量   就是值类型数据

　　2.  引用类型Object

1. 1. 　　储存的是数据在内存中的地址,数据类型在内存中单独储存 就是引用类型数据
2. 函数调用时,默认将实参赋值给形参
3. 形参没有具体的数值
4. 看到对象字面量和{大括号}才会创建新对象
5. 值类型做函数的参数
   1. 函数内部的变量,也就是形参和实参只是简单的赋值操作,两个数据独立储存
   2. 在函数内部对形参进行修改,不会影响外面的值
6. 引用类型做函数的参数
1. 是把实参存储的地址赋值给了形参,在函数内部,形参同样指向该对象
2. 所以在函数内部对该变量进行修改,会修改外部的值
3. 如果在函数内创建对象,修改一个值不会影响另外一个.两个独立存在　　
7. 引用类型中除了function 都是object 类型

var obj = {
    num:5
};
console.log(obj); //输出num的值是5
function num(number) {
    number.num = 100;
    number = {
        num:15555   //函数内创建的对象和函数外的互不影响
    }
    return number;
}
num(obj);
console.log(obj);//输出num的值是100

对象的动态特效

1. 对象的动态特性是指,在对象创建出来之后,为对象添加新的属性或者方法
   1. obj.satHello = function(){方法;}
   2. obj.xxx = yyy;
      1. 如果xxx存在,是进行修改
      2. 如果xxx不存在,是添加属性或者方法
2. obj.[”属性名”]:可以用这种方法取值,也可以新增属性或者方法
3. obj[0] = ‘oooo’;可以添加成功,因为这里会进行一个隐式转换
   1. [ ]内的值会被隐式为转换字符串类型
   2. 把对象{}转换层字符串object object
4. 动态添加属性/方法
   1. obj.新属性 = 新值
   2. obj[新属性] = 新值

/**
 * 对象的动态特性
 *      在创建一个对象之后,可以给对象追加属性和方法
 */
var prople = {
    name:'jack',
    age:18
}
console.log(people); // 输出那么 和age 两个属性
people.sex = '男'; // 追加属性
prople.sayHallo = function () { // 追加方法
    console.log("我叫jack");
}
console.log(prople);  //输出追加后的对象,name age sex 三个属性和sayHallo这个方法
prople.sayHallo();  //输出  我叫jack

prople['height'] = 180;
console.log(prople);//输出追加后的对象,name age sex height四个属性和sayHallo这个方法

逻辑中断(短路运算)

　　true   ||　false　　// 返回true

　　false  ||  true／false     // 返回true／false

　　　　表达式一　　||　　表达式二　 

　　　　　　　　1为真  返回1

　　　　　　　　1为假 返回2

　　true && false.  //. 返回false       第一个真。返回第2个

　　false && true   //. 返回false。 第一个假 返回第1个　

　　　　　表达式一　　||　　表达式二

　　　　　　　　1为真 返回2

　　　　　　　　1为假。返回1

delete运算符的作用

　　

1. 用来删除对象的属性,还有删除未使用var声明的变量
2. 不能删除实用var声明的变量
3. 删除一个不存在的属性,也会删除成功

　　　　a)  delete 对象名.对象属性名;

　　4.  返回值是删除是否成功false/true

　　5.  如果删除的属性存在与原型中,返回true,但是并未删除

循环语句

1. for
   1. 跳出循环:continue
2. while
3. do…while
4. for…in

分支语句

　　　  if…else

　　　  swith…case

函数

  函数声明

　　function name(){}

  函数表达式

1. 在使用函数表达式声明函数的时候,function后面可直接跟函数名(name)
2. var fn = function name(){}
3. 但是这个函数名(name),直线在函数内部使用,外部无法访问
4. var fn = new Function(“”)
5.  
   

   //解析会被提前
   function name(){
      //函数体
   }
   //解析不会被提前,使用必须在定义之后
   var fun0 = function () {
       //函数体
   }
   //解析不会被提前,使用必须在定义之后
   //创建一个函数对象
   var fun = new Function("");//函数体放 引号中间
   //创建一个匿名函数
   var a= (function (){/*函数体*/})();  //创建完毕直接调用

   

Dom操作

1. 增

a)  document.createElement

b)  appendChild

　　2.  删

a)  removeChild

　　3.  改

a)  style

b)  id

c)  className

d)  innerHTML

e)  innerText

f)  ...

　　4.  查

a)  getElementById

b)  getElementsByTagName

c)  getElementsByClassName

异常处理

捕获语句:try catch finally

try{
        // 可能出现的代码 
        // 无法捕获语法错误
}
catch(e){
        //出现错误后执行的代码    
}
finally {
        // 必然会执行的代码
        // node.js
       // 一般做释放资源的操作
}

异常最大的特征： 出现异常之后，后面的代码将不会执行

手动抛出异常

　　1· 使用throw 关键字

　　2·错误代码（编号），错误信息

　　3·throw 可以在外部定义

try{
    a();
}catch(e){
    // console.log(e);
    // e 是错误信息
                
    throw( 'a() 是一个未定义的函数)' );
    // throw( e )相当于不写这个异常处理函数；
    // throw() 手动抛出异常，括号内写抛出的自定义信息
}
finally {
    console.log("这里的一定会执行") ;
}

面向对象

1、什么是对象！！！！
万物皆对象

2、对象的特征
对象的特征就是用来描述对象的相关信息
、比如一个人对象，特征就有：name age gender height

3、对象的行为
对象行为就是描述对象的行为
比如一个人对象，行为就有：吃 跑 跳 睡 唱 抽烟 喝酒 烫头

4、在JS当中 什么是对象？
键值对儿的组合就是

5、现实生活中的对象的特征对应到JS当中是对象的属性！

6、现实生活中的对象的行为对应到JS当中就是对象方法！

createElement(‘div’):创建一个div

面向对象是对面向过程的封装

　　a)  封装的意义就是复用

编写代码规则DRY

　　a)  don’t repeat yourself

使用函数封装带来的问题：

　　1.全局变量污染
　　2.代码结构不够清晰，维护不方便

使用对象进行封装后的优势
　　1.暴露在全局的只有一个对象名 不会造成全局变量污染
　　2.使用对象将代码进行功能模块的划分，有利于日后的维护

　　

function createEle(box) {
    var ele = document.createElement('div');
    ele.style.width = '100px';
    ele.style.height = '100px';
    ele.style.backgroundColor = '#f00';
    ele.style.margin = '0 auto';
    box.appendChild(ele);
}

使用对象进行封装。 对象封装

var obj = {
    jQy: {
        Id: function (ele) {
            return document.getElementById(ele);
        },
        Class: function (ele) {
            return document.getElementsByClassName(ele)[0];
        }
    }
}

jQuery 中 创建对象 直接添加即可

$('body').append("<div style='width: 100px;height: 100px;margin: 0 auto;'></div>")