JavaScript 深入学习之Array

数组 是内存里一块连续的存储区域,可以通过指针(下标)查找该块区域内的所有元素。

JavaScript Array 对象是用于构造数组的全局对象; 它是高阶的、类似于列表的对象。

虽然 ECMAScript 数组与其他语言中的数组都是数据的有序列表,但与其他语言不同的是,ECMAScript 数组的每一项可以保存任何类型不定长的数据。

数组的初始化方式:

// Array 构造函数
var colors = new Array(20); // 创建一个长度为20的数组,每个元素的默认值为undefined
var colors = new Array("red", "blue", "green"); // 长度为3的数组,元素分别为"red","blue","green"
// 当向构造函数里传入一个数字2时,意思为创建一个长度为2、初始值为undefined的数组,
// 如果是一个字符串"string",意思是创建一个长度为1,第一个元素为"string"的数组


// 字面量
var colors = ["a", "b", "c"]; 
var nums = [1] // 创建一个长度为1的数组,且第一个元素为1
// 因为JavaScript的数组元素是动态可变的,所以当只定义长度时,数组元素的初始值为undefined,如果是Java

Array的方法:

Array.from(arrayLike, mapFn, thisArg)

方法从一个类似数组或可迭代对象中创建一个新的数组实例

  • arrayLike (想要转换成数组的伪数组对象可迭代对象
    • 维数组对象:dom中的类数组的节点集合
    • 可迭代对象:字符串、ES6新增的Map、Set、String,或者函数的内置属性argument
  • mapFn (可选参数) 如果指定了该参数,新数组中的每个元素会执行该回调函数
    • mapFn方法参数和map()方法相同map(function(item, index, arr){})
  • thisArg (可选参数) 可选参数,执行回调函数 mapFn 时 this 对象
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

var Uli = document.querySelectorAll('li');
var aLi = Array.from(Uli)
console.log(aLi)
console.log(Array.isArray(Uli))
console.log(Array.isArray(aLi))

这里写图片描述

经过Array.from()方法后,dom的元素数组成了真正的数组对象。


Array.isArray(obj)

用于确定传递的值是否是一个 Array
- obj 需要检测的值
- 返回值为true或者false


Array.of(element0[, element1[, …[, elementN]]])

方法创建一个具有可变数量参数的新数组实例,传入的参数为需要添加进数组的元素。

  • elementN 任意个参数,将按顺序成为返回数组中的元素。
  • 新的 Array 实例。
console.log(Array.of(1))
console.log(Array.of(1, '1', {a: 1}))

这里写图片描述

与构造函数new Array() 不同的是,当传入一个数字时,
构造函数是创建当前数字长度的数组,初始值为undefined,
Array.of()把当前数字作为数组的第一个元素


concat(value1[, value2[, …[, valueN]]])

用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

  • 参数的顺序依次是该参数的数组该参数的元素或者参数本身,例如:arr1.concat(‘ele1’, arr2)
  • 该方法对参数内引用类型元素进行浅拷贝,对字符串、数字进行深拷贝
// 以下日志实在断点情况下打印出来的,如果没有断点,计算机运行速度太快看不出来
var arr1 = [1, 2, {index: 1,name: 'hello'}]
var arr2 = [1, 'nihao']
var newArr = arr1.concat(arr2)
console.log(newArr)
arr1[2].index = 2
arr1[0] = 11
console.log(newArr)

concat浅拷贝引用类型参数


slice(beginIndex, endIndex)

方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象,原数组不会被修改

  • beginIndex, 从该所引处开始提取数组元素,默认从0开始;如果该值为负数,则从数组倒数第一个(从-1开始)开始查找
  • endIndex,在该处停止提取数组元素(不提取该下标元素);如果该值为负数,则到数组倒数第n个数停止提取;如果不填,或者大于数组长度-1,则提取全部。
// 日志截图是在断点情况下打印,非断点下没有影响
var arr1 = [1, 2, {index: 1,name: 'hello'}, 'string1']
var arr2 = arr1.slice(1, -1)
console.log(arr2)
arr1[2].name = 'world'
console.log(arr2)

这里写图片描述


splice(beginIndex, deleteCount, item1, item2, …)

通过删除现有元素和/或添加新元素来更改一个数组的内容,修改的是当前数组,返回值为被删除的数组。

  • beginIndex
    • 开始删除的索引下标,默认从零开始;
    • 如果该值大于(数组长度-1),则从数组最后添加;
    • 如果该值为负值,表明从倒数第n个开始删除;
  • deleteCount 要删除的元素个数
    • 如果该值被省略,则一直删除到数组尾;
    • 如果该值为0,则不删除
  • items 需要添加的元素
var arr1 = [1, 2, {index: 1,name: 'hello'}, 'string1', 'world']
var arr2 = arr1.splice(1, 9, 'newitem1', 'newitem2')
console.log(arr1)
console.log(arr2)

这里写图片描述

猜你喜欢

转载自blog.csdn.net/a562550212/article/details/78796049