JavaScript基础

1. js嵌入页面的三种方式

（1）外部引入

<script type="text/javascript" src="js/index.js"></script>

（2）页面script标签嵌入

<script>
   //代码
</script>

（3）行内标签嵌入

<input type="button" onclick="alert('ok!');">

2. 变量类型

7种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型
4、undefined类型
5、null类型
6、symbol（ES6新增）
7、bigint（ES10新增）

1种复合类型：
object（包括function、array、object）

3. 数组及操作方法

（1）定义数组

var arr01 = new Array(1,2,3);
var arr02 = [1,2,3,'sad'];
var arr03 = [[1,2,3],['a','b','c']];

（2）操作数组中数据的方法

• 获取数组长度：arr01.length　　　 //3
• 利用下标获得数据：arr01[0]　　　//1
• 插入分隔符：arr01.join(’-’)　　　 //1-2-3
• 从数组最后增加、删除数据：arr01.push(4)　　　　//1,2,3,4
  　　　　　　　　　　　　　arr01.pop()　　　 　　//1,2
• 在数组中增加、删除数据：arr01.splice(1,1,5,6)　　　//从第一个元素开始，删除一个元素，增加5、6两个元素，结果是1,5,6,3
  　　　　　　　　　　　　arr01.splice(1);　　　//1
  　　　　　　　　　　　　arr01.splice(1,1);　　　//1,3
• 反转数组：arr01.reverse()　　　//3,2,1
• 返回数据第一次出现的索引：arr01.indexOf(1)　　　//0

example：数组去重

        var aList01 = [1,1,2,2,3,4,4];
        var aList02 = [];

        for(var i=0;i<aList01.length;i++)
        {
            if(aList01.indexOf(aList01[i]) == i)
            {
                aList02.push(aList01[i]);
            }
        }

        alert(aList02);  //1,2,3,4

3. 字符串处理方法

（1）字符串合并

        var num01 = 1;
        var num02 = 2;
        var num03 = '34';
        var str = 'a';

        alert(num01+num02);  //3
        alert(num01+num03);  //134
        alert(num03+str);    //34a

（2）将数字字符串转化为整数 parseInt()

        var num02 = 2.2;
        var num03 = '1.5';

        alert(parseInt(num02));  //2
        alert(parseInt(num03));  //1

（3）将数字字符串转化为小数 parseFloat()

        var num01 = 1;
        var num02 = '2.2';
        alert(parseFloat(num01));  //1
        alert(parseFloat(num02));  //2.2

（4）根据分隔符把字符串分片成数组split()

        var str = '2021-9-14';
        var arr01 = str.split('-');
        var arr02 = str.split('');
        alert(arr01);  //2021,9,14
        alert(arr02);  //2,0,2,1,-,9,-,1,4

（5）查找字符串中某字符第一次出现的索引indexOf()

        var str = "abcdd";
        alert(str.indexOf('d'));  //3

        var str = "abcdd";
        alert(str.indexOf('e'));//-1

（6）截取字符串 substring(start,end)

        var str = "abcde";
        alert(str.substring(2,4));  //cd
        alert(str.substring(1));  //bcde

example：字符串反转

        var str01 = "abc";
        var str02 = str01.split('').reverse().join('');
        alert(str02); 

5. 定时器

setTimeout　　　只执行一次的定时器
clearTimeout　　关闭只执行一次的定时器
setInterval　　　 反复执行的定时器
clearInterval　　 关闭反复执行的定时器

        var time01 = setTimeout(myfn,1000);
        var time02 = setInterval(myfn,2000);
        clearTimeout(time01);
        clearInterval(time02);

        function myfn(){
            alert('肩好痛');
        }

example：利用定时器做动画

    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            position: fixed;
            top: 100px;
            left: 0;
        }
    </style>

    <script>
        window.onload = function(){
            var oDiv = document.getElementById('box');
            var iLeft = 0;

            function myMove(){
                iLeft += 3;
                oDiv.style.left = iLeft + 'px';
            }

            setInterval(myMove,30);
        }
    </script>
    
    <div id="box"></div>

6. 变量作用范围

        var a = 1;  //定义全局变量
        function myalert(){
            var b = 2;  //定义局部变量
            alert(a);
            a++;  //修改全局变量
            alert(b);
        }
        myalert();  //弹出1 2
        alert(a);  //2
        alert(b);  //出错

7. 匿名函数

匿名函数可以减少函数命名，并且简化代码，写法如下：
window.onload = function(){}

8. 封闭函数

封闭函数是匿名函数的另一种写法，封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全。写法如下：

(function(){
    alert('hello!');
})();

!function(){
    alert('hello!');
}();

~function(){
    alert('hello!');
}();