JavaScr...

JavascriptArray

2019-08-16  本文已影响0人  Allenem

JavaScript Array

CONTENT

Ⅰ.Attributes of Array Object (3)

属性 描述
constructor 返回创建数组对象的原型函数。
length 设置或返回数组元素的个数。
prototype 允许你向数组对象添加属性或方法。

Ⅱ.Methods of Array Object (30)

方法 描述
concat() 连接两个或更多的数组,并返回结果。
copyWith() 从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries() 返回数组的可迭代对象。
keys() 返回数组的可迭代对象,包含原始数组的键(key)。
every() 检测数值元素的每个元素是否都符合条件。
some() 检测数组元素中是否有元素符合指定条件。
fill() 使用一个固定值来填充数组。
filter() 检测数值元素,并返回符合条件所有元素的数组。
find() 返回符合传入测试(函数)条件的数组元素。
findIndex() 返回符合传入测试(函数)条件的数组元素索引。
forEach() 数组每个元素都执行一次回调函数。
map() 通过指定函数处理数组的每个元素,并返回处理后的数组。
from() 通过给定的对象中创建一个数组。
includes() 判断一个数组是否包含一个指定的值。
indexOf() 搜索数组中的元素,并返回它所在的位置。
lastIndexOf() 搜索数组中的元素,并返回它最后出现的位置。
isArray() 判断对象是否为数组。
join() 把数组的所有元素放入一个字符串。
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
pop() 删除数组的最后一个元素并返回删除的元素。
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
shift() 删除并返回数组的第一个元素。
reduce() 将数组元素计算为一个值(从左到右)。
reduceRight() 将数组元素计算为一个值(从右到左)。
reverse() 反转数组的元素顺序。
sort() 对数组的元素进行排序。
toString()&toLocaleString() 把数组转换为字符串,并返回结果。
valueOf() 返回数组对象的原始值。
slice() 选取数组的的一部分,并返回一个新数组。
splice() 从数组中添加或删除元素。

Ⅰ.Attributes of Array Object

1.constructor

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.constructor);  // ƒ Array() { [native code] }

array.constructor 返回创建数组对象的原型函数。

2.length

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.length);  // 4

array.length 设置或返回数组元素的个数。

3.prototype

Array.prototype.myUcase=function()
{
    for (i=0;i<this.length;i++)
    {
        this[i]=this[i].toUpperCase();
    }
}

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.myUcase();
console.log(fruits);  // ["BANANA", "ORANGE", "APPLE", "MANGO"]

Array.prototype.…… 允许你向数组对象添加属性或方法。

Ⅱ.Methods of Array Object

1.concat()

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
console.log(hege,children);  
// hege: ["Cecilie", "Lone"] 
// children: ["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin"]

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

var a = [1, 2, 3];
a.concat(4, 5);           // 返回[1, 2, 3, 4, 5]
a.concat([4,5])           // 返回[1, 2, 3, 4, 5]
a.concat([4,5],[6,7])     // 返回[1, 2, 3, 4, 5, 6, 7]
a.concat(4, [5,[6,7]])    // 返回[1, 2, 3, 4, 5, [6,7] ]

创建并返回一个新数组,它的元素包括调用 concat() 的原始数组的元素和 concat() 的每个参数。如果这些参数中的任何一个自身是数组,则连接的是数组的元素,而非数组本身。但要注意,concat() 不会递归扁平化数组的数组。

PS.一道面试题:传递两个参数m,n,返回长度为m,所有元素都为n的数组,要求不能用循环。利用函数的递归和 concat() 方法可以实现,代码如下:

function fn(m, n) {
 return m ? fn(m - 1, n).concat(n) : [];
}

语法

array1.concat(array2,array3,...,arrayX)

参数

参数 描述
array2, array3, ..., arrayX 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。

2.copyWith()

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
console.log(fruits.copyWithin(2,0,2));  // ["Banana", "Orange", "Banana", "Orange", "Kiwi", "Papaya"]

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中,返回新数组,数组长度不变。

语法

array.copyWithin(target, start, end)

参数

参数 描述
target 必需。复制到指定目标索引位置。
start 可选。元素复制的起始位置。
end 可选。停止复制的索引位置 (默认为 array.length),即不包含这一位。如果为负值,表示倒数。

3.entries()

4.keys()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.entries();
console.log(x);                       // Array Iterator {}
console.log(x.next().value);          // [0, "Banana"]
console.log(x.next().value);          // [1, "Orange"]
console.log(x.next().value);          // [2, "Apple"]
console.log(x.next().value);          // [3, "Mango"]
console.log(x.next().value);          // undefined
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.keys();
console.log(x);                       // Array Iterator {}
console.log(x.next().value);          // 0
console.log(x.next().value);          // 1
console.log(x.next().value);          // 2
console.log(x.next().value);          // 3
console.log(x.next().value);          // undefined
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.entries();
console.log(x);                       // Array Iterator {}
console.log(x.next());                // {value: Array(2), done: false}
console.log(x.next());                // {value: Array(2), done: false}
console.log(x.next());                // {value: Array(2), done: false}
console.log(x.next());                // {value: Array(2), done: false}
console.log(x.next());                // {value: undefined, done: true}

