Penjelasan terperinci tentang kemahiran object_javascript Array JavaScript-tutorial js-php.cn

Artikel ini memperkenalkan objek tatasusunan JS, kandungan khusus adalah seperti berikut

Daftar Kandungan
1. Pengenalan: Memperkenalkan penerangan, kaedah definisi dan sifat objek tatasusunan.

2. Kaedah contoh: Memperkenalkan kaedah contoh objek Array: concat, every, filter, forEach, indexOf, join, lastIndexOf, map, pop, push, reverse, shift, slice, sort, splice, toString, tounshift, dll.

3. Kaedah statik: Memperkenalkan kaedah statik objek Array: Array.isArray().

4. Operasi praktikal: Lakukan operasi sampel pada Array: pengindeksan, untuk traversal, salinan cetek, salinan dalam dan operasi lain.

1. Pengenalan
1.1 Penerangan

Tatasusunan ialah koleksi nilai tersusun. Setiap nilai dipanggil elemen, dan setiap elemen mempunyai kedudukan dalam tatasusunan, diwakili oleh nombor, dipanggil indeks. Tatasusunan JavaScript tidak ditaip: elemen tatasusunan boleh terdiri daripada sebarang jenis, dan elemen yang berbeza dalam tatasusunan yang sama mungkin mempunyai jenis yang berbeza. --"Panduan Definitif untuk JavaScript (Edisi Keenam)"

1.2 Definisi

var names = new Array("张三", "李四", "王五");
//或者
var names = ["张三", "李四", "王五"];

Salin selepas log masuk

1.3 Sifat

panjang: Menunjukkan panjang elemen dalam tatasusunan.

2. Kaedah Instance
Kaedah biasa:

1) unshift(): Masukkan elemen di kepala tatasusunan

2) shift(): Alih keluar dan kembalikan elemen pertama tatasusunan

3) push(): Masukkan elemen di hujung tatasusunan

4) pop(): Alih keluar dan kembalikan elemen terakhir tatasusunan

2.1 concat(): Sambungkan elemen ke tatasusunan. Tatasusunan asal tidak akan diubah suai dan tatasusunan baharu akan dikembalikan

Parameter:

①nilai1,nilai2....nilaiN: sebarang bilangan nilai

Nilai pulangan:

{Array} Tatasusunan baharu, yang mengandungi Tatasusunan asal dan elemen yang baru ditambah.

Contoh:

var demoArray = ['a', 'b', 'c'];
var demoArray2 = demoArray.concat('e');
console.log(demoArray); // => demoArray:['a','b','c'] 原数组不发生变更
console.log(demoArray2); // => ['a','b','c','e']

Salin selepas log masuk

2.2 every(): Lintas unsur dalam urutan dan tentukan sama ada setiap elemen adalah benar

Parameter:

①fungsi(nilai,indeks,diri){}: Setiap elemen akan menggunakan fungsi ini untuk menentukan sama ada ia benar Apabila seseorang ditentukan sebagai palsu, traversal akan tamat serta-merta.

Nilai: elemen traversal tatasusunan

Indeks: nombor unsur

Diri: Susunan sendiri

Nilai pulangan:

{Boolean}: Mengembalikan benar hanya jika setiap elemen adalah benar;

Contoh:

var demoArray = [1, 2, 3];
var rs = demoArray.every(function (value, index, self) {
 return value > 0;
});
console.log(rs); // => true

Salin selepas log masuk

2.3 penapis(): Lintas unsur dalam urutan dan kembalikan tatasusunan baharu yang mengandungi unsur yang memenuhi syarat

Parameter:

①function(value,index,self){}: Panggil fungsi ini pada setiap elemen secara bergilir-gilir dan kembalikan tatasusunan baharu yang mengandungi elemen yang memenuhi syarat.

Nilai: elemen traversal tatasusunan

Indeks: nombor unsur

Diri: Susunan sendiri

Nilai pulangan:

{Array} Tatasusunan baharu yang mengandungi elemen yang memenuhi kriteria

Contoh:

var demoArray = [1, 2, 3];
var rs = demoArray.filter(function (value, index, self) {
 return value > 0;
});
console.log(rs); // => [1, 2, 3]

Salin selepas log masuk

2.4 forEach(): Lintas elemen dalam urutan dan laksanakan fungsi yang ditentukan;

