ES6特性与前端最佳实践-优快云博客

ES6...扩展运算符：将一个数组转为用逗号分隔的参数序列。

1）合并数组：

// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]

2）解构赋值：

// ES5  
a = list[0], rest = list.slice(1)  
// ES6  
[a, ...rest] = list     //解构只能位于最后

3）函数多个返回值：

//传统写法
foo(arr[0], arr[1], arr[2]);
//使用扩展运算符
foo(...arr);

4）字符串转换数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

5）实现Iterator接口，不能直接用于没有Iterator接口对象

var nodeList = document.querySelectorAll('div');  
var array = [...nodeList];

6）Map和Set解构，Generator函数

let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]

var go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]

2、Generator函数：

function* fn(){   // 定义一个Generator函数
    yield 'hello';
    yield 'world';
    return 'end';
}
var f1 =fn();           // 调用Generator函数
console.log(f1);        // fn {[[GeneratorStatus]]: "suspended"}
console.log(f1.next()); // {value: "hello", done: false}
console.log(f1.next()); // {value: "world", done: false}
console.log(f1.next()); // {value: "end", done: true}
console.log(f1.next()); // {value: undefined, done: true}

//实现斐波那契数组

function* fib(max){
	let a = 0, b = 1, n = 0; 
	while(n < max){ 
		yield a; 
		[a,b] = [b, a+b]; 
		n++; 
	} 
	return;
}
for(let x of fib(10)){ 
	console.log(x);
}	let a = 0, b = 1, n = 0; 
	while(n < max){ 
		yield a; 
		[a,b] = [b, a+b]; 
		n++; 
	} 
	return;
}
for(let x of fib(10)){ 
	console.log(x);
}

3、HTTP和HTTPS请求过程：

HTTP: 域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

HTTPS:

依图：

1、为什么选择Angular框架？

1）Angular 的工程师将我们需要的所有功能做了不错的整合。如果使用 Vue，我可能还要面临更多选择：我需要的就是这样一个真正的框架，包含了组件化方案、模块化方案、测试方案、表单验证、路由、国际化方案和安全方案。我发现 Angular 甚至连代码风格都给出了建议。

2）Angular 的一份文档涵盖了开发中的方方面面。如果使用 Vue，可能每个功能要去看不同的文档。

3）Angular 更强势更主观，它的文档对于如何完成某个功能给出了明确的建议。我们团队的成员有不同的编程背景，虽然有三个全职的前端，但是还有十几个 Java 和 Python 程序员，他们也可能会参与前端工作，Angular 的文档能让这些成员快速适应环境。

2、前端开发的角色定位？

用户体验的操刀者

用户端业务逻辑

向前延伸、向后延伸

持续学习

前端工程师需要有较高的沟通能力和理解能力。

3、margin为负

4、throttle和debounce

debounce的作用是在让在用户动作停止后延迟x ms再执行回调。

throttle的作用是在用户动作时没隔一定时间（如200ms）执行一次回调。

debounce用在keydown事件上验证用户名最好。而throttle用在resize改变布局上，onscroll滚动时候的。

throttle:

function throttle(fn,interval){
    var last;
    var timer;
    var interval=interval||200;
    return function(){
        var th=this;
        var args=arguments;
        var now=+new Date();

        var remain = now-last;
        if(last&&remain<interval){
            clearTimeout(timer);
            timer=setTimeout(function(){
                fn.apply(th,args);
            },remain);
        }else{
            last=now;
            fn.apply(th,args);
        }
    }
}

debounce:

function debounce(fn,delay){
 
    var delay=delay||200;
    var timer;
    return function(){
        var th=this;
        var args=arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer=setTimeout(function () {
                timer=null;
                fn.apply(th,args);
        }, delay);
    };
}

5、node如何进行多线程任务分发？

http://cnodejs.org/topic/518b679763e9f8a5424406e9

6、项目中有什么技术难点：websocket，断点续传

7、前端前沿技术:

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

PWA(Progressive Web Apps)由谷歌提出，用前沿的技术开发，让网页使用如同App般的体验的一系列方案。明确的一点就是：PWA就是一个网页, 可以通过前沿的技术开发出一个网页应用。一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。

parcel

说到parcel的最大优势，貌似就是webpack的最大劣势：配置和性能！parcel号称零配置，多核打包，并且使用文件缓存，在时间上比webpack快了将近10倍！

WebAssembly

由谷歌, 微软, Mozilla，苹果等公司合作的一个面向Web的通用二进制和文本格式的项目。

yarn

flex和grid布局

grid布局：

网格布局给了我们一种方法——创建的结构与使用表格(table)布局并没有什么不同。然而，他是在CSS中实现而不是在HTML中实现，同时还可以依赖于媒体查询根据不同的上下文得新定义布局。这对于喜欢响应式设计的同学来说是一个绝对利好的消息。因为你不在需要再担心你的HTML结构而影响你的布局。

rxjs

RxJS 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。Observable 其实就是一个异步的数组

首先我们在Promise的基础之上已经发现Promise可以解决大部分异步问题了，但是如果我们想要在Promise resolve()之后再次resolve()怎么办？我们在then()之前不想立即执行的时候又该怎么办？所以出现了RXJS。