Web前端JavaScript笔记（7）ECMA6新增数组方法
新增数组方法：
1. Array.from(): 将伪数组转化为真数组
<script>
window.onload = function () {
let tag_li = document.getElementsByTagName("li");
alert(tag_li.length);
// 此时得到的是一个伪数组，如果tag_li.push("hello")会报错
tag_li = Array.from(tag_li);
tag_li.push("hello"); // 此时转换后可以调用数组的方法
alert(tag_li);
}
</script>2. Array.find()：在数组中查找符合条件的第一个元素，返回值是找到的元素
<script>
window.onload = function () {
let arr = [1,2,3,4,5];
let res = arr.find(function (item, index, arr) {
return item>3;
});
alert(res);
}
</script>3. findIndex()：返回元素的下标
<script>
window.onload = function () {
let arr = [1,2,3,4,5];
let res = arr.findIndex(function (item, index, arr) {
return item>3;
});
alert(res);
}
</script>4. 合并对象
Object.assign()：用户合并对象，将第二个到最后一个合并到第一个对象中，
<script>
window.onload = function () {
let obj1 = {
a: 12
};
let obj2 = {
user: "hui",
text: "hello thr"
};
let obj3 = {
l: "ff"
};
Object.assign(obj1, obj2, obj3); // 将2，3合并到1
console.log(obj1);
}
</script>集合：
1. 不重复
2. 无序
集合set: 键值是一样的
<script>
window.onload = function () {
let set = new Set();
set.add("hui");
set.add(123);
// 集合的遍历
for (let item of set.keys())
{
console.log(item);
}
// 利用这一特性数组去重
let set1 = new Set([1,2,3,4,3,2,1]);
let arr = [...set1]; // 集合转化为数组
console.log(arr);
}
</script>集合map: 键值是不一样的， 映射
<script>
window.onload = function () {
let map = new Map();
map.set("username", "tommy");
map.set("age", "11");
console.log(map.get("age"));
// map遍历
for (let [key, value] of map)
{
console.log(key + "," + value);
}
}
</script>遍历：
1. 数组遍历；(前面已经学习过)
for 循环
for ... in
for ... each
2. 对象的遍历：
for ... in // 遍历的是属性
3. set遍历：for .. of
4. map遍历：for ... of
回顾面向对象：
1. 面向过程语言
2. 面向对象语言
工厂模式: 假设需要批量创建对象，可以按照下面的方法进行创建：
过程可以分为三部分: 原料，加工，出厂
<script>
window.onload = function () {
// 定义一个创建对象的函数
function createP(name, age, sex) {
let person = Object();
person.name = name;
person.age = age;
person.sex = sex;
person.showName = function () {
console.log("Hello I am " + this.name);
};
return person;
}
let p1 = createP("tom", 12, "female");
let p2 = createP("janny", 33, "male");
p1.showName();
p2.showName();
}
</script>而如果通过new运算符去调用这一函数，需要做以下的修改：
如果通过new调用函数，则这个函数会
1. 当前函数中的this指向新创建的对象
2. 自动完成 原料， 出厂操作
<script>
window.onload = function () {
// 定义一个创建对象的函数
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.showName = function () {
console.log("Hello I am " + this.name);
};
}
let p1 = new Person("tom", 12, "female");
let p2 = new Person("janny", 33, "male");
p1.showName();
p2.showName();
}
</script>函数原型ProtoType,为对象添加方法，使得所有创建的对象能够共享此方法:
<script>
window.onload = function () {
// 定义一个创建对象的函数
let a = [1,2,3,4];
let b = [5,6,7,8];
a.sum = function () {
let value = 0;
for (let i=0; i<this.length; i++)
{
value += this[i];
}
return value;
}; // a添加方法
console.log(a.sum());
console.log(b.sum());
}
</script>为了使所有的数组能够共享sum()函数：
<script>
window.onload = function () {
// 定义一个创建对象的函数
let a = [1,2,3,4];
let b = [5,6,7,8];
Array.prototype.sum = function () {
let value = 0;
for (let i=0; i<this.length; i++)
{
value += this[i];
}
return value;
}; // a添加方法
console.log(a.sum());
console.log(b.sum());
}
</script>面向对象-继承，封装，多态：
1. 继承
2. 封装（封装构造函数）
3. 多态
ECMA6中定义类class：
<script>
window.onload = function () {
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
Person.prototype.showSelf = function () {
console.log("I am " + this.name);
};
let p1 = new Person("zha", 22, "female");
p1.showSelf();
class Person_1
{
// 定义构造函数
constructor(name, age, sex)
{
this.name = name;
this.age = age;
this.sex = sex;
}
// 当以方法：
showSelf()
{
console.log("I am " + this.name);
}
}
let p2 = new Person("li", 33, "male");
p2.showSelf();
}
</script>class中的继承：
<script>
window.onload = function () {
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
Person.prototype.showSelf = function () {
console.log("I am " + this.name);
};
let p1 = new Person("zha", 22, "female");
p1.showSelf();
class Person_1
{
// 定义构造函数
constructor(name, age, sex)
{
this.name = name;
this.age = age;
this.sex = sex;
}
// 当以方法：
showSelf()
{
console.log("I am " + this.name);
}
}
let p2 = new Person("li", 33, "male");
p2.showSelf();
class Teacher extends Person_1
{
constructor(name, age, sex, school) // 构造函数
{
// 继承父类的属性
super(name, age, sex);
this.school = school;
}
showJob()
{
console.log("I am a teacher in " + this.school);
}
}
let p3 = new Teacher("zhang", 22, "female", "High school");
console.log(p3.showSelf()); // 继承的方法
console.log(p3.showJob());
}
</script>
