摘要:和用法与类似,都是变量的声明,但是具有块级作用域。首先,当你声明一个变量的时候,必须要初始化。将一个类数组对象和或可遍历对象转换成真正的数组不会改变原有对象,返回一个新的数组。
直接进入正题吧,尽量关于ES6的知识点都能涉及到。
let constlet 和 const 用法与 var 类似,
都是变量的声明,但是let具有块级作用域。那是什么概念呢?看下面的例子。
for(var i = 0; i<10; ++i) {} console.log(i); //10 for(let j = 0; j<10; ++j) {}; console.log(j); //undefined
上面的例子很明显的展示了let的块级作用域特性。
let不可以重复声明,会提示我们:
let x = 10;let x = 20; // Uncaught SyntaxError: Identifier "x" has already been declared
当我们在全局声明var的时候,我们可以通过window来获取这个变量,但是let不可以,
你可以将let变量看其处在一个无形的作用域内。
我觉得在大部分时候都应该优先使用let,<不敢说任何时候,总怕来个例外..>。
关于const,顾名思义,不可改变,但这也要引用类型和基本类型。
首先,当你声明一个const变量的时候,必须要初始化。
const x; //Uncaught SyntaxError: Missing initializer in const declaration
基本类型:
`const x = 10;x = 20;//Uncaught TypeError: Identifier "x" has already been declared`
引用类型: 就有点特殊了,我们可以对它带有的属性进行,只要不改变它的指向。
const obj = {name: "jack"};obj.name = "berry";obj.id = 1;// OK obj = {}; //Uncaught TypeError: Assignment to constant variable.Array
Array实在用到它的地方太多了,所以我们有必要对于它新添加的方法都来过一遍。
Array.from将一个类数组对象和或可遍历对象转换成真正的数组, 不会改变原有对象,返回一个新的数组。
类数组对象:有2种最常见的,我们都拿出来说下。
let x = document.querySelectorAll("*"); console.log(Array.isArray(x));// false let y = Array.from(x); console.log(Array.isArray(x));// false console.log(Array.isArray(y));// true function foo () { console.log(Array.isArray(arguments));//false let args = Array.from(arguments, x => x * x); console.log(Array.isArray(args));//true console.log(args);//[1, 4, 9] } foo(1, 2, 3);
你可以看到我们在foo函数内对于arguments处理的时候 出现了 x => x*x,这也是ES6的新特性(箭头函数)这我们将在后面提到。这边我们可以发现Array.from不仅可以转换成数组,而且可以对其中的值进行操作,我们来看下它完整的函数定义。
Array.from(arrayLike[, mapFn[, thisArg]])
第一个是必需参数,即要转换的对象,第二个是可选参数,是一个函数,第三个也是可选参数,指定mapFn的this对象。
所以啦,我们拆出来看成Array.from(arrayLike).map(mapFn, thisArg)
arr.fill(value[, start = 0[, end = this.length]])
使用 value 填充从 start至end的区间,并且会修改原数组对象,并且返回自身, 随便看个例子就好。
let arr = [1, 2, 3]; console.log(arr.fill(10, 0, 2)); //[10, 10, 3] console.log(arr); //[10, 10, 3]Array.of
Array.of(element0[, element1[, ...[, elementN]]])
将所有传进来的参数都放进同一个数组,并且返回这个新的数组。
console.log(Array.of("ab", 1, null, undefined));//["ab", 1, null, undefined]Array.prototype.find
arr.find(callback[, thisArg])
callback中可以传递的参数和在ES5中引入的新方法,如map, filter一样,有三个参数,分别是:value,index,array,同时, thisArg可以指定函数中的this
函数不会修改原数组,如果callback返回true,则退出,并返回当前value,如果遍历结束,返回false,则返回undefined,我们看下下面这个例子就清楚了。
let arr = [3, 5, 7, 8]; let res1 = arr.find((value, index, arr) => value+index>=6); console.log(res1); //5 let res2 = arr.find((value, index, arr) => value < index); console.log(res2); //undefinedArray.prototype.findIndex
恩。。。 看函数名字就知道了,上面我们刚提到的find()是找值,这个是找索引,如果找不到则返回-1,所以这边我们就提下有这个函数,具体就不展开了。
Array.prototype.keysarr.keys()
返回一个数组索引的迭代器, 额!!这下又牵扯出新知识了,迭代器。
一步一步来,先继续这里的,可以将问题先留着,先看下它的用法。
for (let i of [10, 20, 30].keys()) { console.log(i);//0, 1, 2 }
上面,我们的例子会输出0, 1, 2,这很好理解,就如我们上面说的,返回当前数组的索引,细心的话可以发现,我们for的遍历采用了for ... of的方式,这也是ES6带给我们的全新的遍历方法,相比于for...in会在当前对象上所有属性去循环,而它则是直接在数据上进行循环,对于for...of我们也暂且先不展开,因为它的篇幅也实在可以扯出太多。
Array.prototype.valuesarr.values()
和我们上面提到的方法对应,返回每个索引下对应的值,也是一个迭代器,我们可以用相同的for...of进行遍历
for (let i of [10, 20, 30].values()) { console.log(i);//10, 20, 30 }Array.prototype.entries
arr.entries()
返回一个迭代器,包含每一个数组中的 索引与其值, 也可以称其为键值对
for (let i of [10, 20, 30].entries()) { console.log(i);//[0, 10], [1, 20], [2, 30] }Arrow functions this
关于 箭头函数 其实我们在上面举例的时候,就已经提到了,可能你已经感受到了它带来的便捷,在 箭头函数中的this指针继承于它所在的词法作用域。我们可以通过下面的例子来感受一下,这也是我们大力推行 箭头函数 的一个原因,可以让我们少考虑一点函数中的this指针带来的困扰。
let obj1 = { arr: [1, 2, 3], foo () { setTimeout(function () { console.log(this.arr); }, 0); } } obj1.foo();//undefined let obj2 = { arr: [1, 2, 3], foo () { let _self = this; setTimeout(function () { console.log(_self.arr); }, 0); } } obj2.foo();//[1, 2, 3] let obj3 = { arr: [1, 2, 3], foo () { setTimeout(() => { console.log(this.arr); }, 0); } } obj3.foo();//[1, 2, 3]
我们往常处理this指针带来的问题可能会使用 第二种方法或者bind()这边就不给出了,我们可以很清楚地对比得出,箭头函数给我们带来的好处。
对了,可能你发现了,在obj中,我对于foo属性的值是函数时候的写法,这也是一个能节省代码量的方法,使用起来相当方便。
即便箭头函数不需要参数,我们也必须用()来表示,只有在只有一个参数的情况下,我们才可以省略(),对于箭头函数的返回值,有2种情况,当你没有使用{}将包裹,并且只有单行表达式时,则默认以其作为返回值,反之则应显示声明return,一个特殊情况是对于对象字面量作为返回值时,始终应当将其用()包裹,否则将以 undefind 处理
console.log(["a"].map( () => {} )); // undefined console.log(["a"].map( () => ({}) )); // Object console.log(["a"].map( () => { return {}; })) // Object
看上去 似乎还是 第三种更直观。。
一些注意点它 没有 arguments,也不可以对其进行new操作,它没有自身的this指针,同时它永远是匿名函数。
如果大家有兴趣关于这方面更多知识,可以自行去以下网站,同时也是我有关ES6的资料来源。
MDN
ES6 in depth
极客学院-深度解析ES6
有任何错误,还请指正~~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79773.html
摘要:是单线程程序,所有代码都是单线程执行。导致的网络请求都是异步执行,异步执行可以通过回调函数实现秒钟才能打印,回调函数处理异步执行的但是推出一种新的方法对象用于表示一个异步操作的最终状态完成或失败,以及其返回的值。 javascript是单线程程序,所有代码都是单线程执行。导致javascript的网络请求都是异步执行,异步执行可以通过回调函数实现: setTimeout(callbac...
摘要:首先介绍是一个库,他提供了一组用来操纵的默认也就是无的,也可以配置为有有点类似于,但是官方团队进行维护的,前景更好。使用,相当于同时具有和的能力,应用场景会非常多。 首先介绍Puppeteer Puppeteer是一个node库,他提供了一组用来操纵Chrome的API(默认headless也就是无UI的chrome,也可以配置为有UI) 有点类似于PhantomJS,但Puppet...
摘要:对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。不能重复获取的值方法用来向一个对象的末尾添加一个指定的值。 Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。(不能重复) const set1=new Set([1,2,3,4,5,6]); console.log(set1); //Set { 1, 2, 3, 4, 5, 6 } 获取set的值 cons...
摘要:双叹号强制类型转换为布尔值。官方示例代码用注册了全局组件,会把自动注册为属性,所以没有手动写属性。如果对象是响应的,将触发视图更新。这是用来布尔值,又学了一招和分别代表单击和双击事件绑定。 如果觉得有帮助,欢迎 star哈~ https://github.com/jiangjiu/blog-md/issues/11 感谢作者 @尤小右 大大边写的超级带感的 Vue.js 前端框架,赠送...
阅读 3950·2022-09-16 13:49
阅读 1370·2021-11-22 15:12
阅读 1486·2021-09-09 09:33
阅读 997·2019-08-30 13:15
阅读 1685·2019-08-29 15:30
阅读 596·2019-08-27 10:52
阅读 2615·2019-08-26 17:41
阅读 1845·2019-08-26 12:11