首页 > > 网页制作 > Javascript >

JS 01 变量_数据类型_分支循环_数组

2019-04-30 23:40:38来源：博客园阅读 ()

点击直通车↓↓↓

数据类型及数据类型的手动转换
数组

一、概念

JavaScript（JS）是一种基于对象和事件驱动、且可以与HTML标记语言混合使用的脚本语言，其编写的程序可以直接在浏览器中解释执

二、与java的关系

从本质上来讲，Java和JS是两门语言，并没有本质上的联系。

三、如何写js代码

在html代码中写，三种方式
1.先写好一个*.js文件，通过script标签引入这个js文件 <script src="demo1.js"></script>

2.在script标签中直接书写js代码

 <script type="text/javascript">
        function hello(){
            alert("hello world!");
        }
    </script>

3.直接在html代码中写

　　不推荐这样写

四、变量

全局变量
1.在方法外部定义的变量
2.在方法内部，不添加var关键字（仅限于非严格模式）
局部变量
在方法内部使用var关键字定义的变量

 <script type="text/javascript">
        "use strict"

        var a = 10;
        var date = new Date();

        //js的语言是抄袭java，注释和java一样
        //js使用console.log(变量)
        console.log(date)

        function func(){
            abc = 110;
            console.log(abc)
            console.log(a)
        }
        func();

　　　　　//报错
        console.log(abc)

    </script>

一、创建数组

1.创建一个空数组
var arr = new Array();
2.创建一个具有长度的空数组
var arr2 = new Array(size)
3.创建一个具有元素的数组
var arr3 = new Array(ele1,ele2, ... ,eleN)
4.创建一个空数组或具有元素的数组
var arr4 = [ele1,...,eleN]

二、数组属性

length 表示数组的长度，可以利用该属性清空数组（length = 0）

三、数组方法

push( ele )：向数组的尾部添加一个元素，返回数组的新长度
unshift( ele)：向数组的头部添加一个元素，返回数组的新长度
pop()：从数组的尾部取出一个元素，返回该元素本身
shift()：从数组的头部取出一个元素，返回该元素本身
join( ele ) : 使用指定的ele字符连接数组中的每个元素，并将其作为一个字符串返回
concat( arr1,arr2,...,arrN )：拼接给定的数组元素，返回一个新数组
reverse()：反转数组
sort()：对数组的元素进行排序（自然顺序）
splice(start,count,newEle)：从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。

参数：

start 开始索引
count 移除元素的数量
newEle 要加入的新元素，该参数可以省略
slice(start，end)：截取数组的一段，返回一个新数组

参数：

start 开始索引
end结束索引（不包含），该参数可以省略（截取到数组末尾）

四、遍历数组

for (var i = 0 ; i< 数组的长度;i++)
for (var arrIndex in 数组)

数据类型及数据类型手动转换

 1 <script type="text/javascript">
 2         /*
 3          6种常用的数据类型，查看变量的数据类型使用typeof
 4          1.undefined 声明一个变量并没有为其赋值
 5          2.null 声明一个变量，并为其赋值为null
 6          3.boolean 声明一个变量，为其赋值为ture或false
 7          4.string 声明一个变量，为其赋值为字符串（单引号和双引号都可以）
 8          5.number 数值型 1.整型 、 2.浮点型 、 3.正负无穷大 、 4.NaN = Not a Number
 9          6.object 对象型
10          */
11 
12         function testDataType() {
13             var a;
14             console.log(typeof a, a);
15 
16             var b = null;
17             console.log(typeof b, b);
18 
19             var c = true;
20             console.log(typeof c, c);
21 
22             var d = '123';
23             console.log(typeof d, d);
24 
25             var e1 = 123;  //整型
26             console.log(typeof e1, e1);
27             var e2 = 123.45;  //浮点型
28             console.log(typeof e2, e2);
29             var e3 = 1/0; //Infinity无穷大
30             console.log(typeof e3, e3);
31             var e4 = Number("haha");  //NaN = Not a Number
32             console.log(typeof e4,e4)
33 
34             var f = new Array();
35             console.log(typeof f,f);
36         }
37         //testDataType();
38 
39         function transferNumber(){
40             var b1 = false;
41             var n1 = Number(b1);
42             console.log(n1);
43 
44             var c = null;
45             var n2 = Number(c);
46             console.log(n2);
47 
48             var e;
49             var n3 = Number(e);
50             console.log(n3);
51 
52             var f = "fadsf123123adfds";
53             var n4 = Number(f);
54             console.log(n4);
55 
56 
57             var nullstr = "";
58             var n5 = Number(nullstr);
59             console.log(n5);
60 
61         }
62 
63         transferNumber();
64 
65         function transferString(){
66             var a = null;
67             var b;
68             console.log(String(a));
69             console.log(String(b));
70 
71             var c = true;
72             console.log(String(c));
73         }
74 //        transferString();
75 
76         function transferBoolean(){
77             var a = "";
78             var b;
79             var c = null;
80             var d = 0;
81             var e = Number("haha");
82 
83             console.log(Boolean(a));
84             console.log(Boolean(b));
85             console.log(Boolean(c));
86             console.log(Boolean(d));
87             console.log(Boolean(e));
88 
89             console.log(Boolean("kjhasdkjfhs"));
90             console.log(Boolean(123));
91 
92         }
93 
94 //        transferBoolean();
95 
96     </script>

