前端JavaScript学习笔记之数组

前端JavaScript学习笔记之数组

1、数组介绍

​ js中的数组是可以存放任意数据类型值的集合，数组的元素可以是任何数据类型，数组的长度的可以动态调整

2、数组创建

字面量创建数组

​ 由一对包括元素的方括号“[]”表示，元素之间以逗号“,”隔开

var names = ["zhangsan","lisi","tom"]
var name = "name"
// 可以接收任何类型的数据当做数组的元素
var arr = [12,name,true,"zhangsan",{},function(){},[],null];
// 通过数组下标获取对应的数据
console.log(arr,arr[2]);
// 获取数组的长度
console.log(arr.length);//arr.length

构造函数创建数组

​ 通过Array构造函数来创建数组

var names = new Array();   // 等价于 var names = []; 
// 如果一个参数，并且是number类型的整数，则代表的是数组的长度。如果是number类型的小数，则报错。如果是其他类型，则当做数组元素放进去。
//var arr = new Array(length); 创建一个长度为length的数组
var names = new Array(3); 

3、数组访问

​ 数组变量名[索引值]

//如果索引小于数组的长度，返回对应项的值
var arr = ["zhangsan","lisi","wangwu"];
arr[0] ;  //访问数组中第一个元素,返回值为terry

//如果索引大于等于数组的长度，返回undefined
var arr = ["shangsan","lisi","wangwu"];
arr[10]   //undefined

//如果给索引大于等于数组的长度的位置设置了值，数组自动增加到该索引值加1的长度
var arr = ["zhangsan","lisi","wangwu"];
arr[3] ="jacky";  //添加元素,数组长度变为4

​ 1、[index] 直接访问，索引可以超过索引范围，只不过访问的值为undefined

​ 2、length-1 = Max(index)\

​ 3、length+N 或length-N 开辟新的空间或数组元素的删除

4、数组API

数组序列化

​ toString() 在默认情况下都以逗号分隔字符串的形式返回数组项

​ join() 使用指定的字符串用来分隔数组字符串

var arr = [1,5,2,8,10,{a:1}];
console.log(arr);//[ 1, 5, 2, 8, 10, { a: 1 } ]
console.log(arr.toString());//”1,5,2,8,10,[object Object]”
console.log(arr.join(""));//”152810[object Object]”
console.log(arr.join("-"));//”1-5-2-8-10-[object Object]”

构造函数方法

​ Array.isArray() 用来判断某个数组是否是一个函数

​ Array.from() 从类数组或者可迭代对象中创建一个新的数组实例

​ Array.of() 根据一组参数来创建新的数组实例，支持任意的参数数量和类型

栈与队列方法

​ Array.prototype.push() 向数组的末尾添加一个或多个元素，并返回新的长度

​ 注意：此方法会改变数组的长度

​ 语法：array.push(item1,item2,…)

​ 返回值：数组的新长度(number)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
console.log(fruits);
//fruits 结果输出：Banana,Orange,Apple,Mango,Kiwi

​ Array.prototype.pop() 用于删除数组的最后一个元素并返回删除元素

​ 注意：此方法会改变数组的长度

· 语法：array.pop()

​ 返回值：返回删除的元素(所有类型)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
console.log(fruits);
//fruits 结果输出：Banana,Orange,Apple

​ Array.prototype.shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值

​ 注意：此方法会改变数组的长度

​ 语法：array.shift()

​ 返回值：数组原来的第一个元素的，也就是移除的元素(任何类型)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
console.log(fruits);
//fruits结果输出:Orange,Apple,Mango

​ Array.prototype.unshift() 用于向数组的开头添加一个或多个元素，并返回新长度

​ 注意：该方法将改变数组的数目

​ 语法：array.unshift(item1,item2,…)

​ 返回值：数组的新长度(Number)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
console.log(fruits)
//fruits 将输出：Lemon,Pineapple,Banana,Orange,Apple,Mango

排序方法

​ Array.prototype.reverse() 用于颠倒数组中的元素的顺序

​ 语法：array.reverse()

​ 返回值：颠倒顺序后的数组(Array)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits)
//fruits结果输出：Mango,Apple,Orange,Banana

​ Array.prototype.sort() 用于对数组的元素进行排序

​ 调用该方法如果没有参数的话，将按照字符编码的顺序进行排序，要实现这一点，首先应把数组的元素都转换为字符串，以便排序，如果想要进行升序或是降序排序的话，就要提供比较函数。

​ 语法：array.sort(sortfunction)

//数字升序排序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){
	return a-b
});
//points输出结果：1,5,10,25,40,100

//数字降序排序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){
	return b-a
});
//fruits输出结果：100,40,25,10,5,1

操作方法

​ Array.prototype.concat() 用于连接两个或多个数组

​ 该方法不会改变现有数组，而仅仅会返回被连接数组的一个副本

​ 语法：array1.concat(array2,array3,…)

