JavaScript數(shù)組對(duì)象和字符串對(duì)象怎么創(chuàng)建

本文小編為大家詳細(xì)介紹“JavaScript數(shù)組對(duì)象和字符串對(duì)象怎么創(chuàng)建”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JavaScript數(shù)組對(duì)象和字符串對(duì)象怎么創(chuàng)建”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

一、數(shù)組對(duì)象

JavaScript 中的數(shù)組對(duì)象可以使用 newArray 或字面量 "[]" 來(lái)創(chuàng)。

1.數(shù)組類型檢測(cè)

數(shù)組類型檢測(cè)有兩種常用的方式，分別是使用instanceof運(yùn)算符和使用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

在上述代碼中，如果檢測(cè)結(jié)果為true，表示給定的變量是一個(gè)數(shù)組，如果檢測(cè)結(jié)果為false，則表示給定的變量不是數(shù)組。

2.添加或刪除數(shù)組元素

JavaScript數(shù)組對(duì)象提供了添加或刪除元素的方法，可以實(shí)現(xiàn)在數(shù)組的末尾或開(kāi)頭添加新的數(shù)組元 素，或在數(shù)組的末尾或開(kāi)頭移出數(shù)組元素。

方法如下：

注意： push() 和 unshift() 方法的返回值是新數(shù)組的長(zhǎng)度，而 pop() 和 shift() 方法返回的是移出的數(shù)組元素

示例代碼：

// push
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.push('red'));// 返回的是數(shù)組長(zhǎng)度 輸出結(jié)果為：5
console.log(arr); // 修改了原來(lái)的數(shù)組 輸出結(jié)果為['pink', 'black', 'white', 'yellow','red']

// unshift
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.unshift('red', 'blue'));// 返回的是數(shù)組長(zhǎng)度 輸出結(jié)果為：6
console.log(arr);// 修改了原來(lái)的數(shù)組 輸出結(jié)果為['red', 'blue', 'pink', 'black','white', 'yellow']

// pop
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.pop());// 返回的是刪除的元素 輸出結(jié)果為：yellow
console.log(arr);// 修改了原來(lái)的數(shù)組 輸出結(jié)果為['pink', 'black', 'white']

// shift
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.shift());// 返回的是刪除的元素(第一個(gè)) 輸出結(jié)果為：pink
console.log(arr);// 修改了原來(lái)的數(shù)組 輸出結(jié)果為['pink', 'black', 'white']

3.【案例】篩選數(shù)組

案例需求：要求在包含工資的數(shù)組中，剔除工資達(dá)到2000或以上的數(shù)據(jù)，把小于2000的數(shù)重新放 到新的數(shù)組里面。

var newArr = [];
for (var i = 0; i < arr.length; i++) {
	if (arr[i] < 2000) {
		newArr.push(arr[i]);// 相當(dāng)于：newArr[newArr.length] = arr[i];
	}
}
console.log(newArr);//輸出結(jié)果:[1500,1200,1800]

4.數(shù)組排序

JavaScript數(shù)組對(duì)象提供了數(shù)組排序的方法，可以實(shí)現(xiàn)數(shù)組元素排序或者顛倒數(shù)組元素的順序等。

示例代碼：

reverse

// reverse

var arr = ['red', 'blue', 'green']
console.log(arr.reverse());//輸出的結(jié)果為：['green', 'blue', 'red']
console.log(arr);// 改變?cè)瓟?shù)組['green', 'blue', 'red']

sort有兩種情況:
1.不傳參數(shù)
2.傳參數(shù):參數(shù)是用來(lái)指定按某種順序進(jìn)行排列的函數(shù)即a和b是兩個(gè)將要被比較的元素

// sort: 如果調(diào)用該方法時(shí)沒(méi)有使用參數(shù)，按照字符編碼的順序進(jìn)行排序。
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ù)是用來(lái)指定按某種順序進(jìn)行排列的函數(shù)
/*即 a 和 b 是兩個(gè)將要被比較的元素*/

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í)沒(méi)有使用參數(shù)，按照字符編碼的順序進(jìn)行排序

