关于前端:前端那些事五JS2

0次阅读

共计 11912 个字符,预计需要花费 30 分钟才能阅读完成。

学习视频:https://www.bilibili.com/video/BV1YW411T7GX?p=16

参考文章:https://juejin.im/post/6844904160719011848#heading-39

  1. js 根本简介

后期为了解决网页中前端验证,优化体验,将验证放在客户端。

  1. 组成部分:
  • 以 JavaScript+JScript=>ECMAScript(ES 外围)为规范文档,由浏览器厂商实现 JS 引擎
  • DOM 文本对象模型:如何通过 js 操作网页
  • BOM 浏览器对象模型:如何通过 js 操作浏览器
  1. JS 特点:
  • 解释性语言,无需编译
  • 相似 C 和 JAVA 的语法结构
  • 动静语言
  • 基于原型的面向对象
  1. 字面量和变量

  • 字面量(常量):是不可扭转的值
  • 变量:用于保留字面量,能够扭转值。
  • 申明变量:应用 var 来申明一个变量,var a; 为变量赋值,b=123;
  • undefined:var a; 申明了一个变量,然而没有赋值。
  1. var let const 的区别

  2. var:申明变量
  3. let:ES6 新增的命令,也用于申明变量
  4. const:
  • 一旦申明必须赋值, 不能应用 null 占位。
  • 申明后不能再批改
  • 如果申明的是复合类型数据,能够批改其属性

var(ES5)

let(ES6)

const(ES6)

变量晋升

不存在变量晋升

申明变量是全局的

仅在块级作用域内无效

能够反复申明

不能在同一块作用域内反复申明

let 能够改属性

const 不能改属性

参考:https://www.cnblogs.com/zhaoxiaoying/p/9031890.html

  1. 标识符

自主命名的都能够叫标识符(变量名,函数名,属性名)。

命名规定:

  • 能够含字母,数字,_,$
  • 不能以数字结尾
  • 不能是 ES 的关键字,保留字
  • 驼峰命名

JS 底层保留标识符时理论采纳的 Unicode(UTF-8)编码,所有的 UTF- 8 都能够作为标识符。

  1. 数据类型(字面量的类型)

  1. String 类型:字符串,对称引号引起来。

转义字符:罕用 ” ‘ n

  1. Number 类型:数值(Int 整数和 Float 浮点数)
  • JS 中能够表白的最大值用 Number.MAX_VALUE,超过最大值 Infinity(正无穷),最小值 -Infinity(负无穷),typeof 返回 number,示意大于 0 的最小值用 MIN_VALUE。
  • typeof 类型检测:能够应用运算符 typeof 来查看一个变量的类型:typeof 变量
  • NaN:一个非凡数字,Not a number,typeof NaN 返回 number
  • isNaN:判断 b 的值是否是 NaN,所以能够用 isNaN()函数来判断一个值是否是 NaN

var b = NaN;

console.log(isNaN(b)); // 返回 true

  • JS 进行整数根本能够保障准确,计算浮点元素可能不准确,比方(0.1+0.2),计算钱的数字放在服务器计算。
  1. Boolean 类型:布尔值(true/false),次要用来做逻辑判断。
  2. Null:空值,未开拓空间。
  • typeof null:返回 object,机器码空指针,低三位 000,也是 js 遗留的 bug
  1. Undefined:开拓空间未赋值
  • typeof undefined:返回 undefined
  1. Object:对象,援用数据类型,属于一种复合的数据类型,在对象中能够保留不同类型数据的属性。
  • 有余:根本数据类型都是繁多的值,值之间没有关系。
  • 根本类型贮存在栈中,对象贮存在堆中,
  1. 强制类型转换

