数组是一种线性表数据结构。它用一组连续的内存空间,来存储一组具有相同类型的数据。
数组的存储方式为连续的内存空间,那么几句可以通过下面的方式, a[i]_address = base_address + i * data_type_size 复制代码实现高效的数组随机访问。中间操作就没那么高效了,因为要在中间的位置删除一个元素的话,后面的元素就都要向前移动一位,插入也是同样。下面具体来看一下JS数组。 创建数组的方式
使用Array构造函数
let colors1 = new Array(); let colors2 = new Array(20);//创建length为20的数组 let colors3 = new Array('red', 'yellow', 'blue'); //以参数中的值来构建数组 使用数组字面量表示法
let colors = ["red", "green"]; let values = [1,2,];//强烈不建议这样使用,这位这样可能会创建一个包含2或3项的数组 //在IE8以及更早的版本中,第三个值undefined,其他浏览器只包含1,2的数组 复制代码在使用数组字面量表示法的时候,不会调用Array构造函数(Firefox 3及更早版本除外)
使用Array.of方法将一组值,转为数组。
Array.of(3,11,8) // [3,11,8] Array.of(3) // [3] 复制代码数组的length属性 这个属性不是只读的,可以设置这个属性,从数组的末尾移除或想数组中添加新项。 let colors = ['red','yellow', 'blue']; colors.length = 2; console.log(colors[2]) //undefined;
colors = ['red','yellow', 'blue']; colors.length = 4; console.log(colors[3]) // undefined;
colors = ['red','yellow', 'blue']; colors[colors.length] = 'green';//位置3添加一种颜色 colors[colors.length] = 'brown';//位置4添加一种颜色
对于一个网页或一个全局全局作用域而言,使用instanceof就能搞定。
value instanceof Array 如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的Array构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与第二个框架中原生创建的数组分别具有各自不同的构造函数。为了解决这个问题新增了Array.isArray方法,该方法目的是确定某个值是不是数组,而不管它到底在哪个全局执行环境中创建的。
Array.isArray(value)
if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === '[object Array]'; }; } // 也可以用这个方法检测数组,该方法不能检测非原生构造函数的构造函数名
toLocaleString()、toString()、valueOf()方法。其中toString()方法会返回由数组中每个值的字符串拼接而成的一个以逗号分隔的字符串,而调用valueOf()返回的还是数组。
let colors = ['red','yellow', 'blue'];
colors.toString() // red,blue,green colors.valueOf() //['red','yellow', 'blue'] colors.toLocaleString() //['red','yellow', 'blue']
console.log(colors.toString()) // red,blue,green alert(colors.valueOf()) // red,blue,green console.log(colors.toLocaleString()) // red,blue,green 复制代码alert里面调用valueOf返回了字符串是因为alert要接受字符串参数,所以隐式调用了toString。toLocaleString表示在特定语言环境下的表示字符串,新的 locales 和 options 参数让应用程序可以指定要进行格式转换的语言,并且定制函数的行为,通常返回与toString相同的值。
join()方法可以使用不同的分隔符,来构建这个字符串。
let colors = ['red','yellow', 'blue']; console.log(colors.join('|')) // "red|yellow|blue" Array.from方法用于将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)的对象
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 };
// ES5的写法 var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.from([1, 2, 3]) // [1, 2, 3] 如果参数是一个真数组,会返回一个一摸一样的新数组 该方法还接受第二个参数,(可选的)返回对数组每一项处理的结果,和(可选的)运行该函数的作用域对象--影响this的值 Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9] 类似栈的方法
push(推入):可以接受任意数量的参数,然后返回修改后的数组的长度。 pop(弹出): 可以从数组的末尾移除最后一项,减少数组的长度,返回删除的项。
类似队列的方法
shift: 移除数组中的第一项,并返回该项,同时使数组长度减1。 unshift: 在数组前端添加任意个元素,并返回数组的长度。 shift结合push,unshift结合pop可以像队列一样使用数组。
重排序方法
reverse顾名思义,就是反转数组项的顺序,并返回排序后的数组; sort排序数组的方法,默认情况下,按照升序排列数组项,调用每个数组项的toString()方法,然后比较得到的字符串,确定如何排序。也可以接受一个函数。返排序后的数组。
[1,5,2,4,3].sort((prev,next)=>{ if(prev < next){ return -1 //返回负数,保持原位。 }else if(prev > next){ return 1 //返回正数,交换位置。 }else{ return 0 //返回负数,保持原位。 } })
concat()这个方法会先创建当前数组的一个副本,然后将接受到的参数添加到这个副本的末尾,最后返回数新构建的数组。
let colors1 = ['red','yellow', 'blue']; let colors2 = colors1.concat('white', ['black', 'green']); console.log(colors1)//["red", "yellow", "blue"] console.log(colors2)//["red", "yellow", "blue", "white", "black", "green"]
slice()基于当前数组中的一个或多个项创建一个新数组,接受一或两个参数,既要返回的起始和结束位置。不会改变原数组。
let colors1 = ['red','yellow', 'blue']; let colors2 = colors1.slice(0); let colors3 = colors1.slice(0, 1); console.log(colors2)//['red','yellow', 'blue']; console.log(colors3)//['red']; console.log(colors1 == colors2) //false
splice()方法
删除
let color = ["red","green","blue"]; let removed = color.splice(0,1); console.log(color); //["green","blue"] console.log(removed);//["red"]
插入
removed = color.splice(1,0,"yellow","orange"); console.log(removed);//[] console.log(color);//["green", "yellow", "orange", "blue"]
替换
removed = color.splice(1,1,"red","purple"); console.log(removed);//["yellow"] console.log(color);//["green", "red", "purple", "orange", "blue"] 复制代码第一个参数起始位置,第二参数删除几个,第三个参数要插入的任意项。splice返回的是删除的项组成的数组,没有则返回空。
copyWithin()方法将指定位置的成员复制到其他位置(会覆盖原有成员)。