css

mikyou 发布于2019-08-23 12:24 / 3467人阅读

摘要：一个名不见经传的方法的中文意思是符号象征标志记号等。而是新增的一个原生数据类型。但不能作为构造函数使用。只有一个目的作为对象属性的唯一标识符，防止对象属性冲突发生。当使用时以值作为键的属性会被完全忽略，示意代码

ES6一个名不见经传的Symbol()方法

symbol的中文意思是：符号；象征；标志；记号等。

说到JavaScript原生数据类型，我们通常想到的有这6种：undefined、null、boolean、string、number、object。而symbol是ES6新增的一个原生数据类型。

typeof Symbol();

而Symbol本身又是一个方法。

但Symbol不能作为构造函数使用。

new Symbol();

只有一个目的——作为对象属性的唯一标识符，防止对象属性冲突发生。
因为Symbol()返回值是唯一的，也就是：

Symbol("description") === Symbol("description");    // 返回值是false


let info1 = {
   name: "小明",
   age: 24,
   job: "公司前台",
   [Symbol("description")]: "喜欢游泳"
}
let info2 = {
   [Symbol("description")]: "热情似火"
}

let target = {};
Object.assign(target, info1, info2);

我们可以使用Object.getOwnPropertySymbols(obj)这个方法进行获取

Symbol在和对象使用的时候，往往离不开JS中的数组括号[]，例如：

var smy = Symbol();
var info = {
  smy: "x",
  [smy]: "y"
};
此时：

console.log(info.smy);       // 输出"x"
console.log(info["smy"]);    // 输出"x"
console.log(info[smy]);      // 输出"y"

可以添加属性的

var smy = Symbol();
smy.description = "描述";

Symbol值可以显式转为字符串，也可以转为布尔值，但是不能转为数值

var smy = Symbol();
=> +smy

隐式地创建一个新的string类型的属性名也会报错，例如Symbol("foo") + "bar" 将抛出一个TypeError

使用宽松相等时， Object(sym) == sym返回值是true。注意这里外面套的是Object()；

Symbols在for...in迭代中不可枚举，如果想要达到效果，借助Object.getOwnPropertySymbols(obj)这个方法。

当使用JSON.strIngify()时以symbol值作为键的属性会被完全忽略，示意代码：

JSON.stringify({[Symbol("foo")]: "foo"});    // "{}"

GPU云服务器云服务器 css引入css css _CSS css88

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98451.html

[译]148个资源让你成为CSS专家

摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

impig33 2019-08-29 11:10 评论0 收藏0
简单易懂的CSS Modules

摘要：结果是选手获胜，名为的元素，最终的值为。而合理的命名约定，的确是组织代码的有效策略。它们会再由转换为适当的组合。虽然本文为了严谨，结果写了相当长的篇幅，但希望你读过之后，还能觉得是简单易懂的。不要误会，CSS Modules可不是在说css模块化这个好像在某些地方见过的词，它其实是特指一种近期才出现的技术手段。什么技术手段呢？请待后文说明。层叠样式表我们知道，css的全名叫做层...

chunquedong 2019-08-30 12:58 评论0 收藏0
CSS Modules实践

摘要：能最大化地结合现有生态预处理器后处理器等和模块化能力，几乎零学习成本。编码相关的所有样式上例中打印的结果是注意到是按照自动生成的名。实践手动引用渲染结果使用可以实现使用属性自动加载模块。文章同步于Github Pines-Cheng/blog 随着前端这几年的风生水起，CSS作为前端的三剑客之一，各种技术方案也是层出不穷。从CSS prepocessor（SASS、LESS、Styl...

hankkin 2019-08-29 13:00 评论0 收藏0
【译】编写更好的CSS必备的40个工具

摘要：一个叫的人用纯重绘并模拟了种不同的移动设备包括可以给你的网站添加不相关的独立组件的一个库。每一个组件都是针对移动设备定制的，并且它有很多你在传统的框架中看不到的功能。如果你用开发移动优先的网站，并想要网站正常运行在低版本的上，可以考虑。众所周知，CSS是非常棒的，它使网站看起来很漂亮，可以为网站添加动画，并让呈现和内容分离。去了解CSS的一切是非常难做到的，它只会变得更加困难,因为我...

moven_j 2019-08-28 18:09 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
CSS Modules详解及React中实践

摘要：上例中打印的结果是对中的名都做了处理，使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器，所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...

wemall 2019-08-30 15:45 评论0 收藏0