JavaScript 数组的学习

数组(Array) :就是一组数据的集合 存储在单个变量下的优雅方式
数组可以把一组相关的数据一起存放,并提供方便的访问 (获取)方式。

数组的创建方式

JS中创建数组有两种方式:

  1. 利用new 创建数组
  2. 利用数组字面量创建数组

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() 可以通过以下方式来创建数组对象:

  1. 伪数组对象(拥有一个length属性和若干索引属性的任意对象)
  2. 可迭代对象(可以获取对象中的元素,如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])
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值