9-21 钟申义 日志

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}

注意事项 定义函数时,形参列表中的…是收集不确定个数的实参值的意思 调用函数时,实参值列表中的…是打散数组实参为多个实参值,分别传入的意思
笔试题
…不是打散的意思吗?这里怎么成了收集?

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

…作为打散数组放在实参列表中时,不一定放在结尾?

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

心得

感觉知识体量太大,记不牢!

标签

评论

this is is footer