5.數(shù)組索引

在開(kāi)發(fā)中，若要查找指定的元素在數(shù)組中的位置，可以利用Array對(duì)象提供的檢索方法。

示例代碼:

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// 輸出結(jié)果為： 1
// 找到第二個(gè)bison的索引
console.log(beasts.indexOf('bison', 2));
// 輸出結(jié)果為： 4
console.log(beasts.indexOf('giraffe'));
// 輸出結(jié)果為： -1

6.【案例】數(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表示沒(méi)有該元素
        if (newArr.indexOf(arr[i]) === -1) 
        // 沒(méi)有的話就把該元素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)換為字符串

在開(kāi)發(fā)中，可以利用數(shù)組對(duì)象的join()和toString()方法，將數(shù)組轉(zhuǎn)換為字符串。

 toString()

// toString
var arr = ['a', 'b', 'c']
console.log(arr.toString());// 輸出結(jié)果為:a,b,c

join

• 參數(shù)可選:指定一個(gè)字符串來(lái)分隔數(shù)組的每個(gè)元素

• 如果需要，將分隔符轉(zhuǎn)換為字符串()小括號(hào)里面填寫(xiě)的是指定的分隔符

• 如果省略，數(shù)組元素用逗號(hào)（,）分隔。

• 如果 separator 是空字符串（''），則所有元素之間都沒(méi)有任何字符。

console.log(arr.join());// 輸出結(jié)果為:a,b,c
console.log(arr.join(''));// 輸出結(jié)果為:abc
console.log(arr.join('-'));// 輸出結(jié)果為:a-b-C

8.其他方法

JavaScript還提供了很多其他常用的數(shù)組方法。例如，填充數(shù)組、連接數(shù)組、截取數(shù)組元素等。

fill()

• 參數(shù):value start end

• value:用來(lái)填充數(shù)組元素的值

• start:基于零的索引，從此開(kāi)始填充，轉(zhuǎn)化為整數(shù)。

• end:基于零的索引，在此結(jié)束填充，轉(zhuǎn)換為整數(shù)。fill()填充到但不包含end索引。

// fill
const array1 = [1, 2, 3, 4];
// 填充0,從數(shù)組索引2(包含)開(kāi)始到4(不包含)結(jié)束

console.log(array1.fill(0, 2, 4));
// 輸出結(jié)果為： Array [1, 2, 0, 0]

// 填充5,從數(shù)組索引1(包含)開(kāi)始
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í)行修改的開(kāi)始位置(從0計(jì)數(shù))

• deleteCount:整數(shù),表示要移除的數(shù)組元素的個(gè)數(shù)

• item1:要添加進(jìn)去數(shù)組的元素

// 從索引 2 的位置開(kāi)始刪除 0 個(gè)元素，插入“drum”
var myFish = ["小米", "小明", "小張", "小李"];
var removed = myFish.splice(2, 0, "小紅");
console.log(myFish);
console.log(removed);
// 運(yùn)算后的 myFish: ["小米", "小明", "小紅", "小張", "小李"]
// 被刪除的元素：[], 沒(méi)有元素被刪除

// 從索引 2 的位置開(kāi)始刪除 0 個(gè)元素，插入“drum”和 "guitar"
var myFish = ["小米", "小明", "小張", "小李"];
var removed = myFish.splice(2, 0, '小剛', '小蔡');
console.log(myFish);
console.log(removed);
// 運(yùn)算后的 myFish: ["小米", "小明", "小剛", "小蔡", "小張", "小李"]
// 被刪除的元素：[], 沒(méi)有元素被刪除

// 從索引 3 的位置開(kāi)始刪除 1 個(gè)元素
var myFish = ["小米", "小明", "小剛", "小蔡", "小張", "小李"];
var removed = myFish.splice(3, 1);
console.log(myFish);
console.log(removed);
// 運(yùn)算后的 myFish: ['小米', '小明', '小剛', '小張', '小李']
// 被刪除的元素：['小蔡']

