北妈每日一学
《北妈每日一学》
我决定从今天开始,发布新栏目:“北妈每日一学”,每天发布一个或者一系列的技术知识点来给大家,这样我们每天可以一起总结和学习,也算一个好的开始和坚持。
北妈每日一学用最短的篇幅 ,最好的排版,最简洁的例子和大家一起学习、总结、入坑。
由于头条文章比较宝贵,而且写的太短不行,天天总写技术又会很枯燥,而且时不时还要发一篇广告,所以利用次条文章每日 学一个知识点我觉得是最合适不过的聪明之举,而且我一直有这个想法,今天才决定付诸行动 - 因为拉到靠谱赞助商了。
这个栏目所有技术点,都是底部展示的机构协助提供,和我共同整理,供大家学习,觉得有帮助就支持下。
ES6 简介
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。
也就是说,ES6就是ES2015。
虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6,但为了看懂别人写的代码你也必须要懂ES6的语法了...
北妈一句白话就是:之前用的,你所熟悉的js语法是es5标准,现在是es6标准,恩就这么多。
ES6 常见语法
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
这些是ES6最常用的几个语法,基本上学会它们,我们就可以走遍天下都不怕啦!我会用最通俗易懂的语言和例子来讲解它们,保证一看就懂,一学就会。
但是ES6那么多那么多特性,我们需要全部都掌握吗?秉着二八原则,掌握好常用的,有用的这个可以让我们快速掌握。今天跟北妈先来学最基础的 也是最有特点的 let, const
1.变量声明 const 和 let
我们都是知道在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:
function aa() {
if(bool) {
var test = 'hello man' } else {
console.log(test) } }以上的代码实际上是:
function aa() { var test // 变量提升 if(bool) { test = 'hello man' } else {
//此处访问test 值为undefined console.log(test) } //此处访问test 值为undefined
所以不用关心bool是否为true or false。实际上,无论如何test都会被创建声明。
接下来ES6主角登场:
我们通常用let和const来声明,let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域?
- 在一个函数内部
- 在一个代码块内部
说白了 {}大括号内的代码块即为let 和 const的作用域。
看以下代码:
function aa() {
if(bool) {
let test = 'hello man' } else { //test 在此处访问不到 console.log(test) } }let的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。再来说说const。
const name = 'lux' name = 'joe' //再次赋值此时会报错
说一道面试题
var funcs = []
for (var i = 0; i < 10; i++) { funcs.push(function() { console.log(i) }) } funcs.forEach(function(func) { func() })这样的面试题是大家常见,很多同学一看就知道输出 10 十次
但是如果我们想依次输出0到9呢?两种解决方法。直接上代码。
// ES5告诉我们可以利用闭包解决这个问题 var funcs = []
for (var i = 0; i < 10; i++) { func.push((function(value) {
return function() {
console.log(value) } }(i))) }
// es6 for (let i = 0; i < 10; i++) { func.push(function() {
console.log(i) }) }
达到相同的效果,es6简洁的解决方案是不是更让你心动!!!
好今天先到这里,北妈每日一学用最短的篇幅 ,最好的排版,最简洁的例子和大家一起学习、总结、入坑。