新增数组方法:
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>