JavaScript之ES6新特性03

拓展运算符

????????扩展运算符（spread）是三个点（ ... ）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

1. 数组的合并

//声明一个数组 ...
const persons = ['小明', '小红', '小昂']
// => '小明', '小红', '小昂'
console.log(...persons) //小明 小红 小昂
// 1. 数组的合并
const student = ['王一', '张二']
const allPerson = [...persons, ...student]
console.log(allPerson) //[ '小明', '小红', '小昂', '王一', '张二' ]

2. 数组的克隆?

const persons = ['小明', '小红', '小昂']
// 2. 数组的克隆
const persons2 = [...persons]

3. 将伪数组转为真正的数组?

// 常用于页面将document.querySelectorAll('div')获取的伪数组转化为真正的数组
console.log([...'hello']);//[ 'h', 'e', 'l', 'l', 'o' ]

4.用于函数调用?

function push(array, ...items) {
  array.push(...items)
  console.log(array)//[ 4, 38, 6, 4, 8 ]
}
function add(x, y) {
  return x + y
}
const numbers = [4, 38]
console.log(add(...numbers)) // 42
push(numbers,6,4,8)

// 扩展运算符后面还可以放置表达式。
let x = 3;
const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
  ]
  console.log(arr)//[ 'a', 'b' ]
// 如果扩展运算符后面是一个空数组，则不产生任何效果。
console.log(...[],2);//2

Symbol?

? ? ? ? ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。也就是说，JavaScript 除了原有的六种数据类型（undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object））之外，新增了一种。

Symbol特点

• Symbol的值是唯一的，用来解决命名冲突问题。
• Symbol值不能和其他数据进行运算。
• Symbol定义的对象属性不能使用 for...in循环遍历，但是可以使用Reflect.ownKeys来获取所有键名?。

?Symbol的注意事项：

• ?Symbol 函数前不能使用 new 命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。也就是说，由于 Symbol 值不是对象，所以不能添加属性。
• ?Symbol 函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的 Symbol 函数的返回值是不相等的
• Symbol 值不能与其他类型的值进行运算，会报错
• Symbol 值作为对象属性名时，不能用点运算符，而且使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中
• Symbol 值作为属性名时，该属性还是公开属性，不是私有属性

Symbol的使用：?

? ? ? ?1. Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述， 主要是为了在控制台显示，或者转为字符串时，比较容易区分

let s1 = Symbol('foo')
let s2 = Symbol('bar')
console.log(s1) // Symbol(foo)
console.log(s2) // Symbol(bar)
console.log(s1.toString()) // Symbol(foo)

? ? ? ? ?2. 如果 Symbol 的参数是一个对象，就会调用该对象的 toString 方法 ，将其转为字符串，然后才生成一个 Symbol 值

const obj = {
  toString() {
    return 'abc'
  }
}
const sym = Symbol(obj)
console.log(sym) // Symbol(abc)

? ? ? ? 3. Symbol 函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的 Symbol

// 没有参数的情况
let a1 = Symbol();
let a2 = Symbol();
console.log(a1 === a2); // false
// 有参数的情况
let n1 = Symbol('foo');
let n2 = Symbol('foo');
console.log(n1 === n2 );// false

? ? ? ? ?4. Symbol 值可以显式转为字符串，布尔值，但不能转换成数值

let sm = Symbol('My symbol');
console.log(String(sm) );// 'Symbol(My symbol)'
console.log(sm.toString()); // 'Symbol(My symbol)'
// Symbol 值也可以转为布尔值，但是不能转为数值
let b = Symbol();
console.log(Boolean(b)); // true
console.log(!b); // false

? ? ? ? 5. Symbol 值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性

let mySymbol = Symbol()
// 第一种写法
let aa = {}
aa[mySymbol] = 'Hello!'
// 第二种写法
let bb = {
  [mySymbol]: 'Hello!'
}
// 第三种写法
let cc = {}
Object.defineProperty(aa, mySymbol, { value: 'Hello!' })
// 以上写法都得到同样结果
console.log(aa[mySymbol]) // "Hello!"

详情可点击：JavaScript中文网 - 现代 JavaScript 教程