es6入门

1:为甚么要下载bable-core(核心),---功能是什么

babel-core的作用是把js代码解析成ast(抽象语法树),方便各个插件分析语法进行相应的处理，

像一些语法在低版本的浏览器是不支持的，如箭头函数等等；这种语言层面的不兼容之恶能通过代码转化成ast，

分析其语法后准换成低版本的js；所以要安装babel-core。

 

2：下载babel-preset-env的作用，（2）为什么依赖bable-core

（1）Babel 如何将 ES6 语法变成 ES5 语法，依赖的就是这个包，

设包中有很多方法,每条方法对应着 ES6 中一个新的语法，

（将es6传化成es5等等）

（2）只有将j代码解析成抽象语法树,后序的插件才能对js代码进行降级等操作;

 

3:@babel/cli

通过命令行对js代码进行编译转换而等等（转化的工具）

 

4：var 变量声明提升，可重复的定义，全局变量挂载到window

（多个变量都挂载到window上可能会重名）

 

A:不会进行变量的提升

console.log(a)----报错 a is not defined

let a = 33;

 

B:不会挂载到全局

let a = 33;

console.log(window.a)----undifinde

c:不能重复的定义

let a = 44;

let a =334;

console.log(Identifier 'a' has already been declared)------Identifier 'a' has already been declared

 

D:解决闭包问题-----源码还是通过立即执行函数执行

 

E:加强对作用域的控制(let {} => 块级作用域)

{

let a = 33;

}

console.log(a)myQuest.html:50 Uncaught ReferenceError: a is not defined

临时死区：

let a = 33;

{

console.log(a);

let a = 33;

}

 

5：const

• 必须赋值
• 不可以赋值操作
• 存储常量的空间的值不能改变

 

 

4:Object.assign({},fObj,sObj)//---相当于jq的extends:

 

7：函数的扩展

箭头函数写法

 

好处

• 不用写function关键字
• 只能作为函数而不能new
• 不能重名
• 返回值可以不写return ,但是有时候需要配合{}；
• 内部arguments this 由定义时外围最接近一层的非箭头函数arguments和this决定

//argumments问题

function outer(){

let inner = ()=>{

console.log(arguments)

}

inner(1,2);

}

outer('2','f','5')

this问题 let obj = {

a:'d',

fn:function(){

let fn2 = ()=>{

console.log(this);

}

fn2();

}

}

log('jjjj')//---jjjj world

 

 

8:OBJECT.defineProperty(数据劫持)

概念：就是把js的底层技术停工给开发者，

此方法会直接在一个对象上定义一个具有详细描述的属性,

或者修改一个对象的现有属性

var obj = {}

var temp = '';

Object.defineProperty(obj, 'name', {

// value: 'cst',

// writable: true, //默认值就是false不可写的

configurable: true, //配置默认同上

enumerable: true, //可枚举 默认值同上

//取值 设置了set和get就不可设置value和writable

get: function () {

return temp;

},

//设置值

set: function (newValue) {

temp = newValue;

}

})

//set和get的其他的用法

// var obj1 ={

// tempval:"",

// get name(){

// return this.tempval;

// },

// set name(newVal){

// this.tempval = newVal;

// }

// }

// obj1.name = 's'

9：数据劫持

检测数据的变化，让某个数据的视图发生改变

 

10 :Proxy(代理)&&Reflect（映射）

可以做到新增的属性的读写 这是OBject.difinredProtyte

可以代理其他类型的数组这是OBject.difinredProtyte做不到的

11 class(面向对象编程)

1：概念

类的出现就是为了方便代码的书写,将功能更为明细，完成复杂的项目

2：作用

私有属性 构造对象 继承 静态属性

3：注意

1：class时关键字

2：对象的构建必须要用new

3:Plane.prototype不能枚举

4:静态属性要放到Plane而非原型

 

12 Set

1：set是什么：

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。只有 属性值没有属性名称

 

2：方法：add delete clear has

遍历的方法：(A)os.foreach(function(ele){})

(B):es6新增的方法 for of

3：作用

（1）：可以进行数组、字符串的去重（效率比以前的方法效率高）

