JS 拾遗

论坛 › 期权论坛 › 期权     
前端一锅煮   2019-6-29 21:27   2381   0


最近复习 JavaScript 教程
-https://wangdoc.com/javascript，
发现好多没记住的，特以此记~

Date
Dtae() 和 new Date() 区别，Date() 函数不能带参数，属于静态方法
  1. new Date()*1 === new Date().getTime() === Date.now() // 获取时间戳
复制代码
  1. new Date(y, m, 0).getDate() // 获取这个月有多少天，传入年份和月份
复制代码
  1. new Date(y, m, 0).getDay() // 获取这个月最后一天是星期几
复制代码
  1. new Date(y, m-1, 1).getDay() // 获取这个月第一天是星期几
复制代码

RegExp
. 点字符匹配除回车(\r)、换行(\n) 、行分隔符(\u2028)和段分隔符(\u2029)以外的所有字符

[^] 表示匹配一切字符，其中包括换行符

str.replace(/2/gi, '1') 第二个参数可以使用美元符号$，用来指代所替换的内容
  1. $&：匹配子字符串
复制代码
  1. $`：匹配结果前面的文本
复制代码
  1. $'：匹配结果后面的文本
复制代码
  1. $n：匹配成功的第n组内容，n是从1开始的自然数。
复制代码
  1. $$：指代美元符号$。
复制代码
  1. 'hello world'.replace(/(\w+)\s(\w+)/, '$2 $1')
复制代码
  1. // "world hello"
复制代码
  1. 'abc'.replace('b', '[$`-$&-$\']')
复制代码
  1. // "a[a-b-c]c"
复制代码
JSON.stringify
console.log(JSON.stringify(obj, null, 2))  接受三个参数，打印对象格式化

参数一   
如果对象的属性是 undefined、函数或 XML 对象，该属性会被 JSON.stringify 过滤   

如果数组的成员是 undefined、函数或 XML 对象，则这些值被转成 null  
        
正则对象会被转成空对象  
        
忽略对象的不可遍历的属性

参数二  
接受一个数组，作为第二个参数，指定需要转成字符串的属性，只对对象的属性有效   

还可以是一个函数，用来更改 JSON.stringify 的返回值

参数三   
如果是数字，表示每个属性前面添加的空格（最多不超过10个）
  
如果是字符串（不超过10个字符），则该字符串会添加在每行前面   JSON.stringify 发现参数对象有toJSON方法，就直接使用这个方法的返回值作为参数，而忽略原对象的其他参数

Error
  1. new Error() // 抛出一个错误
复制代码
  1. new SyntaxError() // 语法解析错误
复制代码
  1. new ReferenceError() // 非法或不能识别的引用值，使用未声明的变量
复制代码
  1. new TypeError() // 操作类型错误，使用自身没有的方法，let a = 22 a.sort() a 是 Number 类型而非数组
复制代码
  1. new RangeError() // 数值越界，Maximum call stack，调用一个不终止的递归函数，计算的值超出最大范围
复制代码
  1. new URIError() // encodeURIComponent() encodeURI() 等URI函数使用错误
复制代码
Array
  1. 'a' in ['a', 1]
复制代码
  1. for in for of
复制代码
  1. arr.push(1, 2, 3)
复制代码
  1. [1, 2, 3, 4, 5].splice(2) 分离成两个数组 [1, 2] [3, 4, 5]
复制代码
es6 明确把空位转成 undefined

es5 有的跳过(forEach、filter、reduce、some、every)  

map() 会跳过空位，但会保留这个值   

join() 和 toString() 会将空位视为 undefined ，
而 undefined 和 null 会被处理成空字符串

Number
  1. function rand(num) {
复制代码
  1.     let seed = Date() * 1;
复制代码
  1.     seed = (seed * 9301 + 49297) % 233280; // 为何使用这三个数?
复制代码
  1.     let rc = seed / (233280.0);
复制代码
  1.     return Math.ceil(rc * num);
复制代码
  1. [/code][code]}
复制代码
  1. rand(10) // 取1~10的随机数
复制代码
  1. [/code][code]0 / 0 NaN
复制代码
  1. 0 / 1 0
复制代码
  1. 1 / 0 Infinity
复制代码
  1. [/code][code]es6 分别用前缀 0b 0o 0x 表示 2 8 16 进制
复制代码
  1. [/code][code]base64
复制代码
  1.     0~9 a~z A~Z '+' '/'    10 + 26 + 26 + 2 = 64
复制代码
  1.     不足补\x00(零值字节)，然后在末尾加上1个或2个=号，表示补了多少个零值字节
复制代码
Number.MAX_SAFE_INTEGER 9007199254740991
表示能够精确表示的最大整数  

Number.MIN_SAFE_INTEGER -9007199254740991
表示能够精确表示的最小整数  

Math
ES6 在 Math 对象上新增了 17 个与数学相关的方法。所有这些方法都是静态方法，只能在 Math 对象上调用
  1. Math.trunc() // 去除一个数的小数部分，返回整数部分
复制代码
  1. Math.trunc(4.1) // 4
复制代码
  1. Math.trunc(-4.1) // -4
复制代码
  1. Math.hypot(3, 4) // 5 返回所有参数的平方和的平方根
复制代码
  1. Math.cbrt(8) // 2 计算一个数的立方根
