js知识总结

寄语
想飞上天，和太阳肩并肩，世界等着我去改变

关于

JS是由ES(ECMAScript)、DOM(浏览器文档对象)、BOM(浏览器对象模型)组成
js结构图
注意：此图为转载

ES和js的关系

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）

javascript引擎

是执行JavaScript代码的程序或解释器
可以实现为标准解释器或即时编译器，它以某种形式将JavaScript编译为字节码
是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中
一些JavaScript引擎：V8、Rhino

基本数据类型

Symbol

https://blog.csdn.net/qq_42306435/article/details/87971476
Symbol类型的应用
https://www.cnblogs.com/linziwei/p/10818101.html
注意

Symbol 作为属性名，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。但是，它也不是私有属性，有一个Object.getOwnPropertySymbols方法，可以获取指定对象的所有 Symbol 属性名。
Object.getOwnPropertySymbols方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。

var age = Symbol();
	var obj={
	[age]:111, // 作为变量键值
	 age:222  // 作为常量键值
	}
	console.log(obj.age); // 222
	console.log(obj[age]); // 111

变量

JS中全局变量和局部变量： https://blog.csdn.net/Mr_28/article/details/54318808

var let const

用于按名称来保存并操作值的位置
js的类型比较自由，在一个脚本过程中，单个变量可以保存不同类型的数据

var

声明的变量可以只进行声明，不初始化默认是undefined， 不会报错，且变量的值是可以修改的

使用var在函数或全局内任何地方声明变量相当于在其内部最顶上声明它，这种行为称为Hoisting（提升）。

比较注意一点是此提升只是把声明提升上来，而赋值操作还是在原先的位置。

let

是块级作用域，即函数内部使用let定义后，对函数外部（存在相同变量名的变量）无影响

const

声明的变量必须进行初始化，若是声明的变量是基本数据类型，则其值不可以进行修改
基本数据类型：Undefined,Null,Boolean,Number,String
若是声明的是复合数据类型（引用类型），则其值是可以进行修改的，只要保证其引用类型的地址指向未发生变化即可
复合数据类型：Object,Array,Function,Date

数组Array的 map、some、every、filter方法

map

let arr=[18,18,19,18,21,23,22,25,26];
let mapReturn=arr.map(function (item,index,arr) {
 // 对数组的每一项应用给定条件，返回新的数组
  //map的返回值是一个新数组，每次循环进来都对每一项操作，然后需要return出去，就只给给到新数组对应的值了
      return item+1;
    })

数组元素个数不变，数组元素发生了变化
不会改变原来数组的内容，会返回一个新的数组

some

只要有一个符合便返回true，剩余元素则不会执行，返回值是Boolean类型，不会改变原数组，不会检查空数组

let arr=[18,18,19,18,21,23,22,25,26];
let mapReturn=arr.some(function (item,index,arr) {
      return item >= 18;
    }) 

every

let arr=[18,18,19,18,21,23,22,25,26];
let mapReturn=arr.every(function (item,index,arr) {
      return item >= 18;
    }) 

检查数组中的每一个元素，全部符合条件才返回true,有一个不符合便返回false，不再执行，
返回值是Boolean类型

filter

let arr=[18,18,19,18,21,23,22,25,26];
let mapReturn=arr.filter(function (item,index,arr) {
      return item >= 18;
    }) 

过滤数组中符合条件的元素，之后返回一个新的数组
数组元素个数可能发生了改变，但是数组元素不会发生改变

箭头函数和普通函数的区别

箭头函数是普通函数的简写，即可以使用普通函数的都可以使用箭头函数

1. （箭头函数）函数体内的 this 对象，就是定义时所在的对象，而不是（普通函数）使用时所在的对象。
2. 不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
3. 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。
4. 不可以使用 new 命令，因为：没有自己的 this，无法调用 call，apply。
5. 没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 proto

typeof和instanceof

typeof

用于判断数据类型，返回值为6个字符串，分别为string、Boolean、number、function、object、undefined

const name='Alice'
const person={
name:'Alice',
age:18
}
const fruit=['watermelon', 'strawberry', 'pineapple', 'apple']
const a=null
console.log(typeof(name)) // string
console.log(typeof(person)) // object
console.log(typeof(fruit)) // object
console.log(typeof(a)) // object

