• Array的扩展方法
  • 扩展运算符(展开语法)
    • 构造函数方法 Array.from()
    • 实例方法
      • find()
      • findIndex()
      • includes()
  • String 的扩展方法
    • 模板字符串
      • startsWith() 、 endsWith()
      • repeat()
  • Set数据结构
    • Set本身是一个构造函数,用来生成Set数据结构
    • 数组去重
    • 实例方法
    • 遍历

Array的扩展方法

扩展运算符(展开语法)

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

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

1. 扩展运算符-合并数组

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

1. 将类数组或可遍历对象转换为真正的数组

  let  oDivs = document.getElementsByTagName('div')
  console.log(oDivs) //伪数组
  console.log([...oDivs]) //真实的数组

构造函数方法 Array.from()

• 将类数组或可遍历对象转换为真正的数组

  let obj = {
    '0':'张山',
    '1':'李四',
    '2':'王五',
    'length':3
  }
  let arr = Array.from(obj)
  console.log(arr) //输出了一个真正的数组

  let obj1 = {
    '0':'1',
    '1':'2',
    '2':'3',
    'length':3      
  }
  let arr1 = Array.from(obj1,(item)=>{
    return item*2
  })
  console.log(arr1) //输出的 是 [2,4,6] 

实例方法

find()

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

  let arr = [
    {id:1,name:'张三'},
    {id:2,name:'李四'},
  ] 
  let target = arr.find((item,index)=>{
    return item.id === 2
  })
  console.log(target)
  {id: 2, name: "李四"}

findIndex()

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

  let arr = [1,5,10,15]
  let index = arr.findIndex((value,index)=>value>9);
  console.log(index)

includes()

• 表示某个数组是否包含给定的值,返回布尔值

  let beeleans1 = [1,2,3].includes(2);
  let beeleans2 = [1,2,3].includes(4);
  console.log(beeleans1)
  console.log(beeleans2)

String 的扩展方法

模板字符串

1. ES6新增的创建字符串的方式,使用反引号定义

  let name = `张山`
  console.log(name)

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

  let sayHello = `Hello,my name is ${name}`;
  console.log(sayHello)

1. 模板字符串中可以 换行

  let result = {
    name:'suni1024',
    age:20,
    sex:'男'
  }
  let html = `<div>
    <span>${result.name}</span>
    <span>${result.age}</span>
    <span>${result.sex}</span>
  </div>`;
  console.log(html)

1. 模板字符串中可以 调用函数.

  const sayHello = ()=>{
    return `卧槽无情`
  }
  let greet = `${sayHello()},二货`
  console.log(greet)

startsWith() 、 endsWith()

• startsWith()-表示参数字符串是否在原字符串的头部,返回布尔值
• endsWith()-表示参数字符串是否在原字符串的尾部,返回布尔值

  let str = `Hellow world!`;
  const a = str.startsWith('Hello');
  const b = str.endsWith('!!');
  console.log(a) //true
  console.log(b) //false

repeat()

• repeat 方法表示将原字符串重复N次,返回一个新字符串

  let x = 'X'.repeat(3)
  let Hello = 'Hello'.repeat(2)
  console.log(x) //xxx
  console.log(Hello) //HelloHello

Set数据结构

• ES6提供了新的数据结构Set.类似于数组,但是成员的值都是唯一的,没有重复的值

  Set本身是一个构造函数,用来生成Set数据结构

  const s = new Set();
  Set 函数可以接受一个数组作为参数,用来初始化.
  const set = new Set([1,2,3,4,4])
  console.log(s)
  console.log(s.size)

数组去重

  const set2 = new Set(['a',3,4,4])
  console.log([...set2])

实例方法

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

  const s4 = new Set();
  s4.add(1).add(2).add(3);//向set结构中添加值 
  console.log(s4)
  s4.delete(2) //删除set结构中的2值
  console.log(s4)
  let a = s4.has(1) //表示set 结构中是否有1这个值,返回布尔值
  console.log(a)
  s4.clear() //清楚set结构中的所有值
  console.log(s4)
  const mySet = new Set();
  mySet.add("蚂蚁部落");
  mySet.add(4);
  mySet.add("www.softwhy.com");
  console.log(mySet)

遍历

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

  const s5 = new Set(['a','b','c','d'])
  s5.forEach(value=>{
    console.log(value)
  })

01-ES6学习

原文：https://www.cnblogs.com/suni1024/p/12197800.html