Js经典知识点概括

438 阅读9分钟

let、var、const的区别

  • var声明的变量会挂载在window上,而let、const声明的变量不会
  • var声明变量存在变量提升,let和const不存在变量提升
  • let和const声明形成块级作用域,var变量提升不会形成作用域
  • 同一作用域下let和const不能声明同名变量,而var可以
  • var和let可以修改声明的变量,const不可以
  • const定义的变量时必须初始化
  • let、const存在暂时性死区

js数据类型

数据类型分为两种:基本数据类型和对象类型(即引用数据类型);

js常用的基本数据类型包括undefined、null、number、boolean、string;

存储在栈内存中的简单数据段,数据大小确定,内存空间大小可以分配,是直接按值存放的,所以可以直接访问。基本数据类型值不可变。

js的引用数据类型也就是对象类型Object,比如:Object、array、function、data等

引用类型是存放在堆内存中的,变量实际上是一个存放在栈内存的指针,这个指针指向堆内存中的地址。每个空间大小不一样,要根据情况进行特定的分配。

ES6 新加的原始类型:Symbol

它的功能类似于一种标识唯一性的ID。通常情况下,我们可以通过调用Symbol()函数来创建一个Symbol实例:

let s1 = Symbol()

typeof s1 //Symbol(检测数据类型)

var sym = new Symbol(); // TypeError

谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。

基础数据类型与引用数据类型

  • 基础类型的数据在被引用或拷贝时,是值传递,也就是说会创建一个完全相等的变量。

  • 引用类型只是创建一个指针指向原有的变量,实际上两个变量是“共享”这个数据的,并没有重新创建一个新的数据。

函数声明和函数表达式的区别

函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明。

函数表达式 var fnName = function () {…};使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式。

函数声明和函数表达式区别:

  • Javascript引擎在解析javascript代码时会‘函数声明提升'(Function declaration Hoisting)当前执行环境(作用域)上的函数声明,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式。
  • 函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以fnName()形式调用 。

事件冒泡

事件队列:js的执行是单线程的,当遇到window的setTimeoutsetInterval这样的异步任务时,js不执行这些回调,而是继续执行其他js脚本,等待所有js脚本都解析执行完了,在执行回调。

js中的事件的三个阶段:捕获、目标、冒泡

  • 冒泡型事件的基本思想是:按照从特定的事件目标开始到最不确定的事件目标。

  • 捕获型事件的基本思想是:事件传递由最确定的元素开始

事件冒泡:当触发一个节点的事件时,会从当前节点开始,依次触发其祖先节点的同类型事件,直到DOM根节点。(从下往上)

事件捕获:当触发一个节点的事件时,会从DOM根节点开始,依次触发其祖先节点的同类型事件,直到当前节点自身。(从上往下)

什么时侯事件冒泡?什么时候事件捕获?

(1) 当使用document.addEventLister绑定事件,第三个参数传为true时表示事件捕获

(2) 除此之外的所有事件绑定均为事件冒泡

事件委托

定义:利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

原理:利用冒泡的原理,把事件加在父级上,触发实现效果。

好处:提高性能,减少内存消耗,减少dom节点的操作次数

适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。

如何阻止冒泡?

w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true。例如: window.event? window.event.cancelBubble = true : e.stopPropagation();

return false也可以阻止冒泡。

继承

继承的核心思想:

继承主要是依靠原型链实现的,原型链是通往继承的必经之路。

想要实现子类的继承,先建一个父类。

// 建立父类

function People(name){
  //属性
  this.name  = name || Annie
  //实例方法
  this.sleep=function(){
    console.log(this.name + '正在睡觉')
  }
}
//原型方法
People.prototype.eat = function(food){
  console.log(this.name + '正在吃:' + food);
}

内置对象

JS中常用的内置对象:Array对象、Date对象、正则表达式对象、string对象、Global对象

Array对象中常用方法:

concat()     表示把几个数组合并成一个数组

join()      设置分隔符连接数组元素为一个字符串

pop()      移除数组最后一个元素

shift()      移除数组中第一个元素

slice(start,end) 返回数组中的一段

splice()     可以用来删除,可以用来插入,也可以用来替换

push()     往数组中新添加一个元素,返回最新长度

sort()      对数组进行排序

reverse()    反转数组的顺序

toLocaleString()   把数组转换为本地字符串

array对象属性:

length       表示取得当前数组长度 (常用)

