ES9 新特性 ------ 扩展运算符

在ES9 中 为对象提供了像数组一样的 rest 参数和扩展运算符。

… 扩展运算符

  1. …user 涵盖了对象里面 username 之后的键值
	function connect({host, port, ...user}){
        console.log(host)
        console.log(port)
        console.log(user)
    }

    connect({
        host:'127.0.0.1',
        port: 3306,
        username: 'root',
        password: 'root'
    })

ES9 新特性 ------ 扩展运算符_第1张图片

  1. 扩展运算符对对象的操作(将对象展开,形成对象序列)
	const one = {one: '西游记'}
    const two = {two: '水浒传'}
    const three = {three: '三国演义'}
    const four = {four: '红楼梦'}

    const classic = {...one, ...two, ...three, ...four}
    console.log(classic) 

正则扩展 —— 命名捕获分组

ES5的方法:

	// 声明一个字符串
    let str = '百度'

    // 提取 url 与 [标签文本]
    const reg = /(.*)<\/a>/

    // 执行
    const result = reg.exec(str)

    console.log(result[1]) // http://www.baidu.com
    console.log(result[2]) // 百度

ES9新增方法:

	// 声明一个字符串
    let str = '百度'

    // 提取 url 与 [标签文本]
    const reg = /(?.*)<\/a>/

    // 执行
    const result = reg.exec(str)

    console.log(result.groups.url) // http://www.baidu.com
    console.log(result.groups.text) //百度

注:groups(),它返回一个包含唯一或所有子组的元组。

正则扩展 —— 反向断言

  1. 正向断言
	// 声明一个字符串
    let str = 'JS5211314你知道么555啦啦啦'
    // 正向断言(根据后面的内容,判断前面的内容是否合法)
    const reg = /\d+(?=啦)/

    const result = reg.exec(str)
    console.log(result)

ES9 新特性 ------ 扩展运算符_第2张图片

  1. 反向断言
// 声明一个字符串
        let str = 'JS5211314你知道么555啦啦啦'
        
        const reg = /(?<=么)\d+/
        const result = reg.exec(str)
        console.log(result)

ES9 新特性 ------ 扩展运算符_第3张图片

正则扩展 —— dotAll 模式

dot . 元字符 除换行符以外的任意单个符号

需求:把 ul 的电影名称和上映时间提取出来

	let str = `
        
        `
    const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs
    let data = []
    let result
    while(result = reg.exec(str)){
        console.log(result)
        data.push({title: result[1], time: result[2]})
    }

ES9 新特性 ------ 扩展运算符_第4张图片
不积跬步无以至千里 不积小流无以成江海

你可能感兴趣的:(ES6,语法,html,javascript,es6)