# 20180708_ARTS_week02

ARTS 是耗子哥（左耳朵耗子）发起的一个活动。 A -- Algorithm 每周一道算法题 R -- Review 每周阅读并点评一篇英文技术文章 T -- Tip 每周学习一个技术技巧 S -- Share 每周分享一篇技术文章 坚持一年 :-) 这是我的第二周 ARTS

## Algorithm

Add Two Numbers You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order and each of their nodes contain a single digit. Add the two numbers and return it as a linked list.

You may assume the two numbers do not contain any leading zero, except the number 0 itself.

Example

Input: (2 -> 4 -> 3) + (5 -> 6 -> 4) Output: 7 -> 0 -> 8 Explanation: 342 + 465 = 807.

```/**
* function ListNode(val) {
*     this.val = val;
*     this.next = null;
* }
*/
/**
* @param {ListNode} l1
* @param {ListNode} l2
* @return {ListNode}
*/
var addTwoNumbers = function (l1, l2) {
var carry = 0; // 进位

var item = new ListNode();  // 这两行分开写，beats 98.95%
var cur = item;             // 如果用 var item = cur = new ListNode(); 则会变慢，beats 88.72%

while(l1 || l2 || carry) { // 加 carry 是因为最后要计算都为 null，但是有进位的情况
var val1 = l1 ? l1.val : 0;
var val2 = l2 ? l2.val : 0;

var val = val1 + val2 + carry;
cur.val = val % 10;
carry = Math.floor(val / 10);

l1 && (l1 = l1.next);
l2 && (l2 = l2.next);

if (l1 || l2 || carry) { // 判断是否要加下一个节点
cur.next = new ListNode();
cur = cur.next
}
}

return item
};```

## Review

How you can improve your workflow using the JavaScript console

JavaScript 调试中 `console.log` 是最常用的，作者在这个基础上，又另外介绍了几个方法，挑几个平常没注意到又挺有用的记录一下。

### console.group / console.groupEnd

```function doSomething(obj) {
console.group('doSomething Profile')
const _data = new Date()
console.log('evauating data:', _data)
const _fullName = `\${obj.firstName} \${obj.lastName}`
console.log('fullName:', _fullName)
consst _id = Math.random(1)
console.log('id:', _id)
console.groupEnd()
}

doSomething({'firstName':'Riccardo', 'lastName':'Canella'})```

### console.table

```const mySocial = {
}

console.table(mySocial, ["Socials", "I'v an account"])```

### console.trace / console.assert

```function lesserThan(a,b) {
console.assert(a < b, {'message':'a is not lesser than b','a':a,'b':b})
}
lesserThan(6,5)
console.trace('End')```

JavaScript 的语法里面一直没看到有断言相关的内容，看到很多单元测试框架都是提供一个断言方法。`console.assert` 可以一定程度上充当断言的功能，如果错了会在控制台打印信息和堆栈，这个还是挺有用，有时候系统报错的时候打出的错误堆栈内容非常多，常常不知道是哪一步出错了，特别是用了一些框架类库，层层深入。用了 `console.assert` 可以更主动一点，当不满足条件的时候就打印信息和堆栈。

`console.trace` 可以直接打印现有的堆栈。

## Tip

```var count = 0,
imgs = [];

imgList.forEach(function(url, i) {
imgs[i] = new Image();
if( ++count === imgList.length) {
cb && cb()
}
}
imgs[i].src = url;
})
}

// 调用
console.log("开始干活");
})```

ES6 下可以用 Promise 和 async/await 来优化代码，我们先用 async/await 改造一版。

```async function loadImgs(imgList, cb) {

console.log("start")
for( var i =0; i<imgList.length; i++) {
console.log("finish"+i)
}
cb();
}

return new Promise((resolve, reject) => {
console.log("request"+num)

setTimeout(resolve, 1000);
// let img = new Image();
// img.onload = () => resolve(img);
// img.onerror = reject;

console.log("return"+num)
})
}

console.log("开始干活");
})```

```start
request0
return0
finish0
request1
return1
finish1

```async function loadImgs(imgList){
let proList = [];
for(var i=0; i<imgList.length; i++ ){
let pro = new Promise((resolve, reject) => {
console.log("request"+i)
setTimeout(resolve, 2000);
console.log("return"+i)
})
proList.push(pro)
}

return Promise.all(proList)
.then( ()=>{
console.log("finish all");
return Promise.resolve();
})
}

async function entry(imgList, cb) {
cb();
}

entry(["xxx/a.png","xxx/b.png"], function(){
console.log("开始干活")
})```

```request0
return0
request1
return1```

async/await 和函数回调的形式都可以借助 Promise 来优化，不同的是，async/await 是自动挡，函数回调是手动挡，而 Promise 是发动机

## Share

ARTS 整体来说，我最喜欢的是 A 和 R。

0 条评论

• ### 异步多图加载这件小事儿（Promise与async)

日常开发过程中，时不时会遇到要同时预加载几张图片，并且等都加载完再干活的情况，结合 Promise 和 async/await 代码会优雅很多，但也容易遇到坑，...

• ### 20180930_ARTS_week14

想到这个的思路是因为解的过程中，发现如果遇到左边的，需要存起来，后面可能有用（类似入栈），遇到右边的，需要比对前一个值，并且比完如果匹配就没用了（这类似出栈）。...

• ### CSS3动画-抛物线运动

今天来说下CSS3动画，目标是让一个方块做抛物线运动。主要用到的CSS3属性有animation，transform，@keyframes，transition...

• ### 我理解的JavaScript预编译

JavaScript执行过程首先先语法分析，就是分析一遍代码有没有语法错误，解析期间不会执行代码。接着就开始预编译，预编译完了就开始一行一行执行代码。

• ### 探究{ a = 1; function a(){} }和{ function b(){}; b = 1 }

相信大部分人都了解了，这里再重复啰嗦一下。js是解析执行的，变量提升是js中执行上下文的工作方式。变量声明和函数声明在编译阶段会被提前。

• ### 从Generator到Async function

为什么说Async function是从Promise，Generator一路走来的？

• ### 10分钟了解JS堆、栈以及事件循环的概念

其实一开始对栈、堆的概念特别模糊，只知道好像跟内存有关，又好像事件循环也沾一点边。面试薄荷的时候，面试官正好也问到了这个问题，当时只能大方的承认不会。痛定思痛，...

• ### 微任务与宏任务

众所周知，JavaScript是基于事件循环而运行的，微任务与宏任务是事件循环中重要概念。自node火起来后，这个知识点就成了面试官压轴大题，所以我们必须要会。

• ### 让我印象深刻的javascript面试题

对于一个web前端来说，面试的时候，难免会遇到javascript的面试题。就我自己而言。有几道面试题，有些是我面试遇到的，有些是在网上看到的，但是都印象深刻。...