新增數組方法：
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>