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

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

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

---

声明数组有三种方式

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前端开发教程】公众号，听老徐说。