entries() 方法返回一个数组的 迭代对象 ,该对象包含数组的键值对 (key/value)。迭代对象中数组的索引值作为 key, 数组元素作为 value。

keys() 方法用于从数组创建一个包含数组键的可迭代对象。如果对象是数组返回 true,否则返回 false。

语法

array.entries()

5.every()

6.some()

a = [1, 2, 3, 4, 5];
a.every(function(x) {
    return x < 10;
});                            // => true:所有值<10
a.every(function(x) {
    return x % 2 === 0;
});                            // => false:不是所有的值都是偶数

a.some(function(x) {
    return x % 2 === 0; 
});                            // => true: a含有偶数值
a.some(isNaN);                 // => false: a不包含非数值元素

类比数学中的任意,存在。

♥ 注意: every() 不会对空数组进行检测。

♥ 注意: every() 不会改变原始数组。

语法

array.every(function(currentValue,index,arr), thisValue)

参数

参数 描述
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"

函数参数:

参数 描述
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象

7.fill()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.fill("Runoob",1,3))  // ["Banana", "Runoob", "Runoob", "Mango"]

fill() 使用一个固定值来填充数组。

语法

array.fill(value, start, end)

参数

参数 描述
value 必需。填充的值。
start 可选。开始填充位置。
end 可选。停止填充位置 (默认为 array.length)

8.filter()

var ages = [32, 33, 16, 40];
ages.filter(value => value > 18);  // [32, 33, 40]

filer() 检测数值元素,并返回符合条件所有元素的数组。

语法

array.filter(function(currentValue,index,arr), thisValue)

参数

参数 描述
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"

函数参数:

参数 描述
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象

9.find()

10.findIndex()

var ages = [3, 10, 18, 20];
ages.find(age => age >= 18);  // 18
ages.findIndex(age => age >= 18);  // 2

find() , findIndex() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

find() , findIndex() 方法为数组中的每个元素都调用一次函数执行:

♥ 注意: find() , findIndex() 对于空数组,函数是不会执行的。

♥ 注意: find() , findIndex() 并没有改变数组的原始值。

语法

array.find(function(currentValue, index, arr), thisValue)
array.findIndex(function(currentValue, index, arr), thisValue)

参数

同上

11.forEach()

12.map()

var numbers = [4, 9, 16, 25];
numbers.forEach((item,index) =>  console.log( "index[" + index + "]: " + item );)
// index[0]: 4
// index[1]: 9
// index[2]: 16
// index[3]: 25
numbers.map(Math.sqrt);
// [2, 3, 4, 5]

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。

♥ 注意: forEach() 对于空数组是不会执行回调函数的。


map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

♥ 注意: map() 不会对空数组进行检测。

♥ 注意: map() 不会改变原始数组。

语法

array.forEach(function(currentValue, index, arr), thisValue)
array.map(function(currentValue,index,arr), thisValue)

参数

同上

13.from()

var myArr = Array.from("RUNOOB");
console.log(myArr);  // ["R", "U", "N", "O", "O", "B"]

from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。

如果对象是数组返回 true,否则返回 false。

语法

Array.from(object, mapFunction, thisValue)

参数

参数 描述
object 必需,要转换为数组的对象。
mapFunction 可选,数组中每个元素要调用的函数。
thisValue 可选,映射函数(mapFunction)中的 this 对象。

14.includes()

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则 false。

语法

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

参数

参数 描述
searchElement 必须。需要查找的元素值。
fromIndex 可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

15.indexOf()

16.lastIndexOf()

a = [0, 1, 2, 1, 0];
a.indexOf(1);                // => 1:a[1]是1
a.lastIndexOf(1);            // => 3:a[1]是1
a.indexOf(3);                // => -1: 没有值为3的元素

搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引,indexOf() 正向搜索,lastIndexOf()反向搜索,找不到返回-1。

语法

array.indexOf(item,start)
array.lastIndexOf(item,start)

参数

参数 描述
item 必须。查找的元素。
start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。

17.isArray()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(Array.isArray(fruits));  // true
var num = 100000;
console.log(Array.isArray(num))      // false

isArray() 方法用于判断一个对象是否为数组。

如果对象是数组返回 true,否则返回 false。

语法

Array.isArray(obj)

参数

参数 描述
obj 必需,要判断的对象。

18.join()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
console.log(energy);  // Banana,Orange,Apple,Mango
var energy1 = fruits.join('%');
console.log(energy1);  // Banana%Orange%Apple%Mango

join() 方法用于把数组中的所有元素转换一个字符串,默认用逗号分割。元素也可以通过指定的分隔符进行分隔。

语法

array.join(separator)

参数

参数 描述
separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

19.push

20.pop()

var stack = [];             // stack: []
stack.push(1,2);            // stack: [1,2] 返回2
stack.pop();                // stack: [1] 返回2
stack.push(3);              // stack: [1,3] 返回2
stack.pop();                // stack: [1] 返回3
stack.push([4,5]);          // stack: [1,[4,5]] 返回2
stack.pop();                // stack: [1] 返回[4,5]
stack.pop();                // stack: [] 返回1

