JavaScript进阶(十八):ES6 Symbol 用法_react symbol,BAT面试&高级进阶

35 阅读3分钟

一、什么是Symbol?

Symboles6中一种新增的数据类型,它表示独一无二的值。es5把数据类型分为基本数据类型(String, Number, Boolean, Null, Undefined)和引用数据类型(Object),es6中新增的Symbol数据类型划分到基本数据类型。

为什么会有这样一种数据类型呢?

//别人定义好的对象
var obj = {
  name: "xiaoqiang",
  showName: function(){alert(1)}
}
// 获取到对象后,给对象添加新的属性和方法的时候,可能会创建出一个name属性和showName方法
obj.name = "nodeing"
obj.showName = function(){alert(2)}

这个时候,新增加的方法和属性就会去把原有的方法覆盖,这样就产生了冲突。

由于对象的属性和方法是字符串组成,这样新增方法和属性的时候有可能冲突,在es6中就新增了一种数据类型,表示独一无二的值。

通过Symbol函数可以创建一个独一无二的值,每一次执行Symbol函数的时候返回的都是一个对象。

let s1 = Symbol()
let s2 = Symbol()
 
console.log(s1 === s2) //false 说明创建出来的s1和s2 并不是相同的
console.log(s1, s2); //Symbol() Symbol()

上述代码中,打印出来的值都是Symbol() , 怎样才能区分谁是s1,谁是s2呢?可以通过传参形式来解决:

// 传入的参数就是对当前Symbol的描述,用来区分Symbol
let s1 = Symbol("s1")
let s2 = Symbol("s2")
console.log(s1, s2);  //Symbol(s1) Symbol(s2)

二、应用场景

Symbol通常用于设置对象的属性名或者方法,防止新加入的属性或者方法与原来属性或者方法冲突。

 
let name = Symbol("name");
let show = Symbol("show");
 
let obj = {
  //设置属性
  [name]: 'xiaoqiang',
  [show](){alert(1)}
};
//取值
console.log(obj[name]);
//调用方法
obj[show]()

这里要注意的是name的值必须是在[]中表示是可以改变的是一个变量。

三、注意事项

* Symbol里面的参数仅仅是对Symbol的描述,没有其他意义,因此,即使描述相同,Symbol也是不同的。

Symbol这个函数的返回值是一个对象。

console.log(Symbol("nodeing") === Symbol("nodeing")) //false

* Symbol函数不能使用New关键字调用。

let s1 = new Symbol(); //报错

* Symbol类型在做类型转换的时候不能转成数字。

let s1 = Symbol("s1");
console.log(String(s1));  //Symbol(s1)
console.log(Boolean(s1));  //true
console.log(Number(s1)) //报错

* Symbol不能做任何运算

console.log(Symbol("s1") + "nodeing") //报错
console.log(Symbol("s1") - 100) //报错

* Symbol在作为对象属性或者方法的时候,如果不赋值给一个变量的话,没有办法取值。

let obj = {
	//设置属性
	[Symbol("name")]: 'xiaoqiang'
};
//取值
console.log(obj[Symbol("name")]);

React

* 介绍一下react

* React单项数据流

* react生命周期函数和react组件的生命周期

* react和Vue的原理,区别,亮点,作用

* reactJs的组件交流

* 有了解过react的虚拟DOM吗,虚拟DOM是怎么对比的呢

* 项目里用到了react,为什么要选择react,react有哪些好处

* 怎么获取真正的dom

* 选择react的原因

* react的生命周期函数

* setState之后的流程

* react高阶组件知道吗?

* React的jsx,函数式编程

* react的组件是通过什么去判断是否刷新的

* 如何配置React-Router

* 路由的动态加载模块

* Redux中间件是什么东西,接受几个参数

* redux请求中间件如何处理并发

开源分享:docs.qq.com/doc/DSmRnRG…