1.JS

1.1 JS由三部分组成

DOM document object model 文档对象模型 dom操作
BOM 浏览器对象模型 window 混合开发路由模式 history对象
ECMAScript 语法

1.2. ECMAScript和JavaScript

 - ECMA是标准，JS是实现

2.ES6新增以下新特性（ECMAScript 2015 == ES6 严谨简洁）

1、什么是es6？

ECMAScript 6.0 的简称 ECMA-2015 是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。

1-1、什么是ECMAScript？

ECMA 是制定js的标准化组织。 ECMAScript规定了浏览器脚本语言的标准。

1-2、ECMAScript 和 javascript 关系？

ECMAScript是JavaScript的规格（标准） JavaScript是ECMAScript的一种实现。

js 单线程 ---宏任务微任务

ES6新增的特性

  1:let const 块作用域

 2：解构赋值

 3：数组的扩展  字符串的扩展  对象的扩展 

4：Set  Map 数据结构

5：函数的扩展  箭头函数   函数的简洁表示法   尾调用

6:Promise   generator  异步操作

7:类与类的继承    class   extends

8：模块化     export  import  module 

9: 新增数据类型   Symbol

1.1 var let const的关系

let  var  定义变量    
const   	定义常量

1.2 解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring)
数组的解构赋值
对象的解构赋值
字符串的解构赋值
函数参数的解构赋值

1.3 set

  Set  没有重复元素的类似数组的数据结构。  数组去重
 //创建Set实例
var s = new Set(["1",23,123,45,345,67,532,897,976,458,342,682])
 s.delete(123)
 console.log(s);
 console.log(s.has(680));
 console.log(Array.from(s));
 console.log(...s);
 console.log([...s]);

1.4 map

2 Map  键值对的双列集合  
存放内容 临时容器  高级使用  数据结构操作

 // 创建新的 Map
 const myMap = new Map(); 
 
 // 设置键值对 
 myMap.set('answer', 42);
 
 // 获取值
 myMap.get('answer');
 // => 42 (输出结果)
 
 
 // 判断键是否存在
 myMap.has('answer');
 // => true(输出结果)
 
 myMap.has('question');
 // => false(输出结果) 
 
 // 删除键值对。删除成功返回 true，否则返回 false 
 myMap.delete('question');
 // => false (输出结果)
 
 myMap.delete('answer'); 
 // => true (输出结果)
 
 // 获取键值对个数
 myMap.size; 
 // => 0(输出结果)
 
 // 删除所有键值对，一了百了 
 myMap.clear();

1.5 Array.from()

 将两类对象转成数组 
 var  arrayLink = {
 "0":"a",
"1":"b",
"2":"c",
length:3     //这里的length写多少后面转换出来的就有多少条数据  没有的数据打印的就是undefined
}

var arr = Array.from(arrayLink)
console.log(arr)  这里打印的是一个数组
console.log(typeof arr)  //这里打印出来的结果是object
console.log(Array.from("abcdefg"))  // ['a', 'b', 'c', 'd', 'e', 'f', 'g']
console.log(Array.of(1,2,3,4,5)) //[1, 2, 3, 4, 5]

1.6 ES6数组新增的方法

  map()方法
  filter()方法
  some()和every()方法
  reduce()和reduceRight()方法
   find()方法
   findIndex()
   includes()

reduce()和reduceRight()方法

参数	说明
prev	上一次操作返回的结果。如果不给prev设置默认值，那么第一个元素就作为第一个prev
item	本次操作的元素
index	本次操作元素的索引值
array	当前操作的数组
例子1：数组求和

js
复制代码
let arr = [20, 40, 50, 21]
let values = arr.reduce((prev, item, index, array) => {
 //给个return 循环四次 第一次输出prev是20，
 //第二次40+20是60，第三次是110 最后一次输出131
    console.log("prev" + prev)
    return prev + item
})
//131
console.log(values)

1.7模板字符串

模板字符串原理  ：是基于正则来实现的
let name="张三",age="18";
let desc="${name} 今年  ${age}  岁了";
function replace(desc){
    // 原理部分  
    return desc.replace(/\$\{([^}]+)\}/g,function(mathed,key,c,d){
         console.log(mathed,key,c,d)
        //${name} name 0 ${name} 今年  ${age}  岁了
        //${age} age 12 ${name} 今年  ${age}  岁了
        //replace中 mathed 为匹配到的字符串，key为对应替换的字符串，c为替换的位置，d为整个要替换的字符串。
            return eval(key);
        //eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。这里的eval会将原本的name和age改成成张三和18
    })
}

console.log(replace(desc))

1.8typefo

// typeof  判断基本数据类型没有问题  typeof  null  为 object  js遗留bug
console.log(typeof null)// object   null代表空对象  或空
console.log(typeof 11)//  number
console.log(typeof "null")//  string
console.log(typeof undefined)// undefined
console.log(typeof NaN)// not a number   number 
console.log(typeof -Infinity)// 负无穷大  number
console.log(typeof obj)//  object
console.log(typeof show)//  function
console.log(typeof show())// undefined
console.log(null == undefined)// true   0  == === Object.is()区别     隐式转换  强制类型转换与隐式类型转换
console.log(NaN==NaN)// false                      js当中唯一自身不等于自身  NaN
console.log(obj==obj)//  true
//引用数据类型   指向内存中对象存储的首地址
console.log(obj==obj1)// false
//基本数据类型  值
console.log(num==11)// true
console.log(num==num1)// true

