JS重要知识点归纳（未完）

最新推荐文章于 2024-09-18 09:28:05 发布

Where-to-go

最新推荐文章于 2024-09-18 09:28:05 发布

阅读量483

点赞数 1

分类专栏： web端开发 javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45523183/article/details/106686261

版权

web端开发同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

JS重要知识点归纳

1、四种查询数据类型的方法

实现方法	typeof	instanceof	constructor	Object.prototype.toString.call()
优点	使用方便	能检测引用数据类型	基本能检测所有的类型（除了null和undefined）	检测出所有的类型
缺点	只能用于基础数据判断（null会显示为Object）	不能检测出基本类型，且不能跨iframe	constructor易被修改，也不能跨iframe	IE8及以下，undefined和null均为Object
实例	`typeof str`	`str instanceif String`

2、错误类型

错误类型	TypeError	ReferenceError	ReferenceError实例
说明	当引用null 或者 undefind 属性的时候	1、在当前作用域用 RHS查询不到数据时	var a = x; （未声明x）
		2、在当前作用域使用 LHS查询不到目标变量时（严格模式不会自动创建变量）	a = 3; （未声明a）

3、判断对象身上的是否有某种属性

方法	使用（.）或者（【】）查询	in 运算符	`hasOwnProperty()`
说明	通过判断 `text.属性名 === undefind` 等于就是没有该属性	`属性名 in textObj`存在时，值为`true`	`test.hasOwnProperty('属性名')`存在时，值为`true`
局限	该方法不能用在存在某属性，但该属性值为`undefind`的时候	该方法无法区分自身和原型链上的属性	适用于只判断自身属性的场景。

4、this指向

定义：指向调用该 this 得对象，this 本身也是一个对象，可以在函数执行时保存该函数里相关的值；其存在的目的是利用 this 指向的不同可在不同的对象环境中执行这个函数，达到复用的效果。换句话说，this的指向并不是在函数定义时确定的，而是在调用时确认的，即函数的调用方式决定了 this 的指向

this 永远指向**【最后】【调用】它的那个【对象】**

案例一：全局调用

此时 this 指向 window

var a = 10
console.log(this.a) // 这里的this -> window

案例二：

function foo() {
    console.log(this.a)
}
function test(fn) {
    fn(); 
}
var a = 20;
var obj = {
    a: 10,
    getA: foo
}
test(obj.getA);

//so， 最后-调用-对象是哪个？
//test -> fn() -> obj.getA ->  foo() -> console.log(this.a)
//最后是在 foo 中调用，属于 window 的方法 所以指向 window
//result  20

案例三：

//这个例子很有意思
var obj = {
    a: 20,
    getA: function() {
        setTimeout(function() {
            console.log(this.a)
        }, 1000)
    }
}
obj.getA();

//resul 为 undefined ？？？
//现在结合上面那句话，最后-调用？谁调用setTimeout
//最后并不是obj，而是window对象 (因为 setTimeout 是 window 的方法)，所以this指向window

案例四：call 和 apply

**call ** 与 apply 都属于 Function.prototype 的一个方法，所以每个function实例都有call、apply属性；

作用：

call（）方法和apply（）方法的作用相同：改变this指向。

区别：

他们的区别在于接收参数的方式不同：
call（）：第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。在使用call（）
方法时，传递给函数的参数必须逐个列举出来。例：call(obj, a,b,c)
apply（）：传递给函数的是参数数组。例：apply(obj, [a,b,c])

使用范例：

function add(c, d){ 
    return this.a + this.b + c + d; 
} 
var o = {a:1, b:3}; 
add.call(o, 5, 7); 			// 1 + 3 + 5 + 7 = 16  		this 指向 o 
add.apply(o, [10, 20]); 	// 1 + 3 + 10 + 20 = 34  	this 指向 o

小结

**找不到“.”**的函数调用，其内部的this一般指向window象；
**找得到“.”**的函数调用，其内部的this一般指向最后一个“.”左侧的那个对象，如果左侧是prototype，再向左找一个；
明确区分函数是**[构造函数]还是[普通函数]**，[构造函数]内的this指向实例化后的对象；
函数作为参数传递，被调用时其内部的this一般指向window。
call和apply会改变this指向
ES6/7的箭头函数也会影响this指向
一句话来说，就是“谁调的我(普通函数)，我内部的this就指向谁；new我一下(构造函数)，我内部的this就指向我的实例化”

5、函数

6、数据类型转换

数组、对象、字符串的转换

array --> string

join("+")  // 把数组的每一项拿出来用指定分隔符隔开 ；
toString() // 把数组的每一项拿出来用逗号隔开，原有数组不变

obj --> String

JSON.stringify() // 将 JavaScript 对象转换为字符串。

obj --> array

For… in 	// 循环赋值法
    var arr = []
	for (var i in obj) {
        arr.push(i)		 // 属性
        arr.push(obj[i]) // 值
    }
