Array数组操作（变异更新、替换）

最新推荐文章于 2022-08-10 10:16:33 发布

·Mr.zuo

最新推荐文章于 2022-08-10 10:16:33 发布

阅读量718

点赞数

分类专栏： vue javascript 文章标签： vue js

本文链接：https://blog.csdn.net/zuomengjia/article/details/102572674

版权

vue 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

javascript

15 篇文章 0 订阅

订阅专栏

JS数组操作

①末尾添加-push，会改变原始数组，返回值为数组更新后的新数组长度。

var arr = [11,22,33,44,55,66]
		var arr_push = arr.push(777)
		console.log(arr_push)
		console.log(arr)
/*push数组末尾添加---返回值变异后的数组长度*/

②末尾删除-pop，会改变原始数组，返回值为被删除的数组元素。

var arr = [11,22,33,44,55,66]
		var arr_pop = arr.pop()
		console.log(arr_pop)
		console.log(arr)
/*pop数组末尾删除---返回值值为被删除的数组元素*/

③开头添加-unshift，会改变原始数组，返回更新后新数组长度

var arr = [11,22,33,44,55,66]
		var arr_unshift = arr.unshift(00)
		console.log(arr_unshift)
		console.log(arr)
/*unshift数组开头添加---返回值变异后的数组长度*/

④开头删除-shift，会改变原始数组，返回被删除的数组元素

var arr = [11,22,33,44,55,66]
		var arr_shift = arr.shift()
		console.log(arr_shift)
		console.log(arr)
/*shift数组开头添加---返回值值为被删除的数组元素*/

⑤添加、删除、替换-splice，会改变原始数组
1、删除：删除(任意个数)—参数1：开始的索引；参数2：删除的长度

var arr = [11,22,33,44,55,66]
		var arr_splice = arr.splice(0,3)
		console.log(arr_splice)
		console.log(arr)
/*删除splice(start,length)--返回值为被删除的数组元素*/

2、添加(任意个数): 插入起始位置、0（要删除的项数）和要插入的项。

var arr = [11,22,33,44,55,66]
		var arr_splice = arr.splice(0,0,3)
		console.log(arr_splice)
		console.log(arr)
/*添加splice(start,0,newInfo)--返回值为空数组*/

替换：替换(任意个数)：即删除和插入数量相等项数的综合应用，可以指向指定位置插入任意数量的项，且同时删除任意数量的项
3、指定3个指定参数：起始位置、要删除的项数和要插入的任意数量项。

ar arr = [11,22,33,44,55,66]
		var arr_splice = arr.splice(0,2,88,99)
		console.log(arr_splice)
		console.log(arr)
/*替换splice(start,length,newInfo)--返回值为被替换的数*/
/*指定3个指定参数：起始位置、要删除的项数和要插入的任意数量项*/

⑥排序-sort，会改变原始数组，返回排序后的数组

var arr = [11,33,55,22,44,66]
		var arr_sort = arr.sort()
		console.log(arr_sort)
		console.log(arr)
/*sort数组排序---返回值为排序后的数组*/
/*解析：排序时按照ASCII码进行排序，先看首个字符的ASCII码值，按照码值进行排序。*/

⑦翻转-reverse，会改变原始数组，返回翻转后的数组

var arr = [11,33,55,22,44,66]
		var arr_reverse = arr.reverse()
		console.log(arr_reverse)
		console.log(arr)
		/*reverse数组反转---返回值为被翻转后的数组*/

以上是数组变异更新

非变异更新

⑧筛选-filter，不会改变原始数组，返回筛选后的新数组

var arr_repeat = ['A','B','A','D','B','E','D'];
		var arr_filter = arr_repeat.filter(function(element,index,self){
			return self.indexOf(element) == index;
		})
		console.log(arr_filter)		/* ['A','B','D','E']*/
		console.log(arr_repeat)		/*['A','B','A','D','B','E','D']*/

⑨拼接-concat，不会改变原始数组，返回拼接后的新数组

var arr_concat = ['a','b','c']
		var arr_concat2 = arr_concat.concat(['d','e','f'])
		console.log(arr_concat)
		console.log(arr_concat2)

⑩截取-slice:包含开头索引不含结尾索引，返回截取的数组元素

var arr_slice = ['a','b','c','d','e','f']
		var arr_slice1 = arr_slice.slice(2,4)
		console.log(arr_slice)
		console.log(arr_slice1)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="demo" v-cloak>
			<ul>
				<li v-for="good of goods">
					{{good.name}}-----{{good.price}}
				</li>
			</ul>
			<button @click="filterFn">点击</button>
		</div>
	</body>
	<script type="text/javascript">
		var demo = new Vue({
			el:'.demo',
			data:{
				goods:[
					{name:'三星',price:666},
					{name:'v6ovi',price:2000},
					{name:'htc',price:5100},
					{name:'苹果',price:6666},
					{name:'华为',price:4500},
					{name:'诺基亚',price:2200},
				]
			},
			methods:{
				filterFn(){
					this.goods = this.goods.filter(function(itme,index,self){
						return itme.price>2000&&itme.price<5000
					})
				}
			},
			computed:{
				
			}
		})
	</script>
</html>

字符串和数字大小对比

小结
（1）纯字符串比较，转换成ASCII码再进行比较；
（2）纯数字和数字字符串相比较，则将字符串数字隐式转换成数字再进行比较；
（3）纯数字和非数字字符串比较，都返回false；

ASCII码值

拓展：

（1）charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
语法：stringObject.charCodeAt(index)
字符串中第一个字符的下标是 0。如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN。

/*charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。*/
		console.log('ASCII码值')
		var str = "hello vue!"
		console.log(str.charCodeAt(6))	
		/*字符串中第一个字符的下标是 0。如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN。*/
		var str1 = "你看啥看"
		console.log(str1.charCodeAt(1))
		console.log(str1.charCodeAt(2))

（2）charAt() 方法可返回指定位置的字符。
①场景：获取字符串“你看啥看”的你，需要转数组再获取

var str2 = "你看啥看";
		var str_array = str2.split('').join('')
		console.log(str_array[4])
/*有值返回值没有值返回undefined*/

②现在可以直接用charAt() 方法可返回指定位置的字符

var str3 = "你看啥看";
		console.log(str3.charAt())
/*有值返回值没有值返回空*/

小结：
1、charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
2、charAt() 方法可返回指定位置的字符。
3、方法 charCodeAt() 与 charAt()
方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。

JS限制-数组操作

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
①利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
②修改数组的长度时，例如：vm.items.length = newLength
利用索引直接设置，无法响应
方法1：set方法
语法结构：Vue.set(vm.items, indexOfItem, newValue)
方法2：splice替换
语法结构：vm.items.splice(indexOfItem, number, newValue)
限制2：修改数组的长度时，例如：vm.items.length = newLength

JS限制-对象操作

对象属性改动时，vue可以实时监听检测，实现响应式。但是注意：由于 JS的限制，Vue 不能检测对象属性的添加或删除。
使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性
此外还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名。

以上就是小编对数组操作的理解，如有疑问请随时联系小编！

·Mr.zuo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Array数组操作（变异更新、替换）

JS数组操作①末尾添加-push，会改变原始数组，返回值为数组更新后的新数组长度。var arr = [11,22,33,44,55,66] var arr_push = arr.push(777) console.log(arr_push) console.log(arr)/*push数组末尾添加---返回值变异后的数组长度*/②末尾删除-pop，会改变原始数组，返回...
复制链接

扫一扫