ES6新增了哪些特性（待更新）

1.let，const

1.1.var，let，const的区别

1.1.1 var存在变量提升，let和const不存在。

1.1.2 let和const只能在块作用域里访问。

1.1.3 同一作用域下let和const不能声明同名变量，而var可以。

1.1.4  const定义常量，而且不能修改，定义对象的时候可以修改里面的属性值，因为引用地址没变。

2.symbol

3.模板字符串

4.字符串新方法

5.解构表达式

5.1 数组解构

5.2 对象解构

6.对象（不是object，是object和array）方面

6.1 Map和Set是ES6新增的对象

6.1.1 Map

6.1.2 Set

6.2 数组的新方法

6.2.1 Array.from() 方法

6.2.2 includes() 方法

6.2.3 map() 方法，filter() 方法

6.2.4 forEach() 方法

6.2.5 find() 方法 

6.2.6 some() every() 方法

6.3 object的新方法

6.3.1 Object.is() 方法

6.3.2 Object.assign() 方法

6.3.3 Object.keys() Object.values() Object.entries() 方法

6.4 对象声明简写

6.5 拓展符（...）

6.5.2 用于合并对象

7.函数方面

7.1 默认参数

7.2 箭头函数

箭头函数和普通函数最大的区别在于其内部this永远指向其父级对象的this，而普通函数的this指向是谁调用就指向谁(重点)。

8.类

9.promise和proxy

10.模块化

10.1 导入

10.2 导出

11.运算符

11.1 ...拓展运算符

11.2 ?.可选链运算符

---

1.let，const

1.1.var，let，const的区别

1.1.1 var存在变量提升，let和const不存在。

console.log(a); // undefined  ===>  a已声明还没赋值，默认得到undefined值
console.log(b); // 报错：b is not defined  ===> 找不到b这个变量
console.log(c); // 报错：c is not defined  ===> 找不到c这个变量
var a = 100;	
let b = 10;
const c = 10;
console.log(a);//a=100

1.1.2 let和const只能在块作用域里访问。

if(1){var a = 100;let b = 10;const c = 1;
}console.log(a); // 100
console.log(b)  // 报错：b is not defined  ===> 找不到b这个变量
console.log(c)  // 报错：c is not defined  ===> 找不到c这个变量

1.1.3 同一作用域下let和const不能声明同名变量，而var可以。

var a = 100;
console.log(a); //控制台输出 100var a = 10;
console.log(a); //控制台输出 10let a = 100;
let a = 10;//  控制台报错：Identifier 'a' has already been declared  ===> 标识符a已经被声明了。

1.1.4  const定义常量，而且不能修改，定义对象的时候可以修改里面的属性值，因为引用地址没变。

 const a=2a=3console.log(a)  //控制台报错

2.symbol

symbol是ES6引入的一种基本数据类型，用于表示一个独一无二的值，不能和其他数据类型进行运算。它是JS的第七种数据类型，与undefined、null、Number、String、Boolean、Object并列。

创建symbol值的方式：

const a = Symbol();
console.log(a);  //Symbol()//因为Symbol是基本数据类型，而不是对象，不能 new 。
const a = new Symbol();//报错，Symbol is not a constructor

使用Symbol()创建一个Symbol类型的值并赋值给a变量后，你就得到了一个在内存中独一无二的值。现在除了通过变量a，任何人在任何作用域内都无法重新创建出这个值。

const a = Symbol();
const b = Symbol();

跟对象一样，a会存放一个地址，这个地址就指向这个Symbol()的值。

3.模板字符串

在ES6之前，处理模板字符串：通过“\”和“+”来构建模板。

对ES6来说:用${}来界定；反引号(``)直接搞定。

  url = 'xxxxxx'// es6之前let html = '<div> <a>' + url + '</a></div>'//es6let eshtml = `<div><a>${url}</a></div>`

4.字符串新方法

• includes() 判断字符串是否包含参数字符串，返回boolean值。
• startsWith() / endsWith() 判断字符串是否以参数字符串开头或者结尾。返回boolean值。这两个方法可以有第二个参数，一个数字，表示开始查找的位置。

let str = 'blue,red,orange,white';str.includes('blue');//true
str.startsWith('blue');//true
str.endsWith('blue');//false

• repeat() 方法按指定次数返回一个新的字符串。

console.log('hello'.repeat(2));   //'hellohello'

• padStart() / padEnd() 用参数字符串按给定的长度从前面或后面补全字符串，返回新字符串。