将一个数据类型强制转换成其余的数据类型

  1. 将其余类型转换成 String 类型
  • 办法一:调用被转换类型的 toString()办法;
  • 该办法不会影响到原变量,它会将转换的后果返回。
  • 毛病:有局限性,null 和 undefined 没有 toString()办法。
  • 举例:var a = 123; //number a = a.toString(); // 返回 string 类型“123”
  • 办法二:调用 String()函数,并将被转换的函数作为参数传递给函数;
  • 与 toString()办法的区别:String()函数会将 null 和 undefined 间接转换成字符串 ”null” 和 ”undefined”
  • 举例:var b = 123; //number b = String(b); // 返回 string 类型“123”
  • 办法三(隐式类型):任何字符的值和字符串做加法运算,都会先转为字符串,而后做拼串,所以能够给字符加上空字符串做拼串。
  • 举例:var c = 123; //number c = c + “”; // 返回 string 类型“123”
  1. 将其余类型转换成 Number 类型
  • 办法一:调用 Number()函数;
  • 毛病:有局限性,”123px” 字符串无奈转换。

  • 办法二:作用于字符串;
  • parseInt()函数和 parseFloat()函数;
  • 举例:var b = “456px”; //string b = parseInt(b); // 返回 Number 类型“456”
  • 如果对非 String 类型应用 parseInt()函数,会将其先转为 String 后再操作。
  • 举例:var c = true //boolean

c = parseInt(c) =parseInt(“true”)=NaN; // 返回 Number 类型 NaN

  • 办法三(隐式类型):能够对一个其余数据类型应用 +,将其转换 number,原理和 Number()函数一样。
  • 举例:var a = “123”; //string a = +a; // 返回 number 类型 123

var b = true; //boolean b = +b; // 返回 number 类型 1

  1. 将其余类型转换成 Boolean 类型
  • 办法一:调用 Boolean()函数;

除了 undefined、null、false、”、0、NaN 转换时 false,其余都为 true

  • 办法二(隐式类型):能够为任意类型进行两次非运算,即可转为布尔值。同 Boolean 函数()。
  • 举例:var a = “123”; //string a = !!a; // 返回 boolean 类型 true

对象类型转换:默认调用 {} 的 valueOf

  1. 运算符(也叫操作符)

能够对一个或多个值进行运算,并获取运算后果,都会返回后果,比方 typeof 就是运算符,能够来取得一个值的类型,它会将该值的数型以字符串的模式返回,number,。string,Boolean,undefined,object。

  1. 算数运算符

  • +:会拼串
    • :都会转成 number
  • / :
  • %: 求模运算,取余数。

区别:任何值做 - / 运算时都会将值转换成 number,能够利用这个特点做隐式的类型转换,-0 /1 1 将其转换为 number,原理和 Number()函数一样,应用起来更简略。

  1. result = true + 1;// 返回 2,对非 number 计算时,会将值先转为 number 再计算
  2. result = true + false;// 返回 1
  3. result = 2 + NaN;// 返回 NaN,任何数和 NaN 进行计算,都等于 NaN
  4. result = “123”+”456″ // 返回 123456,两个字符串相加,会做拼串,长字符串能够采纳这种形式做拼串。
  5. result = “123” + 2 // 返回 1232,
  6. result = true + “123” // 返回 true123,任何字符的值和字符串做运算,都会将其先转为字符串,再做拼串
  7. 一元运算符

  • :不会对数字产生影响
  • :负号对数字进行取反,对非 number 值会将其转为 number 再计算,

(隐式类型转换):能够对一个其余数据类型应用 +,将其转换 number,原理和 Number()函数一样。

自增和自减:

  • 自增:在本身的根底上减少 1,对于一个变量自增当前,原变量值会立刻自增 1,自增分为 2 种:后 ++(a++)和前 ++(++a),都会使原变量自增 1。

区别:a++ 和 ++ a 的值不同,a++ 先赋值后运算,++ a 先运算后赋值。

旧值:a++ 等于原变量的值(自增前的值)

新值:++ a 的值等于新值(自增后的值)

  • 自减:自减分为 2 种:后 –(a–)和前 –(–a),都会使原变量自减 1。
  1. 逻辑运算符

  • ! 非:取反
  1. 对布尔值进行取反;
  2. 对非布尔值取反,先转为布尔值再运算

var a = true; a = !a // 返回 false

var b = 10; b=!b // 返回 false

  1. (隐式类型转换):能够为任意类型进行两次非运算,即可转为布尔值。同 Boolean 函数()

var a = 10; a=!!a // 返回 true

  • && 与:两端都是 true,则返回 true,只有有一个 false,则返回 false。

js 中的“与”属于短路的“与”,如果第一个值为 false,则不会看第 2 个值。

result = false && true; // false

