7.18 JS

xxxcc
256 阅读6分钟

1. 条件语句

二路选择

    var a = window.prompt('请输入年龄');
    if ( a <18 ){
        console.log('青少年');
    }
    else if (a>=18&&a<40) {
        console.log('中年');
    }
    else{
        console.log('中老年');
    }

多路选择

    switch(true) {
        case age<18:
            console.log('青少年');
            break;
        case (a>=18&&a<40:
            console.log('中年');
            break;
        default:
            console.log('中老年');
    }

2. 循环

for / while / do while

  • do while 至少会执行一次
  • while 可能一次都不执行

3. 数组

  • toString()把数组转换为数组值（逗号分隔）的字符串
  • join() 方法也可将所有数组元素结合为一个字符串 可以规定分隔符：
  • concat 连接返回新数组
  • push 数组末尾添加 返回数组长度
  • pop 删除数组末位 返回删除前末位
  • shift 删除数组末首 返回删除前首位
  • unshift 在数组最初位置添加 返回数组长度
  • slice (start,end) 截取数组 不包括end
  • slice 负数从后算起 原数组不变
  • splice（start numner ）向数组添加或删除 改变原始数组 返回删除的数组
  • reverse 颠倒顺序 会修改原数组
    var b=[1,2,3];
    b.reverse();
    console.log(b);
  • sort对数组元素排序 sort（函数）会修改数组
    var b1 = ['11','12','24','2','3'];
    function s1(a,b) {
        return a-b ; 升序排列
        return b-a ; 降序排列
    }

4. 对象

定义一个对象

    var obj1 = {};
    var obj2 = new Object();
    Object.create();

获取属性 访问对象属性的语法是：

    var person = {fname:"Bill", lname:"Gates", age:62}; 
    objectName.property           // person.age
    objectName["property"]       // person["age"]
    objectName[expression]       // x = "age"; person[x]

    var person = {fname:"Bill", lname:"Gates", age:62}; 
    for (x in person) {
        console.log(person[x])
        console.log(x);
    }

5. 区分数组对象

  • prototype 下有 constructor （判断数组/对象）表构造函数
    a.constructor
  • arr instanceof Array 判断是数组还是对象 数组返回true

6. 字符串

  • indexOf() 返回字符串中指定文本首次出现的索引（位置）

    如果未找到文本返回 -1。

  • lastIndexOf() 返回指定文本在字符串中最后一次出现的索引

    如果未找到文本返回 -1。

  • search() 搜索特定值的字符串，并返回匹配的位置

  • slice(start，end) 提取字符串的某个部分并在新字符串中返回被提取的部分。

    如果某个参数为负，则从字符串的结尾开始计数。

    如果省略第二个参数，则该方法将裁剪字符串的剩余部分

    var str = "Apple, Banana, Mango"; 
    var res = str.slice(-13,-7);

  • substr(start，length) 不同之处在于第二个参数规定被提取部分的长度。

    如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。

    如果首个参数为负，则从字符串的结尾计算位置。

  • replace() 用另一个值替换在字符串中指定的值：

    str = "Please visit Microsoft!";
    var n = str.replace("Microsoft", "W3School");
  • toUpperCase() 把字符串转换为大写
  • toLowerCase() 把字符串转换为小写
  • concat() 连接两个或多个字符串
  • charAt() 返回字符串中指定下标（位置）的字符串
  • charCodeAt() 返回字符串中指定索引的字符 unicode 编码

7. 类

  • 具有相同属性和方法的集合（构造方法/构造函数） 首字母大写
  • 属性写在构造函数 方法写在原型（prototype）
    String.prototype.functionname = function(){}
  • 原型中方法被实例化对象所共享
  • prototype 下有 construction （判断数组/对象）表构造函数

8. 事件冒泡 事件捕获

事件冒泡

  • 事件传播从里向外

事件捕获

  • 事件传播从外向里

  • addEventListener('事件',function(){},false) 监听事件

  • 可以给元素绑定多个相同事件，最后参数false事件冒泡,true事件捕获

事件委托

  • 利用事件冒泡 动态添加的元素，无法在已进入页面时绑定事件，把事件绑定在已存在的父元素上

9. 计时器

  • setInterval （function（）{}，time）每隔多久执行一次
  • setTimeout （function（）{}，time） 多久后执行一次
  • clearInterval（timer）清除定时器 timer返回number类型 （第几个定时器）
  • clearTimeout （timer）清除定时器 timer返回number类型 （第几个定时器）
  • timer = 0 执行完主线程程序后立即执行定时器

10. 闭包

  1. 外部函数有内部函数

  2. 内部函数会使用外部函数里的局部变量

  3. 优点：

    闭包内的变量不会被垃圾回收机制处理掉，一直存在内存中

    可以拿到索引值

    <script>
    var aLi = document.getElementsByTagName('li');
    for(var i = 0 ; i<aLi.length ;i++){
        (function(j){
            aLi[j].onclick = function (){
                console.log(j);
            }
        })(i)
    }
  1. 缺点： 会造成内存泄露

11. 函数的立即调用

    (function(){
        //code
    })();
    
    (function(){
        //code
    }());

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

  1. 基本数据（原始数据）类型指的是简单的数据段，而引用数据类型则指的是由多个值构成的对象。

  2. 基本数据存储在栈（stack）中，是按值访问的，因为可以直接操作保存在变量中的实际值

  3. 引用数据类型是保存在堆（heap）中的对象与其他语言不同，不能直接访问堆内存中的位置和操作堆内存空间，只能操作对象在栈内存中的引用地址.

  4. 复制变量时的不同 原始值： 在将一个保存着原始值的变量复制给另一个变量时，会将原始值的副本赋值给新变量，此后这两个变量是完全独立的，他们只是拥有相同的value而已。

    引用值： 在将一个保存着对象内存地址的变量复制给另一个变量时，会把这个内存地址赋值给新变量，也就是说这两个变量都指向了堆内存中的同一个对象，他们中任何一个作出的改变都会反映在另一个身上。（这里要理解的一点就是，复制对象时并不会在堆内存中新生成一个一模一样的对象，只是多了一个保存指向这个对象指针的变量罢了）。

13. this

  1. 函数中 this是 window
  2. 定时器(window对象下的方法) this是 window
  3. 对象 this是当前对象
  4. 构造函数 this 是实例化对象
  5. 事件绑定 this 绑定事件的那个dom对象
  6. 改变this

    • call( ) 方法 改变指针 第一个参数是一个要改变指针的对象，后面的参数是方法需要的参数

    • apply( ) 方法 改变指针 第一个参数是一个要改变指针的对象第二个参数时一个数组，数组里是方法的参数

    • bind( ) 方法 改变指针 第一个参数是一个要改变指针的对象，后面的参数是方法需要的参数

    • call 和 apply 会自动调用方法 bind需要手动调用方法

    f1.call(oDiv,22,33);
    f1.apply(obj,[1,2]);
    f1.bind(oDiv,22,33)();
avatar
文章
阅读
粉丝