JavaScript 学习笔记之数组、函数、字符串

1.数组：数组元素的数据类型可以不同。

1.1 new数组

        // 空数组
        var arr=new Array();

1.2 利用数组字面量创建数组

        // 空数组
        var arr = [];
        // 非空数组
        var arr = [1, 12, 123];

1.3 冒泡排序

    <script>
        // 非空数组
        var arr = [2900, 1000, 200, 320, 620];
        var m = 0;
        for (var i = 0; i < arr.length - 1; i++) {
            for (var j = arr.length - 1; j > i; j--) {
                if (arr[i] > arr[j]) {
                    var tmp = arr[i];
                    arr[i] = arr[j];
                    arr[j] = tmp;
                }
            }
        }
        console.log(arr);
    </script>

2. 函数

2.1 实参和形参的个数可以不同。一样时，正常输出；实参比形参多时，按形参的个数取；实参比形参少时，多于的形参定义为undefined。

2.2 arguments 是内置对象，里面存储了所有传递过来的实参

    <script>
        function fc() {
            console.log(arguments);
        }
        fc(1, 2, 3);
    </script>

是一个伪数组，有length 属性，可按索引的方式遍历。在不确定实参个数时使用。

2.3 函数声明方式

2.3.1 函数关键字

function 函数名(){
    函数体；
}

2.3.2 函数表达式

var 变量名=function(){
    函数体；
}
//调用
变量名();

3. 预解析

3.1 js引擎运行js分为两步：预解析 和 代码执行

3.1.1 预解析：js引擎会把js里面所有的var和function提升到当前作用域的最前面。

3.1.2 代码执行：按照代码书写的步骤从上往下执行

3.2 预解析分为变量预解析（变量提升），函数预解析（函数提升）

3.2.1 变量提升 就是把所有的变量生命提升到当前的作用域最前面 不提升赋值操作

3.2.3 函数提升 技术吧所有的函数声明提升到当前作用域最前面 不调用函数 

4.对象

4.1 创建对象

4.1.1 利用对象字面量创建对象

    <script>
        // 1.利用对象字面量创建对象
        // 属性和方法采用键值对的形式  键-属性名：值-属性值
        var obj = {
                uname: '张三',
                age: 18,
                sex: '男',
                eat: function() {
                    console.log('糖醋排骨');
                }
            }
            // 2.使用对象
            // 2.1 调用属性
            // 方法1  对象名.属性名
        console.log(obj.age);
        // 方法2 对象名['属性名']
        console.log(obj['uname']);
        // 2.2 调用方法 对象名.方法名()
        obj.eat();
    </script>

 4.1.2 利用new Object创建对象

    <script>
        var obj = new Object();
        obj.uname = '张三';
        obj.age = 18;
        obj.eat = function() {
            console.log('糖醋排骨');
        }
    </script>

4.1.2 利用构造函数创建对象

    <script>
        // 构造函数就是把对象里面一些相同的属性和方法抽象出来封装到函数里面
        function Student(uname, age, id) {
            this.sname = uname;
            this.age = age;
            this.id = id;
            this.eat = function() {
                console.log(123);
            }
        }
        // 调用
        var stu1 = new Student('张三', 18, '20173333');
        stu1.eat('火锅');
        console.log(stu1.age);
        var stu2 = new Student('张2', 28, '20173555');
    </script>

4.2 遍历对象 for...in

语法：

for (变量 in 对象){}

    <script>
        var obj = {
            uname: '张三',
            age: 18,
            sex: '男',
            eat: function() {
                console.log('糖醋排骨');
            }
        }
        for (var k in obj) {
            console.log(k); //得到的是属性名，uname，age，sex，eat
            console.log(obj[k]); //得到属性值
        }
    </script>

4.3 查文档

4.3.1 MDN

https://developer.mozilla.org/zh-CN/

1. 查阅该方法的功能
2. 查看里面参数的意义和类型
3. 查看返回值的意义和类型
4. 通过demo进行测试

