1.创建数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>创建数组</title> </head> <body> <script> var arr = ["苹果", "香蕉", "葡萄", "山竹"] console.log(arr.length); //4 </script> </body> </html>
2.通过索引访问数组元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>通过索引访问数组元素</title> </head> <body> <script> var arr = ["苹果", "香蕉", "葡萄", "山竹"] var first = arr[0]; //获取第一个 console.log(first); // 苹果 var last = arr[arr.length-1]; //获取最后一个 console.log(last); //山竹 </script> </body> </html>
3.遍历数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>遍历数组</title> </head> <body> <script> var arr = ["苹果", "香蕉", "葡萄", "山竹"] arr.forEach(function(item,index,array){ //遍历数组 console.log(item,index); }); //苹果 0 //香蕉 1 //葡萄 2 //山竹 3 </script> </body> </html>
4.添加元素到数组的末尾
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>添加元素到数组的末尾</title> </head> <body> <script> var arr = ["苹果", "香蕉"] //push()添加元素到数组的末尾 var newLength = arr.push('葡萄'); console.log(newLength); //3 console.log(arr); //["苹果", "香蕉", "葡萄"] </script> </body> </html>
5.删除数组末尾的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>删除数组末尾的元素</title> </head> <body> <script> var arr = ["苹果", "香蕉","葡萄"] //pop()删除数组末尾的元素 var last = arr.pop(); console.log(last); //葡萄 console.log(arr); //["苹果", "香蕉"] </script> </body> </html>
6删除数组最前面（头部）的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>删除数组最前面（头部）的元素</title> </head> <body> <script> var arr = ["苹果", "香蕉","葡萄"]; //shift()删除数组最前面（头部）的元素 var first = arr.shift(); console.log(first); //苹果 console.log(arr); //["香蕉","葡萄"] </script> </body> </html>
7添加元素到数组的头部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>添加元素到数组的头部</title> </head> <body> <script> var arr = ["香蕉","葡萄"]; //unshift()添加元素到数组的头部 var first = arr.unshift('苹果'); console.log(arr); //["苹果", "香蕉", "葡萄"] </script> </body> </html>
8.找出某个元素在数组中的索引
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>找出某个元素在数组中的索引</title> </head> <body> <script> var arr = ["香蕉","葡萄"]; arr.push('山竹'); console.log(arr); //["香蕉", "葡萄", "山竹"] var index = arr.indexOf("葡萄"); console.log(index); //1 </script> </body> </html>
9通过索引删除某个元素和添加元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>通过索引删除某个元素和添加元素</title> </head> <body> <script> var arr = ["苹果","香蕉","葡萄"]; var arr2 = ["苹果","香蕉","葡萄"]; var pos = 1; //splice()从数组中添加/删除项目 var removedItem = arr.splice(pos,1); var removedItem2 = arr2.splice(pos,1,"搜索"); console.log(arr); //["苹果", "葡萄"] console.log(arr2); // ["苹果", "搜索", "葡萄"] </script> </body> </html>
10从一个索引位置删除多个元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>从一个索引位置删除多个元素</title> </head> <body> <script> var arr = ["苹果", "香蕉", "葡萄", "山竹"]; var pos = 1,n = 2; //splice()从数组中添加/删除项目 var removedItem = arr.splice(pos, n); console.log(arr); //["苹果", "山竹"] console.log(removedItem); //["香蕉", "葡萄"] </script> </body> </html>
11复制一个数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>复制一个数组</title> </head> <body> <script> var arr = ["苹果", "香蕉", "葡萄", "山竹", "龙眼"]; //slice()方法可从已有的数组中返回选定的元素。 var shallowCopy = arr.slice(); //返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。 var shallowCopy2 = arr.slice(2,4); console.log(arr); //["苹果", "香蕉", "葡萄", "山竹", "龙眼"] console.log(shallowCopy); //["苹果", "香蕉", "葡萄", "山竹", "龙眼"] console.log(shallowCopy2); //["葡萄", "山竹"] </script> </body> </html>
12字符串的形式用方括号来访问
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>字符串的形式用方括号来访问</title> </head> <body> <div id="demo"></div> <script> var promise = { 'var': 'text', 'array': [1, 2, 3, 4] }; console.log(promise['var']); document.getElementById('demo').innerHTML = promise['var']; </script> </body> </html>
13遍历数组for循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>遍历数组</title> </head> <body> <script> var arr = [1,2,3,4,5]; var arrLength = arr.length; for(var i = 0; i<arrLength;i++){ arr[i] *= 2; } console.log(arr); // [2, 4, 6, 8, 10] </script> </body> </html>
下面提一下jQuery的each方法的几种常用的用法
Js代码
var arr = [ "one", "two", "three", "four"]; $.each(arr, function(){ alert(this); }); //上面这个each输出的结果分别为：one,two,three,four var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]] $.each(arr1, function(i, item){ alert(item[0]); }); //其实arr1为一个二维数组，item相当于取每一个一维数组， //item[0]相对于取每一个一维数组里的第一个值 //所以上面这个each输出分别为：1 4 7 var obj = { one:1, two:2, three:3, four:4}; $.each(obj, function(key, val) { alert(obj[key]); }); //这个each就有更厉害了，能循环每一个属性 //输出结果为：1 2 3 4
附件目录：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#Examples
https://blog.csdn.net/love_xiolan/article/details/52022617
http://www.w3school.com.cn/jsref/jsref_obj_array.asp
http://www.runoob.com/jquery/jquery-ref-misc.html