数据类型的自动转换

  <script>
        function test() {
            //布尔型、字符串、数字的转化
            var a = true;
            var b = "888" + a;
            var c = 99 + a;
            console.log(b);  // 888true
            console.log(c);  // 100

            //数字和字符串转化
            var d = 33;
            var e = "44";
            var f = d + e;
            var g = 3 * "4";
            console.log(f)  // 3344
            console.log(g)  // 12

            //null、布尔型、字符串、数字的转化
            var h = null;
            var h2 = h + 3;
            console.log(h2)  // 3
            var h3 = "aa" + h;
            console.log(h3)  // aanull
            if (!h) {
                console.log("h自动转化为boolean值：false！")
            }
        }
//                test();

        function test2() {
            var a;
            var b = null;
            console.log(typeof a + "----" + typeof b);

            if (a == b) {
                console.log("null和undefined可以互相转换！");
            }
        }
//                test2();

        function test3() {
            //布尔型、数值型、字符串型 在进行相互==比较时，不为数字的那一方自动调用Number()方法
            var a = 1;
            var b = true;
            var c = "true";
            var d = "1";
            console.log(a==b);  //true
            console.log(a==c);  //false
            console.log(a==d);  //true
            console.log(b==c);  //false
            console.log(b==d);  //true
        }
//        test3();

        function test04() {
            //null和undefined互相是相等，且自身也相等，除此之外和谁都不等
            console.log("zzz" == undefined); //false
            console.log("zzz" == null);  //false
            console.log(1 == undefined); //false
            console.log(1 == null);  //false
            console.log(0 == undefined);  //false
            console.log(0 == null);  //false
            console.log(false == undefined); //false
            console.log(false == null); //false
            console.log(null == undefined);   //true
            console.log(undefined == undefined); //true
            console.log(null == null);   //true
        }

//        test04();

        function test05() {
            //NaN比较特殊，他和自己都不相等
            var a = Number("haha");
            var b = Number("haha");

            console.log(a == b);
            console.log(NaN == NaN);

        }
//        test05();

        // ()圆括号
        // []方括号
        // {}花括号
        // <>尖括号

        function test06() {
            // var a = new Array();
            var a = [];  //定义一个空数组
            console.log(a.toString());  // 什么都没有
        }
//        test06();

        function test07() {
            // var a = new Object();
            var a = {};  //定义一个对象
            console.log(a.toString());  // [object Object]
        }
//        test07();

        function test08(){
            var a = {};
            console.log(!a);  //对象加! 得到一个布尔型的 false
        }
//        test08();


    </script>

数据类型的自动转换2

 <script type="application/javascript">
        function test() {
            console.log('' == '0') //类型相同，比较值，值不同，所以false
            console.log(0 == '') //类型不同，String转Number，空字符串转为0，变成0==0，所以true
            console.log(0 == '0') //类型不同，String转Number，'0'转成0，变成0==0，所以true
            console.log(false == 'false')  //类型不同，Boolean转Number，即0=='false'，然后'false'转Number，为0==NaN,所以false
            console.log(false == '0') //类型不同，Boolean转Number，即0=='0'，就变成第3个例子，所以true
            console.log(false == undefined) //对于undefined和null，只有它们本身两个比较才是true，其他都是false，所以false
            console.log(false == null) //对于undefined和null，只有它们本身两个比较才是true，其他都是false，所以false
            console.log(null == undefined) //对于undefined和null，只有它们本身两个比较才是true，其他都是false，所以true
            console.log(true == 2) //类型不同，Boolen转Number，即1==2，所以false
            console.log(NaN == NaN) //NaN非常特殊，和自身也不相等，所以false
            console.log(' \t\r\n ' == 0) //类型不同，String转Number，空String都将转成0，即0==0,所以true
            console.log(0 == []) //对象类型[]调用toString()转为""，即0==""，即0==0，所以true
            console.log(0 == ['']) //对象类型['']调用toString()转为""，即0==""，即0==0，所以true
            console.log('0' == []) //对象类型[]调用toString()转为""，即'0'==""，类型相同，值不同，所以false
            console.log('0' == [0])  //对象类型[0]调用toString()转为"0"，即'0'=="0"，类型相同，值也相同，所以true
            console.log(true == [1]) //对象类型[1]调用toString()转为"1"，即1=="1"，转1==1，所以true
            console.log([] == []) //对象类型，比较引用地址，两个[]是不同的引用地址，所以false
            console.log(![] == []) //加!强制转Boolean，任何对象都是true，取反即false==[]，转为0==""，即0==0，所以true
            console.log(!{} == {}) //即false=={}，转为false=="[object Object]"，即0==NaN，所以false
        }
        /**
         * 1.==符号在判断左右两边数据是否相等时，如果数据类型一致，直接比较值即可
         * 2.==符号左右数据类型不一致时，如果两方数据为布尔型、数值型、字符串型时，不为数字的那一方自动调用Number()方法
         * 3.undefined和null这两者互相相等，及自身也相等，除此之外和谁都不想等
         * 4.NaN比较特殊，他和自己都不相等
         * 5.当数值型、字符串型、布尔型和对象进行比较时，对象调用toString()方法得到一个字符串
         * 6.对象和对象进行比较时，直接比较内存地址
         * 7.任何对象加!强制转false
         */

        test();
    </script>