4.4 倒计时

    <script>
        function countDown(time) {
            var nowTime = +new Date(); //返回的是当前时间总的毫秒数
            var inputTime = +new Date(time); //返回的是用户输入事件总的毫秒数
            var times = (inputTime - nowTime) / 1000; //剩余时间的秒数
            var d = parseInt(times / 60 / 60 / 24); //day
            var h = parseInt(times / 60 / 60 % 24); //hour
            var m = parseInt(times / 60 % 60); //minutes
            var s = parseInt(times % 60); //second
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2020-7-19 18:30:00'));
    </script>

 5. 对数组的操作

5.1 push(参数1，参数2，...) 在数组末尾添加元素

    <script>
        // 1.push() 在数组末尾添加元素
        var arr = [1, 2, 3];
        console.log(arr.push('haha')); // 返回的是元素添加后数组的长度
        console.log(arr); // 原数组会发生变化
    </script>

5.2 unshift(参数1，参数2，...) 在数组开头添加元素

        // 2.unshift() 在数组开头添加数组
        arr.unshift('hehe');
        console.log(arr);

5.3 pop()

        // 3. pop() 删除数组的最后一个元素
        console.log(arr.pop()); //返回的是删除的那一个元素
        console.log(arr); // 原数组发生变化

5.4 shift()

        // 4. shift() 删除数组的第一个元素
        console.log(arr.shift()); //返回的是删除的那一个元素
        console.log(arr); // 原数组发生变化

5.5 数组排序： sort() 方法有缺陷，解决方法如下

    <script>
        // 数组排序
        var arr = [13, 4, 77, 1, 7];
        arr.sort(function(a, b) {
            return a - b;// 升序
            return b - a;// 降序
        });
    </script>

5.6 数组去重

    <script>
        function unique(arr) {
            var arr1 = [];
            for (var i = 0; i < arr.length; i++) {
                if (arr1.indexOf(arr[i]) == -1) {
                    arr1.push(arr[i]);
                }
            }
            return arr1;
        }
        var demo = unique(['a', 'd', 'e', 'g', 'a', 'f', 'g']);
        console.log(demo);
    </script>

5.7 根据字符返回位置

    <script>
        // 字符串“asdfsdfghjkasdfghjklffggffff”中d出现的位置和次数
        var str = "asdfsdfghjkasdfghjklffggffff";
        var index = str.indexOf('d');
        var count = 0;
        while (index != -1) {
            console.log(index);
            count++;
            index = str.indexOf('d', index + 1);
        }
        console.log('d出现的次数：' + count);
    </script>

5.8 根据位置返回字符 

    <script>
        // 字符串“asdfsdfghjkasdfghjklffggffff”中出现最多的字符，并统计其次数
        var str = "asdfsdfghjkasdfghjklffggffff";
        var obj = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);
            if (obj[chars]) {
                obj[chars]++;
            } else {
                obj[chars] = 1;
            }
        }
        console.log(obj);
        var max = 0;
        var s;
        for (var k in obj) {
            if (obj[k] > max) {
                max = obj[k];
                s = k;
            }
        }
        console.log(s);
        console.log(max);
    </script>

6. 数据类型

6.1 简单数据类型（值类型）

string，number，boolean，undefined，null

放进栈里，存放的是值。

6.2 复杂数据类型（引用类型）

通过new关键字创建的对象，如Object，Array，Date 等

放进堆里。

首先在栈里存放十六进制的地址，这个地址指向堆里的数据。

    <script>
        /* 
            函数的形参也可以看做是一个变量，当我们吧引用类型变量传给形参时，其实是
            把变量在栈里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地
            址，所以操作的是同一个对象。
            
        */
        function Person(pname) {
            this.pname = pname;
        }

        function fc(x) {
            console.log(x.pname); //2 张三
            x.pname = '李四';
            console.log(x.pname); //3 李四
        }
        var p = new Person('张三');
        console.log(p.pname); //1 张三
        fc(p);
        console.log(p.pname); //4 李四
    </script>