JavaScript第四周-CSDN博客

本文链接：https://blog.csdn.net/weixin_45848925/article/details/126701572

Object面向对象

继承

父对象的属性和方法，子对象可以直接使用，当多个子对象公用的属性和方法都集中定义在父对象中，节省内存的代码空间。

JS面向对象

基于原型(保存一类子对象共有属性和共有方法的父对象(原型对象),每个对象天生就有一个原型)

1. 获取原型对象
对象.__proto__：(使用时必须先创建一个对象才能生效）
构造函数名(方法)(Array Function Date RegExp).prototype：(无创建对象也能找到原型)

2.两链一包
作用域链
闭包
原型链：每个对象都有一个.__proto__可以连续不断的找到祖先形成一个链式结构
最顶层：Object.prototype是对象的原型

3. 获取原型对象

创建：
原型对象.属性名=属性值；//共有属性
原型对象.方法名=function(){};//共有方法

var lh={
    "age":31,
    "height":178
}
//设置共有属性
lh.__proto__.hobby="踢足球";

自有：保存在对象本地的属性
共有：保存在原型对象的属性，所有的子对象都可以使用
练习：

判断自有和共有

obj.hasOwnProperty("属性名");//判断自有，当返回true时表示自有，false可能共有可能没有

完整版共有：
if(obj.hasOwnProperty("属性名")){
	console.log("自有");
	}else{
			if("属性名" in ogj){
				console.log("共有")
				}else{
					console.log("没有")
					}
		}

修改和删除自有属性

obj.属性名=新值;//修改
delete obj.属性名;//删除

添加方法(indexOf)

if(Array.prototype.indexOf===undefined){//判断当前原型有无该方法
	Array.prototype.indexOf=function(key,start){//r若无则创建该方法
		start===undefined&&(start=0);//当起始位置未输入时将其设置为0
		for(var i=start;i<this.length;i++{//循环遍历找到与key相等的数
		if(this[i]==key){
			return i;//找到后返回下标
		}
		return -1;//遍历完都未找到则返回-1
	}
}
//调用
var arr1=[1,2,3,4,5,6,7,8,9];
console.log(arr1.indexOf(3,1));

添加方法(求和、平均值)

Array.prototype.sum=function(){
	for(var i=0;i<this.length;i++){
		var sum=0;
		sum+=this[i];
	}
	return sum;
}
Array.prototype.avg=function(){
	return this.sum()/this.length;
}

添加方法(去掉字符串开头和结尾空格)

String.prototype.delet=function(){
	return this.replace(/^\s+|\s+$/g,"");
}

保护对象

四大特性
value：属性值实际保存的地方a
wirtable:flase ture(能否修改)
configurable：flase ture(能否删除)
enumerable：for循环(能否遍历)
修改特性：
Object.defineProperties(obj,{
“属性名”:{四大特性}
})
三个级别
1. Object.preventExtensions(obj);防扩展
2. Object.seal(obj);密封
3. Object.freeze(obj);冻结

ES5中数组新的API

判断(数组中元素是否符合要求返回的值为布尔值)

1. every：类似"&&"
 		arr.every(function(val,i,arr){
 			return 判断条件;
 		})//判断每一次return的值，当return为false时遍历停止
2. some：
		arr.some(function(val,i,arr){
		return  判断条件
	})

遍历

 1. forEach:
 	arr.forEach(function(val,i,arr){
 		操作;
 	})//修改原数组
 2. map:
 	 arr.map(function(val,i,arr){
	 	return 操作;
	 })//不修改原数组

过滤、汇总(不修改原数组)

 1. fliter:
	var newArr=arr.filter(function(val,i,arr){
		
	})	
 2. reduce:
 	var sum=arr.reduce(function(prec,val,i,arr){
		return prev+val;
	},基础值)//基础值相当于prev的初始值

借用

临时替换函数中的this，借用
call:
	借用的函数.call(借用的对象,实参1,...)
apply:
	借用的函数.apply(借用的对象,实参数组)
bind:永久替换函数中的this，无法被call、apply再次借走
	var 新函数=老函数.bind(指定对象)

例子

判断数组中的最大、最小值
	Math.max/min.apply(Math,arr);
转为原始的toString
	Object.prototype.toString.call/apply(x)
类数组转为普通数组
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
var lis=document.getElementsByTagName("li");
var lis=Array.prototype.slice.call(lis);===var lis=Array.form(lis);
console.log(lis);//变成了数组可以使用数组的API

ES6新语法

模板字符串

例如:
var str="hello";
console.log(`${str.split().reverse().join()}`);

let关键字
let 变量名=值；
1. 解决了声明提前
2. 添加了块级作用域，一个{}就是一个块
3. 当设置了绑定事件时，用let遍历的变量，let会记住该元素的下标，不用再自定义下标
箭头函数
1. 在(){}间加=>
2. 只有一个形参时，省略()
3. 函数体只有一句话时，省略{}和return
4. 函数体只有一句话并且是return时，省略{}和return
for…of
for(var v of arr){
v;
};//得到当前数组

DOM

Document Object Model(文档对象模型)

DOM元素的三大属性
1. elem.nodeType：描述节点类型
2. elem.nodeValue：描述节点值
3. elem.nodeName：描述节点名
元素内容
1. elem.innerText：支持老IE，获取纯文本，不能识别标签
2. elem.textContent：有兼容问题
3. elem.innerHTML：没有兼容问题，可以识别标签
4. input.value：获取或设置表单控件的值
删除属性
1. elem.removeAttribute(“属性值”)：可以完全删除属性
2. elem.属性名=“”(不推荐，只能删除内容，不能删除名字)
获取属性
elem.setAttribute(“属性名”,“属性值”);
获取属性
elem.getAttribute(“属性名”,“属性值”);

元素上树

创建元素
1. 创建空标签
  var elem=document.createElement(“标签名”);
2. 添加属性和事件
  1. elem.属性名=“属性值”;
  2. elem.on事件名=function(){操作};
3. 上树
  1. replaceChild(新元素，旧元素);
  2. inserBefore(新元素，旧元素);
  3. appendChild(新元素);
删除
elem.remove();删除元素
elem.removeAttribute();删除属性
查找
document.getXX/querySelectorAll();