JavaScript数组

270 阅读4分钟

数组是什么

数组通常被描述为像列表一样的对象。简单来说,数组就是一个包含了多个值的对象。数组对象可以存储在变量中,并且能用和其他任何类型的值完全相同的处理方式,区别在于我们可以单独访问列表中的每个值,并使用列表执行一些有用和高效的操作。

创建数组

  • 个数组中可以存储一个清单,比如存储动物园里面有哪些动物,可以这样做:
    let zoo = {'dog', 'cat', 'elephant', 'fish'};
    zoo
  • 情况下,数组中每个项目都是一个字符串。在任何类型的元素都可以存储在数组中,字符串、数字、对象、另一个数组等。
    let arr = [1,5,7,66,8]
    也可以使用let arr = new Array(2,3,5,6,3)这种方式创建新数组。如果是这样:let arr = new Array(4)则会创建一个长度为4的空数组。

访问和修改数组

  • zoo[0]; //return 'dog';
  • 还可以为单个数组元素提供新值来修改数组中的元素。
zoo[0] = 'tiger';
zoo;
//zoo will return {'tiger','cat','elephant','fish'};
  • 查看所有属性名let arr = [1,2,4,5,5] Object.keys(arr);

查看单个属性

  • 查找某个元素是否在数组里
    arr.indexOf(item)//存在返回索引,否则返回-1
  • 使用条件查找元素
    arr.find(item => item%2 ==0)//第一个偶数
  • 使用条件查找元素的索引
    arr.findIndex(item => item% 2 ==0)//找到第一个偶数的索引

一些数组的方法

字符串和数组之间的转换

  1. 在控制台中创建一个字符串 let myData = 'Manchester,London,BeiJing,Shanghai,Leeds';
  2. 用逗号分隔
    let myArray = myData.split(',');
    myArray
  3. 可以使用 join()方法进行相反的操作;
  4. 将数组转换为字符串的另一种方法是使用toString()方法,toString()join()更简单,因为它不需要一个参数,但是更有限制。使用join()可以指定不同的分隔符。

添加和删除数组中的元素

let myData = ['Manchester','London','BeiJing','Shanghai','Leeds']
在数组末尾添加或者删除一个元素,可以使用push()pop()
在数组开头添加或者删除一个元素,可以使用unshift()shift()

  • 使用push(),添加一个或多个元素到数组末尾
myData.push('Guangzhou');
myData.push('Qingdao','Jinan');
  • 从数组中删除最后一个元素,直接使用pop()
myData.pop();//myData被修改,返回删除元素'Leeds'
  • 删除第一个元素,使用shift().例如myData.shift()会删除第一个元素'Manchester',并返回
  • 删除中间的元素
myData.splice(index,1) //删除index的一个元素
myData.splice(index,1,'x')//删除元素,并在被删除位置添加'x'
myData.splice(index,1,'x','y')// 删除元素并在被删除位置添加'x','y'
  • 既然JavaScript数组属于对象,其中的元素就可以使用 delete来删除,但是使用它删除之后数组长度不会改变,留下空洞,所以最好不用delete。

splice()演示

  • 用于向数组添加新项目
let city = ['Manchester','London','BeiJing','Shanghai','Leeds'];
city.splice(2,0,'Shenzhen','Kiwi')

第一个参数(2)定义了添加新元素的位置(拼接)
第二个参数(0)定义了删除多少元素
剩下的参数'Shenzhen','Kiwi'定义了要添加的元素

  • 使用split()来删除元素
    city.splice(1,3);
    这一语句将会删除从索引[1]开始的三个元素。

slice()演示

裁剪数组

let city = ['Manchester','London','BeiJing','Shanghai','Leeds'];
let myCity = city.slice(0,3);
myCity;//'Manchester','London','BeiJing'

数组迭代

Array.map()

map()方法通过对每个数组元素执行函数来创建新数组
map()方法不会对没有值的数组元素执行函数
map()不会更改原始数组 例:

let num = [1,2,6,3,23];
function myFunction(value,index,array) {
    return value*2;
}
let num1 = num.map(myFunction);
num1;// [2, 4, 12, 6, 46]

Array.filter()

filter()方法创建一个包含通过测试的数组元素的新数组。 例:

let num2 = [2,3,66,32,6,6,21];
function myFunction1(value) {
    return value%2 ==0;
}
let num3 = num2.filter(myFunction1);
num3;//return [2, 66, 32, 6, 6]

上面代码中,通过filter()方法,创建了一个数组,元素为来自num2的偶数。

Array.reduce()

reduce()方法在每个数组元素上运行函数,已生成(减少它)单个值
reduce()方法从左到右工作,不会减少原始数组。
例:

let num4 = [23,5,12,5,6];
function myFunction3(total,value,index,array){
    return total + value;
}
let sum = num4.reduce(myFunction3);
sum;//51

也可以这样写:num4.reduce((sum,item) => {return sum+item },0}
上面这个例子计算了数组的总和。
此函数接收四个参数:总数,项目值,项目索引,数组本身
第二个例子

let arr = [2,4,3,5];
let arr2 = arr.reduce((result,item)=> {return result.concat(item*item) },[]);
arr2;..//[4, 16, 9, 25]

其他方法

  • Array.every()检查数组所有值是否通过测试
  • Array.some()检查某些数组值是否通过测试

两道练习题

1

let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr2 = arr.map((i)=>{
const hash = {0:'周日',1:'周一',2:'周二',3:'周三',4:'周四',5:'周五',6:'周六'}
return hash[i]
})
console.log(arr2)//// ['周日', '周一', '周二', '周二', '周三', '周三', '周
三', '周四', '周四', '周四', '周四','周六']
let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let sum = scores.reduce((sum, n)=>{
  return n%2===0?sum:sum+n
},0)
console.log(sum) // 奇数之和:598