javascript Array
1. Properties
-
Array.length
var arr = ["apple","juice "]; arr.length; // 2
-
Array.prototype
Array.prototype是Array的原型,你可以在上面添加新的方法,所有的Array实例都会继承新添加方法。
if(!Array.prototype.first){ Array.prototype.first = function(){ return this[0]; } } var arr = [1,2,3]; arr.first = 1;
2. Methods
-
Array.from(arrayLike, mapFn?)
Array.from()会从array-like or iterable object中创建一个新的数组实例。
mapFn: 可选,可调用数组中每一个元素array-like: 类数组
具有length和index的对象.iterable object: 可迭代对象
可以循环获取对象里面值的对象,例如:Map和Set-
从字符串中获取数组
Array.from("echo"); //["e","c","h","o"]
拓展
把字符串转成数组
"echo".split(""); -
从数组中拷贝数组
var arr = [1,2,3]; var fromArr = Array.from(arr); arr; //[1,2,3] fromArr; //[1,2,3]
再看:
var arr = [1,{a: 1}]; var fromArr = Array.from(arr); fromArr[1].a = 2; arr; //[ 1, { a: 2 } ] fromArr; //[ 1, { a: 2 } ]
发现了吗?
Array.from()是从数组中浅拷贝一个数组出来。
想了解更多深拷贝和浅拷贝的东东?请狠狠的戳这里👇
从Set中获取一个数组
const set = new Set([1,2,2,3]); Array.from(set); //[1,2,3]
Set数据结构介绍👇
- 从Map中获取一个数组
var m = new Map([[1, 2], [2, 4], [4, 8]]); Array.from(m); // [[1, 2], [2, 4], [4, 8]]
Map数据结构介绍👇
- 从类数组中获取一个数组
function f() { return Array.from(arguments); } f(1,2); //[1,2]
拓展
把类数组转成数组
function f() {
return [].slice.call(arguments);
}
f(1,2); //[1,2]- mapFn的应用
Array.from([1,2,3], x => x * x); //[1,4,9] Array.from({length: 5}, (item, index) => index); //[0,1,2,3,4]
-
-
Array.isArray()
Array.isArray() 用于确定传递的值是否是一个 Array。
Array.isArray([1,2,3]); //true Array.isArray({a: 1}); //false
-
Array.of()
Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
Array.of(1,2,3); //[1,2,3] Array.of(undefined); //[undefined] Array.of({a: 2}); //[{a: 2}]
3. prototype
-
Array.prototype.concat()
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是浅复制一个新数组。
连接两个数组
var alpha = ['a', 'b', 'c']; var numeric = [1, 2, 3]; alpha.concat(numeric); // result in ['a', 'b', 'c', 1, 2, 3]
连接三个数组
var num1 = [1, 2, 3], num2 = [4, 5, 6], num3 = [7, 8, 9]; var nums = num1.concat(num2, num3); console.log(nums); // results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
-
Array.prototype.copyWithin(target, start, end)
copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小。
说明:
1.把序列号为[start, end)的值拷贝到序列号为target的位置,而不改变原数组大小。 2.start省略后默认为0,为负数时从尾部计算。 3.end省略后为arrauy.length,为负数时从尾部计算。
示例:
[1, 2, 3, 4, 5].copyWithin(-2); // [1, 2, 3, 1, 2] [1, 2, 3, 4, 5].copyWithin(0, 3); // [4, 5, 3, 4, 5] [1, 2, 3, 4, 5].copyWithin(0, 3, 4); // [4, 2, 3, 4, 5] [1, 2, 3, 4, 5].copyWithin(-2, -3, -1); // [1, 2, 3, 3, 4]
-
Array.prototype.every(fn)
对一个数组里所有的值进行检测,全部通过返回true,否则返回false.
说明:
1.fn(element, index, every)
示例:
let arr = [12, 14, 5, 39]; function testArr(item, index, array){ return item > 10; } function testItem(item, index, array){ return item > 3; } console.log( arr.every(testArr) ); //false console.log( arr.every(testItem) ); //true console.log( arr.every(x => x > 1) ); //true
-
Array.prototype.fill(value, strat? end?)
说明:
1.start可选,默认值为0.如果为负数,则从尾部开始。 2.end可选,默认值为Array.length,则从尾部开始。
示例:
[1, 2, 3].fill(4); // [4, 4, 4] [1, 2, 3].fill(4, 1); // [1, 4, 4] [1, 2, 3].fill(4, 1, 2); // [1, 4, 3] [1, 2, 3].fill(4, 1, 1); // [1, 2, 3] [1, 2, 3].fill(4, -3, -2); // [4, 2, 3] [1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3] Array(3).fill(4); // [4, 4, 4] [].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}
-
Array.prototype.filter()
入口:
callback(item, index, array, thisArg?) item: 当前元素 index: 当前元素的序列号 array: 当前作用的数组 thisArg: 回掉函数中的this指向,如果未设置,则指向undefined
出口:
返回一个包含匹配元素的数组
示例:
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; const filterItems = (query) => { return fruits.filter((el) => el.toLowerCase().indexOf(query.toLowerCase()) > -1 ); } console.log(filterItems('ap')); // ['apple', 'grapes'] console.log(filterItems('an')); // ['banana', 'mango', 'orange']
-
Array.prototype.find()
入口:
callback(item, index, array, thisArg?) item: 当前元素 index: 当前元素的序列号 array: 当前作用的数组 thisArg: 回掉函数中的this指向,如果未设置,则指向undefined
出口:
放回第一个匹配到的元素,如果不存在,返回undefined.
示例:
var inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; function findCherries(fruit) { return fruit.name === 'cherries'; } console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
-
Array.prototype.findIndex()
入口:
callback(item, index, array, thisArg?) item: 当前元素 index: 当前元素的序列号 array: 当前作用的数组 thisArg: 回掉函数中的this指向,如果未设置,则指向undefined
出口:
放回第一个匹配到的元素的序列号,如果不存在,返回undefined.
示例:
function isBigEnough(element) { return element >= 15; } [12, 5, 8, 130, 44].findIndex(isBigEnough); // index of 4th element in the Array is returned, // so this will result in '3'
-
Array.prototype.forEach()
入口:
callback(item, index, array, thisArg?) item: 当前元素 index: 当前元素的序列号 array: 当前作用的数组 thisArg: 回掉函数中的this指向,如果未设置,则指向undefined
操作:
对数组中每一个元素执行一次函数操作。
示例:
const arr = ['a', 'b', 'c']; arr.forEach(function(element) { console.log(element); }); // a // b // c
-
Array.prototype.includes(searchItem, startIndex?)
入口:
searchItem: 需要搜索的目标元素 startIndex: 开始的位置
出口:
如果搜索到有目标元素,返回true,否则,返回false.
示例:
var a = [1, 2, 3]; a.includes(2); // true a.includes(4); // false