Javascript陣列基本操作
Javascript中的陣列是一種特殊的物件，用來表示偏移量的索引是該物件的屬性，索引可能是整數，然而這些數字索引在內部被轉換為字串型別，這是因為javascript物件中的屬性名必須是字串。
一：如何建立陣列？
建立陣列有2中方式，第一種是物件字面量如下：
var arrs = []; // 定義了一個空陣列。
還有一種方式是：呼叫Array的建構函式建立陣列
var arrs = new Array();
二：陣列的基本操作如下：
1. 把字串轉換為陣列 可以使用split方法。如下：
console.log("aabbcc".split(""));
列印：["a", "a", "b", "b", "c", "c"]
2. 把陣列轉換為字串，可以使用join方法。如下：
console.log(['aa','bb','vv'].join(""))；
列印如下：aabbvv
3. indexOf查詢元素。用來查詢元素是否在陣列中，如果存在就返回陣列的索引，否則就返回-1;
["aa",'bb'].indexOf('bb'); // 1
indexOf()函式總是返回第一個與引數相同的元素的索引，有另一個功能與之類似的函式是 lastIndexOf()方法，該函式返回相同元素中最後一個元素的索引，如果沒有找到，則返回-1.
如：["aa",'bb','cc','aa'].lastIndexOf('aa'); // 3
["aa",'bb','cc','aa'].indexOf('aa'); // 0
4. 陣列合並使用concat()方法。
如：console.log(["aa",'bb'].concat(['cc']));
返回 [“aa”,”bb”,”cc”];
5. splice()方法從現有陣列裡擷取一個新陣列，該方法的第一個引數是擷取的起始索引，第二個引數是擷取的長度。比如如下程式碼：
["aa","bbb","vvv","ddd","ee"].splice(2,2)
返回是：["vvv", "ddd"]
6. slice()方法 從已有的陣列中返回選定的元素
arrs.slice(start,end);
start 必須，規定從何處開始選取，如果是負數，那麼規定從陣列尾部開始算起的位置，比如：-1是最後一個元素，-2是倒數第二個元素。
end 可選，規定從何處結束選取，該引數是陣列片段結束處的陣列下標，如果沒有指定該引數，那麼切分的陣列包含從start到陣列結束的所有元素。 比如如下：
['aa','bb','cc','dd'].slice(1,2);
返回[“bb”];
7 . push()方法，從陣列最後新增元素；比如如下程式碼：
var nums = [1,2,3,4,5];
nums.push(6);
console.log(nums); // [1,2,3,4,5,6];
8. unshift()方法 可向陣列的開頭新增一個或更多元素，並返回新的長度。如下：
var arrs = [1,2,3,4,5];
console.log(arrs.unshift("aa","bb")); 返回7
console.log(arrs); // ["aa", "bb", 1, 2, 3, 4, 5]
9. pop()方法 刪除陣列末尾的元素。返回被刪的元素
var arrs = [1,2,3,4,5,6];arrs.pop();
console.log(arrs.pop()); // 6
console.log(arrs);// 1,2,3,4,5
10. shift()方法 刪除陣列的第一個元素，如下程式碼：
var nums = [9,1,2,3,4,5,6];
console.log(nums.shift()); // 9
console.log(nums);// [1,2,3,4,5,6];
從陣列中間位置新增和刪除元素，可以使用splice()方法，需要提供如下引數：
1. 起始索引。
2. 需要刪除元素的個數(新增元素時該引數設定為0)；
3. 想要新增進陣列的元素。
比如如下：
在陣列中間插入元素。
var nums = [1,2,3,7,8,9];
nums.splice(3,0,4,5,6);
console.log(nums);// [1,2,3,4,5,6,7,8,9]
在陣列中刪除元素。
var nums = [1,2,3,100,200,300,400,4,5];
nums.splice(3,4);
console.log(nums);// 1,2,3,4,5
11. 陣列排序，第一個方法是：reverse(); 該方法將陣列中元素的順序進行翻轉。比如如下程式碼：
var nums = [1,2,3,4,5];
nums.reverse();
console.log(nums);// 5,4,3,2,1
如果是字串排序，可以使用sort()方法。如下程式碼：
var arrs = [“Da”,”ade”,”cdf”,’bfg’];
arrs.sort();
console.log(arrs);// ["Da", "ade", "bfg", "cdf"]
但是如果陣列元素是數字型別，就有問題了，比如如下程式碼：
var nums = [3,1,2,100,4,200];
nums.sort();
console.log(nums);// [1, 100, 2, 200, 3, 4]
sort()方法是按照字典順序對元素進行排序的，因此他假定元素都是字串型別。但是對於數字型的我們可以簡單寫一個函式即可。比如如下程式碼：
function compare(num1,num2) {
return num1 – num2;
}
var nums = [3,1,2,100,4,200];
num.sort(compare);
console.log(nums);// 1,2,3,4,100,200
下面介紹的幾種新元素 分別是 forEach(),every()，some(),reduce(),reduceRight(),map(),filter().是針對標準瀏覽器做的，IE9+，firefox，chrome操作的，IE8及以下不支援的。
一：forEach()方法：該方法接受一個函式作為引數，對陣列的每個元素使用該函式，如下程式碼：
function square(num) {
console.log(num*num);
}
var nums = [1,2,3,4,5,6,7,8,9,10];
console.log(nums.forEach(square));
// 1,4,9,16,25,36,49,64,81,100
二：every()方法 該方法接受一個返回值為布林型別的函式，對陣列中每個元素使用該函式，如果返回所有的為true，則true，否則返回false，如下程式碼：
function isEven(arrs) {
return arrs % 2 == 0;
}
var arrs = [2,4,6,8];
console.log(arrs.every(isEven));
返回true；如果上面的arrs 是 [2,4,5,6];則返回false
三：some()方法接受一個返回值為布林型別的函式，只要有一個為true，則返回true，如下程式碼：
function isEven(arrs) {
return arrs % 2 == 0;
}
var arrs = [1,5,3,7];
console.log(arrs.some(isEven));
返回false，如果上面的arrs = [1,5,3,6];則返回true。
四：reduce()方法接受一個函式，返回一個值，該方法會從一個累加值開始，不斷對累加值和陣列中的後續元素呼叫該函式，直到陣列中的最後一個元素，最後返回得到的累加值。如下程式碼：
function add(total,currentVal) {
return total + currentVal;
}
var nums = [1,2,3,4];
console.log(nums.reduce(add));
返回10.
Javascript還提供了reduceRight()方法，和reduce()方法不同，它是從右到左執行的，下面demo是對陣列中的字串做操作，如下程式碼：
function concat(accumulatedString,item) {
return accumulatedString + item;
}
var words = ["aa",'bb','cc'];
console.log(words.reduce(concat));
返回aabbcc。
但是如果使用reduceRight()方法的話，則值是從右邊開始的。如下程式碼：
function concat(accumulatedString,item) {
return accumulatedString + item;
}
var words = ["aa",'bb','cc'];
console.log(words.reduceRight(concat));
列印 ccbbaa
五：map()方法對陣列中的每個元素使用某個函式，產生新陣列。如下程式碼：
function curve(grade) {
return grade +=5;
}
var grades = [77,78,89,13];
console.log(grades.map(curve));// [82,83,94,18]
下面是一個字串使用map()方法對陣列的demo，如下：
function first(word) {
return word[0];
}
var words = ["ased","bvc","cde"];
console.log(words.map(first)); // ['a','b','c'];
console.log(words.map(first).join("")); //"abc"
六：filter()方法：傳入一個返回值為布林型別的函式，對陣列中所有元素使用該函式，返回一個新陣列，如下程式碼：
function isEven(num) {
return num % 2 == 0;
}
function isOdd(num) {
return num % 2 != 0;
}
var nums = [];
for(var i = 0; i < 10; i++) {
nums[i] = i + 1;
}
console.log(nums.filter(isEven)); // 2,4,6,8,10
console.log(nums.filter(isOdd)); // 1,3,5,7,9
下面總結下 javascript字串的基本方法如下：
1. concat()方法：該方法可以把多個引數到指定字串的尾部。如下程式碼：
var a="Hello"; var b="World";
console.log(a.concat(b)); // HelloWorld
2. charAt(),charCodeAt()方法。
charAt()用於返回字串中第N個字元，charCodeAt用於返回字串中的第N個字串的程式碼。如下程式碼：
var a = "hello world";
console.log(a.charAt(2)); // l
console.log(a.charCodeAt(2)) // 108
3. indexOf(),lastIndexOf()方法，2個都是查詢字串的位置，indexOf()是從頭開始查詢，lastIndexOf()是從尾部開始查詢的，該2個方法分別有2個引數，第一個引數為查詢的物件，第二個引數為查詢的起始位置。如下程式碼：
var a = "hello world";
console.log(a.indexOf("lo",1)); // 3
console.log(a.indexOf(2)); // -1
4. substr(),substring()方法。
substr(start,end);該方法根據指定的長度來擷取字串，包含2個引數，第一個引數為擷取字串的起始下標，第二個引數為表示擷取的長度。
如下程式碼：
var a = "hello world";
console.log(a.substr(0,5));// hello
substring(start,stop); start 引數字串開始的位置，stop字串結束的位置。如下程式碼：
var a = "hello world";
console.log(a.substring(2,5)); // llo
5. slice（）方法：
slice()與substring（）類似，都是根據起始下標與結束下標來擷取子字串。slice()方法宣告：slice(start, [end])
如下程式碼：
var a = "hello world";
console.log(a.slice(2,5)); // llo
slice()方法與substring()方法的區別：
區別1：如果第一個引數的值比第二個引數的值大，即起始下標大於結束下標，substring()方法能夠在執行擷取之前，先交換2個引數，而slice（）方法無效，返回空字串， 如下程式碼：
var a = "hello world";
console.log(a.substring(11,6)); // world
console.log(a.slice(11,6)); // 返回空
區別2：如果引數值為負數，slice()方法能夠把負號解釋為從右側開始定位，右側第一個為-1，第二個為-2，以此類推。而substring（）方法無效，並返回空字串。如下程式碼：
var a="Hello World";
console.log(a.substring(-5,-1)); // 空
console.log(a.slice(-5,-1)); // worl
6. replace()方法
replace(regexp,replacement); 第一個參數列示執行匹配的正規表示式，也可以是字串；第二個參數列示準備代替匹配的子字串。
var a = "hello a";
console.log(a.replace(/a/g,'world')) // hello world
7. toLowerCase(),toUpperCase()方法。
toLowerCase() 將字串轉換成為小寫,toUpperCase() 將字串轉換成為大寫。
如下程式碼：
var a="Hello World"
console.log(a.toLowerCase()); // hello world
console.log(a.toUpperCase()); // HELLO WORLD
對模糊匹配中的字串操作
有時候我們做模擬下拉框模糊匹配時候，比如輸入A時候，會有下拉框，其中A需要高亮狀態效果，我們可以使用字串匹配；比如類似於百度的搜尋如下圖：
所以我們的JS程式碼可以如下寫：
var brandName = "abcdef我是中國人", inputVal = "cde"; var arrs = []; if(brandName.match(inputVal)) { var str = brandName.match(inputVal); // 1. 獲取的元素是從第幾個位置開始 var curIndexStart = brandName.indexOf(inputVal); // 2. 找到已匹配元素的長度 var matchLen = str.join("").split("").length; // 3. 擷取前面的字元 var prefix = brandName.substring(0,curIndexStart); // 4. 擷取字串後面的字元 var suffix = brandName.substring(curIndexStart + matchLen); // 5. 存入陣列裡面去 arrs.push(prefix + "_" + inputVal + "_"+ suffix + "_" + "-" +"111"); } console.log(arrs); // ab_cde_f我是中國人_-111 console.log(arrs[0].split("-")[0]); // ab_cde_f我是中國人_ var firstStr = arrs[0].split("-")[0]; console.log(firstStr.split("_")[0]); // ab console.log(firstStr.split("_")[1]); // cde console.log(firstStr.split("_")[2]); // f我是中國人
然後把字串拼接起來，當前的元素需要高亮就加一個標籤讓他們高亮起來；