平时工作和学习中遇到的知识点2

13、meta 标签的用法

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 默认使用最新浏览器 -->
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 不被网页 (加速) 转码 -->
<meta name="robots" content="index,follow">
<!-- 搜索引擎抓取 -->
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 设置苹果工具栏颜色 -->
 
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">
<!-- 关闭 iOS 上的内容识别 -->
 
http://www.alenqi.site/2018/03/04/complete-tags/
<!-- 别人总结好的 meta 的链接 -->

14、随机生成的加密字符串库（crypto-random-string）

$ npm install crypto-random-string // 安装命令
 
const cryptoRandomString = require('crypto-random-string');
 
cryptoRandomString({length: 10});
//=> '2cf05d94db'
 
cryptoRandomString({length: 10, type: 'base64'});
//=> 'YMiMbaQl6I'
 
cryptoRandomString({length: 10, type: 'url-safe'});
//=> 'YN-tqc8pOw'
 
cryptoRandomString({length: 10, characters: '1234567890'});
//=> '1791935639'

15、浏览器的微观任务和宏观任务

    // 宏观任务是浏览器宿主 api 发起的任务 例：setTimeout
    // 微观任务 JavaScript 引擎发起的任务 例：promise
    // 每个宏观任务都有一个微观任务队列
    //promise 会加到宏观任务的最后
    
    var r = new Promise(function(resolve, reject){console.log("a");
        resolve()});
    r.then(() => console.log("c"));
    console.log("b")
    //a,b,c

16、lodash 库

  Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。Lodash 的模块化方法 非常适用于：遍历 array、object 和 string
  对值进行操作和检测
  创建符合功能的函数
  
  // Load the full build.
  var _ = require('lodash');
  // Load the core build.
  var _ = require('lodash/core');
  // Load the FP build for immutable auto-curried iteratee-first data-last methods.
  var fp = require('lodash/fp');
   
  // Load method categories.
  var array = require('lodash/array');
  var object = require('lodash/fp/object');
   
  // Cherry-pick methods for smaller browserify/rollup/webpack bundles.
  var at = require('lodash/at');
  var curryN = require('lodash/fp/curryN');

17、小练习

题目：我们现在要实现一个红绿灯，把一个圆形 div 按照绿色 3 秒，黄色 1 秒，红色 2 秒循环改变背景色
fuction sleep(duration){return new Promise((resove,reject) =>{setTimeout(resove,duration)
    })
}
sleep(2000).then(function(){})

18、上下文的概念

JavaScript 标准把一段代码（包括函数），执行所需的所有信息定义为：“执行上下文”。

19、上传图片本地预览功能

  uploadChange(file) {console.log(file)
    let blobUrl
    try {blobUrl = URL.createObjectURL(file.raw)
    } catch (err) {console.error("[Element Error][Upload]", err)
    }
    console.log(blobUrl)
  },
  
 
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。用 URL.revokeObjectURL() 方法来释放内存

20、every 和 some 方法

every()是对数组中每一项运行给定函数，如果该函数对每一项返回 true, 则返回 true。some()是对数组中每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。const tempData = [
  {
    id: 1,
    name: "rocker",
    adress: "US"
  },
  {
    id: 2,
    name: "rocker",
    adress: "US"
  },
  {
    id: 3,
    name: "rocker",
    adress: "US"
  }
];
let everyReturn = tempData.every((item, index) => {return item.id > 1;});
let someReturn = tempData.some((item, index) => {return item.id > 2;});
 
console.log(everyReturn);
// 有一个是错的就返回 false 且的关系
 
console.log(someReturn);
// 有一个是对的就返回 true 或的关系

21、npm

查看可用的 npm 源
nrm ls
 
// 用法：nrm use ***
nrm use taobao
// 切换之后可用 nrm ls 查看是否已经切换了 npm 源

22、前端总结(github 优质资源整理)

https://juejin.im/post/5d3edad9f265da03a652f133

23、JavaScript 定义函数的几种方式

1、普通函数

function foo(){//code}

2、箭头函数

const foo = () => {//code}

3、class 中定义的函数

class Rectangle {constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
// 函数声明   会提升
// 类声明     不会提升

24、讲个笑话

佩奇有天放学回家对妈妈抱怨说：同学们都说我长得像吹风机
妈妈平静的看着佩奇：说话就说话，你别拿嘴吹我

25、深拷贝

// 方法 1
JSON.parse(JSON.stringify())
// 方法 2 ES6
const arr1=[1,2,3];
const arr2=Array.from(arr1）// 方法 3
用 lodash 的 cloneDeep
// 方法 4  concat 方法会返回一个新数组