// 從索引 2 的位置開(kāi)始刪除 1 個(gè)元素，插入“trumpet”
var myFish = ["小米", "小明", "小剛", "小蔡", "小張", "小李"];
var removed = myFish.splice(2, 1, "小蘭");
console.log(myFish);
console.log(removed);
// 運(yùn)算后的 myFish: ['小米', '小明', '小蘭', '小蔡', '小張', '小李']
// 被刪除的元素：["小剛"]

// 從索引 0 的位置開(kāi)始刪除 2 個(gè)元素，插入"parrot"、"anemone"和"blue"
var myFish = ["小米", "小明", "小張", "小李"];
var removed = myFish.splice(0, 2, '小蘭', '小蔡', '小剛');
console.log(myFish);
console.log(removed);
// 運(yùn)算后的 myFish: ['小蘭', '小蔡', '小剛', '小張', '小李']
// 被刪除的元素：['小米', '小明']

// 從索引 2 的位置開(kāi)始刪除 2 個(gè)元素
var myFish = ['小蘭', '小蔡', '小剛', '小張', '小李'];
var removed = myFish.splice(myFish.length - 3, 2);
console.log(myFish);
console.log(removed);
// 運(yùn)算后的 myFish: ['小蘭', '小蔡', '小李']
// 被刪除的元素： ['小蘭', '小蔡', '小李']

// 從索引 2 的位置開(kāi)始刪除所有元素
var myFish = ['小蘭', '小蔡', '小剛', '小張', '小李'];
var removed = myFish.splice(2);
console.log(myFish);
console.log(removed);
// 運(yùn)算后的 myFish: ['小蘭', '小蔡']
// 被刪除的元素：['小剛', '小張', '小李']

slice

• 參數(shù):begin end

• begin : 從該索引開(kāi)始提取原數(shù)組元素(包含)

• end : 在該索引處結(jié)束提取原數(shù)組元素(不包含)

// 從索引 2 的位置開(kāi)始截取
var array3 = ['小蘭', '小蔡', '小剛', '小張', '小李'];
var getArr = array3.slice(2);
console.log(array3);
console.log(getArr);
// 運(yùn)算后的 array3:['小蘭', '小蔡', '小剛', '小張', '小李'];
// 被截取的元素: ['小剛', '小張', '小李']

// 從索引 2 的位置開(kāi)始 截取到 索引4 的位置(包含2 不包含4)
var array3 = ['小蘭', '小蔡', '小剛', '小張', '小李'];
var getArr = array3.slice(2, 4);
console.log(array3);
console.log(getArr);
// 運(yùn)算后的 array3:['小蘭', '小蔡', '小剛', '小張', '小李'];
// 被截取的元素: ['小剛', '小張']

// 從索引 2 的位置開(kāi)始 截取到 數(shù)組的倒數(shù)第一個(gè)元素(不包含)
var array3 = ['小蘭', '小蔡', '小剛', '小張', '小李'];
var getArr = array3.slice(2, -1);
console.log(array3);
console.log(getArr);
// 運(yùn)算后的 array3:['小蘭', '小蔡', '小剛', '小張', '小李'];
// 被截取的元素: ['小剛', '小張']

// 截取后兩個(gè)元素
var array3 = ['小蘭', '小蔡', '小剛', '小張', '小李'];
var getArr = array3.slice(-2);
console.log(array3);
console.log(getArr);
// 運(yùn)算后的 array3:['小蘭', '小蔡', '小剛', '小張', '小李'];
// 被截取的元素: ['小張', '小李']

concat

// 連接兩個(gè)數(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]

// 連接三個(gè)數(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]

二、字符串對(duì)象

1.字符串使用

字符串對(duì)象使用new String()來(lái)創(chuàng)建，在String構(gòu)造函數(shù)中傳入字符串，這樣就會(huì)在返回的字符串對(duì)象中保存這個(gè)字符串。

