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是一个静态属性,可以直接使用。
- random()
- floor
- max
- min
- ceil
- Pi
- ....
Date
Date是一个构造函数在使用时要使用new关键字
- getFullYear()
- getMonth()
- getDate()
- getDay()
- getHours()
- ....
获得距离某一时间的毫秒数,用毫秒数来计算
实例化之后使用valueOf() getTime() +new Date() Date.now()
数组
- 判断是否为数组的 instanceof
- Array.isArray()
push unshift处理完毕后返回的是新数组的长度,原数组也会发生变化
pop shift 处理完毕后返回的是删除元素,原数组会改变
数组排序
- reverse()
- sort()改变原数组
- indexof()
- lastindexof()
- 数组转化成字符串toString() join()
- concat()连接多个数组,不影响原数组
- slice()截取数组形成新数组,返回一个新数组
- splice()数组中删除几个数
- foreach()遍历数组
- filter()也是遍历数组,但是返回的是一个新数组
- some()用于检测数组中的元素是不是复合规定,返回Boolean值,会终止迭代。效率更高。
- 扩展运算符...ary,应用于合并数组上还可以将伪数组变成真正的数组。
- from():将类数组或者可遍历对象转化为真正的数组,返回真正的数组,还可以接受第二个参数,作用类似 于数组中的map方法,用来对每个元素进行处理,将处理的值放进数组返回,第二参数是一个方法。
- find():查找第一个符合条件的成员,没有返回undifined ,接受一个函数作为参数。
- findindex():查找第一个符合条件的索引,没有返回-1 ,接受一个函数作为参数。
- includes():用来检测数组是否包含给定值,返回布尔值 通过原型对象的方式可以添加内置对象的一些方法,内置对象的本质就是在原型上已经添加好了这些方法,并通过原型链的方式进行调用。
字符串对象
基本包装类型:将简单数据类型包装成复杂数据类型,是的基本数据类型就有了属性和方法。
- indexOf('', index)
- lastindexOf()
- charAt(index)
- charCodeAt(index)
- str[index]
- concat()
- substr(start,length)
- slice(start, end)
- substring(start,end)
- replace("被替换字符","替换字符")
- split("分隔符")将字符串转化为数组
- toUpperCase()转换大写toLowerCase()转换小写
- starsWith():表示参数字符串是否在原字符串的头部,返回布尔值;
- endsWith():表示参数字符串是否在原字符串的尾部,返回布尔值;
- repeat():表示将原字符串重复n次,返回新的字符串;
- trim()去除字符串两端的空白字符,返回一个新的字符串。不会影响中间的空白字符。
面向对象
- 封装性
- 继承性:estends
- 多态性:
对象是一组无序的相关的属性和方法的集合,所有的事物都是对象
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指向
- call()本身它是函数的调用方法,fn.call(this,参数,参数);但是其括号中的参数可以改变this的指向。call的作用可以用来实现构造函数的继承。
- bind()不调用函数,但是可以改变this指向,返回由指定的this值和初始化参数改造的原函数拷贝。相当于产生一个新函数。应用场景是如果有函数我们不需要立刻调用,但是又想改变该函数的this指向,就需要用到bind,定时器函数的this指向window,普通函数的this也是指向window
- 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()来进行验证测试。
- 用作输入框的匹配
- 敏感词的替换
- 从字符串中获取特定的部分(提取)
//通过RegExp来创建正则表达式
var regexp = new RegExp(/o/);
//通过字面量来创建,必须由反斜杠开始
var rg = //