运算符

    <script type="text/javascript">
        // "=" 赋值运算符
        // "==" 等值符，如果数据类型不一致，会先进行数据类型自动转换
        // "===" 等同符，不会发生数据类型的自动转换

        console.log(5 + 4);
        console.log(5 - 4);
        console.log(5 * 4);
        console.log(5 / 4);
        console.log(5 % 4);
        var a = 10
        console.log(a++);  //10
        console.log(++a);  //12
        console.log(a--);  //12
        console.log(--a);  //10
        a += 1;
        console.log(a); // 11
        a -= 1;
        console.log(a); //10

        var f1 = true;

        var f2 = false;

        var str1 = "aaa";
        str1 += "bbb";
        console.log(str1);

        console.log(5 > 4 ? "是的" : "否")


    </script>

分枝循环

  <script type="text/javascript">
        var age = 20;
        /* if(age >= 18)
         alert("做苦力！");
         else
         alert("未成年人，请保护。");

         alert("hi")*/
        var day = "11";
        switch (day) {
            case "monday":
                console.log("星期一");
                break;
            case "tuesday":
                console.log("星期二")
                break;
            case "wednesday":
                console.log("星期三")
                break;
            default:
                console.log("不上班")
        }

        /*循环语句*/
        var num = 10;
        while (num > 0) {
            console.log(num);
            num--;
        }

        var num2 = 10;
        do {
            console.log(num2)
            num2--
        } while (num2 > 0);


        for (var i = 0; i <= 10; i++) {
            console.log(i);
        }

        var arr = [123, 321, 11, 22, 33, "44", "55", "66", true, new Date()];  //数组
        /* for (var i = 0; i < arr.length; i++) {
         console.log(arr[i]);
         }*/
        for (var ele in arr) {
            // ele是下标
            console.log(arr[ele]);
        }

        //continue表示跳出当次循环，继续下次循环
        for (var i = 1; i <= 10; i++){
            if(i == 5){
                continue
            }
            console.log(i);
        }

        //break表示跳出整个循环
        for (var i = 1; i <= 10; i++){
            if(i == 5){
                break
            }
            console.log(i);
        }

    </script>

数组

  <script type="text/javascript">
        //一、创建数组
        //1.创建空数组
        var arr = new Array();
        console.log(arr.length);
        //2.创建具有长度的数组
        var arr2 = new Array(10);
        console.log(arr2)
        //3.创建一个带元素的数组
        var arr3 = new Array(123, true, "hello", new Date());
        //4.创建一个带元素的数组2
        var arr4 = [123];
        console.log(arr4.length)

        //二、属性
        // length属性：表示数组的长度
        console.log(arr3);
        arr3.length = 0; //清空数组
        console.log(arr3);
        arr3.length = 4;
        console.log(arr3);

        //三、方法
        var arrdemo = new Array(123, true, "hello", new Date(), 444333);
        //join():指定一个字符，用该字符连接数组的每一个元素，并作为一个字符串返回
        var result = arrdemo.join("-");
        console.log(result);

        //push():向数组的末尾添加一个元素，返回数组的新长度
        result = arrdemo.push("world");
        console.log(result)
        console.log(arrdemo);

        //pop():从数组末尾取出一个元素，并返回该元素本身
        result = arrdemo.pop();
        console.log(result);
        console.log(arrdemo);

        //shift()：从数组头部取出一个元素，并返回该元素本身
        result = arrdemo.shift();
        console.log(result);
        console.log(arrdemo);

        //unshift()：向数组的头部添加一个元素，返回数组的新长度
        result = arrdemo.unshift("bbb");
        console.log(result);
        console.log(arrdemo);

        //concat()：拼接数组，并作为一个新的数组返回
        var a1 = [123, 234];
        var a2 = ["aaa", "bbb"];
        var a3 = [new Date()];
        var newarr = a1.concat(a2, a3);
        console.log(newarr);

        //reverse():反转数组
        newarr.reverse();
        console.log(newarr);

        //sort():自然顺序
        //        var sortarr = [4534,22,66,88,123];
        var sortarr = [4534, 22, 66, 88, 123, "A", "a", "ab", "ba", "abc", "bac"];
        sortarr.sort()
        console.log(sortarr);

        //splice()：删除指定位置，指定长度的元素，并在该位置添加新的元素
        var s1 = ["aa", 'kjsdhf', '123', 123, 123, 444, 555, 666];
        s1.splice(0,0,"laowang");
        console.log(s1);

        //slice()；截取子数组
        var s2 = s1.slice(3,5);
        console.log(s2);




    </script>