一文詳解JavaScript數(shù)組對象和字符串對象
一、數(shù)組對象
JavaScript 中的數(shù)組對象可以使用 newArray 或字面量 "[]" 來創(chuàng)。
1.數(shù)組類型檢測
數(shù)組類型檢測有兩種常用的方式,分別是使用instanceof運算符和使用Array.isArray()方法
示例代碼:
var arr = [];
var obj = {};
// 第一種方式
console.log(arr instanceof Array);//輸出結(jié)果:true
console.log(arr instanceof Array);//輸出結(jié)果:false
// 第二種方式
console.log(Array.isArray(arr));//輸出結(jié)果:true
console.log(Array.isArray(obj));//輸出結(jié)果:false在上述代碼中,如果檢測結(jié)果為true,表示給定的變量是一個數(shù)組,如果檢測結(jié)果為false,則表示給定的變量不是數(shù)組。
2.添加或刪除數(shù)組元素
JavaScript數(shù)組對象提供了添加或刪除元素的方法,可以實現(xiàn)在數(shù)組的末尾或開頭添加新的數(shù)組元 素,或在數(shù)組的末尾或開頭移出數(shù)組元素。
方法如下:
| 方法名 | 功能描述 | 返回值 |
|---|---|---|
| push(參數(shù) 1…) | 數(shù)組末尾添加一個或多個元素,會修改原數(shù)組 | 返回數(shù)組的新長度 |
| unshift(參數(shù) 1…) | 數(shù)組開頭添加一個或多個元素(把數(shù)組長度-1,無參數(shù)),會修改原數(shù)組 | 返回數(shù)組的新長度 |
| pop() | 刪除數(shù)組的最后一個元素,若是空數(shù)組則返回undefined,會修改原數(shù)組 | 返回刪除的元素的值 |
| shift() | 刪除數(shù)組的第一個元素,若是空數(shù)組則返回undefined,會修改原數(shù)組 | 返回第一個元素的值 |
注意: push() 和 unshift() 方法的返回值是新數(shù)組的長度,而 pop() 和 shift() 方法返回的是移出的數(shù)組元素
示例代碼:
// push
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.push('red'));// 返回的是數(shù)組長度 輸出結(jié)果為:5
console.log(arr); // 修改了原來的數(shù)組 輸出結(jié)果為['pink', 'black', 'white', 'yellow','red']
// unshift
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.unshift('red', 'blue'));// 返回的是數(shù)組長度 輸出結(jié)果為:6
console.log(arr);// 修改了原來的數(shù)組 輸出結(jié)果為['red', 'blue', 'pink', 'black','white', 'yellow']
// pop
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.pop());// 返回的是刪除的元素 輸出結(jié)果為:yellow
console.log(arr);// 修改了原來的數(shù)組 輸出結(jié)果為['pink', 'black', 'white']
// shift
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.shift());// 返回的是刪除的元素(第一個) 輸出結(jié)果為:pink
console.log(arr);// 修改了原來的數(shù)組 輸出結(jié)果為['pink', 'black', 'white']
3.【案例】篩選數(shù)組
案例需求:要求在包含工資的數(shù)組中,剔除工資達到2000或以上的數(shù)據(jù),把小于2000的數(shù)重新放 到新的數(shù)組里面。
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[i]);// 相當于:newArr[newArr.length] = arr[i];
}
}
console.log(newArr);//輸出結(jié)果:[1500,1200,1800]4.數(shù)組排序
JavaScript數(shù)組對象提供了數(shù)組排序的方法,可以實現(xiàn)數(shù)組元素排序或者顛倒數(shù)組元素的順序等。
| 方法名 | 功能描述 |
|---|---|
| reverse() | 顛倒數(shù)組中元素的位置,該方法會改變原數(shù)組,返回新數(shù)組 |
| sort() | 對數(shù)組的元素進行排序,該方法會改變原數(shù)組,返回新數(shù)組 |
示例代碼:
reverse
// reverse var arr = ['red', 'blue', 'green'] console.log(arr.reverse());//輸出的結(jié)果為:['green', 'blue', 'red'] console.log(arr);// 改變原數(shù)組['green', 'blue', 'red']
sort有兩種情況:
? 1.不傳參數(shù)
? 2.傳參數(shù):參數(shù)是用來指定按某種順序進行排列的函數(shù)即a和b是兩個將要被比較的元素
// sort: 如果調(diào)用該方法時沒有使用參數(shù),按照字符編碼的順序進行排序。
var arr1 = [1, 4, 5, 6, 73, 32, 22, 15];
// 不傳參數(shù)的情況
console.log(arr1.sort());//輸出的結(jié)果為:[1, 15, 22, 32, 4, 5, 6, 73]
// 傳參數(shù):參數(shù)是用來指定按某種順序進行排列的函數(shù)
/*即 a 和 b 是兩個將要被比較的元素*/
arr1.sort(function (a, b) {
// return b - a;//降序 // [73, 32, 22, 15, 6, 5, 4, 1]
return a - b;//升序 // [1, 4, 5, 6, 15, 22, 32, 73]
})
console.log(arr1);注意
- 需要注意的是:reverse()和sort()方法的返回值是排序后的數(shù)組
- sort 如果調(diào)用該方法時沒有使用參數(shù),按照字符編碼的順序進行排序
5.數(shù)組索引
在開發(fā)中,若要查找指定的元素在數(shù)組中的位置,可以利用Array對象提供的檢索方法。
| 方法 | 功能描述 |
|---|---|
| indexOf() | 返回在數(shù)組中可以找到給定值的第一個索引,如果不存在,則返回-1 |
| lastlndexOf() | 返回指定元素在數(shù)組中的最后一個的索引,如果不存在則返回-1 |
示例代碼:
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// 輸出結(jié)果為: 1
// 找到第二個bison的索引
console.log(beasts.indexOf('bison', 2));
// 輸出結(jié)果為: 4
console.log(beasts.indexOf('giraffe'));
// 輸出結(jié)果為: -16.【案例】數(shù)組去除重復(fù)元素
需求:要求在一組數(shù)據(jù)中,去除重復(fù)的元素
// 聲明數(shù)組
function unique(arr) {
var newArr = [];
// 遍歷數(shù)組
for (var i = 0; i < arr.length; i++) {
// 判斷新數(shù)組中是否有原數(shù)組中的元素
// indexOf 結(jié)果為-1表示沒有該元素
if (newArr.indexOf(arr[i]) === -1)
// 沒有的話就把該元素push到新數(shù)組中
newArr.push(arr[i])
}
}
return newArr;
}
// 調(diào)用數(shù)組
var res = unique([1, 2, 3, 4, 3, 2])
console.log(res);//輸出結(jié)果:[1,2,3,4]7. 數(shù)組轉(zhuǎn)換為字符串
在開發(fā)中,可以利用數(shù)組對象的join()和toString()方法,將數(shù)組轉(zhuǎn)換為字符串。
| 方法 | 功能描述 |
|---|---|
| toString() | 將數(shù)組轉(zhuǎn)換為字符串,逗號分隔每一項 |
| join('分隔符') | 將數(shù)組的所有元素連接到一個字符串中 |
toString()
// toString var arr = ['a', 'b', 'c'] console.log(arr.toString());// 輸出結(jié)果為:a,b,c
join
- 參數(shù)可選:指定一個字符串來分隔數(shù)組的每個元素
- 如果需要,將分隔符轉(zhuǎn)換為字符串()小括號里面填寫的是指定的分隔符
- 如果省略,數(shù)組元素用逗號(,)分隔。
- 如果 separator 是空字符串(''),則所有元素之間都沒有任何字符。
console.log(arr.join());// 輸出結(jié)果為:a,b,c
console.log(arr.join(''));// 輸出結(jié)果為:abc
console.log(arr.join('-'));// 輸出結(jié)果為:a-b-C8.其他方法
JavaScript還提供了很多其他常用的數(shù)組方法。例如,填充數(shù)組、連接數(shù)組、截取數(shù)組元素等。
| 方法 | 功能描述 |
|---|---|
| fill() | 用一個固定值填充數(shù)組中指定下標范圍內(nèi)的全部元素 |
| splice() | 通過刪除或替換現(xiàn)有元素或者原地添加新的元素來修改數(shù)組,返回被刪除項目的新數(shù)組 |
| slice() | 數(shù)組截取,參數(shù)為slice(begin, end),包含begin ,但不包含end ,返回被截取項目的新數(shù)組 |
| concat() | 連接兩個或多個數(shù)組,不影響原數(shù)組,返回一個新數(shù)組 |
fill()
- 參數(shù):value start end
- value:用來填充數(shù)組元素的值
- start:基于零的索引,從此開始填充,轉(zhuǎn)化為整數(shù)。
- end:基于零的索引,在此結(jié)束填充,轉(zhuǎn)換為整數(shù)。fill()填充到但不包含end索引。
// fill const array1 = [1, 2, 3, 4]; // 填充0,從數(shù)組索引2(包含)開始到4(不包含)結(jié)束 console.log(array1.fill(0, 2, 4)); // 輸出結(jié)果為: Array [1, 2, 0, 0] // 填充5,從數(shù)組索引1(包含)開始 console.log(array1.fill(5, 1)); // 輸出結(jié)果為: Array [1, 5, 5, 5] // 填充6 console.log(array1.fill(6)); // 輸出結(jié)果為: Array [6, 6, 6, 6]
splice
- 參數(shù):start deleteCount item1...
- start:執(zhí)行修改的開始位置(從0計數(shù))
- deleteCount:整數(shù),表示要移除的數(shù)組元素的個數(shù)
- item1:要添加進去數(shù)組的元素
// 從索引 2 的位置開始刪除 0 個元素,插入“drum” var myFish = ["小米", "小明", "小張", "小李"]; var removed = myFish.splice(2, 0, "小紅"); console.log(myFish); console.log(removed); // 運算后的 myFish: ["小米", "小明", "小紅", "小張", "小李"] // 被刪除的元素:[], 沒有元素被刪除 // 從索引 2 的位置開始刪除 0 個元素,插入“drum”和 "guitar" var myFish = ["小米", "小明", "小張", "小李"]; var removed = myFish.splice(2, 0, '小剛', '小蔡'); console.log(myFish); console.log(removed); // 運算后的 myFish: ["小米", "小明", "小剛", "小蔡", "小張", "小李"] // 被刪除的元素:[], 沒有元素被刪除 // 從索引 3 的位置開始刪除 1 個元素 var myFish = ["小米", "小明", "小剛", "小蔡", "小張", "小李"]; var removed = myFish.splice(3, 1); console.log(myFish); console.log(removed); // 運算后的 myFish: ['小米', '小明', '小剛', '小張', '小李'] // 被刪除的元素:['小蔡'] // 從索引 2 的位置開始刪除 1 個元素,插入“trumpet” var myFish = ["小米", "小明", "小剛", "小蔡", "小張", "小李"]; var removed = myFish.splice(2, 1, "小蘭"); console.log(myFish); console.log(removed); // 運算后的 myFish: ['小米', '小明', '小蘭', '小蔡', '小張', '小李'] // 被刪除的元素:["小剛"] // 從索引 0 的位置開始刪除 2 個元素,插入"parrot"、"anemone"和"blue" var myFish = ["小米", "小明", "小張", "小李"]; var removed = myFish.splice(0, 2, '小蘭', '小蔡', '小剛'); console.log(myFish); console.log(removed); // 運算后的 myFish: ['小蘭', '小蔡', '小剛', '小張', '小李'] // 被刪除的元素:['小米', '小明'] // 從索引 2 的位置開始刪除 2 個元素 var myFish = ['小蘭', '小蔡', '小剛', '小張', '小李']; var removed = myFish.splice(myFish.length - 3, 2); console.log(myFish); console.log(removed); // 運算后的 myFish: ['小蘭', '小蔡', '小李'] // 被刪除的元素: ['小蘭', '小蔡', '小李'] // 從索引 2 的位置開始刪除所有元素 var myFish = ['小蘭', '小蔡', '小剛', '小張', '小李']; var removed = myFish.splice(2); console.log(myFish); console.log(removed); // 運算后的 myFish: ['小蘭', '小蔡'] // 被刪除的元素:['小剛', '小張', '小李']
slice
- 參數(shù):begin end
- begin : 從該索引開始提取原數(shù)組元素(包含)
- end : 在該索引處結(jié)束提取原數(shù)組元素(不包含)
// 從索引 2 的位置開始截取 var array3 = ['小蘭', '小蔡', '小剛', '小張', '小李']; var getArr = array3.slice(2); console.log(array3); console.log(getArr); // 運算后的 array3:['小蘭', '小蔡', '小剛', '小張', '小李']; // 被截取的元素: ['小剛', '小張', '小李'] // 從索引 2 的位置開始 截取到 索引4 的位置(包含2 不包含4) var array3 = ['小蘭', '小蔡', '小剛', '小張', '小李']; var getArr = array3.slice(2, 4); console.log(array3); console.log(getArr); // 運算后的 array3:['小蘭', '小蔡', '小剛', '小張', '小李']; // 被截取的元素: ['小剛', '小張'] // 從索引 2 的位置開始 截取到 數(shù)組的倒數(shù)第一個元素(不包含) var array3 = ['小蘭', '小蔡', '小剛', '小張', '小李']; var getArr = array3.slice(2, -1); console.log(array3); console.log(getArr); // 運算后的 array3:['小蘭', '小蔡', '小剛', '小張', '小李']; // 被截取的元素: ['小剛', '小張'] // 截取后兩個元素 var array3 = ['小蘭', '小蔡', '小剛', '小張', '小李']; var getArr = array3.slice(-2); console.log(array3); console.log(getArr); // 運算后的 array3:['小蘭', '小蔡', '小剛', '小張', '小李']; // 被截取的元素: ['小張', '小李']
concat
// 連接兩個數(shù)組 const letters = ['a', 'b', 'c']; const numbers = [1, 2, 3]; const concatArr = letters.concat(numbers); console.log(letters);//['a', 'b', 'c'] console.log(concatArr);//['a', 'b', 'c', 1, 2, 3] // 連接三個數(shù)組 const num1 = [1, 2, 3]; const num2 = [4, 5, 6]; const num3 = [7, 8, 9]; const numArr = num1.concat(num2, num3); console.log(numArr);//[1, 2, 3, 4, 5, 6, 7, 8, 9] // 將值連接到數(shù)組 const arr1 = ['a', 'b', 'c']; const newArr1 = letters.concat(1, [2, 3]); console.log(newArr1);//['a', 'b', 'c', 1, 2, 3]
二、字符串對象
1.字符串使用
字符串對象使用new String()來創(chuàng)建,在String構(gòu)造函數(shù)中傳入字符串,這樣就會在返回的字符串對象中保存這個字符串。
var str = new String('送你一朵小紅花')
console.log(str)
console.log(str.length);//輸出結(jié)果為:7
// 看不到常見的屬性和方法
var str1 = '送你一朵小紅花'
console.log(str1)2.根據(jù)字符返回位置
字符串對象提供了用于檢索元素的屬性和方法,字符串對象的常用屬性和方法如下:
| 方法 | 功能描述 |
|---|---|
| indexOf(‘要查找的值’,開始的位置) | 返回指定內(nèi)容在原字符串中的位置, 如果找不到就返回 -1;開始的位置是index 索引號; 參數(shù)2可選,規(guī)定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數(shù),則將從字符串的首字符開始檢索。 |
| lastIndexOf(‘要查找的值’,開始的位置) | 從后往前找,只找第一個匹配的,如果沒有找到匹配字符串則返回 -1;參數(shù)2可選,規(guī)定在字符串中開始檢索的位置。它的合法取值是 0 到stringObject.length - 1。如省略該參數(shù),則將從字符串的最后一個字符處開始檢索。 |
示例代碼:
// indexOf:參數(shù)1:要搜索的子字符串;參數(shù)2:可選
var str = new String('送你一朵小紅花,送你一朵小紅花');
// 查找 花 首次出現(xiàn)的位置
var res = str.indexOf('花');
// 查找 花 從第七個位置查找 花 ,第一次出現(xiàn)的位置
var res2 = str.indexOf('花', 7);
console.log(str);
console.log(str.length);//7
console.log(res);//輸出結(jié)果:6
console.log(res2);//輸出結(jié)果:14
// lastIndexOf:參數(shù)1:要搜索的子字符串;參數(shù)2:可選
var str1 = new String('to be or not to be');
// 查找 e 從最后一個字符開始,第一次出現(xiàn)的位置
var res1 = str1.lastIndexOf('e');
// 查找 e 從第8個位置開始倒數(shù),第一次出現(xiàn)的位置
var res3 = str1.lastIndexOf('e', 8);
console.log(str1);
console.log(str1.length);//15
console.log(res1);//輸出結(jié)果:17
console.log(res3);//輸出結(jié)果:43.根據(jù)位置返回字符
字符串對象提供了用于獲取字符串中的某一個字符的方法。方法如下:
| 成員 | 作用 |
|---|---|
| charAt(index) | 獲取index位置的字符,位置從0開始計算 |
| charCodeAt(index) | 獲取index位置的字符的ASCII碼 |
| str[index] | 獲取指定位置處的字符(HTML5新增)和charAt等效 |
示例代碼:
// 獲取index位置的字符
console.log(str.charAt(0));//輸出的結(jié)果為;a
// 獲取index位置的字符的ASCII碼
console.log(str.charCodeAt(0));//輸出結(jié)果為:97(a的ASCII碼是97)
for (var i = 0; i < str.length; i++) {
// 獲取指定位置處的字符
console.log(str[i]);
}4.【案例】統(tǒng)計出現(xiàn)最多的字符和次數(shù)
案例需求:使用charAt()方法通過程序來統(tǒng)計字符串中出現(xiàn)最多的字符和次數(shù)。
for (var i = 0; i < str.length; i++) {
// 3. 利用chars保存字符串中的每一個字符
var chars = str.charAt(i);
console.log(chars);
// 4. 利用對象的屬性來方便查找元素
// obj[chars]獲取對象的屬性的屬性值
if (obj[chars] != true) {//如果沒有獲取到當前字符串,值為undefined(轉(zhuǎn)為布爾值為false)
obj[chars] = 1;//給當前對象的屬性對應(yīng)的屬性值賦值為1
} else {
obj[chars]++; //如果獲取到了當前字符串,即對應(yīng)的屬性值+1
}
}
console.log(obj);
// 2. 統(tǒng)計出現(xiàn)最多的字母
var max = 0; // 保存出現(xiàn)次數(shù)最大值
var maxStr = ''; // 保存出現(xiàn)次數(shù)最多的字符
// 2.1 遍歷對象的屬性和方法
for (var key in obj) {
// 2.2 將對象中屬性的值和max進行比較
if (obj[key] > max) {
max = obj[key];
maxStr = key
}
}
console.log('出現(xiàn)最多的字符是:' + maxStr + ' ,共出現(xiàn)了' + max + '次')5.字符串操作方法
字符串對象提供了一些用于截取字符串、連接字符串、替換字符串的屬性和方法。字符串對象的常用屬性和方法如下:
| 方法 | 作用 |
|---|---|
| concat(str1,str2, str3…) | concat() 方法用于連接兩個或多個字符串。拼接字符串,等效于+,+更常用該方法沒有改變原有字符串,會返回連接兩個或多個字符串新字符串。 |
| slice(start,[end]) | 截取從start位置到end(不包含end)位置之間的一個子字符串可提取字符串的某個部分,并以新的字符串返回被提取的部分 |
| substring(start[,end]) | 截取從start位置到end位置之間的一個子字符串,基本和slice相同,但是不接收負值 |
| substr(start[,length]) | 截取從start位置開始到length長度的子字符串從起始索引號提取字符串中指定數(shù)目的字符 |
| toLowerCase() | 獲取字符串的小寫形式 |
| toUpperCase() | 獲取字符串的大寫形式 |
| split([separator[,limit]) | 使用separator分隔符將字符串分隔成數(shù)組,limit用于限制數(shù)量可選。參數(shù)可指定返回的數(shù)組的最大長度。如果設(shè)置了該參數(shù),返回的子串不會多于這個參數(shù)指定的數(shù)組。如果沒有設(shè)置該參數(shù),整個字符串都會被分割,不考慮它的長度。 |
| replace(str1,str2) | 使用str2替換字符串中的str1,返回替換結(jié)果,只會替換第一個字符 |
示例代碼:
var str = 'HelloWord';
// concat
var res = str.concat('!!');
console.log(res);//HelloWord!!
// slice
var res1 = str.slice(1, 5);
console.log(res1); //ello
// substring
var res2 = str.substring(3);//截取從下標為3開始,之后的內(nèi)容
console.log(res2);//loWord
var res3 = str.substring(3, 7);//截取從下標為3開始,到7結(jié)束的內(nèi)容(不包含7)
console.log(res3);//loWo
// substr
var res4 = str.substr(2, 5);
console.log(res4);//lloWo
// toLowerCase
var res5 = str.toLocaleLowerCase();
console.log(res5);//helloword
// toUpperCase
var res6 = str.toLocaleUpperCase();
console.log(res6);//HELLOWORD
// split
var str1 = 'How are you doing today?'
var res7 = str1.split(' ');
console.log(res7);// ['How', 'are', 'you', 'doing', 'today?']
var res8 = str1.split();
console.log(res8);//['How are you doing today?']
var res9 = str1.split(' ', 3);
console.log(res9);// ['How', 'are', 'you']
// replace
var res10 = str1.replace(' ', ',');
console.log(res10);//How,are you doing today?6.【案例】判斷用戶名是否合法
案例需求:用戶名長度在3~10范圍內(nèi),不能出現(xiàn)敏感詞admin的任何大小寫形式。
var res = prompt('請您輸入用戶名')
if (res.length < 3 || res.length > 10) {
alert('用戶名長度為3—10位,請您重新輸入')
} else if (res.toLocaleLowerCase().indexOf('admin') != -1 ||
res.toUpperCase().indexOf('admin') != -1) {
alert('不能出現(xiàn)敏感詞admin')
} else {
alert('恭喜您,該用戶名可以使用');
}以上就是一文詳解JavaScript數(shù)組對象和字符串對象的詳細內(nèi)容,更多關(guān)于JavaScript數(shù)組和字符串對象的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
獲取JS中網(wǎng)頁各種高寬與位置的方法總結(jié)
本文詳細羅列了如何在javascript獲取網(wǎng)頁各種高寬及位置,內(nèi)容比較全面,有需要的可以參考一下。2016-07-07
javascript瀏覽器窗口之間傳遞數(shù)據(jù)的方法
這篇文章主要介紹了javascript瀏覽器窗口之間傳遞數(shù)據(jù)的方法,實例分析了父窗口與子窗口之間傳遞參數(shù)的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
js和jquery判斷數(shù)據(jù)類型的4種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于js和jquery判斷數(shù)據(jù)類型的4種方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
JavaScript實現(xiàn)飛機大戰(zhàn)游戲
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)飛機大戰(zhàn)游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09
JavaScript Canvas繪制動態(tài)線框效果
這篇文章主要為大家詳細介紹了JavaScript Canvas繪制動態(tài)線框效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08

