ES6笔记

ECMA(European Computer Manufactures Association)

ES:EcmaScript，脚本语言的规范，JavaScript是EcmaScript的一种实现，ES新特性即JavaScript新特性。ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。

关系：ECMAScript是 JavaScript的规格， JavaScript是ECMAScript的一种实现。

ES6:1.语法简洁，功能丰富；2.框架开发应用

1.let

1.变量不能重复声明  2.块级作用域（{}，if else while for）  3.不存在变量提升   4.不影响作用域链

2.const

1.一定要赋初值    2.一般常量使用大写    3.常量的值不能修改    4. 块级作用域  5.对于数组和对象的元素修改，不算对常量的修改，不会报错

3.解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值。

（1）数组的结构

const arr=['一','二','三','四'];
let [first,second,third,fourth]=arr;
console.log(second);  //二

（2）对象的结构

const zhao={
    name:'赵本山',
    age:'不详',
    xiaopin:function(){
        console.log("我可以演小品");
    }
};

let {name,age,xiaopin}=zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin();

4.模板字符串``

1.内容中可以直接出现换行符   2.变量拼接

let lovest='魏翔';
let out=`${lovest}是演员`;
console.log(out);

5.箭头函数

let fn=function(){
}

let fn=(a,b)=>{
    return a+b;
}

1.this是静态的，this始终指向函数声明时所在作用域下的this的值

function getName(){
    console.log(this.name);
}
let getName2=()=>{
    console.log(this.name);
}
//设置windows对象的name属性
window.name='姓名';
const school={
    name:"xingming"
}
//直接输出
getName(); //姓名
getName2();//姓名

//call方法调用
getName.call(school); //xingming
getName2.call(school); //姓名

2.不能作为构造实例化对象

3.不能使用arguments变量

4.箭头函数的简写

（1）省略小括号，当形参有且只有一个的时候

（2）省略花括号，当代码体只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值。

const arr=[1,6,9,10,100,25];
//const result=arr.filter(function(item){
//    if(item%2===0){
//        return true;
//    }else{
//        return false;
//    }
//});

const result=arr.filter(item=>item%2===0);
console.log(result);

箭头函数适合与this无关的回调。定时器，数组的方法的回调

箭头函数不适合与this有关的回调。事件回避，对象的方法

6.set集合

let s=new Set(['一','二','三','四']);
//元素个数
console.log(s.size);
//添加新元素
s.add('五');
//删除元素
s.delete('一');
//检测
console.log(s.has('一'));
//清空
s.clear();
console.log(s);

let arr=[1,2,3,4,5,4,3,2,1];
//1.数组去重
let result=[...new Set(arr)];
console.log(result);

//2.交集
let arr2=[4,5,6,5,6];
let result=[...new Set(arr)].filter(item=>{
    let s2=new Set(arr2);//4 5 6
    if(s2.has(item)){
        return true;
    }else{
        return false;
    }
});
console.log(result);

//简化代码
//let result=[...new Set(arr)].filter(item=>new Set(arr2).has(item));

//3.并集
let union=[...new Set([...arr,...arr2])];
console.log(union);

//4.差集
let diff=[...new Set(arr)].filter(item=>!(new Set(arr2).has(item)));
console.log(diff);

7.Map数据结构

类似于对象，也是键值对的集合 。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可当作键。Map实现了itertor接口，所以可以使用扩展运算符和for...of...进行遍历。Map的属性和方法：

1）size 返回Map的元素个数

2）set 增加一个新元素，返回当前Map

3）get 返回键名对象的键值

4）has 检测Map中是否包含某个元素，返回boolean值

5）clear清空集合，返回undefined

8.模块化

将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的好处：

（1）防止命名冲突（2）代码复用（3）高维护性

ES6模块化语法：export和import

export:用于规定模块的对外接口

import:用于输入其他模块提供的功能

<script type="module">
    //1.通用的导入方式
    //引入m1.js模块内容
    import * as m1 from "./src/js/m1.js";
    console.log(m1);

    //2.解构赋值形式
    import {name,benefit} from "./src/js/m1.js";
    import {name as nm,benefit as bf} from "./src/js/m2.js";
    import {default as m3}from "./src/js/m3.js";

    //3.简便形式 针对默认暴露
    import m3 from "./src/js/m3.js";
</script>

//分别暴露
export let name='模块化';
export function benefit(){
    console.log("代码复用");
}

//统一暴露
let name='模块化';
function benefit(){
    console.log("代码复用");
}
export{name,benefit);

//默认暴露
export default{
    name:'模块化'，
    benefit:function(){
    console.log("代码复用")；
    }
}

//外部引用方式
<script src="./src/js/app.js" type="module"></script>
//js入口文件
import * as m1 from "./m1.js";
console.log(m1);