入前端以来，易混肴的前端知识，及一点想法。

Posted 2022-03-12 yuqlblog

前言：感觉任何行业开始都离不开一个借鉴，随着时间的积累，变得熟能生巧。能分辨出利于自己的，或是好用的。这篇文章算是一个积累或者在这个行业本人的部分映射/走向，随缘更新，大部分都是自己常用，但可能掉坑的，督促自己背下来。

零.趋势，前端顶峰，安全

　　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() // 能创建该数组的一个副本