⭐Cynthia 的五月记录⭐

🐰
…

阅读技术文章

💔：此处只总结较为优秀的文章（大部分已过滤）

✖：表示看了但未整理的

⭐：表示正在看，还没看完的

✔：表示看了，不需整理或已整理的文章

基础知识巩固

一些基础知识（可能之前已经整理过的），碎片知识积累巩固

JS

parseInt()

parseInt(string, radix);

// radix：一个介于2和36之间的整数(数学系统的基础)，表示上述字符串的基数。
// 当未指定基数时，不同的实现会产生不同的结果，通常将值默认为10。

// 返回解析后的整数值。 
// 如果被解析参数的第一个字符无法被转化成数值类型，则返回 NaN。

Arguments 对象

arguments 是一个对应于传递给函数的参数的类数组对象。

数组方法

Array.prototype.map()

// map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

// 语法
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

// 具体参数含义看链接

// callback 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。

// 如果 thisArg 参数有值，则每次 callback 函数被调用的时候，this 都会指向 thisArg 参数上的这个对象。
// 如果省略了 thisArg 参数,或者赋值为 null 或 undefined，则 this 指向全局对象 。

// map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）。

Array.prototype.flat()

// 语法
var newArray = arr.flat(depth)

// depth 可选
// 指定要提取嵌套数组的结构深度，默认值为 1

// 返回一个包含将数组与子数组中所有元素的新数组

主要用于 扁平化嵌套数组 和 扁平化与空项 （具体查看链接详情）

Array.from()

// Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例
// 可以把类数组对象(array-like obj)和可迭代对象(iterable objects -- eg:Map or Set)转为常规数组

具体看链接

Array.prototype.concat()

1
2
3

//  concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

具体看链接

Array.prototype.sort()

1 2	// sort() 方法用原地算法对数组的元素进行排序，并返回数组。 // 排序算法现在是稳定的。默认排序顺序是根据字符串Unicode码点。

对数组中的数字进行排序

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

也可以写成：
var numbers = [4, 2, 5, 1, 3]; 
numbers.sort((a, b) => a - b); 			// 记住这个方法！！
console.log(numbers);

// [1, 2, 3, 4, 5]

Array.prototype.reduce()

1
2
3

// reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

具体太复杂了，看链接吧

Array.prototype.indexOf()

CSS

不定时的总结一下使用的css属性，加深记忆和理解

animation动画

动画属性

主要是

@keyframes

1
2
3

@keyframes animationname {	// 关键帧名字
    keyframes-selector {css-styles;}	// 动画持续的时间比（也可以填入from或to）
}

animation

animation: 1name 2duration 3timing-function 4delay 5iteration-count 6direction 7fill-mode 8play-state;

// 依次填入动画属性的：
// 1名字、2时间、3周期函数（如具体的函数或者ease等）、4动画开始前的延迟间隔、5播放次数
// 6是否应该轮流反向播放动画
// 7规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
// 8指定动画是否正在运行或已暂停

background背景

背景属性

重点：

background

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

// 背景颜色
// 背景图片、背景图片的位置，背景图片的大小、背景图片是否重复
// bg-image：可以同时设置多张图片，前者会覆盖后者
// bg-origin：背景图片的的定位区域（padding-box|border-box|content-box）
// bg-clip：背景图像的绘画区域
// bg-attachment：设置背景图像是否固定或者随着页面的其余部分滚动

// 常用示例：
background: url('xxx/xx.jpg') center contain(或者数值和百分比) no-repeat;

transition过渡

过渡属性

transition

transition: property duration timing-function delay;

// 需要改变的css属性名称 持续时间 效果函数 延迟时间

// 示例：
transition: width 3s ease 1s;

animation和transition的区别

https://segmentfault.com/a/1190000019115237

transform变换

2D/3D转换属性

transform: none|transform-functions;

// 可以填入的变换函数有：
// 1.matrix系列：定义转换，使用矩阵
// 2.translate系列：定义转换，使用轴
// 3.scale系列：定义缩放转换
// 4.rotate系列：定义旋转
// 5.skew系列：定义倾斜转换（拉伸）
// 6.perspective：为 3D 转换元素定义透视视图

flex布局

弹性盒子模型

flex

