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

36次阅读

共计 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. 自定义异样
正文完
前端
发表至： 前端
2021-04-02
 0
关于前端:数据分析之二分K均值聚类算法
关于前端:腾讯二面现在要你实现一个埋点监控SDK你会怎么设计
关于前端:一些不好记却很好用的-CSS-属性
关于前端:Molecule实现数栈至简前端开发新体验