数组(Array) :就是一组数据的集合 存储在单个变量下的优雅方式
数组可以把一组相关的数据一起存放,并提供方便的访问 (获取)方式。
数组的创建方式
JS中创建数组有两种方式:
- 利用new 创建数组
- 利用数组字面量创建数组
new创建数组
var 数组名 = new Array();
var arr = new Array; //创建一个新的空数组
- 数组的字面量 是方括号[]
- 声明数组并赋值称位数组的初始化
- 这种字面量也是我们以后最多使用的方式
数组元素的类型
数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。
数组的索引
索引(下标):用来访问数组元素的序号(数组下标从0开始)。
var arr = ['小白','大黑','小黄','瑞奇'];
索引号: 0 1 2 3
//5.数组里面的数据 比如 1,2我们称之为数组元素
//6.获取数组元素 格式 数组名[索引号] 索引号从零开始
var arr = []; //创建一个新的数组
var arr1 = [1, 2, '大黄', 'true']
console.log(arr1);
console.log(arr1[2]); //大黄
var arr2 = ['德玛西亚', '诺克萨斯', '艾欧尼亚', '盖伦']
console.log(arr2[0]);
console.log(arr2[1]);
console.log(arr2[2]);
console.log(arr2[4]); //索引号从零开始 我给了他四个元素 就是 0 1 2 3,没有第四个 所以输出 undefined
// 练习 定义一个数组 里面存放 周一到周日一共七天 在控制台输出 周日
var arr3 = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
console.log(arr3[6]); //输出周日
便历数组:
便历就是把数组中的每个元素从头到尾都访问一次
数组的长度、
使用"数组名.length"可以访问数组元素的数量(数组长度)。
/ 数组的长度是元素个数 不要跟索引号混淆
//arr.length 动态监测数组元素的个数
<script>
var arr1 = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维']
for (var i = 0; i < arr1.length; i++) {console.log(arr1[i]);
}
</script>
数组中新增元素
可以通过修改length长度以及索引号增加数组元素。
- 可以通过修改length长度来实现数组扩容的目的
- length属性是可以读写的
var arr = ['red', 'greem', 'blie']
console.log(arr.length);
arr.length = 5; //把我们数组的长度修改成 5 里面应该有五个元素
console.log(arr);
console.log(arr[3]);
console.log(arr[4]);
//2.新增数组元素,修改索引号
var arr1 = ['red', 'green', 'blue'];
arr1[3] = 'pink';
console.log(arr1);
console.log(arr1);
arr1[0] = 'yellow'; //替换原来的数组元素
console.log(arr1);
arr1 = '有点意思';
console.log(arr1); //不要直接给 数组名赋值 否则会覆盖掉以前的数
遍历数组
let fruits = ['Apple', 'Banana']
fruits.forEach(function(item,index,array){
cosole.log(item,index)
})
//结果
//Apple 0
// Banana 1
添加元素到数组的末尾
let newLength = fruits.push("Orange");
// []
删除数组末尾的元素
let last = fruits.pop()
// ["Apple","Banana"]
删除数组头部元素
let newLength = fruits.shift()
//["Banana"]
添加元素到数组的头部
let last = fruits.unshift("Strawberry'")
// ["Strawberry", "Banana"]
找出某个元素在数组中的索引
fruits.push("Mango");
// ["Strawberry", "Banana", "Mango"]
let pos = fruits.indexOf("Banana")
// 1
通过索引删除某个元素
let removedItem = fruits.splice(pos,1)
// ["Strawberry", "Mango"]
从一个索引位置删除多个元素
let vegetanles = ["Cabbage","Turnip","Radish","Carrot"];
console.log(vegetanles);
let pos = 1;
let n =2;
let removedItems = vegetables.splice(pos,n);
console.log(vegetables);
//["Cabbage", "Carrot"]
console.log(removedItems);
//["Turnip", "Radish"]
复制一个数组
let shallowCopy = fruits.slice()
//["Strawberry", "Mango"]
Array.from()
Array.from() //返回一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实力
console.log(Array('foo'))
console.log(Array([1,2,3],x=>x+x));
参数 | 描述 |
---|---|
arrayLike | 想要转换成数组的为数组对象或可迭代数组 |
mapFn(可选) | 如果指定了该参数,该数组中的每个元素都会执行该回调函数 |
thisArg(可选) | 执行回调函数mapFn时的this对象 |
返回值:返回一个新的数组实例。
Array.from() 可以通过以下方式来创建数组对象:
- 伪数组对象(拥有一个length属性和若干索引属性的任意对象)
- 可迭代对象(可以获取对象中的元素,如Map和Set等)
示例
从String 生成数组
Array.from("foo");
//['f','o','o'];
从Set生成数组
const set = new Set(['foo','bar','baz','foo']);
Array.from(set);
['foo','bar','baz'];
从Map生成数组
const map = new Map([1,2],[2,4],[4,8]);
Array.from(map);
// [[1,2]],[2,4],[4,8]]
const mapper = new Map([['1','a'],['2','b']]);
Array.from(mapper.values());
//['a','b'];
Array.from(mapper.keys())
//['1','2'];
从类数组对象(arguments) 生成数组
function f(){
return Array.from(arguments);
}
f(1,2,3);
//[1,2,3]
在Array.from 中使用箭头函数
Array,from([1,2,3],x=> x+x);
[2,4,6]
Array.from({length:5},(v,i)=>i);
// [0,1,2,3,4]
序列生成器(指定范围)
const range = (start,stop,step)=> Array.from({length:(stop -start) / step +1},(_,i)=> start + (i * step));
range(0,4,1);
//[1,3,5,7,9]
range(1,10,2);
range("A".charCodeAt(0),'Z'.charCodeAt(0),1).map(x=> String.fromCharCode(x));
数组去重合并
function combine(){
let arr = [],concat.apply([],arguments);
return Array.from(new Set(arr));
}
var m = [1,2,2], n = [2,3,3];
console.(combine(m,n));
判断一个值是否是一个Array
Array.isArray([1,2,3])