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>