JS陣列字串方法整理

Majun發表於2018-03-22
JS陣列字串

回顧陣列字串方法

陣列物件方法

轉換陣列(將陣列轉換成一些其他形式):

  1. valueOf() 返回陣列物件本身,和直接輸出陣列物件是一樣的

  2. toString() 把陣列以逗號相連轉為字串

var arr = [1, 2, 3, 4, 5];
console.log(arr.toString());
複製程式碼
  1. join() 用指定分隔符連線陣列元素轉為字串
var arr = [1, 2, 3, 4, 5];
console.log(arr.join());
console.log(arr.join("-"));
console.log(arr.join(""));
複製程式碼

注: 不傳入引數即表示預設用逗號連線轉為字串

陣列檢測: 用於判斷是否是陣列型別

  1. instanceof 關鍵字 注意它不是方法沒有(),並且也適用於其他判斷
var arr = [1,2,3,4,5];
console.log(arr instanceof Array); //true
console.log("a" instanceof Array); //false
複製程式碼
  1. Array.isArray()
var arr = [1,2,3,4,5];
console.log(Array.isArray(arr));//true
console.log(Array.isArray("a"));//false
複製程式碼

增刪方法:

  1. push() 從後面新增元素,返回新陣列的長度
var arr = [11,22,33,44,55];
console.log(arr.push(99));
複製程式碼
  1. pop() 從後面刪除元素,返回被刪除的元素
var arr = [11,22,33,44,55];
console.log(arr.pop());
複製程式碼
  1. shift() 從前面刪除元素,返回被刪除的元素
var arr = [11,22,33,44,55];
console.log(arr.shift());
複製程式碼
  1. unshift() 從前面新增元素,返回新陣列的長度
var arr = [11,22,33,44,55];
console.log(arr.unshift(0));
複製程式碼

迭代方法:

  1. filter 需要傳入一個回撥函式,該回撥函式需具有三個引數,這個回撥函式由js內部呼叫,filter方法會遍歷陣列,每次遍歷到一個元素就會執行回撥函式一次,第一個引數為當前元素,第二個引數為當前元素的索引,第三個引數為當前陣列
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = arr.filter(function (element, index, array) {
 if (element > 2000) {
  return false;
 }
 return true;
});
console.log(newArr);
// 回撥函式返回值為true則表示當前需要保留當前元素,返回false則表示不保留當前元素,如果沒寫返回值預設為undefined也就是false 
// 當陣列迭代完成時,會返回一個新陣列,這個新陣列中的元素取決於在回撥函式中,有多少個元素返回了true得以保留
複製程式碼
  1. forEach方式進行迭代(ES5的新方法) 和filter()方法一樣傳入一個回撥函式,有JS內部呼叫進行陣列遍歷,迴圈遍歷陣列時,每迴圈到一個元素就會呼叫一次,回撥函式同樣有3個引數,引數1: 遍歷到的元素,引數2: 便利到的元素索引,引數3: 原陣列
