9-21 钟申义 日志

Es6

模板字符串特点

模板字符串支持换行 模板字符串支持动态生成内容，在一对中使用 ${JS表达式}，模板字符串会自动执行JS表达式的结果，并拼接到最终生成的普通字符串中

let

var有两个缺点

变量声明提前，打乱了程序正常的执行顺序 没有块级作用域，代码块内的变量，会影响块外的变量

let的优势

禁止变量声明提前，保证程序按顺序执行代码。不会破坏程序正常的执行顺序

让程序结构(分支和循环)的{}，也成为一级作用域——块级作用域，保证块内和块外即使有相同的变量，也不会相互影响，避免了块内的变量污染外部 使用let关键字声明的变量，只能在块级作用域下使用，不能被外部访问，不存在变量提升

原理：let做了两件事

let会被自动翻译为匿名函数自调

双保险，let为了进一步避免可能的冲突将变量悄悄改了名字

let的特点

全局写 let t=0, 用 window.t 却找不到

同一级作用域内，不能在 let t=0 前，提前使用t。即使外层作用域有t变量，也不行

相同作用域内，不允许重复let同一个变量

注意事项 let有个兄弟, const，专门用于声明一个值不能修改的常量。同时也具有let的特点，不会被声明提前，添加了块级作用域

箭头函数

使用箭头函数

去掉 function，在 () 和 {} 之间加 =>

如果只有一个参数，可省略 ()，但是，如果没有参数，必须保留空 ()

如果函数体只有一句话，可省略 {}，如果这句话还是 return，则可省略 return 和 {}

注意事项 去掉 {} 后，记得去掉结尾的分号 ;

箭头函数问题

箭头函数是一把双刃剑，箭头函数内外this是相通的。如果希望函数内外的this保持一致时，可以不用bind()换，而直接改为箭头函数即可。如果不希望函数内外的this一致，就是希望内部的this和外部的this不一样时，不能改为箭头函数

注意事项 如果回调函数中的this和外部的this不相同时，不能简化 如果用箭头函数简化，结果内外this都是window

for of

for of 的功能

简化版的遍历索引数组和类数组对象

for of 的问题

不支持关联数组和对象

只能读取元素值，不能修改元素值，按值传递

只能连续遍历所有

对比循环

for循环 for(var i=0;i<10;i++){ } for循环最灵活 可通过i从几开始，到几结束来控制i遍历的范围

可通过i++，i+=2，i+=5等控制遍历的步骤

可通过i=10;i>0;i-- 从后往前遍历

arr.forEach() arr.forEach((elem,i,arr)=>{ }) 局限 不便于灵活控制遍历的范围和步调

不可能控制遍历的顺序

类数组对象不能用forEach，因为类数组对象不是数组家的孩子

for of for(var elem of arr){ //of会自动获取arr中每个元素值 }局限 无法获得当前遍历的位置

是ES6的功能，不是所有浏览器，所有数组和类数组对象都支持

注意事项 for in 只能遍历关联数组和对象，in其实不仅遍历当前对象自己的成员，且会延着原型链向父对象继续查找所有可用的成员名 原因：计数器i的类型为string

笔试题

for循环、for of、forEach三种遍历，哪种效率高？

一样高。其实只有一种遍历，就是for循环。其他的都是封装的for循环而已。所以，ES5的其他遍历函数 indexOf、every、some、forEach、 map、filter 和 reduce，都没有效率的提升，因为内部都是for循环而已，只是语法简单而已

是不是有了ES6，就不用ES5了？

要看浏览器是否兼容ES6。如果使用框架和微信开发，基本上可以使用最新的语法。因为框架中和微信开发中都自带翻译工具（Babel），在项目打包时，会将ES6代码翻译成ES5代码，保证浏览器兼容性。如果没使用框架，使用原生或jquery开发，则尽量不要使用ES6

参数增强

使用参数默认值

定义函数时 function 函数名(形参1,形参2,...,形参n=默认值) 注意事项 只能解决最后一个形参不确定的情况

调用函数时，如果没有传入最后一个实参值，则自动使用默认值代替

arguments缺点

arguments是类数组对象，不是纯正的数组，不能使用数组家的函数

arguments只能全部获得实参值列表。不能有选择的获得部分实参值

arguments单词太长，且没有意义，还不能自定义

ES6中的箭头函数，禁止使用arguments了

使用剩余参数

定义函数时

function fun(...数组名){...} 提示：...的意思是”收集”，把传给函数的所有实参值都收集到...后的数组中保存

function 函数名(形参1,形参2,...数组名){...} 提示：...数组名 收集的是除了之前形参1和形参2对应的实参值之外的所有剩余的实参值 注意：保存剩余实参值的结构是一个纯正的数组，可用数组家全部API

注意事项 ...arr必须放在形参列表结尾，因为将来传参时，只有结尾的实参才是不确定的。实参列表中间不可能出现不确定实参个数的情况

剩余参数优点

数组名可以自定义

是纯正的数组类型，可用数组家全套API

可以有选择的获得部分实参值，而不必非要照单全收

ES6中的箭头函数支持剩余参数语法

打散数组

Math.max.apply(null,arr)

Math.max(...arr) ...先将数组打散为单个值，再传入前边的函数。好处是，...和this无关，只是专门单纯的打散数组

使用打散数组

函数名(...数组) ...是”打散”的意思。将数组打散为多个元素 调用函数时，先将数组打散为单个值，再将单个值传入函数中

实例1：复制数组 var arr1=arr.slice(); var arr1=[..arr]

实例2：合并两个数组 var arr3=[].concat(arr1,arr2) var arr3=[...arr1,...arr2]

特殊用处

...可以打散对象

var obj1={...obj}

var obj3=Object.assign({},obj1,obj2) 将obj1和obj2打散后，所有的属性，都放入第一个参数空对象中返回

​ Object.assign方法用于对象的合并，第一个参数是目标对象，后面的参数都是源对象

var obj3={...obj1,...obj2}

注意事项 定义函数时，形参列表中的...是收集不确定个数的实参值的意思 调用函数时，实参值列表中的...是打散数组实参为多个实参值，分别传入的意思

笔试题

...不是打散的意思吗？这里怎么成了收集？

定义函数时，形参列表中的...是收集不确定个数的实参值的意思。调用函数时，实参值列表中的...是打散数组实参为多个实参值，分别传入的意思

...作为打散数组放在实参列表中时，不一定放在结尾？

是的，可以和其他单独的实参值混搭

心得

感觉知识体量太大，记不牢！