【es6】es6的一丢丢知识点
具体概念：ES6教程│|菜鸟教程
这里只有一丢丢知识点，后面需要用到的，需要概念的直接点上面的链接
2021/08/02 更新
虽然学习的是vue，但最后找了份react的工作，在这两个月中的工作中，es6用的比较多，带我们的前端也推荐了去看‘阮一峰’的es6，因为一直忙着学习react还得完成公司任务等，就没总结学习过程，但还是想记录下，所以这个就不再是一丢丢es6的知识了，，，最近晚上回陆陆续续总结一下工作常用的。
文章目录
-
- 一：let / var
- 二：const
- 三：对象增强语法
- 四：Math新增的17个与数学相关的方法
- 五：数组的扩展
一：let / var
- 事实上var的设计可以看成JavaScript语言设计上的错误.但是这种错误多半不能修复和移除,以为需要向后兼容.
大概十年前, Brendan Eich就决定修复这个问题,于是他添加了一个新的关键字: let
我们可以将let看成更完美的var - 块级作用域
JS中使用var来声明一个变量时,变量的作用域主要是和函数的定义有关
针对于其他块定义来说是没有作用域的，比如 if / for 等，这在我们开发中往往会引起一些问题。
<body>
<button>按钮1button>
<button>按钮2button>
<button>按钮3button>
<button>按钮4button>
<button>按钮5button>
<script>
//ES5之前因为if和for都段有块级作用域的概念，所以在很多时候
//我们都必须借助于function的作用域来解决应用外面变量的问题.
// ES6中,加入了let,let它是有if和for的块级作用域.
// 1,变量作用域:变量在什么范围内是可用.
var name = 'why ';
console.log(name);
console.log(name);
// 2.没有块级作用域引起的问题:if的块级var func;
if (true) {
var name = 'why ';
func = function () {
console.log(name);
}
// func()
}
name = 'kobe'
func()
console.log(name);
//3.没有块级作用域引起的问题:for的块级
// 点击所有的按钮，都会显示第5个按钮被点击了
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被点击');
})
}
// 解决，闭包，可以，但不推荐
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
(function (i) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被点击');
})
})(i)
}
// var改成let,就和上面的一个效果了
var btns = document.getElementsByTagName('button');
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被点击');
})
}
script>
body>
二：const
-
const关键字
在很多语言中已经存在,比如C/C++中，主要的作用是将某个变量修饰为常量.
在JavaScript中也是如此，使用const修饰的标识符为常量,不可以再次赋值. -
什么时候使用const呢?
当我们修饰的标识符不会被再次赋值时,就可以使用const来保证数据的安全性. -
建议:
在ES6开发中.优先使用const,只有需要改变某一个标识符的时候才使用let -
const的注意
const注意一
const a = 20;
a = 30;//错误:不可以修改．
const注意二
const name;//错误:const修饰的标识符必须赋值．
const注意三
// 3.注意三:常量的含义是指向的对象不能修改，但是可以改变对象内部的属性.
const obj = {
name: 'why ',
age: 18,
height: 1.88
}
console.log(obj);
//{name: "why ", age: 18, height: 1.88}
obj.name = 'kobe ';
obj.age = 40;
obj.height = 1.87;
console.log(obj);
//{name: "kobe ", age: 40, height: 1.87}
</script>
哈哈哈，弹幕看到的理解：你可以给你的儿子换各种各样的衣服，但是你不能换儿子，蛮有意思的
三：对象增强语法
- ES6中，对对象字面量进行了很多增强。
- 属性初始化简写和方法的简写:
【立个无聊flag】未来的某一天，我一定可以再来补点知识点
2021/07/21 补充
四：Math新增的17个与数学相关的方法
Math.trunc方法用于去除一个数的小数部分，返回整数部分。
1：对于非数值，Math.trunc内部使用Number方法将其先转为数值。
2：对于空值和无法截取整数的值，返回NaN。
Math.sign方法用来判断一个数到底是正数、负数、还是零。
1：它会返回五种值。
- 参数为正数，返回+1；
- 参数为负数，返回-1；
- 参数为0，返回0；
- 参数为-0，返回-0;
- 其他值，返回NaN。
Math.cbrt方法用于计算一个数的立方根。
JavaScript的整数使用32位二进制形式表示，Math.clz32方法返回一个数的32位无符号整数形式有多少个前导0。
Math.imul方法返回两个数以32位带符号整数形式相乘的结果，返回的也是一个32位的带符号整数。
五：数组的扩展
1:Arry.form()
用于将两类对象转为真正的数组
类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和
Map）。
如果参数是一个真正的数组，他则会返回一个一模一样的新数组
…（扩展运算符）也可以将某些数据结构转换为数组
Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
2：Array.of()
Array.of方法用于将一组织，转换为数组
3：数组实例的copyWithin()
[1,2,3,4,5].copyWithin(0,3)
//[4,5,3,4,5]
要复制的数据会覆盖要开始的位置的数据
4：find()和findIndex()
数组实例的find方法，用于找出第一个符合条件的数组成员。
它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
5:数组实例的fill()
fill()方法使用给定值，填充一个数组
['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7]
可以有三个参数，（需要填充的数值，开始位置，截止位置）
6：数组实例的entries(),key(),values()
7：数组实例的includes()
Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。该方法属于ES7，但Babel转码器已经支持。
8：数组的空位
空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。
0 in [undefined, undefined, undefined] // true 0 in [, , ,] // false
forEach(), filter(), every() 和some()都会跳过空位。
map()会跳过空位，但会保留这个值
join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。