老徐WEB：js入门学习 - javascript对象之Array对象

比眉伴天荒 2023-02-15 10:08 25阅读 0赞

数组对象的作用就是使用一个变量存储一系列值。

假如你有一些数据，分别是语文课本、数学课本、英语课本等，如果你要为每个课本分配一个变量，就得需要三个变量。如果你的数据很多，可能需要大量的变量，此时就可以考虑使用数组来存储这些数据。

--------------------

声明数组有三种方式

1.用new创建数组对象

var cars = new Array();
    cars[0] = 'BYD';
    cars[1] = 'geely';
    cars[2] = 'roewe';

2.简洁方式

var cars = new Array('BYD','geely','roewe');

3.字面量方式

var cars = ['BYD','geely','roewe'];

通过数字下标访问数组元素，下标从0开始。

cars[0]; // BYD
    cars[2]; // roewe

同时也可以通过下标来修改数组元素。

cars[2] = 'changan';

数组也可以存储数组、对象、函数。

var myArr = new Array();
    myArr[0] = Date.now;
    myArr[1] = myFunction;
    myArr[2] = cars;

--------------------

数组对象的属性  
constructor - 返回创建数组对象的原型函数  
length - 设置或返回数组元素的个数  
prototype - 允许你向数组对象添加属性或方法

--------------------

数组对象的方法

concat() - 连接两个或更多的数组，并返回结果。如果连接的不是数组，而是字符串、数字等，会把参数直接添加到数组里，并返回。

语法：array.concat(array1,array2...)。  
返回值：Array。

var arr1 = ['a','b','c'];
    var arr2 = ['A','B','C'];
    var arr3 = ['AA','BB','CC'];
    arr1.concat(arr2,arr3); // ["a", "b", "c", "A", "B", "C", "AA", "BB", "CC"]
    var str1 = 'xyz';
    arr1.concat(str1); // ["a", "b", "c", "xyz"]
    var n1 = 123; // ["a", "b", "c", 123]

copyWithin() - 从数组的指定位置拷贝元素到数组的另一个指定位置中。此方法会修改当前数据。

语法：array.copyWithin(target,start,end)。  
target：从数组的当前下标开始替换。  
start：从数组当前下标开始复制。  
end：复制到当前下标之前。默认是arr.length，负数就是倒着数。  
返回值：Array

var arr = ['a','b','c','d','e','f','g'];
    arr.copyWithin(3,0,2); // 从数据下标为3的元素开始替换，复制内容是从下标为0的元素开始，到下标为2的元素之前。最后返回["a", "b", "c", "a", "b", "f", "g"]

entries() - 返回数组的可迭代对象。  
语法：array.entries()。  
返回值：数组迭代对象

var arr2 = ['A','B','C'];
    var arr22 = arr2.entryes();
    for(i of arr22){
        console.log(i);
    }

every() - 检测数组元素的每个元素是否都符合条件。如果都符合条件，返回true，否则返回false。  
every()的参数一般是函数。  
语法：array.every(func)。  
返回值：Boolean

var score = [76,52,68,90];
    function checkScore(n){
        return n >= 60;
    }
    score.every(checkScore); // false

fill() - 使用一个固定值来填充数组。  
array.fill(value, start, end)。  
varlue是需要填充的值。  
start是开始填充的数组下标。  
end是填充到此下标前一个元素。  
返回值：Array

var arr1 = ['a','b','c'];
    arr1.fill('A');
    console.log(arr1);//['A','A','A']
    
    var arr1 = ['a','b','c','d'];
    arr1.fill('A',2);
    console.log(arr1);//["a", "b", "A", "A"]
    
    var arr1 = ['a','b','c','d'];
    arr1.fill('A',1,3);
    console.log(arr1);//["a", "A", "A", "d"]
    
    var arr1 = ['a','b','c','d'];
    arr1.fill('A',1,-1);
    console.log(arr1);//["a", "A", "A", "d"]

filter() - 检测数值元素，并返回符合条件所有元素的数组。  
语法：array.filter(func)。  
返回值：Array

var score = [76,52,68,90];
    function checkScore(n){
        return n >= 60;
    }
    score.filter(checkScore); // [76, 68, 90]

find() - 返回符合传入测试（函数）条件的第一个数组元素。  
语法：array.find(func)。  
返回值：符合检测条件的第一个数组元素。

var score = [76,52,68,90];
    function checkScore(n){
        return n >= 60;
    }
    score.find(checkScore);//76

findIndex() - 返回符合传入测试（函数）条件的数组元素索引。  
语法：array.findIndex(func)。  
返回值：符合检测条件的第一个数组元素的下标。

var score = [76,52,68,90];
    function checkScore(n){
        return n >= 60;
    }
    score.findIndex(checkScore); // 下标0

forEach() - 数组每个元素都执行一次回调函数。  
语法：array.forEach(function(currentValue, index, arr), thisValue)

function test(val,i){
        console.log('index:'+i+' - '+val);
    }
    
    var arr1 = ['a','b','c','d'];
    arr1.forEach(test); // 输出index:0 - a
    index:1 - b
    index:2 - c
    index:3 - d

from() - 通过给定的对象中创建一个数组。  
语法：Array.from(object, mapFunction, thisValue)  
object必须，需要转换成数组的对象。  
mapFunction可选，数组中每个元素要调用的函数。  
thisValue可选，映射函数(mapFunction)中的 this 对象。  
返回值：数组

var str = 'abc';
    Array.from(str); // ["a", "b", "c"]
    
    Array.from([1,2,3],function(x){return x*2}); // [2, 4, 6]
    
    Array.from([1,2,3],x=>x*2); // [2, 4, 6]

includes() - 判断一个数组是否包含一个指定的值，如果是返回 true，否则false。  
语法：array.includes(searchElement),  
array.includes(searchElement,fromIndex)  
返回值：Boolean

