Array 新手

最新推荐文章于 2024-08-13 16:15:07 发布

BigRedPacket

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量144

点赞数

分类专栏： js 文章标签：虚幻 javascript 游戏引擎

本文链接：https://blog.csdn.net/BigRedPacket/article/details/125534334

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript 数组

1.数组是引用类型。
2.数组是对象。
3.数组作用：使用单独的变量名来存储一系列的值。

// 方式一 定义数组 
let arr = new Array();

// 方式二 定义数组 （推荐） 
let arr2 = [];

// 1.判断数组是否为对象类型  typeof
let arrayType  = typeof arr2;
// 结果 ： object
console.log(arrayType);  

// 2.获取数组长度 length
let long = arr2.length;
// 结果 ： 0
console.log(long)

// 3.获取数组 构造方法
console.log(Array.constructor);

// 4.设置数组 原型方法和属性
Array.prototype.num = function(){
	return 10
};
// 结果： 10
console.log(arr2.num());

// 5.给数组赋值
let arr3 = [10, 20, 30];  // 直接赋值
arr3[3] = 40; // 下标赋值
console.log(arr3);

// 6.获取数组的值
let subscript = arr3[0]; // 通过下标取值
for(var i = 0; i < arr3.length; i++ ) { 
	
	console.log(arr3[i]); // for 循环取值
} 
arr3.forEach(function(item,index){
	console.log(item); // forEach 循环取值 item: 值 , index: 下标
});


// 7.删除数组的值
delete arr3[1];
// 结果：[10,30,40]
console.log(arr3); 


// 8.使用数组方法
let arr4 = [1, 2, 3];
let arr5 = [20, 21, 23];
// 向数组后面追加一个值
arr4.push(4); 
// 结果 ：[1, 2, 3, 4]
console.log(arr4); 

// 向数组前面追加一个值
arr4.unshift(0);
// 结果 ：[0, 1, 2, 3, 4]
console.log(arr4); 

// 数组合并 （ 得到新的数组 ）
let newArray = arr4.concat(arr5);
// 结果：[0, 1, 2, 3, 4, 20, 21, 23]
console.log(newArray);

// 删除数组最后一个的值
let deleteLeastArray = arr4.pop();
// 结果：[0, 1, 2, 3]
console.log(arr4)

// 删除数组第一个的值
let deleteFirshArray = arr4.shift();
// 结果：[1, 2, 3]
console.log(arr4)

// 删除数组其中的一项 splice('要删除的元素下标','要删除几个元素','要添加元素')
arr4.splice(0,1);
// 结果：[2, 3]
console.log(arr4);

// 添加数组的值
arr4.splice(1,0,'添加了我');
// 结果：[2, '添加了我', 3]
console.log(arr4);

// 删除原来的值，然后添加新的值
arr4.splice(1,1,'添加了我2');
// 结果：[2, '添加了我2', 3]
console.log(arr4);

// 数组截取  slice('开始的下标','结束的下标')
let newArray2 = arr4.slice(1,2);
// 结果：['添加了我2']
console.log(newArray2);

// 颠倒数组中元素
console.log(arr5.reverse())

// 数组排序
console.log(arr5.sort())

// 数组转字符串 20,21,23
console.log(arr5.toString());
console.log(arr4.toLocaleString());
console.log(arr3.join(','));

// 数组的查找
let arr6 = [ 1, 2, 3, 4 ];
// 返回每次函数调用的结果数组
let value = arr6.map(function(item,index){
	return item;
});
console.log(value);

// 只要有一项成立 true  否则 false
let value2  = arr6.some(function(item,index){
	return item == 3;
});
console.log(value2);

// 数组过滤符合的返回
let value3  = arr6.filter(function(item,index){
	return item == 3;
});
console.log(value3);

// 数组的值全部成立 true 否则 false
let value4 = arr6.every(function(item,index){
	return item > 1;
});
console.log(value4);

// 从数组前面开始查找, 找到返回数组下标, 否则 -1
let value5 = arr6.indexOf(function(item,index){
	return item == 2;
});
console.log(value5);

// 从数组后面开始查找
let value6 = arr6.lastIndexOf(function(item,index){
	console.log(item);
	return item == 3;
});
console.log(value6);

