JavaScript 变量,数据类型

这篇笔记呢，咱记录下变量和数据类型的基础知识，因为两者有联系 所以放在一起记录

---

1 如何声明变量

变量声明使用var关键字，下面举一些变量声明的例子：

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
</head>
<body>
</body>
{{--js--}}
<script>
    var name = "larger";
    var age = 24, desire = "become web developers";
    document.write(name + "<br />" + "age" + ":" + age + "<br />" + "desire" + ":" + desire);
</script>
</html>

---

2 数据类型

js中的数据类型有：

1. Nunber：数字类型。
2. String：字符串类型。
3. Boolean：布尔类型。
4. Array：数组。
5. Object：对象。
6. Null：空值。
7. Undefined：未定义值。

下面咱一个一个的声明这些类型的变量。

2.1 数字类型

2.1.1 声明方式

<script>
    var number1 = 5;
    var number2 = (5 - 9) * 3;
    var numberSum = number1 + number2;
    document.write(number1 + "<br />" + number2 + "<br />" + numberSum  + "<br />");
</script>

<script>
    var Num = 3.88;
    document.write(Num);
</script>

<script>
    var num = new Number(3000);     // 这样声明的话 它会是一个对象
    document.write(typeof(num));    // Object
</script>

2.1.2 常用方法

NaN是一个非数字类型，用 isNaN 判断是否是非数字类型：

<script>
    var num1 = new Number(3000);
    var num2 = 123;
    var noNum = NaN;
    document.write(isNaN(num1) + "<br />" + isNaN(num2) + "<br />" + isNaN(noNum))
</script>

当数字长度达到边界时 就会变成一个特殊的类型：无穷大（Infinity）/负无穷大（-Infinity）：

<script>
    var num1 = 2/0;
    if (num1 == Infinity){
        document.write("数字已溢出"+num1);
    }
</script>

用tostring方法来转换成字符串类型：

<script>
    var num1 = 122;
    var str1 = num1.toString();     // 没有传递参数默认是10进制。
    var str2 = num1.toString(8);    // 8进制
    document.write(num1 + "<br />" + str1 + "<br />" + str2 + "<br />" + typeof(str1));
</script>

2.2 字符串类型

2.2.1 声明方法

<script>
    var str1 = "something";     // 用双引号
    var str2 = 'something';     // 用单引号
    var str3 = "my name is 'K'";// 双引号中展示单引号
    var str4 = 'my name is "K"';// 单引号中展示双引号
    var str5 = 'my name is \'K\'';  // 转义单引号中的单引号
</script>

2.2.2 常用方法

通过索引获取字符：

<script>
    var str1 = "something";      // 用双引号
    var char = str1[11];         // char也是string类型，如果越界的话char的类型为undefined
    document.write(char);
</script>

通过length方法获取字符串长度：

<script>
    var str = "something";     // 用双引号
    var strlen = str.length;   // 返回的strlen是数字类型。
    document.write(strlen);
</script>

通过indexof来查找字符串：

<script>
    var str = "something";     // 用双引号
    var index1 = str.indexOf("thing");   // 返回4 从零计算
    var index2 = str.indexOf("same");    // 返回-1 代表没找到

    var str2 = "my name is k my age is 24";
    var index3 = str2.indexOf("is");    // 返回8
    var index4 = str2.lastIndexOf('is');// lastindexof是从后面开始找的 所以返回20
</script>

通过macth来匹配字符串：

<script>
    var str = "something";     // 用双引号
    var substr = str.match("sa");   // 如果能找到 返回查找的字符串 如果没有找到 返回null
    document.write(substr);
</script>

替换一段字符串：

<script>
    var str = "this is laravel";
    str = str.replace("laravel", "javascript");     // 如果没有替换成功 返回原来的字符串。
    document.write(str);
</script>

大小写的转换：

<script>
    var str = "this is laravel";
    str = str.toLocaleUpperCase();  // 转换为大写。
    str = str.toLocaleLowerCase();  // 转换为小写。
</script>

转为数组：

<script>
    var str = "this is laravel";
    var array = str.split(" ");     // 通过空格分隔。
</script>

2.3 数组

2.3.1 声明方法

<script>
    var array1 = new Array();
    array1[0] = "string type";
    array1[1] = 55;
    array1[2] = true;

    var array2 = new Array("alex", "k", 24);

    var array3 = ["alex", "K", 24];
</script>

2.3.2 访问数组中的元素

<script>
    var array3 = ["alex", "K", 24];
    // 可以通过索引获取
    for (i = 0; i < array3.length; i++){
        document.write(array3[i] + "<br />");
    }

    // 也可以通过索引来修改值
    for (i = 0; i < array3.length; i++){
        array3[i] = "value" + i;
    }
    document.write(array3);
</script>

2.4 对象

对象中可以包含属性和方法，其实在js中 所有事物都是对象这其中包括上面的数字、字符串、数组。

2.4.1 创建方法

<script>
    var object1 = new Object();
    object1.name = "alex";
    object1.skinColor = "white";
    object1.sayHello = function() {
        return "yo bro what's up";
    };
    document.write(object1.name  + "<br >" + object1.skinColor + "<br >");
    document.write(object1.sayHello());
</script>

↑ 这是第一种声明方法 在其中 我们使用objectName.valueName访问了对象中的元素，还有objectName.methodName访问了对象中的方法。

<script>
    var object1 = {
        name : "alex",
        skinColor : "white",
        sayHello : function() {
            return "yo bro what's up";
        }
    };
    document.write(object1.name  + "<br >" + object1.skinColor + "<br >");
    document.write(object1.sayHello());
</script>

↑ 这是第二种写法，比较常用 比第一种方法简单。

<script>
    // 对象构造器
    function Person(firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;

        this.changeName = changeName;
        function changeName(name){
            this.firstName = name;
        }

        this.fullName = fullName;
        function fullName(){
            return this.firstName + this.lastName;
        }
    }
    // 使用对象构造器创建对象
    var myWife = new Person("*","haoyan",18);
    myWife.changeName("Yang");
    document.write(myWife.fullName());
</script>

↑ 这是第三种写法，对象构造器。

2.4.2 遍历对象

使用for in来遍历对象：

<script>
    // 对象构造器
    function Person(firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;

        this.changeName = changeName;
        function changeName(name){
            this.firstName = name;
        }

        this.fullName = fullName;
        function fullName(){
            return this.firstName + this.lastName;
        }
    }
    // 使用对象构造器创建对象
    var myWife = new Person("*","haoyan",18);
    for(variable in myWife){
        document.write(variable + "<br />");
    }
</script>