数组对象的作用就是使用一个变量存储一系列值。
假如你有一些数据,分别是语文课本、数学课本、英语课本等,如果你要为每个课本分配一个变量,就得需要三个变量。如果你的数据很多,可能需要大量的变量,此时就可以考虑使用数组来存储这些数据。
声明数组有三种方式
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]; // BYDcars[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 - aindex:1 - bindex:2 - cindex: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); // truearr1.includes(3,2); // truearr1.includes(3,3); // falsearr1.includes(3,-1); // falsearr1.includes(3,-3); // true
indexOf() - 搜索数组中的元素,并返回它所在的位置。
语法:array.indexOf(item,start)
返回值:元素所在位置下标,如果没有找到返回-1。
var arr1 = ['a','b','c','d','c','e','f'];arr1.indexOf('c'); // 2arr1.indexOf('c',3); // 4arr1.indexOf('a',3); // -1
isArray() - 判断对象是否为数组。如果对象是数组返回 true,否则返回 false。
语法:Array.isArray(obj)
返回值:Boolean
Array.isArray([1,3,4]); // trueArray.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; // 0t.next().value; // 1t.next().value; // 2
lastIndexOf() - 搜索数组中的元素,并返回它最后出现的位置。此函数与indexOf()对应。
语法:array.lastIndexOf(item,start)
item必须,要查找的元素
start可选,从下标start开始查找
var arr1 = ['a','b','c','d','c','e','f'];arr1.lastIndexOf('c'); // 4arr1.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(); // darr1; // ["aa", "bb", "cc"]
push() - 向数组的末尾添加一个或更多元素,并返回新的长度。
语法:array.push(item1, item2, ..., itemX)
返回值:返回新数组长度
var arr1 = [1,2];arr1.push('a','e',4,6); // 6arr1; // [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(); // aarr1.shift(); // carr1.shift(); // 2arr1.shift(); // truearr1.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); // truevar 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'); // 4arr1; // ["b", "d", "c", "a"]
valueOf() - 返回数组对象的原始值。
勤学苦练,笨鸟先飞。关注【老徐WEB前端开发教程】公众号,听老徐说。