900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 老徐WEB:js入门学习 - javascript对象之Array对象

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

时间:2022-01-31 14:50:11

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。