逻辑“与”和短路“与”

  • || 或:只有有一个 true,则返回 true。
  • && 和 || 非布尔值的状况

对于非布尔值进行与或运算时,则会将其转换为布尔值,而后再运算,并且返回原值。

var result = 1 && 2 // 返回 2 如果两个值都为 true,返回后边的

如果两个值中有 false,则返回靠前的 false。

  1. 赋值运算符

  • =:能够将符号右侧的值赋值给符号左侧的值
  • +=:a+=5 等价 a = a+5
  • -=:a-=5 等价 a = a-5
  • =:a=5 等价 a = a*5
  • /=:a/=5 等价 a = a/5
  • %=:a%=5 等价 a = a%5
  1. 关系运算符

通过关系运算符能够比拟两个值之间的大小关系,如果关系成立会返回 true,如果关系不成立则返回 false。

  • 大于号:判断符号左侧的值是否大于右侧的,如果关系成立返回 true。

  • = 大于等于

  • < 小于
  • <= 小于等于
  • 非数值状况:对非数值进行比拟时,会将其转换为数字再进行比拟。
  • 任何值和 NaN 做任何比拟都是 false。

console.log(10 <= “hello”); //false

  • 如果符号两侧的值都是字符串时,不会将其转换为数字比拟,而会比拟字符串中字符的 Unicode 编码,比拟字符编码时时一位一位进行比拟,比拟字符串的时候要进行转型,能够对英文进行排序。

console.log(“11” < “5”); //true

console.log(“a” < “b”); //true

  • 在字符串中应用转义字符输出 Unicode 编码:u 四位编码(这里编码十六进制)
  • 在网页中应用 Unicode 编码:编码;(这里编码是十进制)
  1. 相等运算符

应用相等运算符用来比拟两个值是否相等,相等返回 true。

  • == 相等:应用 == 比拟两个值时,如果类型不同,则会主动进行类型转换,而后再进行比拟,大部分时候转成 number 进行比拟。

console.log(true == “1”); //true 转成 number

  • undefined 衍生自 null,所以这两个值做相等判断时,会返回 true。

console.log(undefined == null); // 返回 true

  • NaN 不和任何值相等,包含他自身,所以用 isNaN()

console.log(NaN == NaN); // 返回 false

  • 判断 b 的值是否是 NaN,所以能够用 isNaN()函数来判断一个值是否是 NaN

var b = NaN;

console.log(isNaN(b)); // 返回 true

  • != 不相等:用来判断两个值是否不相等,不相等也会对变量进行类型转换。
  • === 全等:判断两个值是否全等,不会做类型转换。
  • !== 不全等:用来判断两个值是否不全等,不会做主动类型转换。
  1. 条件运算符(三元运算符)

语法:条件表达式? 语句 1: 语句 2;

条件运算符在执行时,首先对条件表达式进行求值,

如果该值为 true,则执行语句 1,并返回执行后果

如果该值为 false,则执行语句 2,并返回执行后果

false?alert(“ 语句 1 ”):alert(“ 语句 2 ”):// 语句 2

  1. ,运算符

, 运算符:应用,能够宰割多个语句,申明多个变量

var a = 1, b =2 , c= 3;

  1. 运算符的优先级

  • 运算符优先级表:(如果优先级雷同,从左往右算。)

能够通过加()扭转优先级。

  • 先乘除后加减
  • && 的优先级大于 ||

var result = 1 || 2 && 3 // 返回

  • 如果 || 的优先级高,或者两个一样高,则应该返回 3
  • 如果与的优先级高,则应该返回 1
  1. 语句 代码块

语句是由上自下的程序一条条执行,在 js 中能够应用 {} 来为语句进行分组。

同一个 {} 中的语句咱们称为一组语句,要么都执行,要么都不执行。

一个 {} 中的语句咱们也称为一个代码块,在代码块前面不必再编写;了。

js 在的代码块只具备分组的作用,代码块的内容在内部都是齐全可见的

  1. 流程管制语句:

通过流程管制语句能够管制执行流程,

语句的分类:

  1. 条件判断语句(if 语句)
  2. 条件分支语句(switch 语句)
  3. 循环语句
  4. 条件判断语句 if…else…