1.9 Promise——承诺

异步：操作之间没啥关系，同时进行多个操作双向6车道8车道

异步：代码更复杂回调函数事件触发的方法 Promise generator函数 async异步函数

同步：同时只能做一件事独木桥

同步：代码简单

Promise 诺言

是一种异步编程解决方案（解决回调地狱问题） es6内置对象

原理：有三种状态：进行中pending 已成功resolve 已失败 reject

两种情况 : 进行中-》成功进行中-》失败

Promise方法有：异步

.then() 成功

.catch() 失败

.finally() 无论是什么状态（成功失败）都会执行的函数最后执行

.all() 多个promise实例包装成一个新的promise实例只有所有的实例是成功状态才是成功一个状态失败状态就失败

.race() 多个promise实例包装成一个新的promise实例状态取决于最先改变的实例（这些实例谁先来谁执行谁其他的不执行）

.any() 多个promise实例包装成一个新的promise实例只要有一个实例是成功状态就是成功所有状态失败状态才是失败

.allSettled() 等所有实例都返回结果，他的状态就变成失败

2.0 为什么要js模块化： js面试题

顾名思义，就是将相同功能的代码封装为一个功能模块，以便在其他地方多次进行复用

就是比如代码有几千几万行很不容易维护可读性比较差

2.1js模块化发展历程

一、模块

二、CommonJS node.js （require、export、module）

三、AMD 异步模块定义 require.js

四、CMD 通用模块定义 sea.js

五、 ES6 模块

import export module 模块功能主要由两个命令构成：

export：用于规定模块的对外接口
import：用于输入其他模块提供的功能

2.2 继承

//  es5组合继承-伪经典继承   原型链继承+借用构造函数继承 继承  
function Father(name, age) {
  this.name = name,
    this.age = age
  console.log(this.name, this.age);
}
// 给父函数上面的原型链上添加方法  子继承

Father.prototype.username = function () {
  console.log('这是父构造函数里面添加的username');
}
Father.prototype.ages = function () {
  console.log('这是父构造函数里面添加的ages');
}

function rom(name, age) {
  Father.call(this, name, age)  //call  第一个参数是要改变父级的this指向  后面两个是值
}

rom.prototype = new Father('刘德华', '18')

console.log(rom.prototype);



// class 继承
    class Father {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
        msg() {
            console.log('大家好我叫' + this.name );
        }
    }
    class Child extends Father {
        constructor(name, age) {
            super(name, age) //super 实现继承  
        }
    }
    let child = new Child('刘德华', 18)
    child.msg()
    console.log(child.name);

2.2 创建对象的几种方式

1.创建对象的方式：new Object

2:字面量方式 var obj={name:'刘德华'}

3：工厂模式创建对象

4：构造函数模式

5：原型模式

6：混合模式构造函数+原型模型

7：用户类对象公共属性和方法的抽取

2.3 箭头函数与普通函数的区别

// 1、定义不同：箭头函数使用箭头定义，普通函数用function定义。
// 2、箭头函数全都是匿名函数：普通函数可以有匿名函数，也可以有具名函数
// 3、箭头函数不能用于构造函数：普通函数可以用于构造函数，以此创建对象实例。
// 4、箭头函数中 this 的指向不同：在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。
// 5、箭头函数不具有 arguments 对象：每一个普通函数调用后都具有一个arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。
// 6、其他区别：箭头函数不具有 prototype 原型对象。箭头函数不具有 super。箭头函数不具有 new.target

2.4 for in 与for of的区别:

// for in  for of都能遍历数组  遍历数组  for in遍历的是数组的下标（键 key） for of遍历的是数组的元素（值 value）
// for in遍历的是对象的键 （key）  for  of遍历的是实现Iterator接口的对象  for  of遍历的是两类对象（类似数组结构的对象  可遍历的对象）

2.4 generator 函数

   // generator 函数   
    function *Gen(){
        alert('show');
        yield;
        alert('show2')
        yield;
        alert('show3')
        yield; 
        alert('show4')
        yield;
        alert('show5')
    }
    let gen= Gen()
    console.log(gen);
    gen.next()
    gen.next()
    gen.next()
    gen.next()
    gen.next()

2.5 Proxy vue3响应式原理

let obj = {};//target  被代理的对象
let proxyObj = new Proxy(obj,
	{
		// 可配置的选项对象    设置拦截
		get: function (target, propKey, receiver) {
			console.log(`getting ${propKey}`)
			return Reflect.get(target, propKey, receiver)
		},
		set: function (target, propKey, value, receiver) {
			console.log(`setting ${propKey}! ${value}`)
			return Reflect.get(target, propKey, value, receiver)
		}

	}
)

proxyObj.sing = "姬霓太美"
console.log(obj)、、

2.6 this指向的问题

         // 这里要注意如果使用的是let 声明的变量不会挂载到全局的window 上面     所以要使用var
        var obj={
            name:'刘德华',
            age:'118'
        }
        const a=(name)=>{
            // 这里的this指向她的上层作用域  也就是全局的window   
            console.log(this);
            this.obj.name = name;
        }
        a('王五')
        console.log(obj);

es6-es12整理