let arr = 'hell';
console.log(arr.padEnd(5,'o'));  //'hello'
console.log(arr.padEnd(6,'o'));  //'helloo'
console.log(arr.padEnd(6));  //'hell  ',如果没有指定将用空格代替console.log(arr.padStart(5,'o'));  //'ohell'

5.解构表达式

解构赋值是对赋值运算符的拓展，它是一种针对对象或者数组的模式匹配，然后对其中的变量进行赋值。

5.1 数组解构

let [a,b,c] = [1,2,3];
console.log(a,b,c);    //1,2,3let [a,b,c] = [1,,3];
console.log(a,b,c);    //1,undefined,3let [a,,b] = [1,2,3];
console.log(a,b);//1,3let [a,..b] = [1,2,3];  //...是剩余运算符，表示赋值运算符右边除第一个值外剩余的都赋值给b
console.log(a,b);//1,[2,3]

可以利用数据解构去交换变量的值。

  let a = 1let b = 2;[a, b] = [b, a]console.log(a) // 2console.log(b) // 1

5.2 对象解构

let obj = { name: "ren", age: 12, sex: "male" 
};let { name, age, sex } = obj;
console.log(name, age, sex); //'ren' 12 'male'let { name: myName, age: myAge, sex: mySex } = obj; //自定义变量名
console.log(myName, myAge, mySex); //'ren' 12 'male'

6.对象（不是object，是object和array）方面

6.1 Map和Set是ES6新增的对象

6.1.1 Map

Map对象用于保存键值对，任何JavaScript支持的值都可以作为一个键（key）或者一个值（value）。

与对象不同的是：

1. object的键只能是字符串或者ES6的symbol值，而Map可以是任何值。
2. Map对象有一个size属性，存储了键值对的个数，而object没有类似的属性。

let myMap = new Map([['name','ren'],['age',12]]);
console.log(myMap);  //{'name'=>'ren','age'=>12}myMap.set('sex','male');
console.log(myMap);  //{'name'=>'ren','age'=>12,'sex'=>'male'}
console.log(myMap.size);  //3myMap.get('name');  //'ren'
myMap.has('age');  //true
myMap.delete('age');  //true
myMap.has('age');  //false
myMap.get('age');  //undefined

6.1.2 Set

Set对象和Map对象类似，但它存储不是键值对。类似数组，但它的每个元素都是唯一的。Set没有下标去标识每一个值，所以Set是无序的，也不能像数组那样通过下标去访问Set成员。

let mySet = new Set([1,2,3]);//里面要传一个数组，否则会报错
console.log(mySet);  //{1,2,3}mySet.add(4);
console.log(mySet);  //{1,2,3,4}mySet.delete(1);  //true
mySet.has(1);  //false
console.log(mySet);  //{2,3,4}mySet.clear()
console.log(mySet) // {size: 0}

利用Set唯一性的特点，可以快速给数组去重。

let arr = [1,1,2,3,4,4];let mySet = new Set(arr);let newArr = Array.from(mySet);
console.log(newArr);  //[1,2,3,4]

Set和Map一样也有size属性，用于表示成员数量。

let mySet = new Set([1,2,3]);
console.log(mySet.size);  // 3

