ES6-ES10--学习笔记

目录

一、概述

二、新增语法

1、let关键字

2、const关键字（用来声明常量）

 3、变量和对象的解构赋值

4、模板字符串

5、简化对象的函数写法

6、箭头函数

 7、arguments的使用 

8、剩余（rest）参数

9、扩展（spread）运算符

10、symbol

11、迭代器

迭代器自定义遍历数据

12、生成器

13.Promise

14、Set集合

15、Map集合

16、Class类

17、对象扩展

18、模块化

19、其它

---

一、概述

1、什么是ECMA

ECMA （ European Computer Manufacturers Association ）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。

2、什么是ECMAScript

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。

3、什么是ECMA-262

Ecma国际制定了许多标准，而ECMA-262只是其中的一个

4、ECMA-262 历史

5、为什么要学习ES6

• ES6 的版本变动内容最多，具有里程碑意义；
• ES6 加入许多新的语法特性，编程实现更简单、高效；
• ES6 是前端发展趋势，就业必备技能；

6、ES6 兼容性   http://kangax.github.io/compat-table/es6     

二、新增语法

声明变量

1、let关键字

• 不允许重复声明

let a; // 单个声明
let b,c,d;// 批量声明 
let e = 100; // 单个声明并赋值 
let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值

//不能重复声明
let dog = "狗"；
let dog = "狗"; // 报错：Uncaught SyntaxError: Identifier 'dog' has already been declared

• 块级作用域（局部变量）可以防止循环变量变成全局变量

// 2. 块儿级作用域（局部变量）; 
{ 
    let cat = "猫"; 
    console.log(cat); 
}
console.log(cat); // 报错：Uncaught ReferenceError: cat is not defined

• 不存在变量提升，只能先声明再使用，不可重复声明。

// 3. 不存在变量提升
// 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在； 

console.log(people1); // undefined 
console.log(people2); // 报错：Uncaught ReferenceError: people2 is not defined 
var people1 = "大哥"; // 存在变量提升 
let people2 = "二哥"; // 不存在变量提升

• 不影响作用域链

// 4. 不影响作用域链； 
// 作用域链：代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用{ 
    let p = "小邓"; 
    function fn(){ 
        console.log(p); // 小邓
    }
    fn(); 
}

• 暂时性死区（即在块级作用域中使用某变量，则会先在该块级中查找此变量）

var num = 10;
if(true) {
    console.log(num);        //报错，变量声明在后面
    let num = 20;
}

2、const关键字（用来声明常量）

• 1. 声明必须赋初始值
• 2. 标识符一般为大写（习惯）
• 3. 不允许重复声明
• 4. 值不允许修改（对数组元素、对象内部的修改是可以的，因为数组和对象存的是引用地址
• 5. 块儿级作用域（局部变量）

const ary = [100, 200];
ary[0] = 'a';   //可以
//ary = ['a', 200];  //不可以

所以声明对象类型使用 const，非对象类型声明选择 let

 3、变量和对象的解构赋值

ES6允许从 数组或者对象（分别使用 []、{}）中一一提取值，按照对应的位置，对变量赋值

//数组
let ary = [1, 2, 3];
let [a, b, c, d, e] = ary;  //1, 2, 3, undefined, undefined
//也可以 let [a, b, c] = [1, 2, 3];
//对象
let person = {name: 'zhangsan', age: 20};
let {name, age} = person;
let {name, age = 18} = person;  //解构赋值，如果原来person没有age属性，则定义默认值age = 18

对象的另一解构写法（重命名）
let {name: myName, age: myAge} = person;

//对象的解构赋值
let obj = {a:{b:1}};
const {a:{b}} = obj;  //我们得到b的数据
console.log(b);       //1

4、模板字符串

模板字符串（ template string ）是增强版的字符串，用反引号（ `` ）标识(tab键上面的一个)

1.可以解析变量，字符串拼接${变量名} 

2.中间可以换行（回车键）

3.可以调用函数，得到的结果为函数返回值${函数名()} 

const saySomething = () => '我是函数';
let a = `djy`;
let = `hello, my name is ${name}`;
let html = `<div>
    <span>${saySomething()}</span>
</div>`;

5、简化对象的函数写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法，这样书写更简洁。

//变量和函数
let name = "小邓";
let change = function(){
    console.log("活着是为看改变世界");
}
//创建对象
const school = {
    //完整写法
    //name: name;
    //change:change;
    //简化写法
    name,
    change,
    //声明方法的简化
    say(){
        console.log("言行一致");
    }
}

