这是一套在b站学习pink老师讲JS进阶中个人做的笔记 希望对你有用
教程地址：javaScript进阶面向对象ES6
类
constructor 构造函数（1-01）
extends 继承父类（1-03）
super 调用父类中的构造函数和普通函数（1-03~05）
insertAdjacentHTML 可以把用字符串创建的元素追加到父元素里面 (1-07)
ondblclick 双击事件
input.select() 文本框里面的内容处于选中状态
( 1-01~03 )
- (1) 通过class 关键字创建类 类名 我们还是习惯性定义首字母大写
- (2) 类里面有个 constructor 函数 可以接受传递过来的参数 同时返回实例对象
- (3) constructor 函数 只要 new 生实例时 就会自动调用这个函数 如果我们不写这个函数 类也会自动生成这个函数
- (4) 生成实例 new 不能省略
- (5) 最后注意语法规范 创建类 类名后面不要加小括号 生成实例 类名后面加小括号 构造函数不需要加 function
- (6) 类的公有属性放到 constructor 里面
- (7) 多个函数方法之间不需要添加逗号分隔
( 1-04 )
继承中的属性或者方法查找原则：就近原则
1. 1. 继承中，如果实例化子类输出一个方法 先看子类有没有这个方法 如果有就先执行子类的
2. 2. 继承中，如果子类里面没有 就去查找父类有没有这个方法 如果有 就执行父类的这个方法(就近原则)
3. 注意: 子类在构造函数中使用super, 必须放到 this 前面 (必须先调用父类的构造方法,在使用子类构造方法)
( 1-05 )
- 子类继承父类加法方法 同时 扩展减法方法
- 利用super 调用父类的构造函数
- super 必须在子类this之前调用
( 1-06 )
类里面的 this指向问题
1. 在 ES 6 中类没有变量提升 所以必须先定义类 才能通过实例化对象
2. 类里面的共有的属性和方法一定要加this使用
3. constructor 里面的this指向实例对象 方法里面的this指向这个方法的调用者
创建类
class name {
// class body
}
创建实例：
var xx = new name();
类 constructor 构造函数
class Person {
constructor(name,age) { // constructor 构造方法或者构造函数
this.name = name;
this.age = age;
}
}
// 创建实例：
var ldh = new Person('刘德华', 18);
console.log(ldh.name)
类的继承
class Father{ // 父类
}
class Son extends Father { // 子类继承父类
}
super 调用父类的函数
class Father {
say() {
return '我是爸爸';
}
}
class Son extends Father {
say() {
// console.log('我是儿子');
console.log(super.say() + '的儿子');
// super.say() 就是调用父类中的普通函数 say()
}
}
var son = new Son();
son.say(); // 我是爸爸的儿子
insertAdjacentHTML(position,text); ( 1-07 )
// (1) 创建li元素和section元素
var li = '<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>';
// (2) 把这两个元素追加到对应的父元素里面 beforeend(父元素内容的后面)
that.ul.insertAdjacentHTML('beforeend', li)
原型
构造函数原型 prototype （ 2-03 ）
- 构造函数通过原型分配的函数是所有对象所共享的
- JavaScript规定 每个构造函数都有一个 prototype属性 指向另一个对象。注意这个prototype 就是一个对象 这个对象的所有属性和方法 都会被构造函数所拥有。
- 我们可以把那些不变的方法 直接定义在prototype 对象上 这样所有对象的实例就可以共享这些方法。
- 原型就是一个对象，我们也称为prototype为对象
- 原型的作用就是 共享方法。
对象原型 __ proto __（ 2-04 ）
- 对象都会有一个属性 __ proto __ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __ proto __ 原型的存在。
- __ proto __ 对象原型和原型对象 prototype 是等价的
- __ proto __ 对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是他是一个非标准，因此在实际开发中，不可以使用这个属性，他只是内部向原型对象 prototype。
- __ proto __ 对象原型
- prototype 原型对象
constructor 构造函数 （ 2-05 ）
- 对象原型(__ proto __)和构造函数(prototype)原型对象里面都有一个属性constructor属性，constructor我们称为构造函数，因为他指向会构造函数本身。
- constructor 主要用于记录该对象引用那个构造函数，它可以让原型对象重新指向原来的构造函数
成员的查找机制 ( 2-07 )
- 当访问一个对象的属性(包括方法)时，首先查找这个对象自身有没有该属性。
- 如果没有就查找它的原型(也就是__ proto __指向的prototype原型对象)。
- 如果还没有就查找原型对象的原型(Object的原型对象)。
- 以此类推一直找到Object为止(null)
- __ proto __ 对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线
扩展内置对象 ( 2-09 )
可以通过原型对象，对原来的内置对象进行扩展自定义的方法，比如给对象增加自定义求偶数和的功能。
注意：数组和字符内置对象不能给原型对象覆盖操作 Array.prototype = {} , 只能是 Array.prototype.xxx = function(){}的方法。
call() ( 2-10 )
// 调用这个函数，并且修改函数运行时的this指向
fun.call(thisArg, arg1, arg2, ...)
// thisArg : 当前调用函数的this的指向对象
// arg1, arg2 : 传递的其他参数
继承
- ES 6之前并没有给我们提供extends继承 我们可以通过构造函数+原型对象模拟实训继承，被称为组合继承
- 借用构造函数继承父类型属性 (2-11)
- 核心原理：通过call() 把父类型的this 指向子类型的this ， 这样就可以实现子类型继承父类型的属性。
- 借用原型对象继承父类型方法 (2-12)
类的本质
- class本质还是function
- 类的所有方法都定义在类的prototype属性上
- 类创建的实例，里面也有__ proto __指向类的prototype原型对象
- 所以ES6的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语言而已。
- 所以ES6的类其实就是语法糖。
- 语法糖：语法糖就是一种便捷写法，简单理解，有两种方法可以实现同样的功能，但是一种写法更加清晰、方便，那么这个方法就是语法糖。
ES5 中新增的方法
- 数组方法
- 迭(die)代(遍历)方法：forEach()、map()、filter()、 some()、every()
forEach ( 2-14 )
array.forEach(function(currentValue, index, arr))
- currentValue : 数组当前项的值
- index ：数组当前项的索引
- arr : 数组对象本身
filter ( 2-15 )
array.filter(function(currentValue, index, arr))
- filter() 方法创建一个新的数组，新数组中的元素时通过检查指定数组中符合条件的所有元素，主要用于筛选数组
- 注意它直接返回一个新数组
- currentValue : 数组当前项的值
- index ：数组当前项的索引
- arr : 数组对象本身
some (2-16)
array.some(function(currentValue, index, arr))
- some() 方法用于检测数组中的元素是否满足指定条件 通俗点 查找数组中是否有满足条件的元素
- 注意它返回值是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false
- 如果找到第一个满足条件的元素，则终止循环，不在继续查找
- currentValue : 数组当前项的值
- index ：数组当前项的索引
- arr : 数组对象本身
trim (2-19)
str.trim()
- trim() 方法会从一个字符串的两端删除空白字符
- rim() 方法并不影响原字符本身，他返回的是一个新的字符串
Object.defineproperty() ( 2-20 )
Object.defineproperty(obj, prop, descriptor)
Object.defineproperty() 定义对象中新属性或修改原有的属性
* obj: 必需，目标对象
* prop：必需，需定义或修改的属性的名字
* descriptor: 必需，目标属性所拥有的特性
Object.defineproperty() 第三个参数 descriptor 说明：以对象形式{}书写
* value: 设置属性的值 默认为undefined
* writable: 值是否可以重写。true|false 默认为false
* enumerable: 目标属性是否可以被枚举。true|false 默认为false
* configurable: 目标属性是否可以被删除或是否可以再次修改特特性 true|false 默认为false
函数的进阶
函数的定义方式 ( 3-01 )
- 函数声明方式function 关键字(命名函数)
- 函数表达式(匿名函数)
- new Function() (构造函数)
var fn = new Function('参数1','参数2'...,'函数体')
- Function 里面参数都必须是字符串格式
- 第三种方式执行效率低，也不方便书写，因此较少使用
- 所有函数都是 Function 的实例(对象)
- 函数也属于对象
函数的调用方法 (3-02)
- 普通函数
- 对象的方法
- 构造函数
- 绑定事件函数
- 定时器函数
- 立即执行函数
函数内 this 的指向 (3-03)
这些this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同一般指向我们的调用者：
| 调用方式 | this指向 |
|---|---|
| 普通函数调用 | window |
| 构造函数调用 | 实例对象 原型对象里面的方法指向实例对象 |
| 对象方法调用 | 改方法所属对象 |
| 事件绑定方法 | 绑定事件对象 |
| 定时器函数 | window |
| 立即执行函数 | window |
改变函数内部 this 指向 ( 3-04~06+案例 )
-
JavaScript为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部this得到指向问题，常用的有 bind()、call()、apply() 三种方法。
-
call 方法
call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的this 指向。
fun.call(thisArg, arg1, arg2, ...) -
apply 方法
apply() 方法调用一个函数。简单理解为调用函数的方法，但是它可以改变函数的 this 指向
fun.apply(thisArg, [argsArray])- thisArg: 在fun函数运行时指定的this值
- argsArray: 传递的值，必须包含在数组里面
- 返回就是函数的返回值，因为他就是调用函数
-
bind 方法
bind() 方法不会调用函数，但是能改变函数内部this指向
fun.bind(thisArg, arg1, arg2, ...)- thisArg: 在fun函数运行时指定的this值
- arg1, arg2: 传递的其他参数
- 返回由指定的 this 值和初始化参数改造的原函数拷贝
-
call apply bind 总结
相同点：
- 都可以改变函数内部的this指向。
区别点：
- call 和 apply 会调用函数，并且改变函数内部this指向
- call 和 apply 传递的参数不一样，call 传递参数aru1，aru2…形式 apply 必须数组形式[arg]
- bind 不会调用函数，可以改变函数内部this指向
主要应用场景：
- call 经常做继承
- apply 经常跟数组有关系，比如借助数学对象实现数组最大值最小值
- bind 不调用函数，但是还想改变this指向，比如改变定时器内部的this指向
严格模式
什么是严格模式 ( 3-07~08 )
-
JavaScript除了提供正常模式外，还提供了严格模式(strict mode)。 ES5的严格模式是采用具有限制性
-
JavaScript变体的一种方法，即在严格的条件下运行js代码
-
严格模式在IE10以上版本的浏览器才会被支持，旧版本浏览器中会被忽略
-
严格模式对正常的 JavaScript语义做了一些更改：
- 消除了 JavaScript语法的一些不合理、不严谨之处，减少了一些怪异的行为。
- 消除代码运行的一些不安全之处，保证代码运行的安全。
- 提高编译器效率，增加运行速度。
- 禁用了在ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 JavaScript做好铺垫。比如一些保留字如：class,enum,export,extends,import,super 不能做变量名
开启严格模式
严格模式可以应用到整个脚本或个别函数中。因此在使用时，我们可以将严格模式分为“为脚本开启严格模式”和“为函数开启严格模式”两种情况
// 1. 为脚本开启严格模式
// (1) 为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句 "use strict";(或'use strict';).
<script>
"use strict";
console.log("这是严格模式。");
</script>
// 因为 "use strict" 加了引号，所以老版本的浏览器会把它当作一行字符串而忽略。
// (2) 有的 script 基本是严格模式，有的 script 脚本是正常模式，这样不利于文件合并，所以可以将整个脚本文件放在立即执行的匿名函数之中，这样独立创建一个作用域而不影响其他 script脚本文件。
<script>
(function(){
"use strict";
var num = 10;
function fn(){}
})();
</script>
2. 为函数开启严格模式
要给某个函数开启严格模式，需要把 "use strict"; (或'use strict';) 声明放在函数体所有语句之前。
严格模式中的变化
- 严格模式对 JavaScript的语法和行为，都做了一些改变。
- 变量规定
(1) 在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用 var 命令声明，然后再使用。
(2) 严禁删除已经声明的变量。列如，delete x; 语法是错误的 - 严格模式下 this 指向问题
(1) 以前在全局作用域函数中的 this 指向 window 对象。
(2) 严格模式下全局作用域中函数中的this 是 undefined
(3) 以前构造函数时不加new也可以调用普通函数，this指向全局对象
(4) 严格模式下，如果 构造函数不加new调用，this 会报错.
(5) new 实例化的构造函数指向创建的对象实例。
(6) 定时器 this 还是指向 window
(7) 事件、对象还是指向调用者 - 函数变化
(1) 函数不能有重名的参数。
(2) 函数必须声明在顶级，新版本的 JavaScript会引入 “块级作用域” ( ES6 中已引入)。为了与新版本接轨，不允许在非函数的代码块内声明函数。
更多严格模式要求参考：https://developer.mozilla.org/zh-CN/docs/Web/javaScript/Reference/Strict_mode
高阶函数 ( 3-09 )
高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。
function fn(callback){
callback&&callback();
}
fn(function(){alert('hi')})
function fn(){
return function(){}
}
fn();
此时fn 就是一个高级函数
函数也是一种数据类型，同样可以作为参数，传递给另一个参数使用，最典型的就是作为回调函数。
闭包 ( 3-10~15 )
《复习知识》
- 变量作用域
- 变量根据作用域的不同分为两种：全局变量和局部变量。
- 函数内部可以使用全局变量。
- 函数外部不可以使用局部变量。
- 当函数执行完毕，本作用域内的局部变量会销毁
-
什么是闭包 (3-10)
- 闭包(closure) 指有权访问另一个函数作用域中变量的函数。 — JavaScript高级程序设计
- 简单理解就是，一个作用域可以访问另外一个函数内部的局部变量
-
闭包的作用 (3-11)
- 我们fn 外面的作用域可以访问fn 内部的局部变量
- 闭包的主要作用：延伸了变量的作用范围
-
闭包总结
- 闭包是什么?
闭包是一个函数(一个作用域可以访问另外一个函数的局部变量) - 闭包的作用是什么？
延伸变量的作用范围
- 闭包是什么?
递归
-
什么是递归？ (3-16~19)
- 如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。
- 简单理解：函数内部自己调用自己，这个函数就是递归函数
- 递归函数的作用和循环效果一样
- 由于递归很容易发生 “栈溢出” 错误(stack overflow), 所以必须要加退出条件 return
-
浅拷贝和深拷贝 (3-20~21)
- 浅拷贝只是拷贝一层，更深层次对象级别的值拷贝引用
- 深拷贝拷贝多层，每一级别的数据都会拷贝。
- Object.assign(target, …sources) ES6新增方法可以浅拷贝
正则表达式
什么是正则表达式
- 正则表达式(Regular Expression) 是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象
- 正则表通常被用来检索、替换那些符合某个模式(规则)的文本，列如验证表单：用户名表单只能输入英文字母、数字或下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉网页内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。
- 其他语言也会使用正则表达式，本阶段我主要是利用 JavaScript正则表达式完成表单验证
正则表达式的特点
- 灵活性、逻辑性和功能性非常强
- 可以迅速地用极简单的方式达到字符串的复杂控制
- 对于刚接触的人来说 比较晦涩难懂 比如：
^\w+([-+.]\w+)*@\w+([-.]w+)*\.\w+([-.]\w+)*$ - 实际开发，一般都是直接复杂写好的正则表达式，但是要求会使用正则表达式并且根据实际情况修改正则表达式，比如用户名：
/^[a-z0-9_-]{3,16}$/
创建正则表达式
在 JavaScript中，可以通过两种方式创建一个正则表达式。
- 通过调用 RegExp 对象的构造函数创建
var 变量名 = new RegExp(/表达式/); - 通过字面量创建
var 变量名 = /表达式/;
检测正则表达式 test
test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false 其参数是测试字符串。
regexObj.test(str)
- regexObj 是写的正则表达式
- str 我们要检测的文本
- 就是检测str 文本是否符合我们写的正则表达式规范
正则表达式的组成
- 一个正则表达式可以由简单的字符构成，比如/abc/, 也可以是简单和特殊字符的组合，比如/ab*c/. 其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如^、$、+等
- 特殊字符非常多，可以参考：
- MDN
- jQuery 手册
- 正则测试工具
1. 边界符 (4-02)
正则表达式中的边界符(位置符) 用来提示字符所处的位置，主要有两个字符
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本(以谁开始) |
| $ | 表示匹配行尾的文本(以谁结束) |
如果 ^ 和 $ 在一起，表示必须是精确匹配
2. 字符类 (4-03)
字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号[] 内。
(1) [-] 方括号内部范围符-
// (1) [-] 方括号内部范围符-
// (2) 字符组合
/^[a-z0-9]$/.test('a') // true
// (3) [^] 方括号内部 取反符^
/^[^abc]$/.test('a') // false
3. 量词符 (4-04)
量词符用来设定某个模式出现的次数。
| 量词 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
4. 括号总结 (4-06)
(1) 大括号 量词符：里面表示重复次数
(2) 中括号 字符集合。匹配方括号中的任意字符
(3) 小括号 表示优先级
可以在线测试： https://c.runoob.com/
5. 预定义类
预定义类指的是某些常见模式的简写方式
| 预定义 | 说明 |
|---|---|
| \d | 匹配0-9之间的任一数字，相当于 [0-9] |
| \D | 匹配所有0-9以外的字符，相当于 [ ^0-9] |
| \w | 匹配任意的字母、数字和下划线，相当于 [A-Za-z0-9_] |
| \W | 除所有字母、数字和下划线以外的字符，相当于 [ ^A-Za-z0-9_] |
| \s | 匹配空格 (包括换行符、制表符、空格符等)，相等于[\t\r\n\v\f] |
| \S | 匹配非空格的字符，相当于 [ ^\t\r\n\v\f] |
正则表达式中的替换 (4-09)
-
replace 替换
replace() 方法可以实现替换字符串的操作，用来替换的参数可以是一个字符串或者一个正则表达式。
stringObject.replace(regexp/substr,replacement)- 第一个参数：被替换的字符串 或者 正则表达式
- 第二个参数：替换的字符串
- 返回值是一个替换完毕的新字符串
-
正则表达式参数
/表达式/[switch]
switch (也称为修饰符) 按照什么样的模式来匹配，有三种值：- g : 全局匹配
- i : 忽略大小写
- gi : 全局匹配+忽略大小写
ES6
什么是 ES6？
ES 的全称是 ECMAScript, 他是由 ESMA 国际标准化组织，制定的一项脚本语言的标准化规范。
| 年份 | 版本 |
|---|---|
| 2015年6月 | ES2015 |
| 2016年6月 | ES2016 |
| 2017年6月 | ES2017 |
| 2018年6月 | ES2018 |
| … | … |
ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。
为什么使用 ES6？
- 每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。
- 变量提升特性增加了程序运行时的不可预测性
- 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码
ES6 的新增语法
let (5-01~02)
ES6中新增的用于声明变量的关键字。
- let 声明的变量只在所处于的块级有效
if (true) {
let a = 10;
}
console.log(a); // a is not defined
注意：使用let 关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性
- 不存在变量提升
console.log(a); // a is not defined
let a = 20;
- 暂时性死区
var tmp = 123;
if (true) {
tmp = 'abc';
let tmp;
}
const (5-03)
作用：声明常量，常量就是值(内存地址) 不能变化的量
- 具有块级作用域
if (true) {
const a = 10;
}
console.log(a); // a is not defined
- 声明常量时必须赋值
const PI; // Missing initializer in const declaration
- 常量赋值后，值不能修改
const = PI;
PI = 100; // assignment to constant variable.
const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b'];
ary = ['a','b']; // assignment to constant variable.
let、const、var 的区别
- 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
- 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
- 使用 const 声明的常量，在后面出现的代码中不能修改该常量的值。
| var | let | const |
|---|---|---|
| 函数级作用域 | 块级作用域 | 块级作用域 |
| 变量提升 | 不存在变量提升 | 不存在变量提升 |
| 值可更改 | 值可更改 | 值不可更改 |
解构赋值 (5-04~05)
ES6 中允许从数值中提取值，按照对应位置，对变量赋值。对象也可以实现解构。
1.数值解构
let [a, b, c] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);
// 如果解构不成功，变量的值为undefined
let [foo] = [];
let [bar, foo] = [1];
- 对象解构
let person = { name: 'zhangsan', age: 20 };
let { name, age } = person;
console.log(name); // 'zhangsan'
console.log(age); // 20
let {name: myName, age: myAge} = person; // myName myAge 属性别名
console.log(myName); // 'zhangsan'
console.log(myAge); // 20
箭头函数 (6-06~07)
ES6中新增的定义函数的方法。
() => {}
const fn = () => {}
函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
function sum(num1, num2) {
return num1 + num2;
}
const sum = (num1, num2) => num1 + num2;
如果形参只有一个，可以省略小括号
function fn(v){
retuen v;
}
const fn = v => v;
箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。
const obj = { name: '张三'}
function fn () {
console.log(this); // obj
return () => {
console.log(this) // obj
}
}
const resFn = fn.call(obj);
resFn();
剩余参数 (5-08)
- 剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
function sum (first, ...args) {
console.log(first); // 10
console.log(args); // [20, 30]
}
sun(10, 20, 30);
- 剩余参数和解构配合使用
let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students;
console.log(s1); // wangwu
console.log(s2); // ['zhangsan', 'lisi']
ES6 的内置对象扩展
Array 的扩展方法
一、 扩展运算符 (展开语法) (5-09)
- 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
let aty = [1, 2, 3];
// ...ary // 1, 2, 3
console.log(...ary); // 1 2 3
console.log(1, 2, 3);
- 扩展运算符可以应用于合并数组。
//方法一
let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
let ary3 = [...ary1, ...ary2];
// 方法二
ary1.push(...ary2);
- 将类(伪)数组或可遍历对象转换为正真的数组
let oDivs = document.getElemenetsByTagName('div');
oDivs = [...oDivs];
二、 构造函数方法： Array.from() (5-10)
- 将类(伪)数组或可遍历对象转换为正真的数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
- 方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
let arrayLike = {
"0": 1,
"1": 2,
"length": 2
}
let newAry = Array.from(aryLike, item => item * 2)
三、实例方法：find() (5-11)
用于找出第一符合条件的数组成员，如果没有找到返回undefined
let ary = [{
id: 1,
name: '张三'
},{
id: 2,
name: '李四'
}];
let target = ary.find((item, index) => item.id == 2);
四、实例方法：findIndex() (5-12)
用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1
let ary =[1, 5, 10, 15];
let index = ary.findIndex((value,index) => value > 9);
console.log(index); // 2
五、实例方法：includes() (5-13)
表示某个数组是否包含给定的值，返回布尔值
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
六、模板字符串 (5-14)
ES6 新增的创建字符串的方式，使用反引号定义。
let name = `zhangsan`;
特点1. 模板字符串中可以解析变量。
let name = '张三';
let sayHello = `hello,my name is ${name}`; // hello,my name is zhangsan
特点2. 模板字符串中可以换行
let resilt = {
name: 'zhangsan',
age: 20,
sex：'男'
}
let html = ` <div>
<span>${result.name}</span>
<span>${result.name}</span>
<span>${result.name}</span>
</div> `;
特点3. 在模板字符串可以调用函数。
colst aryHello = function () {
return '哈哈哈哈 追不到我吧 我就是这么强大';
};
let greet = `${sayHello()} 哈哈哈哈`;
console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈
七、String 的扩展方法 (5-15)
- 实例方法：startsWith() 和 endsWith()
- startsWith(): 表示参数字符串是否在原字符串的头部，返回布尔值
- endsWith(): 表示参数字符串是否在原字符串的尾巴，返回布尔值
let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
实例方法： repeat() (5-16)
repeat 方法表示将原字符串重复n次，返回一个新字符串。
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
八、Set 数据结构 (5-17)
ES6 提供了新的数据结构 Set 它类似于数组 但是成员的值都是唯一的 没有重复的值
Set本身是一个构造函数，用来生成 Set 数据结构。
const s = new Set;
Set函数可以接受一个数组作为参数，用来初始化。
const set = new Set([1, 2 ,3 ,4 , 5]);
- 实例方法：
- add(value): 添加某个值，返回Set结构本身
- delete(value): 删除某个值，返回一个布尔值，表示删除是否成功
- has(value): 返回一个布尔值，表示该值是否为Set的成员
- clear(): 清除所有成员，没有返回值
const s = new Set();
s.add(1).add(2).add(3); // 向 set 结构中添加值
s.delete(2) // 删除 set 结构中的2值
s.has(1) // 表示 set 结构中是否有1这个值 返回布尔值
s.clear() // 清除 set 结构中的所有值
遍历
Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值
s.forEach(value => console.log(value))
529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
