一、定义

使用单独的变量名来存储一系列的值。

二、创建

1.常规方式

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

2. 简洁方式

var myCars=new Array("Saab","Volvo","BMW");

3. 字面量

var myCars=["Saab","Volvo","BMW"];

三、访问

通过指定数组名以及索引号码,你可以访问某个特定的元素

var name=myCars[0]

四、属性

1.constructor

在 JavaScript 中, constructor 属性返回对象的构造函数。返回值是函数的引用,不是函数名

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

2.length

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

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

3.prototype

prototype 属性可以向对象添加属性和方法。

当构建一个属性,所有的数组将被设置属性,它是默认值。

在构建一个方法时,所有的数组都可以使用该方法。

注意: Array.prototype 单独不能引用数组, Array() 对象可以。

注意: 在JavaScript对象中,Prototype是一个全局属性。

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

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

五、方法

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

六、使用用场景

1.判断数组

// 1.Array.isArray(obj)(es5方法)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(Array.isArray(fruits));  // true

// (通用方法)
if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}


// 2.通过instanceof判断
const arr = [1,2,3]
function fun(){
}
console.log(arr instanceof Array);  // true
console.log(arr instanceof Object);  // true
console.log(fun instanceof Object);  // true


// 3.通过constructor判断
let a = [1,3,4];
a.constructor === Array; //true

// 4.Object.prototype.toString.call()
let a = [1,2,3]
Object.prototype.toString.call(a) === '[object Array]'; //true
//检验是否是函数
let a = function () {};
Object.prototype.toString.call(a) === '[object Function]';//true
//检验是否是数字
let b = 1;
Object.prototype.toString.call(a) === '[object Number]';//true 


参考:JS判断是否是数组的四种做法 - 听风是风 - 博客园

2.添加

// 1、push():向数组的末尾添加一个或多个元素, 原数组改变
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.push("Kiwi")
	console.log(fruits); // Banana,Orange,Apple,Mango,Kiwi
}
myFunction();
var hege = ["a", "b"];
var stale = ["c", "d"];
var children = hege.push(...stale);
console.log(hege); // ['a', 'b', 'c', 'd']

// 2、unshift():向数组的开头添加一个或多个元素, 原数组改变
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.unshift("Lemon","Pineapple")
	console.log(fruits); // Lemon,Pineapple,Banana,Orange,Apple,Mango
}
myFunction();

// 3、splice():用于添加或删除数组中的元素, 原数组改变
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.splice(2,0,"Lemon","Kiwi");  // 2是下标, 0是裁减的元素个数,其余参数表示插入的元素
	console.log(fruits); // Banana,Orange,Lemon,Kiwi,Apple,Mango
}

// 4、array1.concat(array2,array3,...,arrayX),返回一个新的数组
var hege = ["a", "b"];
var stale = ["c", "d"];
var stale2 = ["e", "f"];
var stale3 = [ "g", "h"];
var new = hege.concat(stale,stale2, stale3);
console.log(hege);  // a,b 原数组不变
console.log(new); // a,b,c,d,e,f,g,h

3.删除

// 1、pop()删除数组的最后一个元素并返回删除的元素, 原数组改变
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	const popArr = fruits.pop();
	console.log(fruits); // ['Banana', 'Orange', 'Apple']
	console.log(popArr); // Mango
}
myFunction();

// 2、shift() 把数组的第一个元素从其中删除,并返回第一个元素的值, 原数组改变
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	var delell = fruits.shift();
	console.log(fruits); // ['Orange', 'Apple', 'Mango']
	console.log(delell); // Banana
}
myFunction();

// 3、slice(start, end) 从已有的数组中返回选定的元素, 不改变原数组
function myFunction(){
	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
	var citrus = fruits.slice(1, 2);
	console.log(fruits); // ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
	console.log(citrus); // ['Orange']
	console.log(fruits.slice()); // ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
	console.log(fruits.slice(0)); //['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
	console.log(fruits.slice(-3, -1)); // ['Lemon', 'Apple']
	console.log(fruits.slice(-3)); // ['Lemon', 'Apple', 'Mango']
}
myFunction();

// 4、splice(index,howmany,item1,.....,itemX) 用于添加或删除数组中的元素。原数组改变
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	const temp = fruits.splice(2,1);
	console.log(fruits); // ['Banana', 'Orange', 'Mango']
	console.log(temp); // ['Apple']
}
myFunction();