Set可以使用forEach方法，按照成员添加进Set的顺序遍历Set。forEach方法接受两个参数，一个是回调函数，第二个是指定回调函数的this指向。

  let mySet = new Set()mySet.add(0)mySet.add(1).add(2).add(3)mySet.forEach(function (value, key, set) {// Set中value = key,原因:好多数据结构都有forEach方法,为了方便同意所以参数是一致的,但是参数的意义各不相同// set就是mySet本身console.log(value, key, set === mySet)console.log(this)})// 0 0 true// window// 1 1 true// window// 2 2 true// window// 3 3 true// windowmySet.forEach(function (value, key, set) {console.log(value, key, set === mySet)console.log(this)}, document)// 0 0 true// document// 1 1 true// document// 2 2 true// document// 3 3 true// document

6.2 数组的新方法

6.2.1 Array.from() 方法

• Array.form() 内置对象Array的方法，实例不能调用，可以将可迭代对象转换为新的数组，接受三个参数（后面两个可以不要），返回一个数组。

1. 第一个表示将被转换的可迭代对象(如果只有一个参数就是把形参转变成数组)。
2. 第二个是回调函数，将对每个数组元素应用该回调函数，然后返回新的值到新数组。
3. 第三个是回调函数内this的指向。

  let mySet = new Set([1,2,3])console.log(mySet);  // {1, 2, 3}let myArr = Array.from(mySet)console.log(myArr);  // [1, 2, 3]let arr = new Set([1, 2, 3])let obj = {double(n) {return n * 2}}let newArr = Array.from(arr,function (n) {return this.double(n)},obj)console.log(newArr) // [2, 4, 6]

6.2.2 includes() 方法

• includes() 方法是是查看数组中是否存在这个元素，存在就返回true,不存在就返回false。

  let arr = [1, 2, 3, { a: 1 }]let flag1 = arr.includes(1)let flag2 = arr.includes(4)let flag3 = arr.includes({ a: 1 })let flag4 = arr.includes(arr[3])console.log(flag1) // trueconsole.log(flag2) // falseconsole.log(flag3) // false 原因: 因为两个{a:1}的引用地址不一样,下面这个地址就是相同的console.log(flag4) // true

6.2.3 map() 方法，filter() 方法

• 两个方法都会对原数组进行遍历操作，返回一个新的数组并且不会影响原数组。
• map() 方法是对数组每一项进行操作并返回。
• filter() 方法是对数组每一项进行筛选，符合条件的才返回。

  let arr = [1, 2, 3]let arr2 = arr.map(item => item * 2)let arr3 = arr.filter(item => item > 2)let arr4 = arr.map(item => item > 2)console.log(arr2) // [2, 4, 6]console.log(arr3) // [3]console.log(arr4) // [false, false, true]// 哪怕对原数组元素进行修改，也不会影响原数组，filter也是如此let arr5 = [1, 2, 3]let arr6 = arr.map(item => {item = item * 2return item})console.log(arr5) // [1, 2, 3]console.log(arr6) // [2, 4, 6]// 但是如果元素是对象.是可以对其属性进行修改的,因为没有改变元素对象的引用地址，filter也是如此let arr7 = [{ a: 1 }, { a: 1 }, { a: 1 }]let arr8 = arr.map(item => {item.a = 2// 但是不能改变整个对象，比如 item = {a: 2},因为这样就改变引用地址了return item})console.log(arr7) // [{ a: 2 }, { a: 2 }, { a: 2 }]console.log(arr8) // [{ a: 2 }, { a: 2 }, { a: 2 }]

6.2.4 forEach() 方法

• 是循环遍历数组中的每一项进行操作，没有返回值，对原数组也没有影响同map()和filter()。

  let arr = [{ a: 1 }, { a: 1 }, { a: 1 }]let arr2 = []arr.forEach(item => {arr2.push(item.a)})console.log(arr) // [{ a: 1 }, { a: 1 }, { a: 1 }]console.log(arr2) // [1, 1, 1]

6.2.5 find() 方法 

• 查找数组中符合条件的第一个元素，直接将这个元素返回出来。

  let arr = [1, 2, 3]let str = arr.find(item => item > 1)console.log(str) // 2

6.2.6 some() every() 方法

• 两个方法都会对数组进行遍历，判断是否符合条件，并返回一个boolean值。
• some() 方法是数组中只要有一个符合条件就返回 true，全部不符合就返回 false。
• every() 方法是数组中全部元素符合条件就返回 true，有一个不符合就返回 false。

  let arr = [1, 2, 3, 4, 6, 11]let flag1 = arr.some(function (v) {return v > 10})console.log(flag1) //truelet flag2 = arr.every(function (v) {return v > 10})console.log(flag2) //false

6.3 object的新方法

6.3.1 Object.is() 方法

• 判断两个值是否相同。

  const obj1 = {}const obj2 = {}console.log(Object.is(obj1, obj2)) // false,引用地址不一样const obj3 = {}const value1 = obj3const value2 = obj3console.log(Object.is(value1, value2)) // trueconst str1 = 2const str2 = 1 + 1console.log(Object.is(str1, str2)) // true

6.3.2 Object.assign() 方法

• 用于将所有可枚举属性的值从一个或多个源对象分配到目标对象，并返回目标对象，说白了就是合并对象。

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { a:5 , c: 3 };
//对象合并，把后面对像合并到第一个对象，对象里相同的属性会覆盖
Object.assign(obj1, obj2, obj3);
console.log(obj1); // { a: 5, b: 2 , c:3}

6.3.3 Object.keys() Object.values() Object.entries() 方法

• 三个方法都是对对象进行遍历。
• Object.keys() 是返回一个数组，数组元素是对象里所有的属性。
• Object.values() 是返回一个数组，数组元素是对象里所有的属性值。
• Object.entries() 是返回一个数组，每个数组元素又是一个数组，存放两个元素，是对象里的键值对。

  let person = {name: 'admin',age: 12,language: ['java', 'js', 'css']}console.log(Object.keys(person)) //[ 'name', 'age', 'language' ]console.log(Object.values(person)) //[ 'admin', 12, [ 'java', 'js', 'css' ] ]console.log(Object.entries(person)) /* [["name", "admin"],["age", 12],["language", ["java", "js", "css"]],]; */

6.3.4 Object.setProtoypeOf 方法

• 将第一个参数的原型链指向第二个参数。

  Object.setPrototypeOf(Tiger.prototype, Animal.prototype)

6.4 对象声明简写

  let name = 'admin'let age = 20//es6之前// let person={//     name:name,//     age:age// }//es6  声明对象时的属性名与引用的变量名相同就可以省略let person = {name,age}

6.5 拓展符（...）

 可以将对象或者数组进行展开。

6.5.1 用于深拷贝（数组同理）

  let obj1 = { name: '于家宝', age: 18 }let obj2 = obj1let obj3 = { ...obj1 }obj1.age = 19console.log(obj1)  // {name: '于家宝', age: 19}console.log(obj2)  // {name: '于家宝', age: 19}console.log(obj3)  // {name: '于家宝', age: 18}

6.5.2 用于合并对象（数组同理）

  const obj1 = { a: 1 }const obj2 = { b: 2 }const obj3 = { a: 5, c: 3 }let newObj = { ...obj1, ...obj2, ...obj3 }console.log(newObj) // { a: 5, b: 2 , c:3} 重复的属性会被覆盖

6.5.3 用于函数参数

  function add(x, y, z) {return x + y + z}let number1 = [1, 2, 3]console.log(add(...number1)) // 6let number2 = [2, 3, 4, 5]console.log(add(...number2)) // 9

6.5.3 排除对象的一些属性

  let obj = {name: '于家宝',age: 18,type: '1'}let { type, ...other } = objconsole.log(other) // {name: '于家宝', age: 18}other.name = 'yujiabao'console.log(other) // {name: 'yujiabao', age: 18}console.log(obj) // {name: '于家宝', age: 18, type: '1'}

7.函数方面

7.1 默认参数

函数在接受参数的时候可以设置一个默认值。

  // es6之前// function add(a, b) {//   if (!a) a = 0//   if (!b) b = 0//   return a + b// }//es6function add(a = 0, b = 0) {return a + b}let x = add()let y = add(2)let z = add(3, 4)console.log(x, y, z) //x=0, y=2, z=7

7.2 箭头函数

箭头函数实现更加简介的书写方式，内部没有arguments，也没有 prototype 属性，所以不能用 new 关键字调用箭头函数。

let add = (a,b) => {return a+b;
}
let print = () => {console.log('hi');
}
let fn = a => a * a;
//当只有一个参数时，括号可以省略，函数体只有单行return语句时，大括号也可以省略。

箭头函数和普通函数最大的区别在于其内部this永远指向其父级对象的this，而普通函数的this指向是谁调用就指向谁(重点)。

  var age = 123let obj = {age: 456,fun1: function () {console.log(this.age, '普通函数1') // 谁调用指向谁,这里指向 objlet fun3 = () => {console.log(this.age, '箭头函数1') // 这里箭头函数父级是 fun1,fun1的this指向是 obj}fun3()},fun2: () => {console.log(this.age, '箭头函数2') // 这里箭头函数父级是 obj,obj的this指向是 window}}obj.fun1()obj.fun2()

8.类

具体看其他博客。

9.promise和proxy

具体看其他博客。

10.模块化

10.1 导入

• ES6使用import关键字导入模块，有两种常用的方式。

import ‘模块名称’  from  ‘路径’；
import  ‘路径’；

10.2 导出

• ES6使用export和export default导出模块。

let name = 'ren',age = 12;
export {name,age};
//注意：变量需要用大括号包裹，然后才能向外输出export let name = 'ren';
// 如果仅需向外导出一个变量

11.运算符

11.1 ...拓展运算符

11.2 ?.可选链运算符

11.3 ?? null判断运算符

跟 || 有一定的区别， || 是左侧的值为 null、undefined、为空字符串、false、0的时候，就会返回右侧的值，?? 是左侧的值为null、undefined的时候会返回右侧的值。

  let a = '' || 1let b = '' ?? 1console.log(a);  // 1console.log(b);  // ''

12.支持 async await 异步调用方式

具体看其他博客。

  async function test(data) {let res = await getListApi(data)}