Parameter:

①fungsi(nilai,indeks,diri){}: Panggil fungsi ini untuk setiap elemen secara bergilir

Nilai: elemen traversal tatasusunan

Indeks: nombor unsur

Diri: Susunan sendiri

Nilai pulangan: Tiada

Contoh:

var demoArray = [1, 2, 3];
demoArray.forEach(function (value, index, self) {
 console.log(value); // => 依次输出：1 2 3
});

Salin selepas log masuk

2.5 indexOf(): Cari elemen padanan dalam tatasusunan. Jika tiada unsur padanan, -1 dikembalikan. Gunakan operator "===" semasa mencari, jadi anda perlu membezakan antara 1 dan '1'

Parameter:

①nilai: Nilai untuk ditemui dalam tatasusunan.

②mula: Kedudukan nombor siri untuk mula mencari. Jika ditinggalkan, ia akan menjadi 0.

Nilai pulangan:

{Int}: Mengembalikan nombor siri nilai padanan pertama dalam tatasusunan Jika ia tidak wujud, mengembalikan -1

Contoh:

['a', 'b', 'c'].indexOf('a'); // =>0
['a', 'b', 'c'].indexOf('a', 1); // =>-1
['a', 'b', 'c'].indexOf('d'); // =>-1
[1, 2, 3].indexOf('1'); // => -1 ：采用的'==='匹配方式

Salin selepas log masuk

2.6 join(): Sambung semua elemen dalam tatasusunan menjadi rentetan melalui pembatas

Parameter:

①sparator {String}: Pemisah antara setiap elemen Jika diabaikan, ia akan dipisahkan dengan koma Inggeris ',' secara lalai.

Nilai pulangan:

{String}: Setiap elemen disambung ke dalam rentetan dengan sparator sebagai pemisah.

Contoh:

['a', 'b', 'c'].join(); // => 'a,b,c'
['a', 'b', 'c'].join('-'); // => 'a-b-c'

Salin selepas log masuk

2.7 lastIndexOf: Cari elemen padanan dalam arah songsang dalam tatasusunan. Jika tiada unsur padanan, -1 dikembalikan. Gunakan operator "===" semasa mencari, jadi anda perlu membezakan antara 1 dan '1'

Parameter:

①nilai: Nilai untuk ditemui dalam tatasusunan.

②mula: Kedudukan nombor siri untuk mula mencari Jika ditinggalkan, carian akan bermula dari elemen terakhir.

Nilai pulangan:

{Int}: Cari nombor jujukan nilai padanan pertama dalam tatasusunan dari kanan ke kiri Jika ia tidak wujud, kembalikan -1

Contoh:

['a', 'b', 'c'].lastIndexOf('a'); // => 0
['a', 'b', 'c'].lastIndexOf('a', 1); // => 0
['a', 'b', 'c'].lastIndexOf('d'); // => -1
[1, 2, 3].lastIndexOf('1'); // => -1 ：采用的'==='匹配方式

Salin selepas log masuk

2.8 map() ：依次遍历并计算每个元素，返回计算好的元素的数组

参数：

①function(value,index,self){} ：每个元素依次调用此函数，返回计算好的元素

　　value ：数组遍历的元素

　　index ：元素序号

　　self ：Array本身

返回值：

{Array} 一个包含就算好的元素的新的数组

示例：

[1, 2, 3].map(function (value, index, self) {
 return value * 2;
}); // => [2, 4, 6]

Salin selepas log masuk

2.9 pop() ：移除并返回数组的最后一个元素

参数：无

返回值：

{Object} 数组的最后一个元素；若数组为空，返回undefined

示例：

var demoArray = ['a', 'b', 'c'];
demoArray.pop(); // => c
demoArray.pop(); // => b
demoArray.pop(); // => a
demoArray.pop(); // => undefined

Salin selepas log masuk

2.10 push() ：把元素添加到数组尾部

参数：

①value1,value2.....valueN ：任意多个值添加到数组尾部

返回值：

{int} 数组新的长度

示例：

var demoArray = ['a', 'b', 'c'];
demoArray.push('d'); // => 4, demoArray ： ['a', 'b', 'c', 'd']
demoArray.push('e', 'f'); // => 6, demoArray ：['a', 'b', 'c', 'd', 'e', 'f']
console.log(demoArray); // => ['a', 'b', 'c', 'd', 'e', 'f']

