ES6高级技巧(五)
Set
由于Set结构没有键名,只有键值所有keys方法和values方法的行为完全一致
let a=new Set([1,2,3,4])
//a.keys() a.values() 或者直接用of遍历
for (let item of a) {
console.log(item)
}
/*
* 1,2,3,4
* */
forEach()
let a = new Set([1, 2, 3, 4])
let b = [];
a.forEach(v=>b.push(v))
console.log(b)
数组的map和filter方法也可以间接用于Set
let set =new Set([1,2,3])
let set1=new Set([...set].map(v=>v*2))
console.log(set1)
//Set { 2, 4, 6 }
let set2=new Set([...set].filter(v=>v%2==0))
console.log(set2)
// Set { 2 }
使用Array.from()
let set = new Set([1, 2, 3, 4])
let set1 = Array.from(set, val => val * 2)
console.log(set1)
//[ 2, 4, 6, 8 ]
WeakSet
WeakSet是一种构造函数,可以使用new命令,创建WeakSet数据结构
weakSet可以接受一个数组或类似数组的对象
weakSet 的成员只能是对象,而不能是其他类型的值
add
has
delete
WeakSet没有size属性以及clear()属性,没有办法遍历他的成员
WeakSet的一个用处,是存储DOM节点,是弱引用
Map
size()
constructor
set()
get()
has()
delete()
clear()
遍历方法
keys()
values()
entries()
forEach()
Map本身没有map和filter方法,结合数组的方法,实现过滤
let map1 = new Map()
map1.set(1, 'a')
map1.set(2, 'b')
console.log([...map1])
//[ [ 1, 'a' ], [ 2, 'b' ] ]
let b = [...map1].filter(([key, value]) => key <2)
console.log(b)
//[ [ 1, 'a' ] ]
let c=[...map1].map(([key,value])=>key*2)
console.log(c)
WeakMap
WeakMap结构与Map结构基本类似,唯一的区别是他只接受对象作为键名,不接受其他类型的值作为键名
let myElement = document.getElementById('logo')
let myWeakmap = new WeakMap()
myWeakmap.set(myElement, { times: 0 })
myElement.addEventListener('click', function () {
let login = myWeakmap.get(myElement)
login.times++
})
Object.assign
console.log(Object.assign([1, 2, 3], [4, 5]))
//把数组视为属性民0,1,2的对象,所以后面的[4,5]覆盖了前面的1,2
//[4,5,4]
为对象添加方法
function SomeClass() {
}
Object.assign(SomeClass.prototype, {
add(arg1, arg2) {
return arg1 + arg2
},
multi(arg1, arg2) {
return arg1 - arg2
}
})
let some = new SomeClass()
console.log(some.add(1, 2))
console.log(some.multi(1, 2))
合并对象
let a=[{name:'zhangasn'},{age:12}]
console.log(Object.assign({}, ...a))
// { name: 'zhangasn', age: 12 }
Symbol
const sym = Symbol('foo');
console.log(sym.description) //'foo'
作为属性名Symbol
let mySymbol = Symbol()
let a = {}
a[mySymbol] = 'hello';
console.log(a[mySymbol]) //hello
let b={[mySymbol]:'hello'}
console.log(b[mySymbol]) //hello
let c=Object.defineProperty({},mySymbol,{value:'hello'})
console.log(c[mySymbol])//hello
注意,Symbol值作为对象属性名时,不能用点运算符
const mySymbol = Symbol()
const a = {}
a.mySymbol = 'hello'
console.log(a['mySymbol']) //"hello"
a[mySymbol]//这个是访问不到的
const obj = {}
let a = Symbol('a')
let b = Symbol('b')
obj[a] = 'hello'
obj[b] = 'World'
let cArr = Reflect.ownKeys(obj)
for (let item of cArr) {
console.log(obj[item])
//hello
// World
}
Symbol.for()
Symbol.for()
与Symbol()
都会生成新的Symbol,他们的区别是,前者会被登记在全局进行搜索,后者不会let s1 = Symbol('foo')
let s2 = Symbol('foo')
console.log(s1 === s2)//false
let s3 = Symbol.for('foo')
let s4 = Symbol.for('foo')
console.log(s3 === s4)//true
Symbol.iterator
对象的
Symbol.iterator
属性,指向该对象的默认遍历器的方法const a = {}
a[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3
};
console.log([...a])
判断非空isEmpty
const isEmpty=val=>val===null||!(Object.keys(val)||val).length
判断一个字符串是否有重复的字符
//采用桶排序的思想
const isData = str => {
let flag = Array.from({ length: 128 }, v => 0)
for (let i = 0; i < str.length; i++) {
let c = str.charCodeAt(i)
if (flag[c] > 0) {
return false
} else {
flag[c]++
}
}
return true
}
console.log(isData('abc'))
判断两个字符集是否相同
const equls = (s1, s2) => {
const map = new Map();
for (let i = 0; i < s1.length; i++) {
if (map.get(s1[i]) == null) {
map.set(s1[i], 1)
}
}
for (let i = 0; i < s2.length; i++) {
if (map.get(s2[i]) === null) {
return false
}
}
return true
}
判断是否是旋转词
const joint = (str, s1) => {
let a = ''
let b = [];
for (let i = 0; i < str.length; i++) {
if (i == 0) {
a = str.slice(i)
} else {
a = str.slice(i) + str.slice(0, i)
}
b.push(a)
}
return b.indexOf(s1) > -1 ? true : false
}
String
String.prototype.charAt(index) 0<=index<=length-1 返回特定位置的字符
String.prototype.charCodeAt(index) 返回给定的字符的Unicode值
String.prototype.concat() 连接两个字符串文本,返回新的字符串
String.prototype.includes() 判断字符串是否包含
endsWith() 判断当前字符串是否是以另外一个给定的子字符串'结尾' Boolean
startsWith() '开头' Boolean
String.localeCompare() 'abcsbda'.split('').sort((a, b) => a.localeCompare(b))
String.prototype.padEnd() 两个参数,第一个数字符串的最大长度,第一个参数是添加的字符串,长度不能超过max.length
repeat() 重复的次数
replace() 替换
slice()
比较
类型 | 运算规则 |
---|---|
两个值类型进行比较 | 直接比较数据在序列中的大小 |
值类型与引用类型比较 | 将引用类型的数据转换为与值类型数据相同的数据 |
两个引用类型比较 | 无意义,总是返回false |
console.log('b' > 'a') //true
for--of的妙用
let arr = {
name: 'zhangsan',
age: 12,
aa: 'cc'
}
for (let [key, value] of Object.entries(arr)) {
console.log(key + '===' + value)
}
对象与数组互转
给每个订单的对账情况加上状态样式(
success
、warning
、danger
)// 状态码说明: 100->对账成功、101->对账中、102->审核中、103->对账失败、104->取消对账
// 规定有如下样式映射表:
const style2StatusMap = {
success: [100],
warning: [101,102],
danger: [103,104]
}
//结果
const status2styleMap = {
100: 'success',
101: 'warning',
102: 'warning',
103: 'danger',
104: 'danger'
} const status = obj =>
Object.entries(obj)
.reduce((acc, val, i, array) => {
val[1].map(item => {
acc[item] = array[i][0]
})
return acc
}, {})
保镖模式
思考无效/边缘情况以及处理的情况
避免意外和不必要的代码
遵循自上而下的方法:
无效情况->小案例->预期案例
function transformData(rawData) {
// 检查没有数据的情况
if (!rawData) {
return [];
}
// 具体检查的情况
if (rawData.length == 1) {
return [];
}
// 具体代码
return rawData.map((item) => item);
}
不用switch
const contentTypes = {
post: () => console.log("creating a post..."),
video: () => console.log("creatinga video..."),
default: () => console.log('unrecognized content type')
};
const createType =(item)=> contentTypes[item] || contentTypes['default'];
createType('post')()
CSS篇
width:auto 和height:auto
width,height的默认值都是auto
对于块级元素,width:auto
自动撑满一行
对于内联元素,width:auto
则呈现出包裹性,既由子元素的宽度决定
无论内联元素还是会计元素,height:auto
都是呈现包裹性,即高度由子级元素撑开。但是父元素设置height: auto
会导致子元素height: 100%
百分比失效。
css的属性非常有意思,正常流下,如果块级元素的width
是个固定值,margin
是auto
,则margin
会撑满剩下的空间;如果margin
是固定值,width
是auto
,则width
会撑满剩下的空间。这就是流体布局的根本所在。
margin:auto 水平垂直居中
<div class="g-container">
<div class="g-box"></div>
</div> .g-container {
display: flex;
} .g-box {
margin: auto;
}
上面的
display: flex
替换成display: inline-flex | grid | inline-grid
也是可以的。
实现justify-content: space-between
<div class="ddd">
<div class="ccc"></div>
<div class="ccc"></div>
</div>
<style>
.ddd{
width: 900px;
height: 500px;
border:1px solid #2c3e50;
display:flex;
/*justify-content: space-between;*/
.ccc{
width: 100px;
height: 100px;
background-color: darkblue;
margin:0 auto;
}
.ccc:first-child{
margin-right: 0;
}
.ccc:last-child{
margin-left:0;
}
}
</style>
实现space-around
.ddd{
width: 900px;
height: 500px;
border:1px solid #2c3e50;
display:flex;
/*justify-content: space-around;*/
.ccc{
width: 100px;
height: 100px;
background-color: darkblue;
margin:0 auto;
}
}
单个元素右浮动
<div class="ddd">
<div class="ccc"></div>
<div class="ccc"></div>
<div class="ccc"></div>
</div>
.ddd{
width: 900px;
height: 500px;
border:1px solid #2c3e50;
display:flex;
.ccc{
width: 100px;
height: 100px;
background-color: darkblue;
}
.ccc:last-child{
margin-left:auto;
}
}
此时
auto
的计算值就是水平方向上容器排列所有li之后的剩余空间两个右浮动
<div class="ddd">
<div class="ccc"></div>
<div class="ccc"></div>
<div class="ccc aaa"></div>
<div class="ccc"></div>
</div> .ddd{
width: 900px;
height: 500px;
border:1px solid #2c3e50;
display:flex;
.ccc{
width: 100px;
height: 100px;
background-color: darkblue;
}
.aaa{
margin-left:auto;
}
}
垂直方向居中
父 {
display: flex;
flex-direction:column;
}
子{
margin:auto 0;
}
例如
<div class="g-container">
<p>这是第一行文案</p>
<p>这是第二行文案</p>
<p class="aaa">1、剩余多行文案需要垂直居中剩余空间</p>
<p class="aaa">2、剩余多行文案需要垂直居中剩余空间</p>
<p>这是最后一行文案</p>
</div>
.g-container {
width: 600px;
height: 600px;
border:2px solid #2c3e50;
display: flex;
flex-direction:column;
}
.aaa{
margin:auto 0;
}
css 权重
权重 | 选择器 |
---|---|
10000 | !important(!important 并不是选择器,但是权重却是最高的) |
1000 | 内联样式:style="" |
100 | ID选择器:#idName{...} |
10 | 类、伪类、属性选择器:.className{...} / :hover{...} / [type="text"] ={...} |
1 | 标签、伪元素选择器:div{...} / :after{...} |
0 | 通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~) |
body#god div.dad span.son {width: 200px;}
body#god span#test {width: 250px;}
(body+div+span=3) + (#god+.dad+.son=120) = 123
(body+span=2) + (#god+#test=200) = 202
content
css中的content
属性主要用伪元素:after,:before
中,其他一般不用
padding
注意点
line-height
属性是不作用于padding
background-clip
设置元素的背景,是否延伸到边框下面
//三道杠
.icon1{
box-sizing:border-box;
width: 20px;
height: 30px;
border-top:2px solid #2c3e50;
border-bottom:2px solid #2c3e50;
padding:2px 0;
background-color: #2c3e50;
background-clip:content-box;//内容裁剪
}
//圆环
.icon1{
box-sizing:border-box;
width: 20px;
height: 20px;
border:2px solid #2c3e50;
padding:4px;
border-radius:50%;
background-color: #2c3e50;
background-clip:content-box;//内容裁剪
}
margin
- 作为外边距,
margin
属性并不会参与盒子宽度的计算,但是通过设置margin为负值,会改变水平方向的尺寸<div class="aaa">
<div class="bbb"></div>
</div>
.aaa {
width: 500px;
height: 500px;
background-color: lightblue;
margin-left: 500px;
}
.bbb {
/*width: 100px;别设置宽度*/
height: 200px;
background-color: magenta;
margin-left:-200px;
}
如果元素设置宽度,或者元素设置了
float:left
/position:absolute
这样的属性改变了流体布局,那么margin为负就不能改变元素的宽度
- 块级元素垂直方向会发生
margin
合并
- 相邻兄弟之间
margin
合并- 父元素
margin-top
和子元素margin-top
,父元素margin-bottom
和子元素margin-bottom
- 空块级元素自身的
margin-top
和margin-bottom
合并阻止
margin
合并
- 把元素放到bfc中(bfc:格式化上下文(浮动,定位,
display:inline-block
))- 设置
border
或padding
阻隔margin
- 给父亲设置内联元素(如文字)阻隔
- 可以给父元素设置
overflow:hidden
是利用bfc
的特性阻止子元素的margin
和父元素合并,换成其他bfc
特性,或者设置1px的border/padding都可以达到效果
line-height
和vertical-align
- line-height定义的就是两基线之间的距离
- vertical-align 的默认值就是基线,基线的定义就是字母x的下边缘
- vertical-align:middle 就是中线对齐
vertical-align
属性起作用的前提必须是作用在内联元素上 ,如果给元素设置float:left
或者position:absolute
,则其vertical-align
属性不能生效,因为这时元素的display
计算值为block
说实话,我用
vertical-align
少
calc(计算属性)
margin-left:calc(50%-45px);
ES6高级技巧(五)的更多相关文章
- 用vue.js学习es6(五):set和map的使用
一:Set用法: ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. (1).打印:console.log var data = new Set([1,2,3]); ...
- 深入浅出ES6(五):不定参数和默认参数
作者 Jason Orendorff github主页 https://github.com/jorendorff 不定参数 我们通常使用可变参函数来构造API,可变参函数可接受任意数量的参数.例 ...
- JavaScript学习笔记--ES6学习(五) 数值的扩展
ES6 对于数值类型 (Number) 进行了一下扩展: 1.对于二进制和八进制提供了新的写法 ES6对于二进制和八进制的数值提供了新的写法,分别用0b (或者0B) 和0o (或者0o) 表示.例如 ...
- es6(五):class关键字(extends,super,static)
ES5中,生成对象通过构造函数: function A(name,age){ this.name=name; this.age=age } // 在A的prototype属性上定义一个test方法,即 ...
- 从零开始学 Web 之 ES6(五)ES6基础语法三
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- ES6入门五:箭头函数、函数与ES6新语法
箭头函数的基本用法与特点 函数与ES6新语法 一.箭头函数的基本用法与特点 声明箭头函数采用声明变量和常量的关键字:var.let.const 箭头函数的参数:没有参数用"()"空 ...
- ES6 第五章 字符串的新增方法 具体参照 http://es6.ruanyifeng.com
1.FormCodePoint 对象方法 用于从 Unicode 码点返回对应字符,可以识别原来es5不能识别的大于0xFFFF的码点. String.fromCodePoint(0x20BB7) / ...
- ES6高级技巧(四)
238 数字->二进制->补码->十进制 const bitwise = N => { if (N < 2) { return N == 0 ? 1 : 0 } /*转化 ...
- ES6高级技巧(三)
html转译 let c='<a href="#">Me & you</a>'.replace(/[&<>'"]/g, ...
随机推荐
- Winform中设置ZedGraph的X轴与Y轴的刻度不在对面显示
场景 C#窗体应用中使用ZedGraph曲线插件绘制图表: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/99716066 Win ...
- python3.0安装django2.0、xadmin
1.操作环境 Windows10.python3.8 2.安装django2.0 pip install django==2.0 x 1 pip install django==2.0 3.安装相 ...
- Ribbon架构剖析
在学习Ribbon之前,先看一下这张图,这张图完美的把Ribbon的基础架构给描述出来了 这张图的核心是负载均衡管理器,围绕着它的是外面的这5大功能点,咱们就从核心开始看然后再带出来其他的功能 首先看 ...
- linux系统下安装配置Jenkins
准备java 环境 安装java sdk yum -y install java 验证是否安装成功 java -version 下载安装jenkins 官网:https://wiki.jenkins- ...
- AJAX小示例
一. 基本内容 定义:AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步的Javascript和XML",即使用Javascript语言 ...
- 那些年我们走过的坑,对Fortify的漏洞进行总结
1.修复方案,过滤引起Log Forging漏洞的敏感字符的公共方法 /** * Log Forging漏洞校验 * @param logs * @return */ public static St ...
- A dependency may only have one source
在使用Flutter的时候添加依赖报错了 Error on line 21, column 5 of pubspec.yaml: A dependency may only have one sour ...
- Android源码分析(六)-----蓝牙Bluetooth源码目录分析
一 :Bluetooth 的设置应用 packages\apps\Settings\src\com\android\settings\bluetooth* 蓝牙设置应用及设置参数,蓝牙状态,蓝牙设备等 ...
- Linux驱动开发常用调试工具---之内存读写工具devmem和devkmem【转】
转自:https://blog.csdn.net/gatieme/article/details/50964903 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...
- Unity整合TortoiseSVN
解决各种漏传 资源 / 代码 的疑难杂症. 因为Unity比较特殊的meta文件系统, 忘传漏传文件在后期可能导致重大引用丢失, 将SVN整合进项目势在必行. TortoiseSVN自带了命令行工具, ...