var str = new String('送你一朵小紅花')

console.log(str)

console.log(str.length);//輸出結(jié)果為：7

// 看不到常見(jiàn)的屬性和方法

var str1 = '送你一朵小紅花'

console.log(str1)

2.根據(jù)字符返回位置

字符串對(duì)象提供了用于檢索元素的屬性和方法，字符串對(duì)象的常用屬性和方法如下：

示例代碼：

// indexOf：參數(shù)1：要搜索的子字符串；參數(shù)2：可選
var str = new String('送你一朵小紅花，送你一朵小紅花');
// 查找 花 首次出現(xiàn)的位置
var res = str.indexOf('花');
// 查找 花 從第七個(gè)位置查找 花 ，第一次出現(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 從最后一個(gè)字符開(kāi)始，第一次出現(xiàn)的位置
var res1 = str1.lastIndexOf('e');
// 查找 e 從第8個(gè)位置開(kāi)始倒數(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é)果：4

3.根據(jù)位置返回字符

字符串對(duì)象提供了用于獲取字符串中的某一個(gè)字符的方法。方法如下：

示例代碼：

// 獲取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)計(jì)出現(xiàn)最多的字符和次數(shù)

案例需求：使用charAt()方法通過(guò)程序來(lái)統(tǒng)計(jì)字符串中出現(xiàn)最多的字符和次數(shù)。

for (var i = 0; i < str.length; i++) {

// 3. 利用chars保存字符串中的每一個(gè)字符
var chars = str.charAt(i);
console.log(chars);

// 4. 利用對(duì)象的屬性來(lái)方便查找元素

// obj[chars]獲取對(duì)象的屬性的屬性值
if (obj[chars] != true) {//如果沒(méi)有獲取到當(dāng)前字符串，值為undefined（轉(zhuǎn)為布爾值為false）
obj[chars] = 1;//給當(dāng)前對(duì)象的屬性對(duì)應(yīng)的屬性值賦值為1
} else {
obj[chars]++; //如果獲取到了當(dāng)前字符串，即對(duì)應(yīng)的屬性值+1
    }
}
console.log(obj);

// 2. 統(tǒng)計(jì)出現(xiàn)最多的字母
var max = 0; // 保存出現(xiàn)次數(shù)最大值
var maxStr = ''; // 保存出現(xiàn)次數(shù)最多的字符

// 2.1 遍歷對(duì)象的屬性和方法
for (var key in obj) {

// 2.2 將對(duì)象中屬性的值和max進(jìn)行比較
if (obj[key] > max) {
max = obj[key];
maxStr = key
    }
}
console.log('出現(xiàn)最多的字符是：' + maxStr + ' ，共出現(xiàn)了' + max + '次')

5.字符串操作方法

字符串對(duì)象提供了一些用于截取字符串、連接字符串、替換字符串的屬性和方法。字符串對(duì)象的常用屬性和方法如下：

示例代碼：

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);//截取從下標(biāo)為3開(kāi)始，之后的內(nèi)容
console.log(res2);//loWord
var res3 = str.substring(3, 7);//截取從下標(biāo)為3開(kāi)始，到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.【案例】判斷用戶名是否合法

案例需求：用戶名長(zhǎng)度在3~10范圍內(nèi)，不能出現(xiàn)敏感詞admin的任何大小寫(xiě)形式。

var res = prompt('請(qǐng)您輸入用戶名')
if (res.length < 3 || res.length > 10) {
alert('用戶名長(zhǎng)度為3—10位，請(qǐng)您重新輸入')
} else if (res.toLocaleLowerCase().indexOf('admin') != -1 ||
res.toUpperCase().indexOf('admin') != -1) {
alert('不能出現(xiàn)敏感詞admin')
} else {
alert('恭喜您，該用戶名可以使用');
}

讀到這里，這篇“JavaScript數(shù)組對(duì)象和字符串對(duì)象怎么創(chuàng)建”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。