Salin selepas log masuk

2.11 reverse() ：反转数组元素的顺序

参数：无

返回值：无(在原数组内进行元素顺序反转)。

示例：

var demoArray = ['a', 'b', 'c', 'd', 'e'];
demoArray.reverse();
console.log(demoArray); // => ["e", "d", "c", "b", "a"]

Salin selepas log masuk

2.12 shift() ：移除并返回数组的第一个元素

参数：无

返回值：

{Object} 数组的第一个元素；若数组为空，返回undefined。

示例：

var demoArray = ['a', 'b', 'c'];
demoArray.shift(); // => a
demoArray.shift(); // => b
demoArray.shift(); // => c
demoArray.shift(); // => undefined

Salin selepas log masuk

2.13 slice(startIndex,endIndex) ：返回数组的一部分

参数：

①startIndex ：开始处的序号；若为负数，表示从尾部开始计算，-1代表最后一个元素，-2倒数第二个，依此类推。

②endIndex ：结束处的元素后一个序号，没指定就是结尾。截取的元素不包含此处序号的元素，结尾为此处序号的前一个元素。

返回值：

{Array} 一个新的数组，包含从startIndex到endIndex前一个元素的所有元素。

示例：

[1, 2, 3, 4, 5, 6].slice(); // => [1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6].slice(1); // => [2, 3, 4, 5, 6] ：从序号1开始截取
[1, 2, 3, 4, 5, 6].slice(0, 4); // => [1, 2, 3, 4] ：截取序号0到序号3(序号4的前一个)的元素
[1, 2, 3, 4, 5, 6].slice(-2); // => [5, 6] ：截取后面的2个元素

Salin selepas log masuk

2.14 sort(opt_orderFunc) ：按一定的规则进行排序

参数：

①opt_orderFunc(v1,v2) {Function}：可选的排序规则函数。若省略，将按照元素的字母进行从小到大排序。

　　v1 ：遍历时前面的元素。

　　v2 ：遍历时后面的元素。

排序规则：

比较v1和v2，返回一个数字来表示v1和v2的排序规则：

小于0 ：v1小于v2，v1排在v2的前面。

等于0 ：v1等于v2，v1排在v2的前面。

大于0 ：v1大于v2，v1排在v2的后面。

返回值：无(在原先数组里进行排序操作)。

示例：

[1, 3, 5, 2, 4, 11, 22].sort(); // => [1, 11, 2, 22, 3, 4, 5] ：这里都元素都被转换为字符，11的字符在2前
 
[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
 return v1 - v2;
}); // => [1, 2, 3, 4, 5, 11, 22] ：从小到大排序
 
[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
 return -(v1 - v2); //取反，就可以转换为 从大到小
}); // => [22, 11, 5, 4, 3, 2, 1]

Salin selepas log masuk

2.15 splice() ：插入、删除数组元素

参数：

①start {int} ：开始插入、删除或替换的起始序号。

②deleteCount {int} ：要删除元素的个数，从start处开始计算。

③value1,value2 ... valueN {Object} ：可选参数，表示要插入的元素，从start处开始插入。若②参不为0，那么先执行删除操作，再执行插入操作。

返回值：

{Array} 返回一个包含删除元素的新的数组。若②参为0，表示没元素删除，返回一个空数组。

示例：

// 1.删除
var demoArray = ['a', 'b', 'c', 'd', 'e'];
var demoArray2 = demoArray.splice(0, 2); // 删除从序号从0开始的2个元素，返回包含删除元素的数组：['a', 'b']
console.log(demoArray2); // => ['a', 'b']
console.log(demoArray); // => ['c', 'd', 'e']
 
