一、js字面值
1. 概念
表示某種特定類型的一個值。
2. 舉例
一個引用的字符串（string）、浮點數（Number）、布爾值（Boolean）
"this is a string example" 2.37 true/false
二、js基本類型
1.概念
特定的數據類型的一個實例
2. 五種類型
String、Number、Boolean、null、undefined
以上前三種類型基本類型，有對應的構造方法對象。
基本類型變量（沒有使用new創建的變量）嚴格地等於字面值 ，二對象實例則不會。因爲基本類型是根據值來進行比較的，而值是字面值。
三、示例
3.1 從字符串提取一個列表
//提取朋友的姓名
var str = "this is a list of friends:xushuai,zhuxiao,huxiang,bianjingbin.";
var start = str.indexOf(':');
var end = str.indexOf('.', start + 1);
alert(start);//25
alert(end);//61
var list = str.substring(start + 1, end);
var re = list.split(',');
console.log(re);
//提取朋友的姓名
var str = "this is a list of friends: xushuai,zhuxiao , huxiang,bianjingbin.";
var start = str.indexOf(':');
var end = str.indexOf('.', start + 1);
alert(start);//25
alert(end);//61
var list = str.substring(start + 1, end);
var re = list.split(',');
console.log(re);
//forEach()方法作爲參數傳遞的函數（回調函數），應用到每一個數組元素身上。
//該回調函數支持三個參數：數組元素的值，可選的數組元素的索引，數組自身
re.forEach(function (element, index, array) {
array[index] = element.trim();
});
console.log(re);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>全局搜索</title>
<style>
.found{
background-color:#ff0;
}
</style>
<!--<script src="../JS/面向對象的程序設計.js"></script>-->
</head>
<body>
<form id="search">
<textarea id="incoming" cols="100" rows="15"></textarea>
<p>
Search pattern:<input id="pattern" type="text" />
</p>
</form>
<button id="searchSubmit">搜索</button>
<div id="searchResult"></div>
<script>
document.getElementById("searchSubmit").onclick = function () {
//獲取模式
var pattern = document.getElementById("pattern").value;
var re = new RegExp(pattern, "g");
//獲取字符串
var searchString = document.getElementById("incoming").value;
var matchArray;
var resultString = "<pre>";
var first = 0;
var last = 0;
//找到每一個匹配
while ((matchArray = re.exec(searchString)) != null) {
last = matchArray.index;//index屬性聲明的是匹配文本的第一個字符的位置
//獲取所有匹配的字符串，將其連接起來
resultString += searchString.substring(first, last);
//使用class，添加匹配的字符串
resultString += "<span class='found'" + matchArray[0] + "</span>";
first = re.lastIndex;//該屬性設置爲匹配文本的最後一個字符的下一個位置
}
//完成字符串
resultString += searchString.substring(first, searchString.length);
resultString += "</pre>";
//插入到頁面
document.getElementById("searchResult").innerHTML = resultString;
}
</script>
</body>
</html>
3.2 使用捕獲圓括號交換一個字符串中的單詞
3.2.1 String.replace特殊模式
| 模式 | 用途 |
| $$ | 允許替換中有一個字面值美元符號 |
| $& | 插入匹配的字符串 |
| $` | 在匹配之前插入字符串的一部分 |
| $' | 在匹配之後插入字符串的一部分 |
| $n |
插入使用RegExp的第n次捕獲圓括號的值 |
4. 使用帶有定時器的函數閉包
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#redbox{
position:absolute;
left:100px;
top:100px;
width:200px;height:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="redbox"></div>
<script>
var intervalId = null;
document.getElementById("redbox").addEventListener("click", startBox, false);
function startBox() {
if (intervalId == null) {
var x = 100;
intervalId = window.setInterval(
function () {
x += 30;
var left = x + "px";
document.getElementById("redbox").style.left = left;
}, 1000);
} else {
clearInterval(intervalId);
intervalId = null;
}
}
</script>
</body>
</html>
5. 把表中一列的所有數字加和
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>把表格值轉換爲數學，並且求得加和結果</title>
</head>
<body>
<table id="table1">
<tr>
<td>sssss</td>
<td>234</td>
</tr>
<tr>
<td>fffff</td>
<td>78</td>
</tr>
<tr>
<td>ggggg</td>
<td>176</td>
</tr>
</table>
<script type="text/javascript">
var sum = 0;
//找到第二列中的所有單元格
var cells = document.querySelectorAll("td+td");
for (var i = 0; i < cells.length; i++) {
sum += parseFloat(cells[i].firstChild.data);
}
//將求和結果添加至表尾
var newRow = document.createElement("tr");
//第一個單元格
var firstCell = document.createElement("td");
var firstCellText = document.createTextNode("Sum:");
firstCell.appendChild(firstCellText);
newRow.appendChild(firstCell);
//帶有總和的第二個單元格
var secondCell = document.createElement("td");
var secondCellText = document.createTextNode(sum);
secondCell.appendChild(secondCellText);
newRow.appendChild(secondCell);
//給表添加行
document.getElementById("table1").appendChild(newRow);
</script>
</body>
</html>
