Day04-JavaScript

一.数组去重

    <script>

       // 数组去重
          var arr = [10, 2, 3, 5, 6, 4, 2, 4, 11, 21, 11, 8, 5];
          var newarr = [];
          for (var i = 0; i < arr.length; i++) {
               if (!newarr.includes(arr[i])) {
                  newarr.push(arr[i]);
              }
          }

         console.log(newarr);


      // 判断两个数组是否相同
         var arr1 = [1, 2, 3, 4, 5];
         var arr2 = [5, 4, 3, 2, 1];
         var cont = 0;
         if (arr1.length == arr2.length) {
             for (var i = 0; i < arr1.length; i++) {
                 if (arr1[i] === arr2[i]) {
                     cont++;
                 }
             }

         } else {
            console.log("不一致");
         }

         if (cont == arr1.length) {
             console.log("一致");
         } else {
             console.log("不一致");
         }

    </script>

二.创建函数

    <script>

        // function 函数名(){
        //     函数的代码
        // }

        //1.通过字面量创建函数
        //  函数传递参数
        //    形式参数    形参
            function fun(a, b) {
               var sum = a + b;
               console.log(sum);
            }

        // 调用函数
        // 实际参数 实参
        fun(1, 2);

        // 2.匿名函数
           var fun1 = function () {
               console.log("匿名函数");
           }
           fun1();

        // 3.使用构造函数创建函数
           var fun3 = new Function("a", "b", "console.log(a+b)");
           fun3(1, 2);

        // 4.自执行函数
           (function (a, b) {
               console.log(a + b);
           })(1, 2);

    </script>

三.函数的返回值

    <script>

        function fun() {
            console.log("函数");
            // 返回值
            return 0;
            // return之后的代码将不再执行
            console.log("return之后的代码");
        }

        console.log(fun());

        // 数组排序
        function sortArr(arr) {
            // 冒泡排序
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = 0; j < arr.length - 1 - i; j++) {
                    if (arr[j] > arr[j + 1]) {
                        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
                    }
                }
                return arr;
            }
        }
        var arr1 = [1, 5, 2, 3, 6, 8, 9, 4, 7];
        sortArr(arr1);
        console.log(arr1);
        console.log(sortArr(arr1));

    </script>

四.arguments对象

    <script>

        function fun(a, b, c, d, e) {
            console.log(a);
            console.log(b);
            console.log(c);
            console.log(d);
            console.log(e);
            // 传递的参数组成的伪数组
            console.log(arguments);
        }

        fun(1, 2, 3, 4, 5);

        // 参数不固定情况下对参数的处理
        function fun2() {
            var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }

        console.log(fun2(1, 2, 3, 4, 5, 6, 7, 8, 9));

        // 函数也是一种数据类型 function
        console.log(typeof fun2);
        // number string boolean undefined object function 

        // 函数作为参数
        function fun3() {
            console.log("函数作为参数");
        }

        function fun4(a) {
            a();
        }

        fun4(fun3);

    </script>

五.作用域

    <script>

        // 全局作用域
        // 全局变量

        var num1 = 10;
        console.log(num1);

        function fun() {
            // 局部作用域
            // 局部变量
            var num2 = 20;
            console.log(num1);
            console.log(num2);
            function fun1() {
                // var num2 = 30;
                console.log(num1);
            }
            fun1();
        }

        fun();

        // console.log(num2);

        // 作用域链:在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做**作用域链**

        function f1() {
            var num = 123;
            function f2() {
                console.log(num);
            }
            f2();
        }
        var num = 456;
        f1();

    </script>

六.预解析

    <script>

        // 变量的声明提升
        console.log(num);   // undefined
        var num;

        // 函数
        // 函数的预解析
        // 通过字面量方式创建的函数,在该作用域任何位置都能调用
        fun1();
        // 1.字面量方式创建的函数
        function fun1() {
            console.log("函数");
        }

        // 2.匿名函数
        console.log(fun2);
        fun2();
        var fun2 = function () {
            console.log("匿名函数");
        }

    </script>

七.创建对象

    <script>

        // 创建对象

        // 1.字面量法
        var person = {
            // 键：值
            name: "cxk",
            age: 18,
            gender: true,
            // 方法
            hobby: function () {
                console.log("sing,dance,basketball");
            }
        };

        console.log(person);

        // 访问对象中的属性
        console.log(person.name);
        console.log(person["name"]);
        // 访问对象中的方法
        person.hobby();
        // window.alert();

        
        // 2.new Object() 创建对象
        var person2 = new Object();
        person2.name = "张三";
        person2.age = 20;
        console.log(person2);



        // 3.构造函数创建对象
        // 普通函数
        function fun() {
            console.log("普通函数");
        }

        fun();

        // 构造函数
        function Person(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sayHi = function () {
                console.log("hello");
            }
        }
        var person3 = new Person("小好", 19, "男");
        var person4 = new Person("小谷", 20, "女");
        console.log(person3);
        console.log(person4);

    </script>

八.this指向

    <script>

        // this 这
        // 构造函数

        function Person(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sayHi = function () {
                console.log("hello");
                console.log(this);
            }
        }

        // 实例化的对象
        var person = new Person("小好", 18, "男");
        person.sayHi();

        // 实例化的对象
        var person2 = new Person("小谷", 20, "女");
        person2.sayHi();

        // 普通函数
        function fun() {
            console.log(this);
        }
        fun();


        // 对象方法中的this

        var obj = {
            name: 'lisi',
            hobby: function () {
                console.log(this);
            }
        }

        obj.hobby();

        // 1.构造函数 this 指向实例化对象
        // 2.普通函数 this 指向 window 
        // 3.对象方法中的 this 指向该方法所属对象

    </script>

九.new关键字

    <script>

        // new 关键字
        // 构造函数

        function Person(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sayHi = function () {
                console.log("hello");
                console.log(this);
            }
        }

        // 实例化一个对象
        var person = new Person("zhangsan", 18, "男");

        // new操作符的作用
        // 1.创建一个空对象
        // 2.this 指向实例化对象
        // 3.通过 this 给对象添加属性和方法
        // 4.隐式返回 this

    </script>

十.遍历对象

    <script>

        var person = {
            // 键：值
            name: "cxk",
            age: 18,
            gender: true,

            // 方法
            hobby: function () {
                console.log("sing,dance,rap,basketball");
            }
        };

        console.log(person);

        // 遍历对象
        // for...in 
        for (var key in person) {
            console.log(key);
            console.log(person[key]);
        }

    </script>

十一.数组对象

    <script>

        var arr = [1, 13, 2, 45, 5, 17, 29, 56, 8];

        // sort() 数组排序
        // 参数：没有参数
        // 返回值：排序后的数组
        // 是否改变：改变

        arr.sort(function (a, b) {
            return b - a;
        })
        console.log(arr);

    </script>

十二.String对象

    <script>

        var str = " hello world ";
        var str2 = new String("ABC");
        console.log(str2);
        console.log(str2.length);
        console.log(str2[0]);

        // 字符串所有操作方法，都不会修改字符串本身

        // 1.charAt()
        console.log(str.charAt(1));

        // 2.charCodeAt()
        // A-Z 65-90 a-z 97-122
        console.log(str.charCodeAt(0));

        // 3.fromCharCode()
        console.log(String.fromCharCode(97));

        // 4.split()
        console.log(str.split(" "));

        var str3 = 'utm_source=360pcpz&utm_medium=cpt&utm_provider=partner';
        console.log(str3.split("&"));

        // search()
        console.log(str.search("llo"));

        // replace()
        console.log(str.replace("llo", "LLO"));

        console.log(str.trim());

    </script>