### 數組基礎操作
- 數組的使用
- 定義
- `var arr = [23, 234, 23, 45];`
- `var arr = new Array(12, 5, 7, 34);`
- 沒有任何差別,`[]` 的性能略高,因為代碼短
- 數組的屬性
- `length`
- 既可以獲取,又可以設置
- 例子:快速清空數組 `length = 0`
- 數組的使用原則:數組中應該只存一種類型的變量
- 數組的方法
- 添加
- `push(元素)`,從尾部添加
- `unshift(元素)`,從頭部添加
- 刪除
- `pop()`,從尾部刪除
- `shift()`,從頭部刪除
- 排序
- `數組.sort([比較函數])`,排序一個數組,只有數組能使用
- 排序一個字符串數組,不加比較函數,**默認按照 ASCII 碼排序**
- 排序一個數字數組,加數字比較大小函數
- ```js
// 正序比較函數 數字比大小 字符比ASCII值大小
function positiveSort(n1, n2) {
if (isNaN) {
if (n1 > n2) {
return 1;
}
if (n1 < n2) {
return -1;
}
if (n1 === n2) {
return 0;
}
} else {
return n1 - n2;
}
}
```
- 轉換類
- `數組.concat(數組2)`
- 連接兩個數組,可用于深度復制
- `數組.join(分隔符)`
- 用分隔符,組合數組元素,生成字符串
- 字符串 `split`
- `數組.reverse()`
- 顛倒數組中元素的順序
- `數組.slice(start,end)`
- 從已有數組中返回選定元素,可用于深度復制
- start 為負數時,和數組長度相加再查找
- `splice`:先刪除,后插入
- `數組.splice(起點,長度,元素)`
- 刪除
- `數組.splice(起點,長度)`
- 插入
- `數組.splice(起點,0,元素...)`
- 替換
- `數組.splice(起點,長度,元素)`
- ECMAScript 兩個關于位置的方法
- `arrayObject.indexOf(searchvalue,startIndex)`
- 從startIndex 開始向后查找,默認值為 0
- 返回 number 查找項在數組中的位置,沒找到返回-1
- ``arrayObject.lastIndexOf(searchvalue,startIndex)`
- 從startIndex 開始向前查找,默認值為 0
- 返回 number 查找項在數組中的位置,沒找到返回-1
- 代碼:
```HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>數組操作</title>
<style>
div {
margin-top: 10px;
}
</style>
<script>
var arr = [23, 435, 567, 321, 9, 4];
var arr2 = new Array('m', 'r', 'a', 'z', 'c', 'p', 'e', '破就', '不發');
// 封裝getById
function get(id) {
return document.getElementById(id);
}
window.onload = function () {
// 顯示數組
function showArr() {
get('d1').innerHTML = arr + ' + ' + arr2;
}
showArr();
// 添加元素 從尾部添加
get('btn2').onclick = function () {
arr.push(222);
showArr();
}
// 添加元素 從頭部添加
get('btn22').onclick = function () {
arr.unshift(234);
showArr();
}
// 刪除元素 從尾部刪除
get('btn3').onclick = function () {
arr.pop();
showArr();
}
// 刪除元素 從頭部刪除
get('btn33').onclick = function () {
arr.shift();
showArr();
}
// 排序元素
get('btn4').onclick = function () {
arr.sort(positiveSort);
arr2.sort(positiveSort);
showArr();
}
// 比較函數 數字比大小 字符比ASCII值大小
function positiveSort(n1, n2) {
if (isNaN) {
if (n1 > n2) {
return 1;
}
if (n1 < n2) {
return -1;
}
if (n1 === n2) {
return 0;
}
} else {
return n1 - n2;
}
}
// 拼接數組
get('btn5').onclick = function () {
arr = arr.concat(arr2);
showArr();
}
// 分隔符
get('btn6').onclick = function () {
arr = arr.join('_');
showArr();
}
// splice 插入 splice(起點,長度,元素)
get('btn7').onclick = function () {
arr.splice(2, 0, 5, 1);
showArr();
}
// splice 刪除
get('btn8').onclick = function () {
arr.splice(0, arr.length);
showArr();
}
// splice 替換 = 刪除 + 插入
get('btn9').onclick = function () {
arr.splice(2, 1, 999, 888);
showArr();
}
}
</script>
</head>
<body>
<div>
<input type="button" name="" id="btn2" value="尾部添加元素">
<input type="button" name="" id="btn22" value="頭部添加元素">
<input type="button" name="" id="btn3" value="尾部刪除元素">
<input type="button" name="" id="btn33" value="頭部刪除元素">
<input type="button" name="" id="btn4" value="正序排序元素">
</div>
<div>
<input type="button" name="" id="btn5" value="拼接數組">
<input type="button" name="" id="btn6" value="分割數組">
</div>
<div>
<input type="button" name="" id="btn7" value="插入元素">
<input type="button" name="" id="btn8" value="刪除元素">
<input type="button" name="" id="btn9" value="替換元素">
</div>
<div id="d1"></div>
</body>
</html>
```
- 數組名作為變量(遍歷數組中的數組):
```js
var arr1=new Array();
var arr2=new Array();
var arrlist= new Array(); //存放以上數組
arrlist.push(arr1);
arrlist.push(arr2);
//循環遍歷arrlist,就可以達到你要的效果
```
- 前言
- 初探 JavaScript 魅力
- JavsScript 是什么
- 第一個 JS 特效:鼠標提示框
- 網頁換膚和 if 判斷
- 函數傳參
- 循環 while 和 for
- 導航欄選項卡
- JS 簡易日歷
- JavaScript 基礎
- JavaScript 組成
- 變量類型
- 變量類型轉換
- 變量的作用域和閉包
- 命名規范
- 運算符
- 程序流程控制
- JSON
- 深入 JavaScript
- 函數返回值
- 函數傳參與行間樣式
- 數組基礎操作
- 定時器的使用
- 定時器的作用
- 數碼時鐘
- Date 對象其它方法
- 延時提示框
- 無縫滾動
- DOM基礎應用
- DOM 基礎
- DOM 節點
- 操作元素屬性
- DOM 元素靈活查找
- DOM 操作應用
- 創建、插入和刪除元素
- 文檔碎片
- DOM操作應用高級
- 表格標簽
- 表格應用
- 表單應用
- JS 運動基礎
- 運動基礎
- 運動框架及應用
- 緩沖運動
- 運動的停止條件
- JS 運動應用
- 多物體運動框架
- 任意值運動框架
- 仿 Flash 圖片展示
- JS 運動中級
- 鏈式運動框架
- 完美運動框架
- 運動框架總結
- 運動框架應用
- JS事件基礎
- Event 對象和事件
- 鼠標事件
- 鍵盤事件
- JS 事件中級
- 默認事件
- 拖拽
- JS 事件高級應用
- 事件綁定
- 高級拖拽
- 自定義滾動條
- Ajax 基礎
- Ajax 是什么
- 使用 Ajax
- Ajax 原理
- Ajax 中級
- 編寫 Ajax
- Ajax 數據
- JS 面對對象基礎
- 面對對象是什么
- JS 中的面對對象
- 第一個面對對象的程序
- 工廠方式
- 原型:Prototype
- 面對對象編程方式
- JS 面對對象實例
- 面對對象的選項卡
- JS 面對對象高級
- Json 方式的面向對象
- 拖拽和繼承
- 使用繼承
- 系統對象
- BOM 應用
- BOM 基礎
- 尺寸及坐標
- 常用方法和事件
- COOKIE 基礎與應用
- 什么是 cookie
- 使用 cookie
- JS 中的正則表達式
- 正則表達式基礎
- 字符串與正則配合
- 字符串
- 量詞
- 常用正則例子
- JS Template 模板引擎
- 特性
- 語法
- 實例
- 表達式和運算符分類
- 主要表達式
- 左表達式
- 自增和自減
- 一元運算符
- 算術運算符
- 關系運算符
- 相等運算符
- 位移運算符
- 二進制位運算符
- 二元邏輯運算符
- 條件(三元)運算符
- 賦值運算符