javascript数组的使用

一、定义

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

二、创建

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的专栏-优快云博客_js数组扁平化

去重

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

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