寒假青训营---js

82 阅读8分钟

JavaScript重点

浏览器执行过程

1.渲染引擎:内核,用来渲染HTML和CSS;

2.JS引擎:执行JavaScript代码的

数据类型

JavaScript是一种弱类型的语言,变量在申明是不会标注类型,但是在程序执行过程中,会自动确认。相同的变量课用于不同的类型。根据不同的数据存储大小来确定数据类型。

简单数据类型

tip:(typeof num)来检测数据类型

  • Number:整型和浮点型,还包含Infinity,-infinity,NaN,八进制前边加0,十六进制前边加0x。Number.isNaN();
  • String:
  • Undefined:声明变量没有赋值的默认undefined;undefined+1/true---> NaN
  • Null:空值 null+1/true--->1
  • Undefined Null的区别就是Undefined 在声明之后并不知道是什么数据类型,但是null本身的空间就是空的。
  • Boolean:参与加法运算,true代表1,flase代表0;

复杂数据类型

  • object

运算符两侧保留一个空格

  • 算数运算符:+-*/% 避免小数进行运算有精度问题

  • 递增递减运算符++ -- 前置递增先自加在返回值 后置递增 先返回原值在自加如果单独只用效果是一样的

  • 比较运算符 < > >= <= == (默认会转型) != === !== 要求值和数据类型完全一样 返回布尔值

  • 逻辑运算符:进行布尔值计算的运算符,返回的结果也是布尔值 && || ! 逻辑中断:逻辑与短路运算若前一个为真则返回与运算后边的一项,若前边为假则返回第一项;逻辑或逻辑运算:若表达式1为真则返回表达式1,若表达式1为假则返回表达式2;

  • 赋值运算符:= += -= *= /= %=

    流程控制

  • 顺序结构:代码先后顺序,依次执行

  • 分支结构:if语句 switch语句(全等的才行===) 要加上break

  • 循环结构:for while(做一些复杂的条件判断) do... while 关键字continue:跳出本次循环 继续执行其他循环 break跳出循环不再执行

JavaScript 函数

定义:就是封装一段可以被重复调用执行的代码块, 可以实现大量代码的重复使用。利用函数关键字来声明函数

  • 声明函数(命名函数)
  • 函数表达式(匿名函数)

JavaScript的作用域和预解析

arguments

只有函数有arguments对象,都内置好了这个属性

定义:arguments是函数的一个内置对象,用来存放所有的实参,所有函数都内置一个arguments对象。是一种伪数组:1.具有数组的length属性2.按照索引的方式进行索引的3.没有数组的方法。

作用域

定义:代码名字(变量)在某个范围内的起作用和效果,提高代码可靠性,减少命名冲突。

  • 全局作用域
  • 局部作用域:在函数内部就是局部作用域,函数的形参也可以看成局部变量;全局变量只有在浏览器关闭得时候 才会销毁。
  • 块级作用域:{}中的叫做块级作用域。

作用域链

内部函数可以访问外部函数得变量,采取链式查找得方式,决定取那个值。采取就近原则

预解析

js解释器:1.预解析2.代码执行

定义:js引擎会把js中得所有var和function提到当前作用域得最前端。

预解析:

1.变量提升:将所有变量声明提升到当前作用域得最前端,不提升赋值操作。

2.函数提升:就是把所有的函数声明提升到当前作用域得前边,但是不执行。

内置对象

内置对象是JS语言自带的一些对象,是一些最基本的功能。

Math

Math是一个静态属性,可以直接使用。

  1. random()
  2. floor
  3. max
  4. min
  5. ceil
  6. Pi
  7. ....

Date

Date是一个构造函数在使用时要使用new关键字

  1. getFullYear()
  2. getMonth()
  3. getDate()
  4. getDay()
  5. getHours()
  6. ....

获得距离某一时间的毫秒数,用毫秒数来计算

实例化之后使用valueOf() getTime() +new Date() Date.now()

数组

  1. 判断是否为数组的 instanceof
  2. Array.isArray()

push unshift处理完毕后返回的是新数组的长度,原数组也会发生变化

pop shift 处理完毕后返回的是删除元素,原数组会改变