复制代码
  1. [/code][code]es6 新增指数运算符 2 ** 2 ** 2 => Math.pow(2, 4)
复制代码
  1. 这个运算符的一个特点是右结合，而不是常见的左结合。多个指数运算符连用时，是从最右边开始计算的。
复制代码
  1. [/code][code]'hello'[1] // "e" 直接对字符串使用方括号运算符，仅能获取操作
复制代码
String
substring 类似slice，但是使用规则违反直觉，因此不建议使用substring方法，应该优先使用slice
  1. str.charAt() // 下标
复制代码
  1. str.charCodeAt() // 十进制 Unicode 码点
复制代码
  1. String.fromCharCode(97) // 逆操作
复制代码
  1. str.substr(0, 4) // 从零开始取4个
复制代码
  1. str[0]
复制代码
  1. str.concat(str2)
复制代码
  1. str1.localeCompare(str2) // Unicode 码点比较大小
复制代码
事件循环
参考文章：
-https://www.cnblogs.com/jiasm/p/9482443.html
  1. 宏任务                   浏览器 Node
复制代码
  1. I/O                        
复制代码
  1. setTimeout                 
复制代码
  1. setInterval               
复制代码
  1. setImmediate               
复制代码
  1. requestAnimationFrame      
复制代码
  1. [/code][code]微任务                   浏览器 Node
复制代码
  1. process.nextTick           
复制代码
  1. MutationObserver           
复制代码
  1. Promise.then               
复制代码
严格模式
  1. 变量必须显示声明
复制代码
  1. 禁用 with
复制代码
  1. 禁止删除变量 // delete x => 语法错误
复制代码
  1. 禁用 fn.caller fn.arguments // 报错
复制代码
  1. 对象不能有重名的属性
复制代码
  1. 函数不能有重名的参数
复制代码
  1. 禁止八进制表示法 02
复制代码

Flex
flex-grow flex-shrink flex-basis 放大 缩小占据的空间大小
  1. flex: 0 1 auto; // 默认
复制代码
  1. flex: 0 0 auto; // flex: none;
复制代码
  1. flex: 1 1 auto; // flex: auto;
复制代码
  1. flex: 1 1 0%; // flex: 1;
复制代码

Babel
AST 抽象语法树
  1. babel-core
复制代码
  1.     通过 babylon 把 es6 解析成 AST
复制代码
  1.     babel-traverse 对 ATS树进行遍历转译得到新的 AST树
复制代码
  1.     babel-generator 读取 AST树并将其转换为代码和源码映射
复制代码
  1. [/code][code]对于新的 API、新的属性，两种处理方式
复制代码
  1.     babel-polyfill 把 es6环境整体引入到代码中
复制代码
  1.         regenerator-runtime、core-js
复制代码
  1.     babel-plugin-transform-runtime 按需引入
复制代码
  1.         babel-runtime
复制代码
  1.             regenerator-runtime、core-js
复制代码
  1.         babel-helpers 只引入单个，通过此插件可以把多次引入变成一个，减少代码体积
复制代码

Webpack
把项目看成一个整体，通过给定的主文件，webpack 从这个主文件的入口开始找到项目中的所有依赖文件，然后使用各种 loader 转化、插件处理、文件处理，最后打包输出到一个指定的文件夹中

webpack 打包优化措施：
  1. webpack.DllPlugin 拆分固定死的依赖文件，因为不会变化所以可以预先打包好，后面直接引用
复制代码
  1. HappyPack 多进程，默认开启三个
复制代码
  1. babel-loader 开启缓存 cacheDirectory: true
复制代码
  1. exclude include
复制代码
  1. noParse: /^(vue|vue-router|vuex|vuex-router-sync|axios)$/
复制代码
  1. css 用 contenthash
复制代码
  1.     hash 每次构建都会变
复制代码
  1.     chunkhash .vue 文件变了就会变
复制代码
  1.     contenthash 只有 css 变了才会变
复制代码
快速排序、冒泡排序
  1. function fast(arr) { // 快速排序
复制代码
  1.     if (arr.length  arr[j+1]) {
复制代码
  1.                 let temp = arr[j]
复制代码
  1.                 arr[j] = arr[j+1]
复制代码
  1.                 arr[j+1] = temp
复制代码
  1.                 flag = 1
复制代码
  1.             }
复制代码
  1.         }
复制代码
  1. [/code][code]        if (flag === 0) {
复制代码
  1.             return arr
复制代码
  1.         }
复制代码
  1.     }
复制代码
  1. }
复制代码
斐波那契数列
  1. // 性能最好
复制代码
  1. function add(n) {
复制代码
  1.     let res1 = 1;
复制代码
  1.     let res2 = 1;
复制代码
  1.     let sum = res2
复制代码
  1. [/code][code]    for (let i = 2; i < n; i++) {
复制代码
  1.         sum = res1 + res2
复制代码
  1.         res1 = res2
复制代码
  1.         res2 = sum
复制代码
  1.     }
复制代码
  1.     return sum
复制代码
  1. }
复制代码
  1. // 把算过的存起来
复制代码
  1. var cache = []
复制代码
  1. function add(n) {
复制代码
[code]    if (n
回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

2级吧友
前端一锅煮

积分:
帖子:
精华:
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP