三、ES6 的内置对象扩展
1、Array 的扩展方法
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
代码：
let ary = [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.getElementsByTagName('div'); oDivs = [...oDivs];
Array.from()
作用：将类数组或可遍历对象转换为真正的数组
代码：
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()
作用：用于找出第一个符合条件的数组成员，如果没有找到返回 undefined
代码：
let ary = [ { id: 1, name: "张三", }, { id: 2, name: "李四", }, ]; let target = ary.find((item) => item.id == 2); console.log(target); // {id: 2, name: '李四'}
- findIndex()
作用：用于找出第一个符合条件的数组成员的位置，如果没有找到返回 -1
代码：
let ary = [1, 5, 10, 15]; let index = ary.findIndex((value, index) => value > 9); console.log(index); // 2
- includes()
作用：表示某个数组是否包含给定的值，返回布尔值
代码：
[1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false
2、String 的扩展方法
- 模板字符串
ES6新增的创建字符串的方式，使用反引号定义
语法：
let name = `zhangsan`;
作用1：模板字符串中可以解析变量
代码：
let name = '张三'; let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan
作用2：模板字符串中可以换行
代码：
let result = { name: 'zhangsan', age: 20, sex: '男' } let html = ` <div> <span>${result.name}</font> <span>${result.age}</font> <span>${result.sex}</font> </div> `;
作用3：在模板字符串中可以调用函数
代码：
const sayHello = function () { return '哈哈哈哈 追不到我吧 我就是这么强大'; }; let greet = `${sayHello()} 哈哈哈哈`; console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈
startsWith() 和 endsWith()
- startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
- endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
代码：
let str = 'Hello world!'; str.startsWith('Hello') // true str.endsWith('!') // true
repeat()
作用：repeat方法表示将原字符串重复n次，返回一个新字符串
代码：
'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello"
3、Set 数据结构
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
Set本身是一个构造函数，用来生成 Set 数据结构
语法：
const s = new Set();
Set函数可以接受一个数组作为参数，用来初始化
代码：
const set = new Set([1, 2, 3, 4, 4]);
数组去重：
代码：
let arr = [1, 2, 2, 3, 3]; // 方法一： // let res = Array.from(new Set(arr)); // console.log(res); // 方法二： let res = new Set(arr); let newArr = [...res]; console.log(newArr);
实例方法：
- add(value)：添加某个值，返回 Set 结构本身
代码：
let s = new Set(); s.add(1).add(2); // {1, 2}
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
代码：
let s = new Set([1, 2, 3]); s.delete(2); console.log(s); // {1, 3}
has(value)：返回一个布尔值，表示该值是否为 Set 的成员
代码：
let s = new Set([1, 2, 3]); let res = s.has(1); console.log(res); // true
clear()：清除所有成员，没有返回值
代码：
let s = new Set([1, 2, 3]); s.clear(); console.log(s); // {}
遍历：
Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值
s.forEach(value => console.log(value))
