小白的ES6学习笔记(一)

1、为什么要学习ES6

• 为了解决ES5语言的不足，比如变量提升、内置对象方法不灵活、模块化实现不完善等
• 为了更好的使用vue、react框架
• 项目需要使用ES6

---

2、let和const命令

2.1 let 和 const 的特点

1. let声明变量，const声明常量
2. 都只在声明所在的块级作用域内有效
3. 声明的变量/常量都不提升，存在暂时性死区
4. 不能重复声明
5. const不能修改变量所指向内存地址的数据，如果const声明的是函数/数组，里面的属性/数组里的数据可以修改

2.2 顶层对象

1. 浏览器是window，node里是global，ES6中将两者分开
2. 使用var、function声明的变量依旧是window对象的属性，使用let、const、class声明的变量是global对象的属性

---

3、解构赋值

概念：解构赋值是对赋值运算符的一种扩展，它针对数组和对象来进行操作，使得代码更加简洁易懂

3.1 数组的解构赋值

栗子1：

let [a,b,c] = [1,2,3];   //a = 1,b = 2,c = 3 完全解构
let [x,y] = [1,2,3];    //x = 1,y = 2  不完全解构

栗子2：

let [x] = [];    //此时解构不成功，x = undefined

解构赋值允许使用默认值，但只有当数组成员严格等于undefined时，默认值才会生效

3.2 对象的解构赋值

对象的解构赋值与数组的类似，但是对象没有次序，只有变量与属性名相同，才能取到正确的值
栗子1：

let {name,age} = {name:'张三', age:18, alias:'法外狂徒'}// name值为'张三'，age = 18

如果变量名和属性名不一样，可以这么写
栗子2：

let {foo:f,bar:b} = {foo:'one',bar:'two'};//f值为one, b值为two 
//由此可见，在解构赋值时其实是将值赋给f和b

可以得出，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

3.3 字符串、数值、布尔值的解构赋值

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

栗子1：

const ['a','b','c','d','e'] = 'hello';//a:h, b:e, c:l, d:l, e:o

栗子2：

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

3.4 用途

3.4.1 交换变量的值

let a = 1;
let b = 2;
[a,b] = [b,a];//a = 2,b = 1

3.4.2 存放函数返回的多个值

function fun(){
    return{
    foo:1,
    bar:2
};
}
let {foo,bar} = fun();//{1,2}

3.4.3 提取JSON数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

3.4.4 遍历Map结构

let map = new Map();
map.set('first','hello');
map.set('second','world');
for(let [key,value] of map){
console.log(key + 'is' + value);
}
// first is hello
// second is world
//如果只想取value，可以写成 
for(let [,value] of map){...}

4 字符串的扩展及新增的方法

4.1 模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

栗子：

$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);

使用``（反引号)标识，在模板字符串中，使用${ } 嵌入变量

4.2 includes（）、startsWith（）、endsWith（）

代码栗子：

let str = 'hello';
str.includes('h',1);//false 从第一个到最后一个，都不包括h，返回false
str.startsWith('l',2);//true 从第二个位置是以l开头，返回true
str.endsWith('e',2);//true 从第二个位置向前，以e结束，返回true

均接受两个参数，返回布尔值。

4.3 repeat（）

接受参数n，表示将字符串重复多少次,并返回一个新字符串
代码栗子：

let str = 'li';
str.repeat(2);//lili
str.repeat(3.9);//lilili 小数会被取整
str.repeat(-1);//RangeError
str.repeat(-0.9);// "" 会被取整为0

当n为负数或者 Infinity时会报错

4.4 replaceAll（）

可以一次性替换所有的匹配，用法与replace()相同，返回一个新字符串

   'hello'.replaceAll('l','-');//he--o

---

5 数值的扩展

5.1 二进制和八进制表示法

ES6 提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。

5.2 Number.isFinite(), Number.isNaN()

代码栗子：

Number.isFinite(15); // true
Number.isFinite(Infinity); // false
Number.isNaN(NaN) // true
Number.isNaN(15) // false

Number.isFinite()检查一个数值是否为有限的，返回布尔值

Number.isNaN()检查一个数值是否是NaN,返回布尔值

5.3 Number.parseInt(), Number.parseFloat()

ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

// ES5的写法
parseInt('12.34') // 12
parseFloat('123.45#') // 123.45

// ES6的写法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45

这样做可以减少全局性方法，使得语言逐步模块化

5.4 安全整数和 Number.isSafeInteger()

JavaScript 能够准确表示的整数范围在-2^53 ……2^53之间（不含两个端点），超过这个范围，无法精确表示这个值。ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限。

Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1) // false
Number.isSafeInteger(Number.MIN_SAFE_INTEGER) // true
Number.isSafeInteger(Number.MAX_SAFE_INTEGER) // true
Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1) // false

使用 Number.isSafeInteger()来判断一个数值是否在这个范围内

---

6 函数的扩展

6.1 函数参数的默认值