解决 对象去重不足

let obj = {}

let o = {

age:"wnagwei"

}

let arr1 = [1,'s',{name:"lbt"},1,o,o]

let newArr = [];

//对象去重有问题

for (let i = 0; i < arr1.length; i++){

if (!obj[arr1[i]]) {

newArr.push(arr1[i]);

obj[arr1[i]] = '的';

}

}

let os = new Set(arr1);

（2）：以将数组变成set以参数的形式传入

（3）：Array.form()可以将类数组，迭代接口的数组转化成数组||...可以展开具有迭代接口的数据格式

let is = new Set(arr);

let newArr = Array.from(is);

 

console.log([...is]);

（3）:利用set求交集 并集 差集

 

let arr1 = [1, 2, 3, 't', 22, 33];

let arr2 = [3, 't', 'mm', 22, 13];

• 求并集

let os = new Set([...arr1, ...arr2]);

• 求交集

let os1 = new Set(arr1);

let os2 = new Set(arr2);

let newArr = [...os1].filter(ele => os2.has(ele));

 

• 取差集

let os1 = new Set(arr1);

let os2 = new Set(arr2);

os2的补集

let newArr1 = [...os1].filter((ele) => {

如果存在就过滤，不再就保存

return !os2.has(ele);

});

let newArr2 = [...os2].filter(ele => !os1.has(ele));

13：MAP

1:map是什么

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

2:基本的操作

om.set('key', 'money')

om.get('key');

om.delete('key');

// om.clear();

遍历：

om.forEach((ele, key, self) => {

 

})

for (let values of om) {

console.log(values[0], values[1])

}

任何数值都可以当作属性

 

3：map的存储原理

利用hash算法,链式的结构存储数据。

 

 

14：promise

 

解决异步操作引发的问题

• 回调地狱
• tray-catch只能捕获同步代码块

 

15、Iterator

 

（1）:Iterator（迭代器）：提供一种方法可以顺序的聚合对象的各个元素，是一种最简单也是最常用的设计模式；

用户透过特定的接口寻访集合中的每一个元素而不用了解底层的实现

迭代器：依照迭代的思想而实现，分为内部和 外部迭代器。

 

（2）: 内部迭代器：本身是函数；该函数内部定义好迭代规则；完全接手整个迭代过程，外部只需要一次的调用即可

Array.prototype.forEach jQuery.each

（3）:外部迭代器

本身是函数，执行返回迭代对象，迭代下一个元素必须显示调用，调用复杂度增加，但是灵活性增强。

 

（4）:迭代的目的：标准化迭代操作。

 

服务器端提供数据 给前端，前端利用for遍历，但是 由于业务变化数据发生变化，返回对象或者 map set;导致前端遍历代码大量的重写

解决的方案：

引入itearor，部署在nodeList、arguments、arquement 、Array 、Set 、 Map

字符串等数据的Symbol.ietator属性

使得这些数据是可以迭代 的----从而进行for of Array.from

 

16generate(迭代生成器)

 

generater:生成器--本身是函数，执行后返回迭代对象，函数内部要配合dield使用geneetaror函数会分段执行，遇到yield即暂停

 

特点： function和函数之间要带*

aysnc +awit

1:解决异步代码繁琐问题

2异步try catch的捕获

 

 

17：补充新增方法

（1）实例方法

find

let arr = [10, 20, 30, 40, 50, 60];

找到第一个比30大的书

let newArr = arr.find(value=> value>30);

console.log(newArr)

include

console.log(arr.includes(40));

finidIndex

//找到第一个比40大的元素的 索引

let index = arr.findIndex((ele)=>ele>40)

 

遍历

返回数组中元素所对应的属性值的集合 可遍历的迭代对象

for(let key of arr.keys()){

console.log(key)

}

返回数组中元素的j集合 可遍历的迭代对象

for(let key of arr.values()){

console.log(key)

}

返回数组元素和属性名的集合所构成的数组，可遍历的迭代对象

for(let key of arr.entries()){

console.log(key)

}

（2）数据劫持

 

let obj = {

nam:'lbt',

age:22

}

