JS高级. 01 复习JS基础

2018-06-24 00:31:54来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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. 值类型做函数的参数
    1. 函数内部的变量,也就是形参和实参只是简单的赋值操作,两个数据独立储存
    2. 在函数内部对形参进行修改,不会影响外面的值
  5. 引用类型做函数的参数
    1. 是把实参存储的地址赋值给了形参,在函数内部,形参同样指向该对象
    2. 所以在函数内部对该变量进行修改,会修改外部的值
    3. 如果在函数内创建对象,修改一个值不会影响另外一个.两个独立存在  
  6. 引用类型中除了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操作

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;background-color: #f00;margin: 0 auto;'></div>")

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS图片赖加载例子

下一篇:angular4.0的优势