从上面的示例中可以看出，typeof将null、array、object以及函数示例（在这里便不举例子了）都识别为object，从而无法得到最真实的数据类型，从而便引出了instanceof，下面有请instanceof出场

instanceof

判断该对象是谁的实例
表达式（obj1 instanceof obj2） obj2必须为对象，否则会报错！其返回值为布尔值

var oStringObject = new String("hello world");
 console.log(oStringObject instanceof String); // 输出 "true"

实例方法、静态方法、实例属性、静态属性

function Alice(){}
Alice.age=18  //静态属性
A.say=function(){ // 静态方法：
console.log("Hello World!");
}
A.say();//输出Hello World!

function Alice(){
    this.like='money'  //实例属性
}
A.prototype.age=14;  //实例属性
A.prototype.say=function(){ // 实例方法
console.log("Hello World!");
}
var a=new A();
a.say();//输出Hello World!

== 注意==：我们还有一种写法，如下：

A.prototype = new Animal();
A.prototype = {
    age:22,
    say: function() { console.log("My ageis " + this.age); 
    }
}

函数和对象

函数是用来实现具体功能的代码，用一种方式把他们组织起来，就是函数了
对象是有属性和方法的一个东西，在对象中的函数就变成了方法
所有的函数（除了一些内建函数）都有一个名为==prototype（原型）==的属性，这个属性是一个指针，指向一个原型对象，而这个对象的用途是包含可以有特定类型的所有实例共享的属性和方法。（并且有一个constructors（构造器）属性，指回原来的构造函数）
对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型（prototype），这也保证了实例能够访问在构造函数原型中定义的属性和方法。
所以 对象的(实例).__proto__ == 构造函数.pertotype; 他俩都指向同一个原型对象

js对象和prototype（原型对象）

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

继承

function A(){
    
}
A.prototype.say=function(){
    console.log("Hello World!");
}
function B(){
}
B.prototype=new A();//实现了继承

继承就是将B的指针指向A对象，这种形式是用A的构造函数来构建对象

扩展运算符（…）

对数组和对象而言，就是将运算符后面的变量里东西每一项拆下来

const person1={
age:18,
sex:'女'
}
const person2={
name:'Alice',
... person1
}

注意：扩展运算符对对象和数组的拷贝属于浅拷贝

浅拷贝和深拷贝

浅拷贝和深拷贝是相对于引用类型而言的
深拷贝，改变拷贝后数组的值并不会影响拷贝源的值
而浅拷贝只是拷贝的地址，改变拷贝之后的变量，拷贝之前的原来变量的值也会随之发生改变
注意：string：(虽是引用类型但是作为基本类型来用，即定义为const 则不可修改其值)；

闭包

https://www.jb51.net/article/99801.htm

1：在一个函数内部定义另外一个函数，并且返回内部函数或者立即执行内部函数。
2：内部函数可以读取外部函数定义的局部变量
3：让局部变量始终保存在内存中。也就是说，闭包可以使得它诞生环境一直存在。
4：封装对象的私有属性和私有方法。

function keith(num) {
return function() {
return num++;
};
}
var result = keith(2);
console.log(result()) //2
console.log(result()) //3
console.log(result()) //4

立即调用的函数表达式（IIFE）

JS事件监听

JS事件绑定、事件监听、事件委托知识点总结 https://www.xz577.com/j/28628.html
给DOM元素添加一个事件监听，只能收到对应事件类型的消息，收到这个消息时，执行事件回调函数
element.addEventListener(event, function, useCapture)
event : （必需）事件名，支持所有 DOM事件 。
function：（必需）指定要事件触发时执行的函数。
useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。

DOM事件 https://www.w3school.com.cn/jsref/dom_obj_event.asp

拓展：JavaScript - 顶层window方法onresize() 互相覆盖的问题 https://blog.csdn.net/idomyway/article/details/88729937

js函数防抖和节流
https://www.jianshu.com/p/c8b86b09daf0

ECMAScript-262规范
jianshu.com/p/4783d49bc956

写在最后

文章中若有错误，希望大家可以指出，共同学习，共同进步。
在下，感激不急！！！