//分别拿到属性值，索引，组合体的数组

let arr0 = Object.keys(obj);

let arr1 = Object.values(obj);

let arr2 = Object.entries(obj);

 

（3）字符串的扩展

let str = 'what is your way';

//是否参在子字符转

// console.log(str.includes('t i'));

//是否参以子字符开头

// console.log(str.startsWith('what is'));

//是否参以子字符结尾

// console.log(str.endsWith('what is'));

（4）模板字符串

function introduce(name,age){

var str = `你好:${name}我今年${age}岁了`;

console.log(str);

}

introduce('lbt',22)

//再html元素渲染的应用

let str = `<div>

<h1>${title}</h1>

<span>${des}</span>

<span>${a*a}</span>

<span>${arr}</span>

</div>`

oDiv.innerHTML = str;

 

//再类中的使用

 

class Person{

constructor(name,age){

this.name = name;

this.age =age;

}

say(des){

return `我叫${this.name},今年${this.age},我很${des}`

}

 

}

var op = new Person('lbt',22);

let result = op.say();

console.log(result)

 

 

 

 

 

18：模块化

ess6 moudule 前端使用为主

es6中的一个模块就是就是一个js文件;

一个js文件可以在一定的条件下（再模块依赖网）理解成模块

就是说是模块的话，一个模块的文件再们没有特定条件的情况下就不可以访问另一个模块的值

 

 

（1）导入与导出

• 常规导入

import {arr} from './module2.js';

export{arr};

 

• 不可以重复定义

当import导入的时候就去定义了a这个变量 定义的形式 let a = xxx;

import { a } from "./module2.js";

import { a } from "./module2.js";

import { a } from "./module2.js";

 

console.log(a);//ncaught SyntaxError: Identifier 'a' has already been declared

 

• 支持变化

export {a as b};

import {b} from './module2.js'

console.log(b);

 

 

（2）：按需加载

 

let s =10;

let m = 22;

let n = 55;

export {s};

export {m};

export {n};

import {s,n} from './module3.js'

 

（3）：默认导出

let cr = {age:22,name:"lbt"};

//默认导出

export default cr;

import cr from './module3.js'

 

（4）全体导入

export{

x,

say,

Person

}

import * as allObj from './module3.js';

console.log(allObj.say())

 

（5）默认导入+按需导入

import d,{w,c} from './module4.js';

console.log(d.name,w,c);

 

setInterval(()=>{

times++;

},200)

let say = () =>{

console.log('hello'+times +''+ms);

}

export {say}

import {say} from './module4.js';

say();

setInterval(() => {

say();

}, 2000);

 

 

（6）：补充说明

 

1：import会提升到最上面

2：js文件是模块 ‘use strict’

 

（7）：同步与异步记载问题

 

1)同步加载问题--->会阻塞的

import 'http://code.jquery.com/jquery-2.1.1.min.js';

console.log(1);

console.log($)

 

 

 

 

 

 

2)按需加载问题

let falg = Math.random() >0.5?true:false;

if(falg){

import a from './module6-1.js';//这儿写语法错误不可以再if

}else{

import b from './module6-2.js';

}

 

//import导入数值

// 1:异步导入 2:返回值是proMise 3:按需导入(在某些位置)

import('./module7.js').then((val)=>{

console.log(val.aa)

})

import ('http://code.jquery.com/jquery-2.1.1.min.js').then(({})=>{

console.log($);

})

 

 

//异步执行

console.log(2222222222222)

setTimeout(() => {

console.log($)

}, 3000);

 

 

//按需加载

function importPath(){

let falg = Math.random() >0.5?true:false;

let path = falg?'./module6-1.js':'./module6-2.js'

return import(path);

}

 

importPath().then((val)=>{

console.log(val)

})

 

//并发的异步加载所有的模块数据

Promise.all([import('./module8-1.js'),import('./module8-2.js'),import('./module8-3.js')]).then(([{one,tow},{ll},{mm}])=>{

console.log(mm,ll)

})

 

1:当script标签有module的属性,模块之间不会污染

* 2:导入和导出的语法 按需 默认 全体 导入