Array.from() //

string --> array

str.slpit(",")

string --> number

Number('123')
parseFloat('127.1') // 保留小数
parseInt('123') // 取整
+number // var c = +'2' // return 2 这个返回值是number 使用其它的算术法也能把字符串转成数字

number --> string

var c = number + '' // 加上一个空字符串就可以转换成字符串类型
var c = String(number) // 
var c = number.toString(8) // 将 number 转成8进制的数字，且 c 的类型是 string
var c = number.toFixed(1) // 数字转成字符串

number --> array

Array.of()

深拷贝与浅拷贝

浅拷贝： B复制A，A变B也变（指引用数据类型会跟着改变，基础数据类型不会跟着改变）

深拷贝： B复制A，A变B不变

浅拷贝的方法4种方法： slice() 、concat() 、赋值法、遍历、object.assign（）

// 遍历拷贝（浅拷贝）
var shallowCopy = function(obj) {
    // 只拷贝对象(包含数组和对象)
    if (typeof obj !== 'object' && obj !== null) return;
    // 根据obj的类型判断是新建一个数组还是对象
    var newObj = obj instanceof Array ? [] : {};
    // 遍历obj，并且判断是obj的属性才拷贝
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

深拷贝的方法5种方法：对象的concat、slice法、JSON.parse(JSON.stringify(arr))、遍历法、解构赋值法

解构赋值法：

const a1 = [1, 2]; const a2 = [...a1];或者const [...a2] = a1;

遍历法：

var deepCopy = function(obj) {
    if (typeof obj !== 'object' && obj !== null) return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj;
}

合并对象方法	jquery	`object.assign（）`
浅拷贝	`$.extend(obj1, obj2)`	object.assign（obj1, obj2）
深拷贝	`$.extend(true, obj1, obj2)` ,需要添加true属性	-
备注	得到得新对象是 obj1 ，将 obj2 得属性复制给了 obj1

7、对象的属性

ES5的属性特性包括下面六个：

configurable：表示能否通过delete来删除属性从而重新定义属性，能够修改属性的特性,默认为true
enumberable：表示是否能通过for-in循环返回属性。默认为true
writable：是否可以修改属性, 默认为true
value：包含这个属性的数据值。读取属性值时3,从这个属性读，写入属性时，把新值保存到这个位置。默认值为undefined.
getter：在读取属性时，调用的函数
setter：在写入属性时调用的函数

特别注意：一旦调用了Object.defineProperty方法之后，那些未定义的特性值除了configurable为false之外，其他都为undefined;

8、通用的事件侦听器

主要考核事件处理程序和event对象及其属性和方法

var EventUtil = {
    addHandler: function(element,type,handler) {//添加事件处理程序
        if(element.addEventListener) {
            element.addEventListener(type,handler,false)
        } else if(element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeHandler:function(element,type,handler) {//移除事件处理程序
        if(element.removeEventListener) {
            element.removeEventListener(type,handler,false)
        }
    },
    getEvent:function(event){// 获取事件对象
        return event ? event : window.event;
    },
    getTarget:function(event){// 获取事件的目标
        return event.target || event.srcElement;
    },
    preventDefault(){
        (event) =>{
            if(event.preventDefault){event.preventDefault()}
            else {event.returnValue= false}
        }
    },
    stopPropagation(){
         (event) =>{
            if(event.stopPropagation){event.stopPropagation()}
            else {event.cancelBubble= true;}
        }
    }
}
// 实列
var list = document.getElementById('list')
EventUtil.addHandler(list,'click',function(ev){
    event= EventUtil.getEvent(ev);
    var target = EventUtil.getTarget(event);
    alert(target.id);
})

9、ajax原生写法

var xhr = new XMLHttpRequest();															// 1
xhr.onreadystatechange = function(){													// 2
   if(xhr.readyState == 4){
       console.log(xhr.status)
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status ==304){
           var hh = xhr.responseText;
           var haha1 = document.getElementById('wokao');
           haha1.innerHTML = hh;
        }else{
            alert('failed11',xhr.status);
        } 
    }
}
xhr.open("get","http://10.10.65.109:8888/text.json",true);								// 3
xhr.setRequestHeader("Accept", "application/json"); 									// 4
//  xhr.responseType = "json";			
xhr.send(null);																			// 5

10、对HTTP不同请求方法的理解

HTTP请求方式

请求方式	描述
GET	请求指定的页面信息，并返回实体主体
HEAD	类似于 get 请求，只不过返回的响应中没有具体的内容，用于获取报头
POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立或者已有资源的修改
PUT	从客户端向服务器传送的数据取代指定的文档的内容
DELETE	请求服务器删除指定的页面
CONNECT	HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
OPTIONS	允许客服端查看服务器的性能
TRACE	回显服务器收到的请求，主要用于测试或者诊断

HTTP请求原理

HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。