​ 返回值：返回一个新的数组(Array对象)

var hege = ["Cecilie", "Lone"]; 
var stale = ["Emil", "Tobias", "Linus"]; 
var kai = ["Robin"]; 
var children = hege.concat(stale,kai);
//children 输出结果：Cecilie,Lone,Emil,Tobias,Linus,Robin

​ Array.prototype.slice() 用于从已有的数组中返回选定的元素，提取字符串的某个字符，并以新字符串返回被提取的部分。

​ 语法：array.slice(start,end)

​ 返回值：返回一个新数组(Array)，包含从start到end(不包含end)的元素

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; 
var citrus = fruits.slice(1,3);
//citrus 结果输出:Orange,Lemon

​ Array.prototype.splice() 用于添加或删除数组中的元素

​ 注意：这种方法会改变原始数组

​ 语法：array.splice(index,howmany,item1,item2,…)

​ 返回值：新数组(Array),如果删除了元素，则返回的是含有被删除的元素的数组

//数组中添加新元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
//从数组索引位置 2 开始，不删除元素，添加两个新的元素"Lemon","Kiwi"
fruits.splice(2,0,"Lemon","Kiwi");
//fruits输出结果：Banana,Orange,Lemon,Kiwi,Apple,Mango

//从第三个位置开始删除数组后的两个元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
//fruits输出结果：Banana,Orange

位置方法

​ Array.prototype.indexOf() 用于返回数组中某个指定的元素位置

​ 语法：array.indexOf(item.start)

​ 返回值：元素在数组中的位置(Number)，如果没有搜索到则返回-1

var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
var a = fruits.indexOf("Apple");

//a结果输出：2
//以上输出结果意味着 "Apple" 元素位于数组中的第 3 个位置。

​ Array.prototype.lastIndexOf() 用于返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找

​ 语法：array.lastIndexOf(item,start)

​ 返回值：元素在数组中最后的位置(Number)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

//a输出结果：2
//以上实例输出结果意味着 "Apple" 位于数组中的第 2 个位置.

迭代方法

​ Array.prototype.every() 用于检测数组所有元素是否都符合指定条件(通过函数提供)

​ 如果数组中检测到一个元素不满足，则整个表达式返回false，而且剩下的元素不会再检测，如果所有元素都满足条件，则返回true

​ 注意：every()不会对空数组进行检测，不会改变原始数组

​ 语法：array.every(function(currentValue,index,arr),thisValue)

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

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

​ 返回值：布尔值(Boolean)

//检测数组ages的所有元素是否都大于等于 18 :
var ages = [32, 33, 16, 40];
var result = ages.every(function (age) {
  return age >= 18
})
console.log(result);//输出结果为:false

​ Array.prototype.some() 用于检测数组中的元素是否满足指定条件(函数提供)

​ 如果有一个满足条件，则表达式返回true，剩下的元素不会再检测，如果没有元素满足条件，则返回false。

​ 注意：some() 不会对空数组进行检测，不会改变原始数组

​ 语法：array.some(function(currentValue,index,arr),thisValue)

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

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

​ 返回值：布尔值(Boolean)

//检测数组中是否有元素大于 18:
var ages = [32, 33, 16, 40];
var result = ages.some(function (age) {
  return age >= 18
})
console.log(result);//输出结果为:true

​ Array.prototype.filter() 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

​ 注意：filter() 不会对空数组进行检测，不会改变原始数组

​ 语法：array.filter(function(currentValue,index,arr),thisValue)

​ 参数同some()方法

​ 返回值：返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空元素

//返回数组ages中所有元素都大于 18 的元素: 
var ages = [32, 33, 16, 40];
var result = ages.filter(function (age) {
  return age >= 18
})
console.log(result);//输出结果为:[ 32, 33, 40 ]

​ Array.prototype.map() 用于返回一个新数组，数组中的元素为原始数组的元素调用函数处理后的值

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

​ 注意：map() 不会对空数组进行检测，不会改变原始数数组

​ 语法：array.map(function(currentValue,index,arr),thisValue)

​ 参数同some()方法

​ 返回值：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

//返回一个数组，数组中元素为原始数组的平方根
var numbers = [4, 9, 16, 25];
var result = numbers.map(function (number) {
  return Math.sqrt(number)
})
console.log(result);//输出结果为:[ 2, 3, 4, 5 ]

​ Array.prototype.forEach() 用于调用数组的每个元素，并将元素传递给回调函数

​ 注意：forEach() 对于空数组不会执行回调函数

​ 语法：array.forEach(function(currentValue,index,arr),thisValue)

​ 参数同some()方法

​ 返回值：undefined

//列出数组的每个元素：
var numbers = [4, 9, 16, 25];
numbers.forEach(function (number, index) {
  console.log(index + ' -- ' + number);
})
// 0 -- 4
// 1 -- 9
// 2 -- 16
// 3 -- 25