数据类型¶

原始数据类型¶

数值型¶

十进制数¶

正数和浮点数
12
1.2
-23
.222e33
-1.3e3
3E-2 E后面是负2 结果0.03
12e+20 e后面是正20
.23e4 等于0.23乘以10的4次方结果2300

十六进制¶

0x0
0XABCDEF
0x1a2d4d

八进制¶

00
023614

特殊值¶

Infinity无穷大正无穷大和负无穷大。
1.79e309
-1.79e309
NaN
0/0
可以通过isNaN()检测值是否为NaN

字符串型¶

定界符 "|"
转意符
\n回车换行
\r换行
\t水平制表符
\"->"
\'->'

//声明
var name = "高掐";
var name = String("高桥");

//常见功能
var name = "中国移动"

var v1 = name.length;
var v2 = name[0];//name.charAt(3)
var v3 = name.trim();//去除空字符
var v4 = name.substring(0,2);//中国

布尔类型¶

true/false

复合数据类型¶

对象object
数组array
函数function

特殊数据类型¶

无定义数据类型undefined
空值null

null表示空值，表示什么都没有，相当于一个占位符。

null和undefined的区别就是undefined表示变量未被赋值，而null表示变量被赋予了一个空值。

数据类型转换¶

隐式转换¶

转换成布尔类型¶

undefined--- false
null---false
数值型0或0.0或NaN--- false
字符串长度为0---false
其他对象--- true

转换为数值型数据¶

undefined--- NaN
null---0
true---1/false---0
内容为数字---数字，否则转换成NaN

转换为字符串型数据¶

undefined---“undefined”
null---“null”
NaN---“NaN”
true---“true” false---“false”
数值型、 NaN、0或者数值对应的字符串
其它对象---如果存在这个对象则转换为toString()方法的值，否则转换为Undefined

显式转换¶

转换成布尔类型¶

通过Boolean函数强制转换成布尔值

0、-0 ---false
NaN--- false
空字符串--- false
undefined--- false
null--- false

转换成字符串¶

通过toString()函数转换成字符串型

数值---数值本身
字符串---字符串本身
true---“true” false---“false”
undefined---“undefined”
null---“null”

转换成数值¶

Number函数强制转换成数值¶

数值---转换成原来的值
字符串---如果可以解析为数值，则转换为数值；否则转换成NaN或者0
true---1 false---0
undefined--- NaN
null---0

转换成整型¶

parseInt(string,radix);返回转换成整数的值

注意

当参数radix的值为0，或者没有设置这个参数，parseInt()会根据string来判断数字的基数
当忽略radix，javaScript默认数字的基数规则为
如果string以0x开头，parseInt()会把string的其余部分解析为十六进制的整数
如果string以0开头，那么ECMAScript v3允许parseInt()的一个实现把其后的字符解析为八进制或十六进制的数
如果string以1～9的数字开头，parseInt()将把它解析为十进制的整数
字符串如果以合法字符开始，截取合法字符
开头和结尾的空格是允许的
如果字符串的第一个字符不能被转换为数字，parseInt()会返回NaN
在字符串以“0”为开始时旧的浏览器默认使用八进制基数，ECMAScript 5，默认的是十进制基数

转换成浮点型¶

parseFloat(string);返回转换成浮点型的值

该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，知道到达数字的末端未知，然后以数字返回该数字，而不是作为字符串。

注意：Number函数将字符串转换为数值比parseInt函数严格很多，基本上只要有一个字符无法转换成数值，整个字符串就会被转换成NaN

数组¶

//定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);
//操作
v1[1]
v1[0] = "高桥";
v1.push("解开");//尾部追加
v1.unshift("联通");//头部添加
v1.splice(索引, 0, 元素);
v1.splice(1, 0, "中国");
v1.pop();//尾部删除
v1.shift();//头部删除
v1.splice(索引, 1);
v1.splice(2, 1);//索引为2的元素删除
//循环
for(var idx in v1){
  data = v1[idx];
}
for(var i = 0; i < v1.length; i++){
    data = v1[i];
}

动态数据¶

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <ul id="city"></ul>
    <script type="text/javascript">
        var cityList = ["北京", "上海", "深圳"];
        for (var idx in cityList) {
            var text = cityList[idx];
            //创建li标签
            var tag = document.createElement("li");
            //在li标签中写入内容
            tag.innerText = text;
            //添加到id=city到标签里
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }
    </script>
</body>

</html>

对象（字典）¶

info = {
  name:"高迁",
  age:18
}
info.age
info.name = "张总";
info["name"] = "高职";
for(var key in info){
  data = info[key];
}

动态表格¶

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body"></tbody>
    </table>
    <script type="text/javascript">
        var dataList = [
            { id: 1, name: "果汁", age: 19 },
            { id: 2, name: "果汁", age: 19 },
            { id: 3, name: "果汁", age: 19 },
            { id: 4, name: "果汁", age: 19 },
            { id: 5, name: "果汁", age: 19 }
        ]

        for (var idx in dataList) {
            //创建tr标签
            var tr = document.createElement("tr");
            var info = dataList[idx];
            for (var key in info) {
                var text = info[key];
                //创建td标签
                var td = document.createElement("td");
                //在td标签中写入内容
                td.innerText = text;
                //td添加到tr标签里
                tr.appendChild(td);
            }
            //获取标签
            var bodyTag = document.getElementById("body");
            bodyTag.appendChild(tr);
        }

    </script>
</body>

</html>

函数¶

function func(){
  //函数体
}

//执行
func();

DOM¶

控制HTML中的元素，比如让盒子移动、变色、轮播图

javascript和DOM结合起来使用，DOM就是一个模块，基于这个模块可以对HTML页面中的标签进行操作。

DOM可以实现很多功能，但是比较繁琐。页面上的效果：jquery / vue.js / react.js。

//根据id获取标签
var tag = document.getElementById("xx");
//获取标签中的文本
tag.innerText
//设置标签中的文本
tag.innerText = "哈哈哈哈哈哈";

//创建标签
var tag = document.createElement("div");
//标签中写内容
tag.innerText = "哈哈哈哈哈哈";

<ul id="city">
</ul>


<script type="text/javascript">
  var cityList = ["北京", "上海", "深圳"];
    for (var idx in cityList) {
    var text = cityList[idx];
    //创建li标签
    var tag = document.createElement("li");
    //在li标签中写入内容
    tag.innerText = text;
    //添加到id=city到标签里
    var parentTag = document.getElementById("city");
    parentTag.appendChild(tag);
  }
</script>

事件的绑定¶

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <input type="text" placeholder="请输入内容" id="txtUser">
    <input type="button" value="点击添加" onclick="addCityInfo()">
    <ul id="city"></ul>
    <script type="text/javascript">
        function addCityInfo() {
            //1 获取输入框
            var txtTag = document.getElementById("txtUser");
            //2 获取输入框用户输入的数据
            var newString = txtTag.value;
            //判断输入是否为空，不为空才能继续
            if (newString.length > 0) {
                //3 创建li标签
                var newTag = document.createElement("li");
                newTag.innerText = newString;
                //4 标签添加到ul中
                var parentTag = document.getElementById("city");
                parentTag.appendChild(newTag);
                //将input框内容清空
                txtTag.value = "";
            } else {
                alert("输入不能为空");
            }

        }
    </script>
</body>

</html>

BOM¶

控制浏览器的一些东西，比如让浏览器自动滚动。