update
This commit is contained in:
qianguyihao
parent
8504557d8a
commit
3d97313732
@ -17,7 +17,7 @@
|
||||
|:-------------|:-------------|:-------------|
|
||||
| for循环 | 这个大家都懂| |
|
||||
| forEach()|和 for循环类似，但需要兼容IE8以上 |forEach() 没有返回值。也就是说，它的返回值是 undefined|
|
||||
| filter()| 返回结果是true的项，将组成新的数组| 可以起到过滤的作用|
|
||||
| filter()| 返回结果是true的项，将组成新的数组。可以起到过滤的作用| 不会改变原数组|
|
||||
| map()| 对原数组中的每一项进行加工 | |
|
||||
| every()| 如果有一项返回false，则停止遍历 | 意思是，要求每一项都返回true，最终的结果才返回true |
|
||||
| some()| 只要有一项返回true，则停止遍历 | |
|
||||
|
||||
@ -131,6 +131,12 @@ Date对象 还有如下方法：
|
||||
我们可以在业务代码的前面定义 `时间戳1`，在业务代码的后面定义 `时间戳2`。把这两个时间戳相减，就能得出业务代码的执行时间。
|
||||
|
||||
|
||||
### format()
|
||||
|
||||
将时间对象转换为指定格式。
|
||||
|
||||
参考链接：<https://www.cnblogs.com/tugenhua0707/p/3776808.html>
|
||||
|
||||
## 练习
|
||||
|
||||
### 举例1：模拟日历
|
||||
|
||||
@ -279,7 +279,7 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽
|
||||
|
||||
/*画圆形的方式一*/
|
||||
.box:nth-child(1) {
|
||||
border-radius: 100px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
/*画圆形的方式二*/
|
||||
@ -288,7 +288,7 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽
|
||||
}
|
||||
|
||||
.box:nth-child(3) {
|
||||
border-radius: 200px 0 0 0;
|
||||
border-radius: 100px 0 0 0;
|
||||
}
|
||||
|
||||
.box:nth-child(4) {
|
||||
|
||||
@ -30,8 +30,8 @@
|
||||
### 方式一：字面量
|
||||
|
||||
```javascript
|
||||
var obj11 = {name: 'smyh'};
|
||||
var obj12 = new Object(name: `smyh`); //内置对象（内置的构造函数）
|
||||
var obj11 = {name: 'qianguyihao'};
|
||||
var obj12 = new Object(name: 'qianguyihao'); //内置对象（内置的构造函数）
|
||||
```
|
||||
|
||||
上面的两种写法，效果是一样的。因为，第一种写法，`obj11`会指向`Object`。
|
||||
@ -87,7 +87,7 @@ PS：任何一个函数，如果在前面加了new，那就是构造函数。
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
var fn = new Foo('smyhvae');
|
||||
var foo = new Foo('smyhvae');
|
||||
```
|
||||
|
||||
上面的代码中，`Foo.prototype.constructor === Foo`的结果是`true`：
|
||||
@ -95,7 +95,7 @@ PS：任何一个函数，如果在前面加了new，那就是构造函数。
|
||||
|
||||
|
||||
|
||||
- 4、实例的`__proto__`指向原型。也就是说，`Foo.__proto__ === M.prototype`。
|
||||
- 4、实例的`__proto__`指向原型。也就是说，`foo.__proto__ === Foo.prototype`。
|
||||
|
||||
声明：所有的**引用类型**（数组、对象、函数）都有`__proto__`这个属性。
|
||||
|
||||
@ -137,7 +137,7 @@ Object是原型链的顶端。
|
||||
|
||||
比如说：
|
||||
|
||||
- `foo instance of Foo`的结果为true，因为`foo.__proto__ === M.prototype`为true。
|
||||
- `foo instance of Foo`的结果为true，因为`foo.__proto__ === Foo.prototype`为true。
|
||||
|
||||
- **`foo instance of Objecet`的结果也为true**，因为`Foo.prototype.__proto__ === Object.prototype`为true。
|
||||
|
||||
@ -150,7 +150,7 @@ Object是原型链的顶端。
|
||||
|
||||
分析：这就要用到原型的`constructor`属性了。
|
||||
|
||||
- `foo.__proto__.constructor === M`的结果为true，但是 `foo.__proto__.constructor === Object`的结果为false。
|
||||
- `foo.__proto__.constructor === Foo`的结果为true，但是 `foo.__proto__.constructor === Object`的结果为false。
|
||||
|
||||
所以，用 consturctor判断就比用 instanceof判断，更为严谨。
|
||||
|
||||
@ -176,7 +176,6 @@ Object是原型链的顶端。
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
|
||||
@ -42,6 +42,14 @@
|
||||
|
||||
非常详细和贴心，你值得star。
|
||||
|
||||
## 学习交流
|
||||
|
||||
我建了一个“前端学习”的微信交流群，目前来看，学习氛围很不错。加我微信（bootmei），拉你进群：
|
||||
|
||||
- 进群暗号：前端学习。
|
||||
|
||||
- 进群要求：少提问、少闲聊、多分享（长期潜水的，就不必了）。
|
||||
|
||||
## 推荐的技术博客
|
||||
|
||||
- [阮一峰](http://www.ruanyifeng.com/blog/)
|
||||
|
||||
@ -56,7 +56,9 @@
|
||||
|
||||
- GitHub 全球排名：<https://gitstar-ranking.com/>
|
||||
|
||||
- GitHub trending（官网推荐—）：<https://github.com/trending>
|
||||
这个排名很权威。如果你的项目超过 10k star，就能上榜，跻身全球 GitHub 项目前1000名。
|
||||
|
||||
- GitHub trending（官网推荐）：<https://github.com/trending>
|
||||
|
||||
你的项目要是能上 GitHub trending，绝对火得一塌糊涂。
|
||||
|
||||
|
||||
@ -66,11 +66,178 @@ if (JSON.stringify(myObj) !== '{}')
|
||||
|
||||
|
||||
|
||||
### 2019-05-16
|
||||
|
||||
- 数组随机打乱顺序：<https://www.zhihu.com/question/68330851/answer/262111061>
|
||||
|
||||
最佳的打乱算法是Fisher-Yates算法。
|
||||
|
||||
|
||||
### 2019-05-16
|
||||
|
||||
Vue的全局变量空间：`this.$root.data`，我们可以在这里面存放数据。比如`this.$root.data.skuIdList`。
|
||||
|
||||
### 2019-05-17
|
||||
|
||||
- css 动画实现闪烁效果：<https://blog.csdn.net/wangxiuyan0228/article/details/80701523>
|
||||
|
||||
|
||||
### 2019-05-20
|
||||
|
||||
**数组赋值的正确写法**：
|
||||
|
||||
```javascript
|
||||
this.todayList.splice(0, 0, ...dataList);
|
||||
```
|
||||
|
||||
**对象赋值的正确写法**：
|
||||
|
||||
```javascript
|
||||
Object.assign(this.dataObj, dataObj);
|
||||
```
|
||||
|
||||
上方代码中，是将`dataObj` 的值追加到`this.dataObj`中。如果对象里属性名相同，会被覆盖。
|
||||
|
||||
|
||||
### 2019-05-20-css3动画水平/镜像翻转
|
||||
|
||||
参考链接1：<https://www.oschina.net/question/2443483_247744>
|
||||
|
||||
代码实现举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8" />
|
||||
<title></title>
|
||||
<style>
|
||||
@keyframes featuresicon {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
80% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
.cube {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: url(images/bg2.png) left 0 no-repeat;
|
||||
|
||||
animation: featuresicon 1.3s linear alternate none infinite;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: cornflowerblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cube"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
|
||||
参考链接2：<https://blog.csdn.net/wjnf012/article/details/78679131>
|
||||
|
||||
代码实现：（立体感更强一点）
|
||||
|
||||
```html
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cube{
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
/* background-color: #9a6ad8 */
|
||||
background: url(images/bg.png) left 0 no-repeat;
|
||||
animation: proRotate 1.3s ease-in-out 500ms alternate none infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@keyframes proRotate {
|
||||
0%{transform:perspective(200px) rotateY(180deg);}
|
||||
100%{transform:perspective(200px) rotateY(0deg);}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test_wrap">
|
||||
<div class="cube"></div>
|
||||
|
||||
</div>
|
||||
<body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 2019-05-22-判断字符串是否为纯中文
|
||||
|
||||
参考链接：https://blog.csdn.net/wozaixiaoximen/article/details/48340061
|
||||
|
||||
|
||||
### 2019-05-24
|
||||
|
||||
- VScode代码格式化后不符合ESLint风格问题处理：<https://blog.csdn.net/SilenceJude/article/details/81589784>
|
||||
|
||||
|
||||
### 2019-05-27-针对 text 文本的属性举例
|
||||
|
||||
```css
|
||||
&_promote {
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
padding: 4px;
|
||||
line-height: 20px;
|
||||
background: #fff0f0;
|
||||
border-radius: 4px;
|
||||
font-size: 20px;
|
||||
color: #ff4142;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
尤其要研究一下 `vertical-align: middle;`这个属性。
|
||||
|
||||
|
||||
### 2019-05-30
|
||||
|
||||
`arr1.push(arr2)` 和
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user