if 语句:if 语句在执行时,会先对条件表达式进行求值判断,如果表达式值为 true,则执行 if 后的语句,if 语句只能管制紧随其后的那个语句。

语法一:if 语句

if(条件表达式) {

语句

}

语法二:if…else… 语句

if(条件表达式) {

语句 …

} else {

语句 …

}

语法三:if…else if… else 语句

if(条件表达式) {

语句 …

} else if(条件表达式){

语句 …

} else if {

语句 …

}

prompt()函数:能够弹出带文本框的提示框,用户输出的内容将会作为函数返回值返回,能够定义一个变量,返回值类型是 string。

冒泡排序:

  1. 条件分支语句 switch…case…

switch 语句:

执行流程:switch…case… 语句在执行时会顺次将 case 后的表达式的值和 switch 后的条件表达式的值进行全等比拟,如果比拟后果为 true,则从以后 case 处进行执行代码,以后擦色后的代码都会执行,所以要加 break,确保只执行以后 case 语句。

语法:

switch(条件表达式) {

case 表达式:

语句 …

break;

default : // 同 else

语句 …

break;

}

  1. 循环语句 while/do…while…/if
  2. while 循环:

执行流程:while 语句在执行时,先对条件表达式进行求职判断,如果值为 true,则执行循环体,值为 true,则持续循环,以此类推,如果值为 false,则终止循环。

语法:while(条件表达式) {

语句 … //{}里的循环体

}

像这种条件表达式写死为 true 的循环叫死循环,除非浏览器敞开,死循环在开发中慎用,能够应用 break 来终止循环。

while(true) {

语句 … //{}里的循环体

if(n == 10){

break; // 退出循环

}

}

创立一个循环须要三个步骤:

    1. 初始化一个变量 var i = 0;
    1. 在循环中设置一个条件表达式

while(i < 10){

alert(i);

//3. 定义一个更新表达式,每次更新初始化变量

i++;

}

  1. do… while… 循环

区别:do…while 先执行后判断。while 是先判断后执行。do…while 能够保障循环体至多执行一次,while 不能,日常中 while 用的更多。

语法:do {

语句 … //{}里的循环体

} while (条件表达式)

  1. for 循环:

语法:for (①初始化表达式;②条件表达式;④更新表达式) {

③语句 … //{}里的循环体

}

执行程序:①②③④ ②③④ ②③④

  1. for、forEach、for in、for of 循环的区别

相同点:都能够遍历数组;

区别:

  1. for:毛病:不能间接遍历对象。
  2. forEach():毛病:不能间接遍历对象,循环不能跳出。
  3. for…in:长处:能够间接遍历对象,毛病:耗费性能;保留的是键名,返回 0 1 2 3
  4. for…of【最优】:可遍历 array,object,string,map,set 等,能够跳出循环;保留的是键值,返回 arr1 arr2 arr3

毛病:不适用于解决原有的原生对象。

10.31- 问题汇总

参考:https://blog.csdn.net/wjx666666/article/details/104940660

  1. break 和 continue

break:

  • break 能够用来退出 switch 或循环语句,不能在 if 语句中应用 break 和 continue
  • break 默认只对离他最近的循环产生影响。
  • 能够为循环语句创立一个 label,来标识以后的循环,break 后加上 label 名称即可完结指定的循环,而不是默认的。

continue:

  • continue 跳过当次循环,然而持续前面的循环。
  • continue 默认只对离他最近的循环产生影响。

区别:

  • break 终止整个循环(跳过整个循环);
  • continue 用来跳过当次循环(只跳过一次);

长处:

优化性能,能够应用计时器 console.time(“test”)和 console.timeEnd(“test”);检测耗时。

质数练习题优化:

  1. 对象(援用数据类型)

根本数据类型的毛病:值和值之间没有任何分割。

对象:复合数据类型,在对象中能够保留多个不同数据类型的属性。(容器)

长处:关系明确,操作不便。

对象的分类:

  1. 内建对象

由 ES 规范中定义的对象,在任何的 ES 的实现中都能够应用

比方:Math String Number Boolean Function Object …

  1. 宿主对象

由 JS 的运行环境提供的对象,目前次要指浏览器提供的对象。

比方:BOM DOM

比方:console.log(); document.write();

  1. 自定义对象