在这里插入图片描述

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript-Array + Vue3</title>
	</head>
	<!-- css 样式 -->
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style type="text/css">
		[v-cloak] {
			display: none;
		}
		.input-group-text{
			cursor: pointer;
		}
		.mr{
			margin-right: 10px;
		}
	</style>
	
	<!-- html 标签 -->
	<body>
		<div id="app" v-cloak>
		  <!-- 数组的 增删改查 -->
			<div class="container">
				<!-- row -->
				<div class="row">
				  <div class="col-sm-11">
						<div class="input-group mb-3 mt-3">
							<input v-model="input" type="text" class="form-control" placeholder="请输入用户名" id="demo">
							<span  @click="onSearch" class="input-group-text">搜索</span>
						</div>
					</div>
				  <div class="col-sm-1">
						<button @click="onOperation({}, 0)" type="button" class="btn btn-primary mb-3 mt-3">添加</button>
					</div>
				</div>
				<!-- end row -->
				<!-- table -->
				<table class="table table-hover table-striped">
					<thead>
						<tr>
							<th>id</th>
							<th>用户名</th>
							<th>年龄</th>
							<th>备注</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in searchArray" :key="item.id" class="grid">
							<td>{{ item.id }}</td>
							<td>{{ item.username }}</td>
							<td>{{ item.age }}</td>
							<td>{{ item.note }}</td>
							<td>
								<button @click="onOperation(item, 1)" type="button" class="btn btn-primary btn-sm mr">修改</button>
								<button @click="onDelete(index)" type="button" class="btn btn-danger btn-sm">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
				<!-- end table -->
				<!-- row -->
				<div class="row" v-if="showForm">
					<div class="col-sm-3">
						<input v-model="selectData.username" type="text" class="form-control" placeholder="请输入用户名">
					</div>
					<div class="col-sm-3">
						<input v-model="selectData.age" type="text" class="form-control" placeholder="请输入年龄">
					</div>
					<div class="col-sm-4">
						<input v-model="selectData.note" type="text" class="form-control" placeholder="请输入备注">
					</div>
					<div class="col-sm-2">
						<button @click="onConfirm"  type="button" class="btn btn-success mr">确定</button>
						<button @click="onClose" type="button" class="btn btn-danger">关闭</button>
					</div>
				</div>
				<!-- end row -->
			</div>
		</div>
	</body>
	<!--  -->
</html>

<!-- JavaScript -->
<!-- <script src="js/array.js"></script> -->
<script src="js/vue.global.js"></script>
<script type="module">
	// 模拟数据
	let dataBase = [
		{ id: 1, username: '张三', age: 20, note: '好的好的哈' },
		{ id: 2, username: '李四', age: 23, note: '好的好的哈' }
	]
	
	let app = {
		data(){
			return {
				searchArray: dataBase,
				input: '',
				showForm: false,
				selectData: {
					id: '',
					username: '',
					age: '',
					note: ''
				},
				type: 0,
			}
		},
    methods: {
		   onSearch(){
				let tArray = dataBase.filter((item,index)=>{
					return item.username == this.input;
				});
		        if(this.input == ''){
					this.searchArray = dataBase;
				}else{
				   this.searchArray = tArray;
			    }
			},
			onOperation(item = {}, type = 0){
				// 0：添加 , 1：修改
				if(type == 1){
					this.selectData = JSON.parse(JSON.stringify(item));
				}
				this.type = type;
				this.showForm = true;
			},
			
			// 删除数据
			onDelete(index){
				this.searchArray.splice(index,1);
				this.onClose();
			},
			// 关闭
			onClose(){
				this.selectData = {
					id: '',
					username: '',
					age: '',
					note: ''
				}
				this.showForm = false;
			},
			// 确认
			onConfirm(){
				if(this.type == 0){
					this.selectData.id = this.searchArray[this.searchArray.length -1].id + 1;
					this.searchArray.push(this.selectData);
				}else{
					this.searchArray.forEach((item,index) => {
						if(item.id == this.selectData.id){
							this.searchArray.splice(index,1,this.selectData);
						}
					});
				}
				this.onClose();
			}
		}
	}
	Vue.createApp(app).mount('#app');
</script>