1	flex: flex-grow flex-shrink flex-basis\|auto\|initial\|inherit;

jQuery

遍历

Vue.js

不定时查阅文档巩固的基础知识

未分类

事件处理

自定义事件

<el-input
   v-model="search"
   placeholder="搜索商家或地点"
   @focus="focus"
   @blur="blur"
   @input="input"/>

用自定义事件绑定方法更加清楚直观

watch

watch：文档

实例$watch()：文档

watch 一个对象

键是需要观察的表达式
值是对应回调函数。值也可以是方法名，或者包含选项的对象。
Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

$watch参数

参数：

{string | Function} expOrFn 方法名/函数表达式
{Function | Object} callback 回调函数
{Object} [options] 包含选项的对象
- {boolean} deep
- {boolean} immediate

$watch() 选项

deep

为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调

示例

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    // 1.函数表达式
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 2.方法名
    b: 'someMethod',
    // 3.该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 4.该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
   	// 5.不同的调用模式
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

interview-question

第1题

（JavaScript函数深入理解）

['1', '2', '3'].map(parseInt) what & why ?

第2题

（JS事件循环及异步机制）

setTimeout、Promise、Async/Await 判断下面的输出顺序

// 今日头条面试题
async function async1() {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}

async function async2() {
    console.log('async2')
}

console.log('script start')

setTimeout(function () {
    console.log('settimeout')
})

async1()

new Promise(function (resolve) {
    console.log('promise1')
    resolve()
}).then(function () {
    console.log('promise2')
})

console.log('script end')

答案

script start
async1 start
async2
promise1
script end
async1 end
promise2
settimeout

⭐详细分析可以看：

第3题

（数组操作，js高阶函数运用）

将一个多重数组扁平化并去除其中重复数据，最终得到一个升序且不重复的数组

1	Array.from(new Set(arr.flat(Infinity))).sort((a,b) => a-b)

解析

以上可以分步总结为以下步骤：

已知如下数组：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]
// 1.扁平化
let flatArr = arr.flat(4)
// 2.去重
let disArr = Array.from(new Set(flatArr))
// 3.排序
let result = disArr.sort((a, b) => a - b)
console.log(result)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

拍平数组：const flatArray = arr => arr.reduce((a,b) => a.concat(Array.isArray(b) ? flatArray(b): b), []);
去重+排序: […new Set(flatArray)].sort((a,b) => a-b);

本月计划目标

备注：这个目标设定开始于五月中旬

🍉：表示当前进行中

JS

原理

JS异步机制 总结和整理
JS事件机制 总结和整理
JS原型和原型链 总结和整理

框架和插件

element-ui 框架学习和使用 🏦
- 大致看一下官方文档
vue-element-admin 后台框架学习和使用 🏦
- 把基础文档和教程大致看一遍
- 当前计划：把👆看的过程中总结的疑问解决
Swiper 触摸滑动插件学习使用 🍉
- 模仿年报速览项目的模板
- 简易轮播图
- 研究demo（制定日后的相关学习计划）
GSAP Web动画库学习使用 🏦
- TweenMax 和 TimelineMax 文档通读
- 相关技术文章和实战demo经验总结

CSS

hexo博客

优化博客样式

优化分类页，可以展开折叠父级分类
优化归档页：增加月份分割线
置顶文章
增加背景壁纸（原理根据之前分类页的列表样式来）

迁移旧博客文章

工具

构建工具

gulp学习使用
- 将公司项目中曾经使用过gulp的项目整理出一个模板（可多次使用的）

Vue

写简单的权限验证的demo（和文章记录）

项目实战

美团网实战项目（vue+node+koa2+nuxtjs+ssr）

阅读技术文章

第一周（5.5-5.12）

第二周（5.13-5.19）

第三周（5.20-5.26）

基础知识巩固

JS

数组方法

CSS

animation动画

background背景

transition过渡

animation和transition的区别

transform变换

flex布局

jQuery

Vue.js

未分类

watch

$watch参数

$watch() 选项

示例

interview-question

第1题

第2题

第3题

解析

相关知识点

本月计划目标

JS

原理

框架和插件

CSS

hexo博客

优化博客样式

迁移旧博客文章

工具

构建工具

Vue

项目实战