function fun(x,y = ' world'){
 console.log(x,y)
}

fun('hello');//hello world
fun('Hello',' China');//Hello China

给函数参数一个默认值，如果没有传入参数时，就使用该默认值，传入参数时，就使用参数

6.2 剩余参数

剩余参数由三个点… 和参数名组成，例如 ...keys，可以获取函数多余的参数，将这些剩余参数放入一个数组中，不需要使用arguments对象

代码栗子：

function add(...keys){
 let sum = 0;
 for(let i of keys){
     sum = sum + i;
 }
 return sum;
}
add(1,2,3);//6

6.3 箭头函数

基本使用的代码栗子：

let fun = (a,b) => a + b;
fun(1,2);//3

 使用箭头函数的注意事项：

            （1）箭头函数没有自己的this对象，例如在vue中methods对象上，不能使用箭头函数，否则this就会指向window，导致找不到vm里的变量

            （2）不可以使用new关键字，箭头函数不可以当作构造函数

            （3）不可以使用arguments对象，该对象在函数体内不存在

---

7、数组的扩展

7.1 扩展运算符

将一个数组分割，并将各个项作为分离的参数传递给函数,相当于剩余运算的逆运算

代码栗子：

const arr = [11,2,34,15,62,28,25];
console.log(Math.max(...arr));//62

应用场景：

7.1.1 复制数组

数组不能直接复制，在ES5中采取apply来拷贝数组，代码不够直观自然，ES6的扩展运算符可以简便地解决这一问题
代码栗子：

const arr1 = [1,2,3];
const arr2 = [...arr1];//与const [...arr2] = arr1;等价
//此时arr2 = [1,2,3]

7.1.2 合并数组

代码栗子：

const arr1 = [1,2,3];
const arr2 = [4,5];
const arr3 = [6];
const result = [...arr1,...arr2,...arr3];
//result = [1, 2, 3, 4, 5, 6];

7.1.3 与解构赋值相结合

代码栗子：

const arr = [1,2,3,4,5];
[a,...res] = arr;
//a = 1,res = [2,3,4,5]

7.1.4 与字符串

扩展运算可以将字符串转换为数组，栗子：

const str = 'hello';
const arr = [...str];
// arr 为  ["h", "e", "l", "l", "o"]

7.2 ArrayFrom()

ArrayFrom方法用于将类数组对象和可遍历的对象转化为真正的数组（包括Map和Set）,返回一个新数组

const fun = {
   '0': 'a',
   '1': 'b',
   '2': 'c',
    length: 3
}
let arr = ArrayFrom(fun);
//arr = [a,b,c]

常用于arguments以及操作dom返回的nodelist集合

7.3 实例的find()和fineIndex()

fine()接收一个回调函数作为参数并返回第一个符合条件的数组元素，如果都不符合，则返回undefined
fineIndex()用法与find()相同，返回第一个符合条件的数组元素下标
这两个方法均可以接受第二个参数，作为this所指向的对象

const arr = [1,2,3,4,5];
let res1 = arr.find(x => x>2);
let res2 = arr.findIndex(x => x>2);
//res1 = 3  res2 = 2

7.4 实例的fill()

fill()可以接收三个参数，第一个参数为要填充值，第二个、第三个参数可以指定填充的位置，如果只有第一个参数则会将所有数据抹去换成填充值

const arr = [1,2,3,4,5];
arr.fill('a',1,3);
//arr = [1, "a", "a", 4, 5]

7.5 实例的 entries()，keys() 和 values()

这三个方法都用于遍历数组，keys()是对键的遍历，values()是对值的遍历，entries()是对键值对的遍历

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"

7.6 实例的 includes()

includes()返回布尔值，表示数组中是否包含给定的值

const arr = [1,2,3];
arr.includes(1);//true
arr.includes(1,1);//false 表示从下标1的位置开始查找数组中是否包含1

7.7 实例的flat()和flatMap()

使用场景：数组中的元素也是数组的情况
flat()可以将数组中元素拉平，接受一个参数n，表示拉平n层,返回一个新数组，不改变原数组,该方法会跳过数组中的空位

const arr = [1,2,3,[4,5,[6,7]]];
let res1 = arr.flat();//默认拉平1层
//res1 = [1,2,3,4,5,[6,7]];
let res2 = arr.flat(2);//拉平2层
//res2 = [1,2,3,4,5,6,7]

flatMap()方法将数组中的每个元素执行一次map()方法，再执行flat()方法,可以接受第二个参数用来绑定this,该方法同样返回一个新数组

---

8、对象的扩展

8.1 属性的遍历

ES6中遍历属性的5种方法

8.1.1 for…in

for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）

8.1.2 Object.keys()

Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

8.1.3 Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

8.1.4 Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名

8.1.5 Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举

8.2 super关键字

super用来指向当前对象的原型对象

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

上面代码中，对象obj.find()方法之中，通过super.foo引用了原型对象proto的foo属性