4.遍历

// 1、forEach, 对item值操作的话,原数组会改变
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item, index) {
   console.log(index + "--", item);
});


// 2、filter():创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,原数组不变
var ages = [32, 33, 12, 40];
function myFunction() {
    const temp = ages.filter(function(item){
		return item > 30
	});
	console.log(ages) // [32, 33, 12, 40]
    console.log(temp) // [32, 33, 40]
}
myFunction();

// 3、map() 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。原数组不变
var numbers = [4, 9, 16, 25];
x = document.getElementById("demo")
const temp = numbers.map(function(num){
	return num * 2
});
console.log(numbers); // [4, 9, 16, 25]
console.log(temp); // [8, 18, 32, 50]

// 4、every(): 用于检测数组所有元素是否都符合指定条件(通过函数提供), 原数组不变
var numbers = [4, 9, 16, 25];
const temp = numbers.every(function(num){
	return num > 16
});
console.log(numbers); // [4, 9, 16, 25]
console.log(temp); // false

// 5、some() 用于检测数组中的元素是否满足指定条件, 原数组不变
var numbers = [4, 9, 16, 25];
const temp = numbers.some(function(num){
	return num > 16
});
console.log(numbers); // [4, 9, 16, 25]
console.log(temp); // true

// 6、reduce(): 接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
var numbers = [4, 9, 16, 25];
const temp = numbers.reduce(function(total,num){
	return total+ num
});
console.log(numbers); // [4, 9, 16, 25]
console.log(temp); // 54
// reduceRight(): 从右到左

// 7、array.find(function(currentValue, index, arr),thisValue)
// 返回通过测试(函数内判断)的数组的第一个元素的值, 原数组不变
var numbers = [4, 9, 16, 25];
x = document.getElementById("demo")
const temp = numbers.find(function(num){
	return num > 10
});
console.log(numbers); // [4, 9, 16, 25]
console.log(temp); // 25

5.排序

// 1、array.sort(sortfunction) 用于对数组的元素进行排序, 改变原数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits); // ['Apple', 'Banana', 'Mango', 'Orange']


// 2、数字升序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
console.log(points); // [1, 5, 10, 25, 40, 100]


// 3、数字降序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
console.log(points); // [100, 40, 25, 10, 5, 1]


// 4、字母降序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
console.log(fruits); // ['Orange', 'Mango', 'Banana', 'Apple']

// 5、对象排序
var people = [
    {name:"a", age: 1},
    {name:"b", age: 40},
    {name:"c", age: 18},
    {name:"e", age: 20},
]
function sortData(arg) {
    return function(a, b) {
        return a[arg] - b[arg];
    }
}
const temp = people.sort(sortData('age'));
console.log(people); 
// 0: {name: 'a', age: 1}
// 1: {name: 'c', age: 18}
// 2: {name: 'e', age: 20}
// 3: {name: 'b', age: 40}
console.log(temp);
// 0: {name: 'a', age: 1}
// 1: {name: 'c', age: 18}
// 2: {name: 'e', age: 20}
// 3: {name: 'b', age: 40}

 6.查找

(1)是否包含某元素

// 1、arr.includes(searchElement, fromIndex):判断一个数组是否包含一个指定的值,true包含,否则false
[1, 2, 3].includes(2);     // true
['a', 'b', 'c'].includes('c', 3);   // false

// 2、array.indexOf(item,start): 返回元素下标: -1不存在, >-1 存在
["a", "b", "c", "d"].indexOf("c")

// 3、lastIndexOf() ...

// 4、some() 、filter()、 find()...
(2)查找元素位置
// 1、array.indexOf(item,start):返回数组中某个指定的元素位置
["a", "b", "c", "d"].indexOf("c"); // 2

// 2、lastIndexOf() ...

7、数组扁平化

// 1、使用递归(消化性能)
const arr = [1,[2,3,[4,5,[6],7],8],9]
function flatten(arr) {
    return arr.reduce(function (pre, next) {
        return pre.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
}
console.log(flatten(arr))

//2、使用扩展运算符
function flatten(arr) {
    var arr;
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr))

JS扁平化(flatten)数组_yangyang的专栏-CSDN博客_js数组扁平化

去重

JS数组去重的几种常见方法 - 白杨-M - 博客园

与其他数据类型直接的转换

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