创建对象:应用 new 关键字调用的函数,是构造函数 constructor,构造函数是专门用来创建对象的函数,赋值给 obj。

应用 typeof 查看对象时返回 object。

属性值:js 对象的属性值,能够是任意的数据类型。

in 运算符:通过该运算符能够检测一个对象中是否含有指定的属性。

语法:” 属性名 ” in 对象

console.log(“name” in obj) // 返回 true 或 false

  1. 根本数据类型和援用数据类型的区别:

  • js 的变量都是保留在栈内存中的,根本类型的值间接在栈内存中存储,值与值之间是独立存在的,批改一个变量不会影响其余的变量
  • 对象贮存在堆内存中,每创立一个新的对象,就会在堆内存中开拓一个新的空间,二变量保留的是对象的内存地址(对象的地址),如果两个变量保留的是同一个对象援用,当一个通过一个变量批改属性时,另一个也会受到影响。
  • 根本数据类型保留的是值,对象保留的是地址。
  • 当比拟两个根本数据类型的值时,就是比拟两个值。
  • 而比拟两个援用类型时,它是比拟两个对象的内存地址,就算两个对象是截然不同的,然而地址不同,他也会返回 false。
  1. 对象字面量

  • 用构造函数创立一个对象:

var obj = new Object();

  • 用对象字面量来创立一个对象,实质雷同。

var obj = {};

语法:{属性名:属性值,属性名:属性值 …}

属性名的双引号可加可不加,如果应用一些非凡名称必须加引号。

属性名和属性值是一组组的名值对构造,名和值之间应用:连贯,多个名值对之间用,隔开,如果一个属性之后没有其余属性,就不要写逗号。

  1. 函数

函数也是一个对象,函数中能够封装一些性能(代码),在须要时能够执行这些性能。

用 typeof 检测一个函数对象是,会返回 function。

  1. 创立函数
  2. 应用构造函数来创立一个函数对象(根本不必)

创立一个函数对象,能够将要封装的函数以字符串的模式传递给构造函数,咱们在理论开发中很少应用构造函数来创立一个函数对象

var fun = new Function (“string”);

  1. 应用 函数申明 来创立一个函数
  • 封装到函数中的代码不会立刻执行
  • 函数中的代码会在函数调用时执行
  • 调用函数语法: 函数对象()
  • 当调用函数时,函数中封装的代码会依照程序执行

语法:function 函数名([形参 1, 形参 2, 形参 3]){

语句 …

}

  1. 应用 函数表达式 来创立函数

语法:var 函数名 = function (形参 1, 形参 2, 形参 3) {

语句 …

}

  1. 函数的参数(形参和实参)

定义一个用来求和的函数,能够在函数中的()中来指定一个或多个形参(形式参数),申明形参就相当于在函数外部申明了对应的变量,然而并不赋值。

调用函数时解析器不会查看实参类型,也不会查看实参数量,多余实参不会被复制,少于实参数量时,没有对应实参的形参将是 undefined。

  1. 函数的返回值 return
  • return 语法:return 值
  • return 后的语句都不会执行,如果 return 后不跟值,返回 undefined,不写 return,也会返回 undefined
  • 函数也能够是对象,将匿名函数做为实参传递给函数:
  • 返回值和函数对象:
  • // getArea() 调用函数 相当于应用的函数的返回值
  • // getArea 函数对象 相当于间接应用函数对象
  1. brack、continue 和 return 的区别
  2. 立刻执行函数

立刻执行函数只会执行一次。

只调用一次,用()扩起来一个匿名函数标识他是一个整体,函数对象();

  1. 办法
  • 对象的属性值能够是任何数据类型,也能够是函数
  • 函数作为对象的属性时,咱们称这个函数是这个对象的办法
  1. 枚举对象中的属性 for…in 遍历
  • 对象中有几个属性,循环体就执行几次
  • 执行时会将对象的属性名赋值给变量
  1. 全局作用域 / 函数作用域

作用域指一个变量作用的范畴

1. 全局作用域:

  • 间接写在 script 标签的都在全局作用域。
  • 在页面关上时创立,在页面敞开时销毁。
  • 在全局作用域中有一个全局对象 window,由浏览器创立,能够间接应用,创立的变量都会作为 window 对象的属性保留【var window.a = 10; window.alert();】;
  1. 变量晋升

