1. var let const的区别
- let和const是ES6中定义变量的新语法,var是ES5中定义变量的关键字。
- var
- var 支持变量声明提升,
- 函数外部声明定义的变量是全局变量,可以重复声明定义,
- var定义的变量可以修改,如果不初始化会输出undefined,不会报错。
代码显示如下
```js
bla = 2
var bla;
// ...
// 可以理解为:
var bla;
bla = 2; 由于这个原因,我们建议总是在作用域的最开始(函数或者全局代码的开头)声明变 量。这样可以使变量的作用域变得清晰。
```
- let
- let作用域:只在let命令所在的代码块内({})有效
- 无变量声明提升,不可以重复声明变量
- 可以解决for循环i全局变量污染的问题
代码展示:
```js
//let声明 的变量只在它所在的代码块有效。
{let a=3;}
console.log(a);//VM11918:1 Uncaught ReferenceError: a is not defined
//计数器i只在for循环体内有效,在循环体外引用就会报错
for (let i = 0; i < 3; i++) {}
console.log(i);//VM13498:1 Uncaught ReferenceError: i is not defined
//for循环还有一个特别之处,就是循环语句部分是一个父作用域,而循环体内部 是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
```
- const
- 块级作用域,
- const声明一个只读的常量。一旦声明,常量的值就不能改变。所以相对来说解析会快一点
- 也无法变量提升,重复声明
```js
const PI = 3.1415;
PI=3;//VM33690:1 Uncaught TypeError: Assignment to constant variable.
```
所以总的来说:
- var可以先使用,后声明;let必须先声明后使用。
- 暂时性死区:只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域, 不再受外部的影响。
- var是允许在相同作用域内重复声明同一个变量的,而let与const不允许这一现象。
2.ES6数组新增的方法以及使用
1.Array.from 伪数组转换为真正的数组
- 将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象,参数是一个真正的数组,Array.from会返回一个一模一样的新数组
```js
let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};
// ES5 的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6 的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
// NodeList 对象
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
  console.log(p);
});
```
2.Array.of()
- Array.of方法用于将一组值,转换为数组。Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。
- Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。
- 这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异
```js
Array.of() // []
Array.of(3) // [3]
Array.of(3, 11, 8) // [3,11,8]
Array.of(3).length // 1
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
```
3.find和findIndex()
- 数组实例的find方法,用于找出第一个符合条件的数组成员,参数是一个回调函数,所有数
组成员依次执行该回调函数,找出第一个返回true的成员,没有符合条件成员,返回undefined
- findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,
如果所有成员都不符合条件,则返回-1
```js
[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
```
- fill()
- fill()方法使用给定值,填充一个数组。
```js
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
```
fill()方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置
4.includes()
- 表示某个数组是否包含给定的值,Array.prototype.includes方法返回一个布尔值,该方法的
第二个参数表示搜索的起始位置,默认为 0 。如果第二个参数为负数,则表示倒数的位置
```js
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
5.entries() keys() values()
- 用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的
区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
```js
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
```
3.ES6模版字符串
- 传统的JavaScript语言,输出模板通常是这样写的。繁琐,特别容易拼接错
```js
$('#result').append(
'There are <b>' + name + '</b> ' +
'items in your basket, ' +
'<em>' + price +
'</em> are on sale!'
);
```
- ES6引入了模板字符串解决这个问题,模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
```js
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
```
- 大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。
```js
var x = 1;
var y = 2;
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"
var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3
```
- 模板字符串之中还能调用函数。
```js
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
```