数组排序

  1. reverse()
  2. sort()改变原数组
  3. indexof()
  4. lastindexof()
  5. 数组转化成字符串toString() join()
  6. concat()连接多个数组,不影响原数组
  7. slice()截取数组形成新数组,返回一个新数组
  8. splice()数组中删除几个数
  9. foreach()遍历数组
  10. filter()也是遍历数组,但是返回的是一个新数组
  11. some()用于检测数组中的元素是不是复合规定,返回Boolean值,会终止迭代。效率更高。
  12. 扩展运算符...ary,应用于合并数组上还可以将伪数组变成真正的数组。
  13. from():将类数组或者可遍历对象转化为真正的数组,返回真正的数组,还可以接受第二个参数,作用类似 于数组中的map方法,用来对每个元素进行处理,将处理的值放进数组返回,第二参数是一个方法。
  14. find():查找第一个符合条件的成员,没有返回undifined ,接受一个函数作为参数。
  15. findindex():查找第一个符合条件的索引,没有返回-1 ,接受一个函数作为参数。
  16. includes():用来检测数组是否包含给定值,返回布尔值 通过原型对象的方式可以添加内置对象的一些方法,内置对象的本质就是在原型上已经添加好了这些方法,并通过原型链的方式进行调用。

字符串对象

基本包装类型:将简单数据类型包装成复杂数据类型,是的基本数据类型就有了属性和方法。

  1. indexOf('', index)
  2. lastindexOf()
  3. charAt(index)
  4. charCodeAt(index)
  5. str[index]
  6. concat()
  7. substr(start,length)
  8. slice(start, end)
  9. substring(start,end)
  10. replace("被替换字符","替换字符")
  11. split("分隔符")将字符串转化为数组
  12. toUpperCase()转换大写toLowerCase()转换小写
  13. starsWith():表示参数字符串是否在原字符串的头部,返回布尔值;
  14. endsWith():表示参数字符串是否在原字符串的尾部,返回布尔值;
  15. repeat():表示将原字符串重复n次,返回新的字符串;
  16. trim()去除字符串两端的空白字符,返回一个新的字符串。不会影响中间的空白字符。

面向对象

  1. 封装性
  2. 继承性:estends
  3. 多态性:

对象是一组无序的相关的属性和方法的集合,所有的事物都是对象

ES6 class没有变量提升所以要先有类的定义在实例化 里边共有的属性和方法一定要加this constructor()是类的构造函数(默认方法)用于传递参数返回实例对象,自动调用该方法。

super()关键字是用来调用父类中的构造函数,也可以调用父类中的普通函数,继承特性先在子类中搜索,在在父类中搜索。必须在子类this之前调用。

constructor里面的this指向的是实例对象,而方法中的this指向的是调用者,如果冲突可以在全局变量中定义一个that是的that指向实例对象。

class Father{
    constructor(x,y){
        this.x;
        this.y
    }
    sum(){
        this.x + this.y
    }
}
class Son estends Fsther{
    constructor(x,y){
        //super放在子类this之前声明应为只由继承了父类的x,y才能使用父类的sum()函数。
        super(x,y);
        this.x;
        this.y;
    }
    subtract(){
        this.x - this.y;
    }
}

改变this指向

  1. call()本身它是函数的调用方法,fn.call(this,参数,参数);但是其括号中的参数可以改变this的指向。call的作用可以用来实现构造函数的继承。
  2. bind()不调用函数,但是可以改变this指向,返回由指定的this值和初始化参数改造的原函数拷贝。相当于产生一个新函数。应用场景是如果有函数我们不需要立刻调用,但是又想改变该函数的this指向,就需要用到bind,定时器函数的this指向window,普通函数的this也是指向window
  3. apply()也是用来调用函数的,但是在传参过程中要求参数是包含在数组中的。打印的却是数组中的类型格式。用于处理数组中的一些操作。

闭包

定义:闭包是有权访问另一个函数作用域中的变量的函数。

作用:延申变量的作用范围

function fun(){
    let num = 10;
    function fn(){
        console.log(num);
    }
    return fn;
    //或者直接返回匿名函数
    return function(){
        console.log(num);
    }
    
}
let f = fun();
f();//10
//说明有闭包的产生。闭包指向被调用变量函数

拷贝

浅拷贝

浅拷贝只是拷贝一层,更深层次的对象级别只拷贝引用.Object.assign(target,sourse)

深拷贝

深拷贝拷贝多层,每一级的数据都拷贝。通过递归函数来进行不同数据类型的遍历,将不同的数据类型进行复制。

function deepCopy(newobj, oldobj){
    for(var k in oldobj){
        var item = oldobj[k];
        if(item instanceof Array){
         newobj[k] = [];
         deepCopy(newobj[k], item);
        }else if(item = Object){
         newobj[k] = {};
         deepCopy(newobj[k], item);
        }else{
            newobj[k] = item;
        }
    }
}

正则表达式

定义:是用于匹配字符串中字符组合的模式,再JavaScript中正则表达式也是对象;正则表达式里面不需要加引号,不论是数字还是字符串型;可以使用.test()来进行验证测试。

  1. 用作输入框的匹配
  2. 敏感词的替换
  3. 从字符串中获取特定的部分(提取)
//通过RegExp来创建正则表达式
var regexp = new RegExp(/o/);
//通过字面量来创建,必须由反斜杠开始
var rg = //