参考:https://www.w3school.com.cn/js/js_hoisting.asp

应用 var 关键字申明的变量,会在所有代码执行之前被申明,不必 var 时不会被申明提前。

  1. 函数晋升
  • 函数晋升:function 函数(){},最先被创立,能够提前
  • 函数表达式不晋升:不能在申明前调用

2. 函数(部分)作用域:

  • 调用函数时创立函数作用域,函数执行完后作用域销毁。
  • 每调用一次创立一个新函数作用域,他们之间是相互独立的。
  • 部分能够拜访到全局的变量,全局不能拜访局部变量。
  • 部分会先在本身作用域寻找变量,就近准则。
  1. debug

  2. this

含意:解析器在调用函数时,每次都会向函数外部传递一个隐含的参数,这个隐含的参数就是 this,this 是浏览器传进来的参数,this 指向的是一个对象,这个对象咱们称为函数执行的上下文对象。

  • 一般函数中 this 的指向,是 this 执行时的上下文
  • 箭头函数中 this 的指向,是 this 定义时的上下文
  1. ES5 三种函数调用形式:

  • fun(a,b);
  • obj.child.method(a,b);
  • fun.call(context,a,b); // 指向 context,默认 undefined(指向 window),
  1. this 的 5 种绑定

  2. 默认绑定(非严格模式下 this 指向全局对象, 严格模式下 this 会绑定到 undefined)
  3. 隐式绑定 (当函数援用有上下文对象时, 如 obj.foo() 的调用形式, foo 内的 this 指向 obj)
  4. 显示绑定 (通过 call() 或者 apply()办法间接指定 this 的绑定对象, 如 foo.call(obj))
  5. new 绑定
  6. 箭头函数绑定(this 的指向由外层作用域决定的)

参考:

https://zhuanlan.zhihu.com/p/23804247

https://www.w3school.com.cn/js/js_this.asp

  1. 创建对象

  2. 应用工厂模式创建对象

  3. 应用构造函数创建对象

构造函数:

  • 创立一个构造函数,用来创立 Person 对象,首字母大写
  • 和一般函数的区别:一般函数间接调用,构造函数须要应用 new 关键字调用
  • 执行流程:
  1. 创立一个新对象
  2. 将新建的对象设置为函数中的 this,在构造函数中实体 this 援用新对象
  3. 逐行执行函数中的代码
  4. 将新建对象作为返回值返回
  5. 原型对象

  6. 原型对象 prototype

原型对象:prototype

隐含属性:__proto__

  • 当函数以构造函数的模式调用时,它所创立的实例对象都会有一个隐含的属性__proto__,指向该构造函数的原型对象,通过__proto__拜访该属性;
  • 原型对象相当于一个公共区域,同一个类的实例都能够拜访到这个原型,咱们能够将对象公共内容对立设置到原型对象中;
  • 咱们拜访对象的一个属性或办法时,会先在本身找,本身没有则拜访原型对象;
  • 长处:不会净化全局作用域

  1. 向原型对象中增加办法

实例:

  1. 查看属性 in 和 hasOwnProperty

  2. 原型的 toString()办法

  3. 原型链

原型链是利用原型,让一个援用类型继承另一个 援用类型的属性和办法。

实例的 contructor = 构造函数

  1. 垃圾回收(GC)

垃圾回收:

  • 当一个对象没有任何的变量或属性对它援用,咱们无奈操作该对象。
  • js 具备主动垃圾回收机制,会主动将垃圾对象从内存中销毁。
  • 咱们将不再应用的对象设置为 null 即可。

  1. 数组 Array

  2. 数组简介

  • 数组也是一个对象,与一般对象性能相似,作用存值。
  • arr[index]:数组[索引],索引从 0 开始。
  • arr.length:数组.length 能够获取数组的长度(元素的个数)。

    • 向数组最初一个地位增加元素:arr[arr.length] = 70; // 数组[数组.length] = 值
  1. 数组的常见办法(2)

  2. 数组遍历

  3. for 循环遍历

实例:将年纪满 18 的提取进去

  1. forEach()遍历

回调函数:forEach()办法须要一个函数作为参数,像这种函数,由咱们创立但不禁咱们调用的称为回调函数。

