前言：感觉任何行业开始都离不开一个借鉴，随着时间的积累，变得熟能生巧。能分辨出利于自己的，或是好用的。这篇文章算是一个积累或者在这个行业本人的部分映射/走向，随缘更新，大部分都是自己常用，但可能掉坑的，督促自己背下来。
零.趋势，前端顶峰，安全
2019的主体：
GraphQL
TypeScript
React
flutter
一. CSS
1. x:nth-of-type(n) 获取父元素下，的第 n 个 x 元素，tips：n 从 0 开始。（注意我的断句！）
2.x:nth-child(n) x的父元素下，第 n 个元素，假如刚好是 x，则有效，tips：n 从 1 开始。
3.x:last-child x的父元素下，最后一个子元素，恰好为 x
1. overflow-y:auto 对于 overflow-y:scroll ，同样是对容器上下内容的裁剪，auto 比 scroll 更智能，超出显示滚动条，否则隐藏
1.transition 过渡
2.transform 变换
3.animation 动画
tips：参考 https://segmentfault.com/a/1190000004460780
二：Promise
1.Promise.all 的使用注意
Promise.all(arr).then(res => {
// 注意这里 item => 不加括号等于 {return JSON.parse(item.data).result )} 切记箭头函数与Promise的组合使用，一定要有return
return res.map(item => JSON.parse(item.data).result )
}).then(data => {
console.log(data)
})
三：ES6整理
1.函数默认参数 function fn (num = 200) { console.log(num) }; fn() 或 fn(300);
2.async await 可避免回调地狱。async function 大于 Promise，当然在多个 await 之间没有关联时， async await 假若出错将会中断执行，所以建议加上 try { 多条await语句位置 } catch (e) {}；高端：let [a, b, c] = await Promise.all([fn1(), fn2(), fn3()])
四：this
const obj = {
a: function() { console.log(this) },
b: {
c: function() {console.log(this)}
}
}
obj.a() // 打出的是obj对象, 相当于obj.a.call(obj)
obj.b.c() //打出的是obj.b对象, 相当于obj.b.c.call(obj.b)
1. 概念：this是函数用call方法调用时传递的第一个参数，而且它还可以手动更改，只有在调用的时候才能确定this的值。
/* 简单总结一下：函数完整的调用方法是使用call方法，包括test.call(context, name)和obj.greet.call(context,name)，这里的context就是函数调用时的上下文，也就是this，只不过这个this是可以通过call方法来修改的；构造函数稍微特殊一点，它的this直接指向new之后返回的对象；window.setTimeout()和window.setInterval()默认的是this是window对象。 */
2.箭头函数默认绑定（继承）外层 this，并且无法使用call修改，引用MDN：箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。
3.修改this默认为window的setTimeout
const obj = {
a: function() {
console.log(this)
window.setTimeout(() => {
console.log(this)
}, 1000)
}
}
obj.a.call(obj) //第一个this是obj对象，第二个this还是obj对象
五：关于 JQuery 完成使命，即将退出舞台
1.querySelector，querySelectorAll 快速获取DOM节点
2.classList 代替 addClass，removeClass
3.Animate.css
4.原生Fetch API（IE无法使用，需要配合Polyfill）及 axios 代替jq封装的ajax
六、超出隐藏
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;/*最后添加省略号*/
去浮动
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
七、居中
.el {
display: flex;
align-items: center;
justify-content: center;
}
八：const 变量的内部状态是可修改的
九：文字不可选
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
十：回调函数带参将失去 this 指向
// 若参数 cb 改为 cb()，则失去 this 指向
fn(param, cb) {
cb()
}
cb () {
console.log(this)
}
十一：push 返回的是长度，所以请严格按照顺序书写，另外参照第【十八】的不可变性，我们可以使用 concat 代替 push 创建数组的副本
let arr = [3] arr.push(4) // 2 console.log(arr) // [3, 2]
十二：find 与 filter 的区别，两个方法的原数组都不变，find 查出的是第一个符合的对象，不是数组。
十三：box-sizing: border-box 只需设置 width 与 height，line-height，不需要设置padding。
十四：export 导出
1.export default { xxx } // 一个 js 文件中只能一个
2.export const obj = [ xxx ] // 一个 js 文件中可以多个，等同于3
3.const obj = [ xxx ]
export { obj }
export { obj2 }
... import * as common from ‘./common.js‘ // webpack中加载依赖，common.obj import {obj, obj2} from ‘./common.js‘
十五：forEach 及 for...of 的比较
// forEach进行数组遍历
// 缺点：不能使用breack语句中断循环，不能使用return语句返回到外层函数
// for...in 辣鸡，用来遍历对象属性，且遍历出来的属性还是字符串
// for...of 无敌，规避forEach的缺点，额外支持类数组【DOM】，字符串。
// 缺点：数组的遍历器接口只返回具有数字索引的属性，假如 myArray.foo = ‘foo‘，则无法遍历出来。
for (var value of myArray) {
console.log(value);
}
// 遍历键名
for (let index of [‘a‘, ‘b‘].keys()) {
console.log(index);
}
// 遍历键值
for (let elem of [‘a‘, ‘b‘].values()) {
console.log(elem);
}
// 遍历键值对
for (let [index, elem] of [‘a‘, ‘b‘].entries()) {
console.log(index, elem);
}
十六：apply、call、bind 分析与扩展运算符的替代 (...)
十七：js数组方法forEach、map、filter、reduce、every、some总结
map() // 返回一个新的Array，每个元素为调用func的结果 filter() // 返回一个符合func条件的元素数组 some() // 返回一个boolean，判断是否有元素是否符合func条件 every() //返回一个boolean，判断每个元素是否符合func条件 forEach() //没有返回值，只是针对每个元素调用func reduce() //有返回值，重点是计算数组，返回一个值
1、map速度比forEach快
2、map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，
3、map因为返回数组所以可以链式操作，forEach不能
十八：不可变性，即创建一个新的副本有利于历史朔源
1.let obj3 = Object.assign({}, obj1, obj2)
2.let obj3 = { ...obj1, obj2 }
3.Array.slice() // 能创建该数组的一个副本
原文地址：https://www.cnblogs.com/yuqlblog/p/11126947.html