push() 方法在数组的尾部添加一个或多个元素,并返回新的长度。

pop() 删除数组的最后一个元素,减小数组长度并返回它的值。

21.unshift()

22.shift()

var a = [];                 // a: []
a.unshift(1);               // a:[1]  返回:1
a.unshift(22);              // a:[22,1]  返回:2
a.shift();                  // a:[1] 返回:22
a.unshift(3,[4,5]);         // a:[3,[4,5],1] 返回:3
a.shift();                  // a:[[4,5],1] 返回:3
a.shift();                  // a:[1] 返回:[4,5]
a.shift();                  // a:[] 返回:1

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

23.reduce

24.reduceRight

var a = [1, 2, 3, 4, 5];

// 数组求和
var sum = a.reduece(function(x, y) {
    return x + y
}, 0);

// 数组求积
var product = a.reduce(function(x, y) {
    return x * y
}, 1);

// 求最大值
var max = a.reduce(function(x, y) {
    return (x > y)?x:y;
});

var a = [2, 3, 4];
// 计算2^(3^4)。乘方操作的有限顺序是从右到左
var big = a.reduceRight(function(accumulator, value) {
    return Math.pow(value, accumulator);
});

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

参数

参数 描述
function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
initialValue 可选。传递给函数的初始值

函数参数:

参数 描述
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。

25.reverse()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits);
// ["Mango", "Apple", "Orange", "Banana"]

reverse() 方法用于颠倒数组中元素的顺序。

语法

array.reverse()

返回值

类型 描述
Array 颠倒顺序后的数组

26.sort()

var a = [33, 4, 1111, 222];
a.sort();                     // 字母表顺序:1111,222,33,4
a.sort(function(a,b) {        // 数值排序:4,33, 222,1111
    return a-b; 
});
a.sort(function(a,b) {        // 数值大小相反的顺序:1111, 222, 33, 4
    return b-a
}); 
a = ['monkey', 'Bug', 'cat', 'Giraffe']
a.sort();                     // 区分大小写的排序: ["Bug", "Giraffe", "cat", "monkey"]
a.sort((x,y)=>{
  a=x.toLowerCase();
  b=y.toLowerCase();
  if(a<b) return -1;
  if(a>b) return 1;
  return 0;
});                           // 不区分大小写的排序:["Bug", "cat", "Giraffe", "monkey"]

语法

array.sort(sortfunction)

参数

参数 描述
sortfunction 可选。规定排序顺序。必须是函数。

27.toString()&toLocaleString()

[1,2,3].toString();          //生成'1,2,3'
["a","b","c"].toString();    //生成'a,b,c'
[1,[2,'c']].toString();      //生成'1,2,c'

toString() 方法可把数组转换为字符串,并返回结果。

♥ 注意: 数组中的元素之间用逗号分隔。

与不使用任何参数的 join() 方法是一样的。

语法

array.toString()

28.valueOf()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);                 // ["Banana", "Orange", "Apple", "Mango"]
console.log(fruits.valueOf());       // ["Banana", "Orange", "Apple", "Mango"]

valueOf() 方法返回 Array 对象的原始值。

该原始值由 Array 对象派生的所有对象继承。

valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。

♥ 注意: valueOf() 方法不会改变原数组。

29.slice()

var a = [1, 2, 3, 4, 5];
a.slice(0,3);                       // 返回[1, 2, 3]  a 是 [1, 2, 3, 4, 5];
a.slice(3);                         // 返回[4, 5]     a 是 [1, 2, 3, 4, 5];
a.slice(1,-1);                      // 返回[2, 3, 4]  a 是 [1, 2, 3, 4, 5];
a.slice(-3, -2);                    // 返回[3]        a 是 [1, 2, 3, 4, 5];

slice() 方法可从已有的数组中返回选定的元素。

slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。

♥ 注意: slice() 方法不会改变原始数组。

语法

array.slice(start, end)

参数

参数 描述
start 可选。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

30.splice()

var a = [1, 2, 3, 4, 5, 6, 7, 8];
a.splice(4);                  // 返回[5, 6, 7, 8]; a是[1, 2, 3, 4]
a.splice(1,2);                // 返回[2, 3]; a是[1, 4]
a.splice(1,1);                // 返回[4]; a是[1]

第一个参数指定了插入或删除的起始位置,第二个参数指定了应该从数组中删除的元素的个数。

var a = [1, 2, 3, 4, 5];
a.splice(2, 0, 'a', 'b');     // 返回[]; a是[1, 2, 'a', 'b', 3, 4, ,5]
a.splice(2, 2, [1,2], 3);     // 返回['a', 'b']; a是[1, 2, [1, 2], 3, 3, 4, 5]

紧随前两个参数之后的任意个参数指定了需要插入到数组中的元素,从第一个参数指定的其实位置开始插入。

语法

array.splice(index,howmany,item1,.....,itemX)

参数

参数 描述
index 必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany 可选。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素。
上一篇下一篇

猜你喜欢

热点阅读