constructor     引用数组对象的构造函数

prototype     通过增加属性和方法扩展数组定义

Global对象 全局属性和函数,可用于所有内建的JavaScript对象

escape()     对字符串编码

eval()       把字符串解析为JavaScript代码并执行

isNaN()      判断一个值是否是NaN

parseInt()    解析一个字符串并返回一个整数

parseFloat()   解析一个字符串并返回一个浮点数

number()     把对象的值转换为数字

string()     把对象的值转换为字符串

正则表达式对象

语法 1

re = /pattern/[flags]

语法 2

re = new RegExp("pattern",["flags"])

re         为将要赋值正则表达式模式的变量名

pattern      为正则表达式

flags       为标记:有如下3种

1:g(全文查找)

2:i(忽略大小写)

3:m(多行查找)

当预先知道查找字符串时用语法 1。当查找字符串经常变动或不知道时用语法 2,比如由用户输入得到的字符串。

String对象

charAt()          返回指定索引的位置的字符

indexOf()          从前向后检索字符串,看是否含有指定字符串

lastIndexOf()        从后向前检索字符串,看是否含有指定字符串

concat()          连接两个或多个字符串

match()         使用正则表达式模式对字符串执行查找,并将包含查找结果最为结果返回

replace()         替换一个与正则表达式匹配的子串

search()          检索字符串中与正则表达式匹配的子串。如果没有找到匹配,则返回 -1。

slice(start,end)     根据下表截取子串

substring(start,end)   根据下表截取子串

split()           根据指定分隔符将字符串分割成多个子串,并返回素组

substr(start,length)    根据长度截取字符串

toUpperCase()       返回一个字符串,该字符串中的所有字母都被转化为大写字母。

toLowerCase()       返回一个字符串,该字符串中的所有字母都被转化为小写字母。

Math对象

ceil()    向上取整。

floor()    向下取整。

round()   四舍五入。

random()  取随机数。

Date对象

getDate函数:      返回日期的“日”部分,值为1~31。

getDay函数:       返回星期,值为0~6,0表示星期日。

getHours函数:      返回日期的“小时”部分,值为0~23。

getMinutes函数:     返回日期的“分钟”部分,值为0~59。

getMonth函数:      返回日期的“月”部分,值为0~11。

getSeconds函数:     返回日期的“秒”部分,值为0~59。

getTime函数:      返回系统时间。

getTimezoneOffset函数: 返回此地区的时差(当地时间与GMT格林威治标准时间的地区时差),单位为分钟。

getYear函数:      返回日期的“年”部分。返回值以1900年为基数,如1999年为99。

parse函数:       返回从1970年1月1日零时整算起的毫秒数(当地时间)

setDate函数:      设定日期的“日”部分,值为0~31。

setHours函数:      设定日期的“小时”部分,值为0~23。

setMinutes函数:     设定日期的“分钟”部分,值为0~59。

setMonth函数:      设定日期的“月”部分,值为0~11。其中0表示1月,...,11表示12月。

setSeconds函数:     设定日期的“秒”部分,值为0~59。

setTime函数:      设定时间。时间数值为1970年1月1日零时整算起的毫秒数。 setYear函数:      设定日期的“年”部分。

toGMTString函数:    转换日期成为字符串,为GMT格林威治标准时间。

setLocaleString函数:   转换日期成为字符串,为当地时间。

UTC函数:        返回从1970年1月1日零时整算起的毫秒数(GMT)。

垃圾回收机制

内存泄漏(Memory Leak)是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。

常用的几种GC(垃圾回收)算法

  • 引用计数法
  • 标记清除算法 (1) 标记阶段:把所有活动对象做上标记。 (2)清除阶段:把没有标记(也就是非活动对象)销毁。
  • 复制算法

执行上下文

执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念, JavaScript 中运行任何的代码都是在执行上下文中运行。

执行上下文的生命周期包括三个阶段:创建阶段→执行阶段→回收阶段,我们重点介绍创建阶段。

创建阶段(当函数被调用,但未执行任何其内部代码之前)会做以下三件事:

  • 创建变量对象:首先初始化函数的参数arguments,提升函数声明和变量声明。

  • 创建作用域链

  • 确定this指向

请指出document.onload和document.ready两个事件的区别

页面加载完成有两种事件:

一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),

二是onload,指示页面包含图片等文件在内的所有元素都加载完成。