6、箭头函数

ES6允许使用箭头函数（（形参）=> {函数体} ）。

const fn = () => {

        console.log("xiaodeng")

}

注意点：

• 如果形参只有一个，则小括号可以省略。

//传统
function sum(a) {
    return a;
}
//new
const sum1 = a => a; 

• 函数体如果只有一条语句，花括号可以省略，函数的返回值为该条语句的执行结果。

//传统
function sum(num1, num2) {
    return num1+num2;
}
//new
const sum1 = (num1, num2) => num1+num2; 

• 箭头函数this是静态的，始终指向声明时所在作用域下this的值。（箭头函数不适合于与 this 有关的回调： 事件回调, 对象的方法

        1、箭头函数不适合的事件回调

//箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
const school = { 
    name : "大哥"
}

// 传统函数 
function getName(){
     console.log("getName：" + this.name);
}

// 箭头函数 
getName1 = () => console.log("getName1：" + this.name); 
 
window.name = "小邓";

// 直接调用
getName();    //小邓
getName1();     //小邓
// 使用call调用 
getName.call(school);     //大哥
getName1.call(school);    //小邓

​​​

        2、不适合对象的方法

       对象不能产生作用域，所以箭头函数实际被定义在全局作用域下，所以此处的this指向window，所以箭头函数处的this.age未定义

var obj = {
        age: 20,
        say: () => {
            alert(this.age);  //undefined
        },
        con: function () {
            console.log(this);  //obj
        }
    }
obj.say();
obj.con();

         3、箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调

//从数组中返回偶数的元素
const arr = [1, 6, 9, 10, 100, 25];
const result = arr.filter(item => item % 2 === 0); 
console.log(result);


//定时器
let ad = document.getElementById('ad');

ad.addEventListener("click", () => {
// 这也是错误写法，这里的this还是window 
    setTimeout(() => this.style.background = 'pink',2000); 
   }
)

ad.addEventListener("click", function(){

// ES6写法 
// 定时器：参数1：回调函数；参数2：时间； 
// 这个this才是ad 
    setTimeout(() => this.style.background = 'pink',2000); 
   }
)

• 箭头函数不能作为构造函数实例化

let Persion = (name,age) => {
    this.name = name;
    this.age = age; 
}
 
let me = new Persion("小邓",19); 
console.log(me); // 报错：Uncaught TypeError: Persion is not a constructor

• 如果返回的是一个对象，不能直接加大括号

//const sum1 = a => {};  错，返回undefined
const sum1 = a => ({}); //对

• 不能使用arguments （但是可以使用剩余参数补足）

let fn = () => console.log(arguments);
fn(1,2,3); // 报错：Uncaught ReferenceError: arguments is not defined

 7、arguments的使用 

当我们不确定函数用多少个参数来传递的时候，arguments实际上是当前函数的一个内置对象（函数才拥有），arguments储存了传递的所有实参,它展示的方式是伪数组（1.具有length属性 2.按索引方式储存数据 3.不具有push，pop功能），因此可以进行遍历。 

function fn(){
    console.log(agruments);
    console.log(agruments.length);
}
fn(1,2,3);  //则输出1，2，3


//ES6 允许给函数参数赋值初始值 
//形参初始值 具有默认值的参数, 一般位置要靠后(潜规则) 
function add(a,b,c=10) { 
    return a + b + c; 
}
let result = add(1,2); 
console.log(result); // 1+2+10=13

8、剩余（rest）参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments，剩余参数语法（展开运算符）允许我们将一个不定数量的参数表示为一个数组  ...args

潜规则： ...args 要放到参数的最后，不然会报错

//1.作为传参（rest参数）
function sum(first, ...args) {
    console.log(first); //10
    console.log(args); //20, 30
}
sum(10, 20, 30);
//2.剩余参数配合解构
let students = ['allen', 'berry', 'david'];
let [s1, ...s2] = students;   //s1为allen，s2为[berry. david]的数组
//3.作为参数传入，将数组arr2里的数据划分成若干个，然后一个一个传入数组arr1：（扩展运算符）
arr1.push(...arr2);

和arguments不一样的是，arguments得到的是一个对象，而…args中 args得到的是一个数组，可以使用数组方法（filter、some、map、every等）

9、扩展（spread）运算符

... 扩展运算符能将数组转换为逗号分隔的参数序列；

扩展运算符（ spread ）也是三个点（ ... ）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包；

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1];//[0, 1, 2, 3, 4, 5]

10、symbol