JS开发你需要知道的知识

1.如何实现数组快速求和

eval(array.join('+')) //不建议用

2.如何在webstorm中添加注释模板

函数注释模板

文件注释模板

3.如何优雅地使用async await

async函数返回的是promise对象，所以如果要获取async函数返回的结果，需要用fun().then()或者await的形式，如：

function takeLongTime() {
return new Promise(resolve => {
    setTimeout(() => resolve("long_time_value"), 1000);
});
}
async function test() {
  const v = await takeLongTime();
  console.log(v);
 return v
}
test();
test().then(v=>console.log(v))
async function test2() {
const v = await test1();
console.log(v);
}  //使用await必须用async函数包裹
test2()

await其实就是fun1().then()的语法糖，它的优势在于需要处理由多个 Promise 组成的 then 链的时候，可以让代码显得清晰易读。当后面返回的是一个promise对象时，await会阻塞后面代码的执行，但是整个async函数会把线程让出来，实现异步。
特别注意，如果项目中用了mobx，需要在异步方法返回数据后改变obserable值，需要将相关语句用runInAction包裹起来
关于异常(promise 被rejected)处理
async异常处理主要是用try/catch的方式
error在catch块处理，异常链通过throw进行传递，如果当前函数能够处理，就不用throw，在catch里面处理异常（例如Toast.fail(e)），下一层不会捕捉异常，代码能继续运行;如果当前函数想要让下一层处理异常，可以在catch里throw e将异常抛出(注意下一层必须有catch块)，下一层的await会阻塞后面的代码跳转到catch块里。
```
function takeLongTime() {
return new Promise((resolve,reject) => {
    setTimeout(() => reject("long_time_value"), 1000);
});
}
async function test() {
try{
   const v = await takeLongTime(); 
   return v
}catch(e){
   console.log('testError',e)
   //throw e    //添加这句会报错，因为下一层无catch块
}
}
```

async function test1(){ const v=await test() console.log('test1',v) //上一层无throw，代码继续运行，但是v为undefined } test1() //输出结果 testError long_time_value test1 undefined

- 使用返回值判断请求成功与否  
我们经常把一些请求后端数据的方法放在store，一般在方法里面使用try catch 就做了请求失败的处理，所以在组件里调用这些异步方法均不会阻塞，即无论请求成功与否后面的代码都会执行。但是，有时我们需要在组件里根据请求成功与否执行不同的操作，比如成功获取数据时跳转，失败时不跳转等等，这时可以在请求方法执行await api后return true，在组件判断返回值是否为true，执行相应操作
### 3.如何简便地获取和操作 时间信息
使用momentjs

### 4.如何实现倒计时
最简单的倒计时就是使用setInternal，但是这种实现方式只能在当前类或当前页面里执行，且如果页面不在运行状态，例如app上按home回到桌面，倒计时是不会进行下去的  
真正的倒计时需要获取当前的时刻来进行判断，具体实现代码如下：

endTime = 0 seconds = 0 countDown = () => { if (seconds > 0) { seconds = Math.floor(((endTime - Date.now()) / 1000) % 60) } else { clearInterval(this.timer) } } startCountDown = () => { seconds = 60 endTime = Date.now() + 61000 this.timer = setInterval(this.countDown, 1000) } startCountDown()

#### 5.打包的时候下载的文件遇到connnect问题怎么办
下载的文件需要翻墙才能下载，但是就算翻墙软件已经打开，在命令行里面也无法使用，所以需要给webstorm设置代理

### 6.将变量快速转化为bool值
使用!!
### 7.唯一ID的实现
第一种：uuid

guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { let r = (Math.random() * 16) | 0 let v = c === 'x' ? r : (r & 0x3) | 0x8 return v.toString(16) }) }

第二种：Date()

### 8、什么是3元表达式

const b=a>0?a:0

### 9.ajax与fetch的区别
Fetch 是浏览器提供的原生 AJAX 接口。使用 window.fetch 函数可以代替以前的 $.ajax、$.get 和 $.post，promise则代替了 XMLHttpRequest

### 10、代码整洁之道
对象设置默认属性  
bad:

const menuConfig = { title: null, body: 'Bar', buttonText: null, cancellable: true };

function createMenu(config) { config.title = config.title || 'Foo'; config.body = config.body || 'Bar'; config.buttonText = config.buttonText || 'Baz'; config.cancellable = config.cancellable !== undefined ? config.cancellable : true; }

createMenu(menuConfig);

good:

const menuConfig = { title: 'Order', // 'body' key 缺失 buttonText: 'Send', cancellable: true };

function createMenu(config) { const config = Object.assign({ title: 'Foo', body: 'Bar', buttonText: 'Baz', cancellable: true }, config);

// config 就变成了: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true} // ... }

createMenu(menuConfig);

### 11.chrome 快捷键
打开进程管理 :shilf+esc  
搜索栏自定义搜索 : 自定义的快捷键+空格（需要在设置里面的搜索引擎配置）
### 12.js是单线程的，但是浏览器不是单线程的，event loop属于js引擎
### 13.'&&'的问题

const a=b&&c

'&&'的执行步骤:先执行左边，如果b为true(不是null，undefined,'',0,NaN,false)，则直接返回右边c，不论c为true或false；如果b为false，则返回b。  
所以如果需要返回布尔值，但是变量不是布尔值，需要在变量前面加上!!,比如：

const a='' return !!a&&

### 14.快速创建重复元素的数组

Array(num).fill(item)

### 15.使用rest参数代替arguments

形式：...变量名

// arguments变量的写法 function sortNumbers() { return Array.prototype.slice.call(arguments).sort(); }

// rest参数的写法 const sortNumbers = (...numbers) => numbers.sort();

### 16、创建没有原型的空对象

const obj=Object.create(null)//{}的原型是Object


### 17、yarn.lock文件的作用
 - 1、规定每个模块的版本
 - 2、规定每个模块使用的源

JNUfeatherwit / blog