js基础复习(三)

295 阅读2分钟

1. 正则新标识符

1.1 y修饰符 stiky粘连

const s = 'aaa_aa_a'
const r1 = /a+/g
const r2 = /a+/y

console.log(r1.exec(s)) // ["aaa", index: 0, input: "aaa_aa_a", groups: undefined]
console.log(r2.exec(s)) // ["aaa", index: 0, input: "aaa_aa_a", groups: undefined]

console.log(r1.exec(s)) // ["aaa", index: 4, input: "aaa_aa_a", groups: undefined]
console.log(r2.exec(s)) // null

加了y标识符是指从第一次匹配成功后的下一位开始匹配
加了g标识符是从剩余的所有字符串中匹配

1.2 u修饰符 处理中文

由于"\uD842\uDFB7"是一个四个字节的UTF-16编码,代表一个字符,所以如果正则表达式带有u修饰符,那么就能够识别它。
不加 u 修饰符,那么无法将四个字节的UTF-16编码识别为一个字符,所以可以产生匹配。
添加u修饰符之后,点元字符就可以匹配码点大于0xFFFF的Unicode字符。

console.log(/^\uD842/.test("\uD842\uDFB7")) // true

console.log(/^\uD842/u.test("\uD842\uDFB7")) // false

/^.$/.test("\uD842\uDFB7")//false

/^.$/u.test("\uD842\uDFB7")//true

2.模板字符串

2.1 字符串拼接

let a = 'hello'
let b = 'world'
let str = `${a} ${b}` // hello world

2.2 逻辑处理 Tag函数

// strs是变量分隔的常量,后面有几个变量就有几个参数
function price (strs, type) {
    let txt = ''
	let price = 10
	if (type === 'detail') {
		txt= `购买的单价是:${price}`
	} else {
		txt = `购买的总价是:${price * 10}`
	}
	return `${strs[0]}${txt}`
}

let show = price`您${'detail'}` // "您购买的单价是:10"
let show2 = price`您${'total'}` // "您购买的总价是:100"

2.3 换行

let a = `1
2`

3.解构赋值

所有可遍历的数据结构都可以结构赋值

let [a, b] = ['hello', 'world']

a // 'hello'
b // 'world'
let [a, , c] = ['a', 'b', 'c']

a // 'a'

c // 'c'
let str = 'abcd'
let [a, , c] = str
let [a, , c] = new Set([1, 2, 3]) // set通过索引是取不到的,但是可以通过结构赋值拿到
a // 1
c // 3
let user = {
    name: 'zhangsan',
    age: '12'
}; // 这个分号必须加上

[user.name, user.age] = ['lisi', '22']
let obj = {
    name: '张三',
    age: 20
}

let { name, age } = obj // 其实是简写,相当于let { name: name, age: age } = obj
name // "张三"
age // 20
let obj = {
    name: '张三',
    age: 20
}

let {
    name: a,
    age: b
} = obj

a // "张三"
b // 20
let option = {
    size: {
        width: 100,
        height: 100
    }
}

let {size: {width: a, height: b}} = option

a // 100
b // 100

3.1 遍历对象时的应用

let user = {
    name: 'a',
    age: '10'
}

for (let [key, value] of Object.entries(user)) { // user本身不可遍历,需要用Object.entries()
    console.log(key, value)
}

// name a
// age 10