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 的别名。
以上就是小编对数组操作的理解,如有疑问请随时联系小编!