JavaScript ES语法学习笔记（四）

发表于 | 分类于

Object Property

1
2
3
4
5
6
7
8
9
let x = 1 ; let y = 2 ; let z = 3
let obj = {
  'x': x,
  y,           //ES6之前必须是key-value形式，ES6可以简写
  [z + y]: 6,   //ES6属性值支持变量表达式
  * hello () {  //加*变成异步函数
    console.log('hello2')
  }
}

Set数据结构

ES5只能用数组或Object存储数据，ES6新增set
set存储的数据不能重复，会自动过滤重复的数据

1
2
3
4
5
6
7
8
9
let s = new Set()
let s = new Set([1, 2, 3, 4])   //可遍历的数据都可以用set方法
s.add('hello')       //添加数据，set不允许重复，所以重复添加数据是无效的
s.add('goodbye')
s.add('hello').add('goodbye').add('hello')
s.delete('hello')  // 删除元素
s.clear()            //清空

console.log(s.has('hello2'), s.size)   //has判断是否有数据,size已经存入数据的参数

读取set中的数据

1
2
3
4
5
6
7
8
9
console.log(s.keys())      //返回键名
console.log(s.values())   //返回键值
console.log(s.entries())  //输出键值对
s.forEach(item => {      //遍历set中每个成员
  console.log(item)
})
for (let item of s) {
  console.log(item)
}

Map数据结构

Map类似python中的“字典”数据结构（Object键值对）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let map = new Map([[1, 2], [3, 4]])  //字典的形式，k可以是任意值
let map = new Map()
map.set(10, 2)     //set既能添加数据也能修改数据
map.set(3, 'value-4')
map.set(1, 'value-3')
map.delete(1)     // 删除指定数据
map.clear()         //清空

//查某个值
console.log(map.size)     //统计key-value的总数
console.log(map.has(2))    //判断是否有key-value
console.log(map.get(1))   //k返回map对象的指定元素
console.log(map.keys(), map.values(), map.entries())

//map遍历方法
map.forEach((value, key) => {   //对map对象中的每一个键值对执行一次参数中提供的回调函数
  console.log(value, key)
})
for (let [key, value] of map) {   //可以直接遍历每个成员
  console.log(key, value)
}

Object.assign（拷贝对象）

浅复制：对于不是引用的数据，做数据替换；对于引用的数据，替换地址
assign是浅拷贝，可能会导致数据的丢失

1
2
3
4
5
6
7
8
9
const target={a:1,b=2}
const target={a:1,b=2}

const returnedTarget=Object.assign(target,source)

console.log(target)
//output:Object{a:1 , b:4 , c:5}
console.log(returnedTarget)
//output:Object{a:1 , b:4 , c:5}

Regexp Sticky（y修饰符）

1
2
3
4
5
const s = 'aaa_aa_a'
const r1 = /a+/g    // ^ $
const r2 = /a+/y    //必须从剩余部分的第一个位置严格匹配   y--sticky粘连
console.log(r1.exec(s))// 输出：aaa
console.log(r2.exec(s)) //第一次运行匹配aaa  第二次运行匹配aa

Regexp Unicode（u修饰符）

u能识别大于2个字节的字符

1
2
3
4
5
6
7
8
9
10
11
12
let s = '𠮷'
let s2 = '\uD842\uDFB7'
console.log(/^\uD842/.test(s2))    //返回true
console.log(/^\uD842/u.test(s2))  //返回false , 结果正确

console.log(/^.$/.test(s))
console.log(/^.$/u.test(s))     //u能识别大于2个字节的字符

console.log(/\u{20BB7}/u.test(s))   //在正则中使用unicode码点的写法
console.log(/\u{61}/u.test('a'))

console.log(/𠮷{2}/u.test('𠮷𠮷'))    //量词的写法

String（字符串拼接问题）

1
2
3
4
5
6
const a = 20
const b = 10
const c = 'javascript'
// const str = 'my age is' + (a + b) + 'i love' + c
const str = `my age is ${a + b} i love ${c}`     ES6写法 ${}中间可加变量
console.log(str)

ES6处理字符串拼接的实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Price (strings, type) {
  let s1 = strings[0]
  const retailPrice = 20
  const wholeSalePrice = 16
  let showTxt
  if (type === 'retail') {
    showTxt = '购买单价是：' + retailPrice
  } else {
    showTxt = '购买的批发价是：' + wholeSalePrice
  }
  return `${s1}${showTxt}`
}
let showTxt = Price`您此次的${'retail'}`
console.log(showTxt)

ES6能识别换行

1
2
3
4
let s1 = `我是第一行
                      //ES6能识别换行
我是第二行`
console.log(s1)

Array Destructure（解构赋值）

在ES6中新增了变量赋值的方式——解构赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
let arr = ['hello', 'world']
let [firstName, surName] = arr   //解构赋值语法
console.log(firstName, surName)

let arr = ['a', 'b', 'c', 'd']     //解构赋值arr支持所有可遍历的对象
let [firstName,, thirdName] = arr   //逗号略过不想要的值
console.log(firstName, thirdName)

let user = { name: 's', surname: 't' };
[user.name, user.surname] = [1, 2]   //修改 已声明的属性值
console.log(user)

//循环体的赋值
let user = { name: 's', surname: 't' }
for (let [k, v] of Object.entries(user)) {
  // 隐式赋值，显示索引
  // arr[1]
  console.log(k, v)
}

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let [firstName, curName, ...rest] = arr   //rest放剩余的数据, rest参数放在赋值变量的最后一个位置上
console.log(firstName, curName, rest)

//对象的解构赋值
let options = {
  title: 'menu',
  // width: 100,
  height: 200
}
let { title: title2, width = 130, height } = options   //简写的接受名一定要与对象中名字一样，换名称写法title: title2
console.log(title2, width, height)

//复杂例子
let options = {
  size: {
    width: {
      size: {
        width: 200
      }
    },
    height: 200
  },
  items: ['Cake', 'Donut'],
  extra: true
}
let { size: { width: width2, height }, items: [, item2], extra } = options
console.log(width2, height, item2, extra)
0%