数组（Array）扩展方法

扩展运算符（展开语法）

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

let arr = [1, 2, 3]
...arr // 1, 2, 3
console.log(...arr) // 1 2 3

扩展运算符可以应用于合并数组

// 方法一
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3) // [1, 2, 3, 4, 5]
// 方法二
arr1.push(...arr2)

将类数组（伪数组）或可遍历数组转化为真正的数组

let divs = document.getElementsByTagName("div")
divs = [...divs]

构造函数方法：Array.from()

let array = {
    '0': '张三',
    '1': '李四',
    '2': '王五',
    'length': 3
}
let newArr = Array.from(array)
console.log(newArr) // ['张三', '李四', '王五']

构造函数方法：Array.from()还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理过后的值放入返回的数组

let array = {
    '0': 1,
    '1': 2,
    '2': 3,
    'length': 3
}
let newArr = Array.from(array, item => item * 2)
/* let newArr = Array.from(array, (item) => {
    return item * 2
}) */
console.log(newArr) // [2, 4, 6]

实例方法

find 用于找出第一个符合条件的数组成员，如果没有找到返回undefined

let arr = [
    {
        id: 1,
        uname: '张三'
    },
    {
        id: 2,
        uname: '李四'
    }
]
let target = arr.find((item, index) => item.id === 2)
/* let target = arr.find((item, index) => {
    retrun item.id === 2
}) */
console.log(target) // 输出的是id值为2的对象

findIndex() 用于找出第一个符合条件的数组成员位置，如果没有找到返回 -1

let arr = [1, 5, 10, 15]
let index = arr.findIndex((value, index) => value > 9)
/* let index = arr.find((value, index) => {
    retrun value > 9
}) */
console.log(index) // arr数组中10是大于9的，10的索引是2，返回的是2

includes() 表示某个数组是否包含给定的值

let arr = [1, 2, 3]
arr.includes(2) // true
let result = arr.includes(4) // false
console.log(result) // false

带回调函数的

能修改原数组的

不能修改原数组的

字符串（String）扩展方法

模板字符串 使用反引号定义

let uname = `张三`

模板字符串中可以解析变量

let uname = '张三'
let sayHi = `Hi, my name is ${uname}` 
console.log(sayHi) // Hi, my name is 张三

模板字符串中可以换行

let result = {
    uname: '张三',
    sex: '男',
    age: 18
}
let html = `<div>
                  <span>${result.uname}</span>
                  <span>${result.sex}</span>
                  <span>${result.age}</span>
            </div>`

实例方法

startsWith() 和 endsWith()

• startsWith()：表示参数字符串是否在原字符串的头部（是否在开头），返回布尔值
• endsWith()：表示参数字符串是否在原字符串的尾部（是否在结尾），返回布尔值

    let str = 'Hello Word!'
    let r1 = startsWith('Hello')
    console.log(r1) // true
    let r2 = endstsWith('!')
    console.log(r2) // true
    let r3 = startsWith('Hi')
    console.log(r3) // false

repeat() 方法表示将原字符串重复n次，返回一个新字符串

let str = 'str'.repeat(3)
console.log(str) // strstrstr

Set 数据结构

ES6提供了新的数据结构 Set ，它类似于数组，但是成员的值都是唯一的，没有重复的值
Set 本身是一个构造函数，用来生成 Set 数据结构

const set = new Ste()
console.log(set.size) // 0

Set 函数可以接受一个数组作为参数，用来初始化

const set = new Set([1, 2, 3])
console.log(set.size) // 3

因为 Set 的成员的值都是唯一的，没有重复的值，可以做数组去重

const set = new Set(['a', 'a', 'b', 'b', 'c', 'c'])
console.log(set.size) // 3
let arr = [...set]
console.log(arr) // ['a', 'b', 'c']

Set 实例方法：

• add(value)：添加某个值，返回 Set 结构本身
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
• has(value)：返回一个布尔值，表示该值是否为 Set 的成员
• clear()：清除所有成员，没有返回值

    const set = new Set()
    set.add(1).add(2).add(3) // 向Set结构中添加值
    console.log(set) // Set(3) {1, 2, 3}
    let r1 = set.deleta(2) //删除Set结构中值是2的成员
    console.log(r1) // 删除成功返回true
    let r2 = set.has(1) //表示Set结构中是否有1这个值
    console.log(r2) // 如果有这个值返回true
    set.clear() // 清除Set结构中所有的成员
    console.log(set) // Set(0) {size: 0}

变量 Set 数据结构

Set 结构的实例与数组一样，也拥有 forEach 方法，用于对每个成员执行某种操作，没有返回值

let set = new Set([1, 2, 3, 4, 5])
set.forEach(value => console.log(value)) // 1 2 3 4 5
/* set.forEach((value) => {
    console.log(value) // 1 2 3 4 5
})
set.forEach(function (value) {
    console.log(value) // 1 2 3 4 5
}) */