class类
- 本质上是构造函数的另一种写法
- 类的原型：prototype
- class类是通过constructor创建一个构造函数
- 创建实例的方式依然是用new关键字
- 这里面要想给原型添加方法，只要跟在constructor后面直接加就可以了，它也可以通过原型链添加方法
class Dog {
constructor(name,sex){
this.name=name;
this.sex = sex;
};
height(e){
console.log(this.name+'身长'+e);
}
}
var pzj = new Dog("彭忠杰","公");
console.log(pzj);
pzj.height("18cm")
- 它还具有继承属性，需要使用extends
// 继承 extends
class Fu { // 创建父级构造函数
constructor(money){
this.money = money ;
}
yc(){ // 添加方法
console.log("遗产"+this.money);
}
}
var father = new Fu("$1000"); // 创建实例
father.yc();
class Er extends Fu {
constructor(moneys,i){
super(i); // 继承
this.moneys = moneys;
};
jc(){
super.yc(); // 继承父亲的方法
}
}
var son = new Er("100","$10000"); // 创建实例
console.log(son);
son.jc();
class sun extends Er{
constructor(muchMoney,a,b){
super(a,b) // 继承父级，其中一个指向Fu 一个指向Er
this.muchMoney = muchMoney;
};
last(){
super.yc(); // 继承yc这个方法
}
}
var sunZi = new sun("100","$1000","$2000");
console.log(sunZi);
sunZi.yc();
数组Array相关
数组的扩展方式
扩展运算符[…arr]
- 它可以将伪数组转换为真数组
- 可以用于拼接数组
// 伪数组转换为真数组 扩展运算符[...]
var arr = document.querySelectorAll("ul li");
console.log(arr);
console.log([...arr]);
// 连接数组
var arr1 = [1, 5, 3, 4, 6, 7];
var arr2 = [5, 6, 7, 8, 4, 2];
console.log([...arr1, ...arr2]);
对象转数组 Array.from()
Array.from(需要转换的对象，function（item）{return item})
注意：转换的对象要有length
// 对象转数组 Array.from()
var obj = {
0: 4,
1: 6,
2: 5,
3: 7,
length: 4 // 必须要有
};
var arr3 = Array.from(obj, function (item) {
return item * 1;
})
console.log(arr3);
find() 返回第一个符合条件的内容
// find返回找到的第一个符合条件的内容 find(function(item,index){})
var arr4 = [
{
name: "aa",
age: 15
},
{
name: "bb",
age: 17
},
{
name: "cc",
age: 18
},
{
name: "dd",
age: 15
},
];
var a = arr4.find(function (r, i) {
// return r.name === "aa"
return r.age === 15; // 只返回第一个符合条件的内容
})
console.log(a);
findIndex 返回第一个符合条件的索引，没有则返回-1
// findIndex返回第一个符合条件的索引，如果没有返回-1
var b = arr4.findIndex(function(r,i){
// return r.name === "aa";
// return r.age===14;
return r.age===18;
})
console.log(b);
includes(内容) 查询数组中是否包含这个值，返回true/false
// includes(内容) 查询数组中是否包含这个值
var arr5 = [5,3,4,6,1,2];
console.log(arr5.includes(6)); // true
console.log(arr5.includes(9)); // false
数组的遍历
- for循环
- for…in
- for…of
var arr6 = [6,4,5,3,8,1,9,7];
// 数组遍历 for...of for...in for
for(var i of arr6){
console.log(i);
}
for(var k in arr6){
console.log(k,arr6[k]);
}
for(var j = 0 ; j < arr6.length ; j ++){
console.log(arr6[j]);
}
数组的迭代方法
数组迭代方法中，每个方法中都要使用function，其中有三个参数（function(item,index,arr)）
- item：代表每个值
- index：代表索引号
- arr：代表原数组
forEach() 就相当于for循环，没有返回值
// foreach 相当于for循环 打印出来总是undefined
var kong = [];
arr6.forEach(function(r,i,a){
console.log(r*2);
kong.push(r*2)
})
console.log(kong);
map() 数组的每个元素执行一次指定的函数，并返回处理后的数组
// map 返回一个新数组 需要创建一个变量去接收
var c = arr6.map(function(r,i,a){
return r*3
})
console.log(c);
some() 查找数组中是否有符合条件的值，并返回true/false
// some查找 返回true或者false
var f = arr7.some(function(r,i,a){
// return r>3; // true
return r>8; // false
})
console.log(f);
filter() 过滤筛选数组中符合条件的值，并返回新的数组
var d = arr7.filter(function(r,i,a){
return r>3;
})
console.log(d);
- 区别
forEach、filter、map中的return不会终止循环
some中的return会终止循环
Set、Map
Set 是构造函数，生成set数据类型，能够自动去重
- set数据类型也可以通过扩展运算符转换为数组类型
- set数据类型获取长度，通过size
set数据添加元素：add（添加的内容），可以连写
set数据删除元素：delete（要删除的内容）、clear（）清除所有内容
set数据查找内容：find（查找的内容），返回true/false，只能查找单层的数据，查不到数组中的数组
var arr = [1, 5, 3, 4, 6, 1, 3, 2, 4, 5, 6];
// 会自动去重
var set = new Set(arr);
console.log(set);
// [...]扩展运算符 可以转换为数组形式
console.log([...set]);
// 增删查 add delete/clear has
// add 可以连用
set.add(20).add([30]);
console.log(set);
// delete 删除一个 / clear删除全部
set.delete(20);
console.log(set);
// set.clear();
// console.log(set);
// 查 has 返回true或者false
console.log(set.has(2)); // true
console.log(set.has(30)); // false 只可以查单层，如果是数组里包含数组，检查不到
Map 是构造函数，针对对象格式
- map增加元素以及修改元素都是通过set进行，set（添加的键，添加的值）/ set（修改的键，修改的值）。可以连写
- map删除元素通过delete：delete（要删除的键）
- map查找元素通过get：get（查找的键）
// Map 针对对象格式
var arr1 = [["key1","val1"],["key2","val2"],["key3","val3"]];
// 增删改查
var map = new Map(arr1);
console.log(map);
// 增 set 可以连用 改 set
map.set("name","zs").set("name2","ls").set("key1","value1");
console.log(map);
// 删 delete(key)
map.delete("name2");
console.log(map);
// 查 get(key) 返回值
console.log(map.get("name"));
map与set的区别：
- set数组中只操作一个值
- map数组中要操作键和值
查找交集、并集、差集
var arr1 = [2,5,6,3];
var arr2 = [5,3,4,6,1,2,3,7,8,9]
// 并集 将两个数组合并
// var bj = [...arr1,...arr2]; // 没有去重
// 要用到set构造函数
var bj = [...new Set([...arr1,...arr2])] // Set 能够自动去重
console.log(bj);
// 交集 就是两个之间相同的值，可使用filter进行过滤筛选,判断arr2中是否含有arr1里的每一个值
var jj = arr1.filter(function(r,i,a){
return new Set(arr2).has(r);
})
console.log(jj);
// 差集 arr1和arr2中不同的值:并集的值去掉交集的值
var cj = bj.filter(function(r,i,a){
return !new Set(jj).has(r)
})
console.log(cj);
总结
数组的迭代方法是非常便捷的，但是要在熟悉的基础上才能去掌握，白天专门地去练习迭代方法时，并没有什么问题，但是在晚上做作业时，却发现自己除了forEach以外都不会使用。最后还是在同学的帮助下才有了进一步的理解。所以接下来自己就要多加练习，遇到数组就要往这些方法上靠。
现在再来回忆一下数组迭代方法的使用：
- forEach其实就是一个for循环，这个是最容易理解的。
- filter是对数组进行筛选，通过return将符合条件的数据返回出来，想要使用的话，需要一个变量去接收返回出来的数组
- map就是通过制定的函数去处理数据，并能return出来，同样要想使用返回出来的数据，也需要一个变量去接收返回出来的数组
- some是查找元素，它并不会返回出具体的数据，只会返回true或者false
扫一扫
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