var arr = [4, 6, 7, 8, 3, 46, 8];
arr.forEach(function(e){
    console.log(e);
}

var arr = [4, 6, 7, 8, 3, 46, 8];
arr.forEach(function(element, index, arr){
    console.log(element);
    console.log(index);
    console.log(arr);
});
複製程式碼

位置方法:

  1. indexOf() 返回找到陣列中第一個a出現的位置
var arr = ["c", "a", "z", "a", "x", "a"];
console.log(arr.indexOf("a"));//1
// 注:搜尋""結果是0,搜不到的結果是-1,搜尋"ca"結果也是0
複製程式碼
  1. lastIndexOf() 返回從後往前找到陣列中第一個a出現的位置
var arr = ["c", "a", "z", "a", "x", "a"];
console.log(arr.lastIndexOf("a"));//5
// indexOf的第二個引數:從哪個索引開始找,包含該索引
// 找不到返回-1!
複製程式碼
  1. 例項：尋找每個a出現的位置
var arr = ["c", "a", "z", "a", "x", "a"];
var index = -1;
do {
    index = arr.indexOf("a", index+1);
    console.log(index);
} while (index !== -1);
複製程式碼
  1. 例項：統計元素的出現次數 要統計每個元素出現的次數,可以使用鍵值對(物件)的形式來儲存資料,元素作為鍵(物件的屬性),出現的次數作為值,元素每出現一次,就讓鍵對應的值自增一即可
var arr = ["c", "a", "z", "a", "x", "a"];
var count = {};
for (var i = 0; i < arr.length; i++) {
    var item = arr[i];
    if (count[item]) { //迴圈過程中判斷,如果這個元素在物件中有鍵,那取出值進行自增
        count[item]++;
    } else { //如果這個元素在物件中沒有鍵,那就加一個鍵進去,初始值為1,表示出現了一次
        count[item] = 1;
    }
}
console.log(count);
複製程式碼

其他方法:

  1. slice擷取陣列,不會改變原陣列,返回一個新陣列
var arr = [4, 6, 7, 8, 3, 46, 8];
console.log(arr.slice(0, 2));//結果是[4, 6]
// 注:開始能取到,結束取不到 !
複製程式碼
  1. splice刪除陣列中的元素,會對原陣列進行修改,返回刪掉的陣列
var arr = [4, 6, 7, 8, 3, 46, 8];
console.log(arr.splice(0, 2));
// 從一個索引開始,刪除多少個元素
// 第三個引數可以往刪除的地方新增元素,可以新增多個,使用逗號隔開即可
複製程式碼
  1. 清空陣列:
var array = [1,2,3,4,5,6];
//方式1
array.splice(0,array.length); //刪除陣列中所有專案 
//方式2
array.length = 0; //length屬性可以賦值
//方式3
array = [];  //推薦
複製程式碼

字串物件方法

擷取方法

  1. slice() 從start位置開始，擷取到end位置，end取不到
  2. substring() 從start位置開始，擷取到end位置，end取不到
  3. substr() 從start位置開始，擷取length個字元

位置方法 indexOf()

替換方法 replace()

字元方法 charAt()

其他方法

  1. split()
  2. trim()
  3. charCodeAt() //獲取指定位置處字元的ASCII碼
  4. str[0] //ES5，IE8+支援 和charAt()等效

歸納整理陣列字串常用方法

字串方法

var a="i love you!";
複製程式碼

  1. toUpperCase() 將小寫轉換成大寫

  2. toLowerCase() 將大寫轉換成小寫

  3. charAt() 返回指定位置的字元

document.write(a.charAt(4));//結果是v
// 注：字元是從0開始到length-1結束
複製程式碼
  1. indexOf() 返回指定字元的位置
document.write(a.charAt(v));//結果是4
複製程式碼

  1. lastIndexOf()

  2. split() 返回被分割的字串陣列

document.write(a,split("v",2));//結果是["i lo","e you!"]
// 注:前面指定分割的位置,不填則分割成一個個字元;後面指定分割組數,可不填
複製程式碼
  1. substring() 提取字串
document.write(a.substring(2,5));//結果是love
document.write(a.substring(7));//結果是you!
// 注:前面指定開始提取的位置;後面指定結束提取的位置,不填則預設到字串最後
複製程式碼
  1. subsrt() 提取指定數目字串
document.write(a.substr(2,4));//結果是love
document.write(a.substr(-4));//結果是you!
// 注:前面指定開始提取的位置;後面指定提取的長度,不填則預設到字串最後;若出現-,則表示倒著數
複製程式碼

陣列方法

  1. concat() 連線陣列,不改變原陣列,返回一個新陣列
var a=["1","2"];
var b=["3","4"];
document.write(a.concat(b));
//結果是["1","2","3","4"]
複製程式碼
  1. join() 用指定分隔符連線陣列元素,返回string
var a=["I","love","you"];
document.write(a.join("."));//結果是I.love.you
// 注:若不指定,預設","
複製程式碼
  1. reverse() 顛倒陣列元素順序,會改變原陣列
var a=["1","2"];
document.write(a.reverse());//結果是["2","1"]
複製程式碼
  1. slice() 選定元素,不改變原陣列,返回一個子陣列
var a=["1","2","3","4"];
document.write(a.slice(2,4));//結果是["3","4"];
// 注:前面指定開始選定的位置,注意不包括這個位置;後面指定結束選定的位置,不填則預設到字串最後;若出現-,則表示倒著數
複製程式碼
  1. sort() 陣列排序
function a(x,y){return x-y;}
//升序,若降序,return y-x;
var b=["1","7","5","3"];
document.write(b.sort(a));
//結果是["1","3","5","7"]
複製程式碼
  1. slice(start,end) 擷取指定索引之間的字串(包括start,不包括end),返回新的字串
var str = "abcdaefga";
console.log(str.slice(1,5)); // "cda"
複製程式碼
  1. subString(start,stop) 擷取指定索引之間的字串(包括start,不包括stop),返回新的字串
var str = "abcdaefga";
console.log(str.slice(1,5)); // "cda"
複製程式碼
  1. charAt(index) 返回指定位置的字元
var str = "abcde";
console.log(str.charAt(3)); // d
複製程式碼
  1. concat(str) 連線字串,生成一個新的字串,原字串不會被改變
var str1 = "abc";
var str2 = "def";
console.log(str1.concat(str2)); // “abcdef”
複製程式碼
  1. trim()去掉字串的首尾的空格,返回新的字串
var str = "  abcd  ";
console.log(str.trim()); // "abcd"
複製程式碼

相關文章