javascript之数组创建方式，方法，和遍历

文章目录

• 前言
• 一、数组创建方式
• 二、数组遍历
• 三、数组方法
• 四、数组追加删除
• 五、数组练习

---

前言

单个变量只能存储一个数据，数组可以存储一组数据，对信息进行分门别类

---

一、数组创建方式

	// 第一种，数组创建方式,数组下标从0开始
			var scores = [10, 20, 50, 90, 80];
			//获取数组的长度
			console.log(scores.length); //5
			//获取数组数据
			console.log(scores[1]); //20
			//修改数组数据
			scores[2] = 60;
			console.log(scores); // [10, 20, 60, 90, 80]
			//添加数据
			scores[5] = 100;
			console.log(scores); // [10, 20, 60, 90, 80, 100]
			scores[10] = 98;
			console.log(scores);
			console.log(scores[6]); //undefined

			//第二种
			var nums = new Array(10, 20, 30);
			//创建一个长度为3的数组
			var nums2 = new Array(3);
			nums2[2] = 20;
			console.log(nums2); // [empty × 2, 20]
			nums2[5] = 50;
			console.log(nums2); //[empty × 2, 20, empty × 2, 50]

二、数组遍历

代码如下（示例）：

var scores = [10, 20, 50, 90, 80];
            //1,fori,i下标
            for (var i = 0; i < scores.length; i++) {
                console.log(scores[i]);
            }
            //2,for 下标 in 数组名
            for (var i in scores) {
                console.log(scores[i]);
            }
            //3, .forEach(function(每一项，对应下标，数组本身),
            //forEach方法没有返回值,回调函数
            scores.forEach(function(item, index, self) {
                console.log(item, index);
                console.log(self);
            })
            scores.forEach(function(item, index) {
                console.log(item, index);
            })
            scores.forEach(function(item) {
                console.log(item);
            })

三、数组方法

代码如下（示例）：

// every每一个  some一些  find查找   findIndex查找下标  filter过滤
            var ages = [50, 80, 90, 35, 55];
            // item:遍历到的当前元素,
            // index:当前元素对应的下标,
            // self:数组本身
            /*
            判断数组中每个元素是否符合条件
            .every(function(item,index,self)
            */
            var bool1 = ages.every(function(item, index, self) {
                return item > 60;
            })
            console.log(bool1); //false
            /*判断数组中是否有元素符合条件
            .some(function(item,index,self)
            */
            var bool2 = ages.some(function(item, index, self) {
                return item > 60;
            })
            console.log(bool2); //true

            /*
            返回符合条件的第一个元素
            .find(function(item,index,self)
            */
            var num = ages.find(function(item, index, self) {
                return item > 60;
            })
            console.log(num); //80
            /*
              返回符合条件的第一个元素下标
              .findIndex(function(item,index,self)
              indexOf("60") 等值条件
            */
            var firstIndex = ages.findIndex(function(item, index, self) {
                return item > 60;
            })
            console.log(firstIndex); //1

            /*
              过滤出符合条件的所有元素
              .find(function(item,index,self)
            */
            var array = ages.filter(function(item, index, self) {
                return item > 60;
            })
            console.log(array); //[80,90]

四、数组追加删除

var names = ['张三', '李四', '王五'];
			//末尾追加
			names[names.length] = '赵六';
			names.push('郭靖', '黄蓉');
			//末尾删除
			names.pop();
			//开头添加
			names.unshift('沈腾', '马丽');
			//开头删除
			names.shift();
			console.log(names);
			
			//删除并替换
			//names.splice(startIndex,length,["替换的元素"])
			names.splice(1, 1); //删除张三
			console.log(names);
			names.splice(1, 3, "小龙女", "令狐冲");
			console.log(names);

			var num1 = [10, 20, 30];
			var num2 = [10, 20, 30, 50, 60];
			//数组连接
			var num3 = num1.concat(num2);
			console.log(num3);
			
			//数组翻转
			num1.reverse();
			console.log(num1);
			//splice  截取  string也有
			var num5 = num2.slice(1, 4);
			console.log(num5);
			
			
			//拆分和合并
			//string  split
			var str = '长亭外-古道边-芳草碧连天';
			//将字符串拆分为数组
			var array = str.split("-");
			console.log(array);
			//将数组合并为字符串
			var str2 = array.join(",");
			console.log(str2);

五、数组练习

/* 
			 使用Array对象变量classmates存储4个同学的名字，
			 即：陈鹏宇，王宁，张营和黄莉，然后在页面上输出这些名字 
			 */
			var classmates = ['陈鹏宇', '王宁', '张营', '黄莉'];
			classmates.forEach(function(item, index) {
				document.write(item + "、");
			})