【前端】javascript中的陣列及操作方法
阿新 • • 發佈：2018-11-22
建立：
物件的例項建立：var aList = new Array(1,2,3);
直接建立：var aList = [1,2,3,'a']陣列的api：增刪改查/反轉排序/合成字串
1.增：放到最後
var list = ['穿山甲','水娃','蛇精']
list.push('麗麗')
console.log(list)2.刪：從末尾開始刪除
list.pop()
3.改：
splice(): 任意位置新增/刪除/替換...
引數1: 從哪個索引值開始操作;
引數2: 刪除幾個;
引數3-n: 用什麼替換;
// 3.1 從指定位（索引位1）新增，不刪除 list.splice(1,0,'火娃') // 3.2 刪除指定位元素和指定個數(從索引2開始，刪除2個) list.splice(2,2,) // 3.3 從指定位開始刪除，再新增(從索引2開始，刪除1個，再新增'金剛葫蘆娃') list.splice(2,1,'金剛葫蘆娃') console.log(list)
4.查：indexOf():檢視元素索引值，沒有則返回-1
var index1 = list.indexOf('穿山甲')
var index2 = list.indexOf('lili')
console.log(index1,index2)5.反轉：
list.reverse()6.排序
var list2 = new Array(1, 3, 56, 66) list2.sort(function(c,d){ // 可以是任何字母，前-後:升序，後-前:降序 return c-d // return d-c }) console.log(list2)
7.將陣列元素拼接成字串
var str = list2.join() // 不傳遞引數，用逗號連線
var str = list2.join(' ') //傳遞空格，會用空格連線，
var str = list2.join('-')
var str = list2.join('') // 傳遞空字串，無縫連線
console.log(str,list2)拓展1.陣列去重
思路：建立一個新的空陣列，遍歷原陣列，利用indexOf()檢視，新陣列中是否已有原陣列中的元素，沒有則新增，組成新的去重後的陣列。
<script> var list1 = ['麗麗', '莉莉', 'lili', '麗麗', '莉莉', 'lili'] var list2 = new Array // 遍歷1，看2中有沒有，沒有push進去 for (i=0;i<list1.length;i++){ if(list2.indexOf(list1[i]) == -1){ list2.push(list1[i]) } } console.log(list2) </script>
拓展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>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none
}
h1 {
width: 500px;
margin: 50px auto;
text-align: center
}
ul {
width: 500px;
margin: 0 auto
}
ul li {
font:22px/50px 'simsun';
border-bottom: 2px dashed yellow;
text-align: center;
}
</style>
<script>
window.onload = function(){
var list = ['haha', 'heihie', 'xixi', 'hehe']
// 通過id獲得ul，並給了變數ul
var ul = document.getElementById('ul')
// 定義一個空的str，用來接受列表內容
var str = ''
// 遍歷列表，將內容拼接成<li>內容</li>
for (i=0;i<list.length;i++){
str += '<li>'+list[i]+'</li>'
}
// 賦值，通過innerHTML操作ul中的li
ul.innerHTML = str
}
</script>
</head>
<body>
<h1>我是誰</h1>
<ul id='ul'>
</ul>
</body>
</html>