// 2.插入
var demoArray = ['a', 'b', 'c', 'd', 'e'];
var demoArray2 = demoArray.splice(0, 0, '1', '2', '3'); // ②参为0，返回空数组
console.log(demoArray2); // => [ ]
console.log(demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e']
 
// 3.先删除再插入
var demoArray = ['a', 'b', 'c', 'd', 'e'];
// 当②参不为0，那么先执行删除操作(删除序号从0开始的4个元素，返回包含被删除元素的数组)，再执行插入操作
var demoArray2 = demoArray.splice(0, 4, '1', '2', '3');
console.log(demoArray2); // => ['a', 'b', 'c', 'd'] 
console.log(demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e']

Salin selepas log masuk

2.16 toString() ：将数组中所有元素通过一个英文逗号','拼接为一个字符串

参数：无

返回值：

{String} 数组中所有元素通过一个英文逗号','拼接为一个字符串，并返回。与调用无参join()方法一样。

示例：

[1, 2, 3, 4, 5].toString(); // => '1,2,3,4,5'
['a', 'b', 'c', 'd', 'e'].toString(); // => 'a,b,c,d,e'

Salin selepas log masuk

2.17 unshift() ：在数组头部插入元素

参数：

①value1,value2.....valueN ：任意多个值添加到数组头部

返回值：

{int} 数组新的长度

示例：

var demoArray = [];
demoArray.unshift('a'); // => demoArray:['a']
demoArray.unshift('b'); // => demoArray:['b', 'a']
demoArray.unshift('c'); // => demoArray:['c', 'b', 'a']
demoArray.unshift('d'); // => demoArray:['d', 'c', 'b', 'a']
demoArray.unshift('e'); // => demoArray:['e', 'd', 'c', 'b', 'a']

Salin selepas log masuk

三. 静态方法
3.1 Array.isArray() ：判断对象是否为数组

参数：

①value {Object}：任意对象

返回值：

{Boolean} 返回判断结果。当为 true时，表示对象为数组；为false时，表示对象不是数组

示例：

Array.isArray([]); // => true
Array.isArray(['a', 'b', 'c']); // => true
Array.isArray('a'); // => false
Array.isArray('[1, 2, 3]'); // => false

Salin selepas log masuk

四. 实际操作
4.1 索引

说明：每个元素在数组中有一个位置，以数字表示，称为索引。索引是从0开始计，即第一个元素的索引为0，第二个元素的索引为1，依此类推；

当获取一个数组不存在的索引时，返回 undefined。

示例：

var demoArray = ['a', 'b', 'c', 'd', 'e'];
demoArray[0]; // => 获取第一个元素:'a'
demoArray[0] = 1; // 设置第一个元素为 1
console.log(demoArray); // => demoArray:[1, 'b', 'c', 'd', 'e']
console.log(demoArray[9]); // => undefined ：当获取的索引不存在时，返回 undefined

Salin selepas log masuk

4.2 for 语句

说明：可以通过for语句逐个遍历数组

示例：

var demoArray = ['a', 'b', 'c', 'd', 'e'];
for (var i = 0, length = demoArray.length; i < length; i++) {
 console.log(demoArray[i]); // => 逐个输出数组内的元素
}

Salin selepas log masuk

4.3 浅度复制

说明：Array类型是一种引用类型；当数组a复制给数组b时，对数组b进行元素修改，数组a也会发生修改。

示例：

var demoArrayA = ['a', 'b', 'c', 'd', 'e'];
var demoArrayB = demoArrayA; // 把数组A 赋值给数组B
demoArrayB[0] = 1; // 对数组B 的元素进行修改
console.log(demoArrayA); // => [1, 'b', 'c', 'd', 'e']：数组A 的元素也发生了变更

Salin selepas log masuk

4.4 深度复制

说明：使用concat()方法，返回新的数组；防止浅度复制的情况发生，对数组b进行元素修改操作，数组a不发生变更。

示例：

var demoArrayA = ['a', 'b', 'c', 'd', 'e'];
var demoArrayB = demoArrayA.concat(); // 使用concat()方法，返回新的数组
demoArrayB[0] = 1; // 对数组B 的元素进行修改
console.log(demoArrayA); // => ['a', 'b', 'c', 'd', 'e']：数组A 的元素没变更
console.log(demoArrayB); // => [ 1, 'b', 'c', 'd', 'e']：数组B 的元素发生了变更

Salin selepas log masuk

4.5 判断2个数组是否相等

说明：Array数组为引用类型，所以哪怕 []===[] 都会返回false，所以可通过数组toString()方法返回的字符串判断是否相等。

示例：

console.log([]===[]); // => false
console.log(['a', 'b'] === ['a', 'b']); // => false
console.log(['a', 'b'].toString() === ['a', 'b'].toString()); // true

Salin selepas log masuk

以上就是本文的全部内容，希望对大家学习javascript Array对象有所帮助。