var arr1 = [1,2,3,4,5];
    arr1.includes(3); // true
    arr1.includes(3,2); // true
    arr1.includes(3,3); // false
    arr1.includes(3,-1); // false
    arr1.includes(3,-3); // true

indexOf() - 搜索数组中的元素，并返回它所在的位置。  
语法：array.indexOf(item,start)  
返回值：元素所在位置下标，如果没有找到返回-1。

var arr1 = ['a','b','c','d','c','e','f'];
    arr1.indexOf('c'); // 2
    arr1.indexOf('c',3); // 4
    arr1.indexOf('a',3); // -1

isArray() - 判断对象是否为数组。如果对象是数组返回 true，否则返回 false。  
语法：Array.isArray(obj)  
返回值：Boolean

Array.isArray([1,3,4]); // true
    Array.isArray('abc'); // false

join() - 通过分隔符把数组的所有元素连接成一个字符串。  
语法：array.join(separator)  
返回值：String

var arr1 = ['a','b','c'];
    arr1.join(' # '); // "a # b # c"

keys() - 返回数组的可迭代对象，包含原始数组的键(key)。  
语法：array.keys()

var t = ['b','e','f'].keys();
    t.next().value; // 0
    t.next().value; // 1
    t.next().value; // 2

lastIndexOf() - 搜索数组中的元素，并返回它最后出现的位置。此函数与indexOf()对应。  
语法：array.lastIndexOf(item,start)  
item必须，要查找的元素  
start可选，从下标start开始查找

var arr1 = ['a','b','c','d','c','e','f'];
    arr1.lastIndexOf('c'); // 4
    arr1.lastIndexOf('e'); // 5

map() - 通过指定函数处理数组的每个元素，并返回处理后的数组。  
语法：array.map(function(currentValue,index,arr), thisValue)  
function必须，  
currentValue必须，  
index可选  
arr可选

function test(val){
        return val * 2;
    }
    var arr1 = [2,3,5,6];
    arr1.map(test); // [4, 6, 10, 12]

pop() - 删除数组的最后一个元素并返回删除的元素。  
语法：array.pop()

var arr1 = ['aa','bb','cc','d'];
    arr1.pop(); // d
    arr1; // ["aa", "bb", "cc"]

push() - 向数组的末尾添加一个或更多元素，并返回新的长度。  
语法：array.push(item1, item2, ..., itemX)  
返回值：返回新数组长度

var arr1 = [1,2];
    arr1.push('a','e',4,6); // 6
    arr1; // [1, 2, "a", "e", 4, 6]

reduce() - 将数组元素计算为一个值（从左到右）。  
语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

function test(total,num){
        return total + num;
    }
    var arr1 = [2,3,5,6];
    arr1.reduce(test,0); // 16

reduceRight() - 将数组元素计算为一个值（从右到左）。  
语法：array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

function test(total,num){
        return total - num;
    }
    var arr1 = [2,3,10,50];
    arr1.reduceRight(test); // 35

reverse() - 反转数组的元素顺序，改变了原来的数组。  
语法：array.reverse()  
返回值：返回顺序颠倒后的数组。

var arr1 = ['a','b','c','d'];
    arr1.reverse(); // ["d", "c", "b", "a"]
    arr1; // ["d", "c", "b", "a"]

shift() - 删除并返回数组的第一个元素。  
语法：array.shift()  
返回值：任何类型

var arr1 = ['a','c',2,true,null];
    arr1.shift(); // a
    arr1.shift(); // c
    arr1.shift(); // 2
    arr1.shift(); // true
    arr1.shift(); // null

slice() - 选取数组的的一部分，并返回一个新数组。  
语法：array.slice(start, end)  
返回值：数组，不包含end下标的元素

var arr1 = ['a','b','c','d','e'];
    arr1.slice(1,3); // ["b", "c"]
    arr1.slice(1,-1); // ["b", "c", "d"]
    arr1.slice(-3,-1); // ["c", "d"]

some() - 检测数组元素中是否有元素符合指定条件。  
some() 方法会依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。  
语法：array.some(function(currentValue,index,arr),thisValue)  
返回值：Boolean

function test(num){
        return num > 20;
    }
    var arr1 = [2,3,10,50];
    arr1.some(test); // true
    
    var arr1 = [2,3,10,15];
    arr1.some(test); // false

sort() - 对数组的元素进行排序，改变原来的数组。  
语法：array.sort(sortfunction)  
返回值：数组

var arr1 = [3,5,6,1,8,2];
    arr1.sort(); // [1, 2, 3, 5, 6, 8]
    arr1; // [1, 2, 3, 5, 6, 8]

splice() - 从数组中添加或删除元素。  
语法：array.splice(index,howmany,item1,.....,itemX)  
返回值：返回删除元素组成的数组，如果没有删除元素，则返回空数组。

var arr1 = ['a','b','c'];
    arr1.splice(1); // ["b", "c"]
    arr1; // ["a"]
    arr1.splice(0,1,'b','c','d','a'); // ["a"]
    arr1; // ["b", "c", "d", "a"]

toString() - 把数组转换为字符串，并返回结果。  
语法：array.toString()  
返回值：String

var arr1 = ['a','b','c'];
    arr1.toString(); // "a,b,c"

unshift() - 向数组的开头添加一个或更多元素，并返回新的长度。  
语法：array.unshift(item1,item2, ..., itemX)  
返回值：新数组长度

var arr1 = ['a'];
    arr1.unshift('b','d','c'); // 4
    arr1; // ["b", "d", "c", "a"]

valueOf() - 返回数组对象的原始值。

勤学苦练，笨鸟先飞。关注【老徐WEB前端开发教程】公众号，听老徐说。