毛病:不兼容 IE8 及以下

  1. slice()

slice(开始地位索引,完结地位索引):slice 从第 a 个截到第 b 个

  1. splice()

  • splice(开始地位索引,删除的数量,传递新元素) : splice 从第 a 个删除 b 个;
  • splice 还能够再增加元素
  1. splice 数组去重

  2. call() 和 apply()

雷同:

  • 都会调用函数执行
  • call()和 apply()能够将一个对象指定为第一个参数
  • 此时这个对象将会成为函数执行时的 this,参数是谁 this 就是谁
  • 能够批改上下文对象 this

不同:

  • call()能够将实参在对象之后顺次传递
  • apply()须要将实参封装到一个数组中对立传递

this:

  1. 以函数的模式调用,this 指向 window
  2. 以办法的模式调用,this 是调用办法的对象
  3. 以构造函数的模式调用,this 是新创建的对象
  4. 以 call 和 apply 调用,this 是指定的对象
  5. arguments【类数组对象】

在调用函数时,浏览器每次都会传递进两个隐含的参数:

  1. 函数的上下文对象 this
  2. 封装实参的对象 arguments
  • arguments 是一个类数组对象,也能够通过索引来操作数组
  1. Date【工夫】

获取工夫和获取工夫戳:

  1. Math【数学运算】

参考:https://www.w3school.com.cn/js/js_math.asp

Math:属于工具类,封装了数学运算相干的属性和办法

  1. 包装类

包装类:能够长期将根本数据类型转为对象,浏览器底层本人用的

  1. 字符串相干办法

参考:https://www.w3school.com.cn/js/js_string_methods.asp

  1. 检索字符串
  2. 截取字符串
  3. 转为大小写
  4. DOM(文档对象模型)

  • Document Object Model:文档对象模型,用来操作网页的
  • Node:节点,形成网络的任何局部都是一个节点,类型不同。

    • 文档节点:<html></html>
    • 元素节点:<p></p>
    • 属性节点:id=”box”
    • 文本节点:文字~
  • 获取元素节点:

    • getElementById():通过 id 获取一个元素节点对象
    • getElementsByTagName():通过标签名获取一组元素节点对象
    • getElementsByName():通过 name 属性获取一组元素节点对象,表单罕用
  • 事件:用户和浏览器的交互行为,比方点击按钮、鼠标挪动、敞开按钮;所有的操作都属于事件,处理事件:

Dom 事件:https://www.w3school.com.cn/js/js_htmldom_events.asp

  1. 文档的加载 window.onload

  2. dom 查问的其余办法

  3. dom 增删改

dom 办法:https://www.w3school.com.cn/htmldom/dom_methods.asp

增删改 demo1:

增删改 demo2:

  1. 批改 class

  2. json

前端 html 写的 后端 java 写的

obj = {} : js 对象 只有 js 意识

须要将 js 对象传给服务器 转为 json

将 json 转为字符串 任何语言都意识

json 的作用:交互传递数据,字符串,使不同语言都能够应用

json 属性名必须加双引号。其余和 js 统一

json 分类:

1. 对象:json 对象

2. 数组:json 数组

json 只容许传递:字符串,数值,布尔,null,一般对象,数组

键值对

json 数组:保留多个 json 对象。

须要将字符串转为 js 对象

数据交换格局 轻量级数据格式

– JSON.parse():将 json 转为 js 对象

– JSON.stringify():将 js 对象转为 json

IE7 JSON

兼容 IE7 以下,eval():能够用来执行一段字符串模式的 js 代码,并将返回,性能差不倡议应用。

  1. 事件冒泡

  2. 事件冒泡(Bubble)

事件冒泡指事件的向上传导,当后辈元素上的事件被触发时,其先人元素的雷同事件也会被触发。

勾销冒泡:将事件对象的 cancelBubble 设置为 true。

  1. 事件委派

  2. js 报错整顿

https://blog.csdn.net/weixin_39843414/article/details/109108391

  1. Error:根本谬误类型,个别是程序员抛出的异样

  1. SyntaxError:语法错误,解析谬误

  1. TypeError:类型谬误

  1. ReferenceError:援用谬误

  1. RangeError:边界谬误

  1. URIError:url 谬误
  2. 自定义异样
正文完
 0