今天小编写一下Array数组操作（变异更新、替换）
来个v-for和key小补充，方便了解接下来的课程

循环指令v-for补充:

使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;
我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;
最好的办法是使用数组中不会变化的那一项作为key值,对应到项目中,即每条数据都有一个唯一的id,来标识这条数据的唯一性;
原因：
因为Virtual DOM 使用Diff算法实现的原因

循环指令key属性补充:

Vue和React框架用遍历指令时的key值不建议用index

（1）key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以
（2）如果有删除插入的操作，后一位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的操作，这种可能重复或者改变的key值不仅不会优化还会影响性能
（3）index作为:key值，有可能导致第一次执行循环体初始化失败，正确的做法是尽量使用理想的 key 值－每项都有的唯一 id
今天的内容小编分为四个部分,分别是：
（1）数组操作补充
（2）ASCII码值
（3）JS限制-数组操作限制
（4）JS限制-对象操作限制

前言

Vue 包含一组观察数组的变异更新与替换的方法，它们将会触发视图更新。
在正式介绍前，先回顾下原生JS数组操作。
变异方法 (mutation method)，顾名思义，会改变原始数组。
非变异 (non-mutating method) 方法，则不会改变原始数组。

JS数组操作

①末尾添加-push，会改变原始数组，返回值为数组更新后的新数组长度。
如下代码例子：

//变异方法 (mutation method)var new_array = [11, 22, 33, 44, 55, 66];//push数组末尾添加---返回值变异后的数组长度var new_array_push = new_array.push(999);console.log(new_array_push);console.log(new_array)

如下图片例子：

②末尾删除-pop，会改变原始数组，返回值为被删除的数组元素。
如下代码例子：

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

如下图片例子：

③开头添加-unshift，会改变原始数组，返回更新后新数组长度
如下代码例子：

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

如下图片例子：

④开头删除-shift，会改变原始数组，返回被删除的数组元素
如下代码例子：

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

如下图片例子：

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

如下代码例子：

var new_array4 = [11, 22, 33, 44, 55, 66];//删除splice(start,length)--返回值为被删除的数组元素var new_array_splice = new_array4.splice(1, 3);//1、删除：删除(任意个数)---参数1：开始的索引；参数2：删除的长度console.log(new_array_splice);//返回被删除的数组元素console.log(new_array4)

如下图片例子：
返回被删除的数组元素

2、添加(任意个数): 插入起始位置、0（要删除的项数）和要插入的项
如下代码例子：

var new_array5 = [11, 22, 33, 44, 55, 66];//添加splice(start,0,newInfo)--返回值为空数组var new_array_splice = new_array5.splice(1, 0, 333, 4444);//2、添加(任意个数): 插入起始位置、0（要删除的项数）和要插入的项。console.log(new_array_splice);//返回空；如果要插入多个项，可以再传入第四、第五....任意多个项console.log(new_array5)

如下图片例子：
返回空；如果要插入多个项，可以再传入第四、第五…任意多个项

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

3、指定3个指定参数：起始位置、要删除的项数和要插入的任意数量项。
如下代码例子：

var new_array6 = [11, 22, 33, 44, 55, 66];console.log('以下是splice替换');//替换splice(start,length,newInfo)--返回值为被替换的数组var new_array_splice = new_array6.splice(0, 3, 999, 888, 777);//3、指定3个指定参数：起始位置、要删除的项数和要插入的任意数量项。console.log(new_array_splice);//返回被替换掉的数组元素；注意：插入的项数是不必与删除的项数相等console.log(new_array6)

如下图片例子：
返回被替换掉的数组元素；注意：插入的项数是不必与删除的项数相等

⑥排序-sort，会改变原始数组，返回排序后的数组
如下代码例子：

var new_array7 = [11, 33, 55, 22, 444, 666];var new_sort = new_array7.sort()//返回值为排序后的数组console.log(new_sort)

如下图片例子：

排序位置22为什么在3的前面？
解析：排序时按照ASCII码进行排序，先看首个字符的ASCII码值，按照码值进行排序。

字符串和数字大小对比

小结

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

ASCII码值

拓展：

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

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 str_charat = '你看啥看'//①场景：获取字符串“你看啥看”的你，需要转数组再获取var str_array = str_charat.split("").join()console.log(str_array[2])// ②现在可以直接用charAt() 方法可返回指定位置的字符console.log(str_charat.charAt(2))

如下图片例子：
①场景：获取字符串“你看啥看”的你，需要转数组再获取

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

小结：

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

 var new_array7 = [11, 22, 33, 44, 55, 66];console.log('以下是reverse数组反转');var new_reverse = new_array7.reverse()//返回值为被翻转后的数组console.log(new_reverse)

以上即为数组变异更新，接下来结合Vue看下效果。

案例展示：（使用数组变异更新方法会改变原始数组）
之前的方法会改变原始数组，有些方法则不会改变。
变异方法 (mutation method)，顾名思义，会改变原始数组。
相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。
⑧筛选-filter，不会改变原始数组，返回筛选后的新数组
如下代码例子：

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

如下图片例子：

⑨拼接-concat，不会改变原始数组，返回拼接后的新数组
如下代码例子：

var arr_concat1 = ['A','B','C','D']var arr_concat2 = arr_concat1.concat(['E','F','G'])console.log(arr_concat1)console.log(arr_concat2)

如下图片例子：

⑩截取-slice:包含开头索引不含结尾索引，返回截取的数组元素
如下代码例子：

var arr_slice1 = ['A','B','C','D']var arr_slice2 = arr_slice1.slice(1,2)console.log(arr_slice1)console.log(arr_slice2)

如下图片例子：

案例展示1（筛选）：

点击按钮实现筛选功能

案例展示2：排序

（不想改变原数组，想通过数组副本来实现过滤和排序显示时，可以使用计算属性返回数组副本。）

案例解析：

Vue在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化的复用DOM元素（key属性标识检测）。
替换的数组里，含有相同元素的项不会被重新渲染，因此可以大胆利用新数组替换旧数组，不必担心性能问题。

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

①利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
②修改数组的长度时，例如：vm.items.length = newLength
利用索引直接设置，无法响应
为了解决第一类问题，有两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

方法1：set方法

语法结构：Vue.set(vm.items, indexOfItem, newValue)
也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名。

方法2：splice替换

语法结构：vm.items.splice(indexOfItem, number, newValue)

限制2：修改数组的长度时，例如：vm.items.length = newLength

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

要点

【非变异方法】

filter筛选操作—返回值为被筛选后的新数组，注意：并没有改变原始数据，而是生成了新数组。

concat拼接—返回值为被拼接后的新数组
slice截取—返回值为被截取的数组元素（包头不包尾）
【变异方法】
push数组末尾添加—返回值变异后的数组长度
pop数组末尾删除—返回值为被删除的数组元素
unshift数组开头添加—返回值变异后的数组长度
shift数组开头删除—返回值为被删除的数组元素
splice删除、添加、替换
删除splice(start,length)–返回值为被删除的数组元素
添加splice(start,0,newInfo)–返回值为空数组
替换splice(start,length,newInfo)–返回值为被替换的数组元素，注意：删除的数组元素个数必须与新添加的数组元素个数相等。
sort数组排序—返回值为排序后的数组
reverse数组反转—返回值为被翻转后的数组

[字符串数组索引操作]

—indexOf从头到尾
—lastIndexOf从尾到头
注意：如果字符串；里没有该子元素，则返回-1，如果有则返回该元素在字符串数组里的下标。

关于array数组操作（变异更新、替换）今天就说这么多，有问题留言小编，嘿嘿…

Vue Array数组操作（变异更新、替换）相关推荐

Array数组操作（变异更新、替换）
Array数组操作(变异更新.替换) 循环指令v-for补充使用v-for更新渲染过的元素列表时,默认的就会使用复用策略,列表数据修改的时候,会根据key值去判断某个值是否修改:如果修改,则重新渲染 ...
vue数组操作不更新视图问题
vue 观察数组的变异方法更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...
vue数组变化视图_vue数组操作不更新视图问题(示例代码)
vue 观察数组的变异方法更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...
vue数组变化视图_vue数组操作不更新视图问题
vue 观察数组的变异方法更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...
微信小程序 for循环 array数组操作详解
一.for循环的使用 ①for(let i = 0 ; i < length ; ++i){ } 示例: for(let i=0;i<length;++i){console.log(tem ...
np.array 数组操作
NumPy 数组有助于对大量数据进行高级数学和其他类型的操作.通常,这些操作的执行效率更高,比使用Python原生数组的语法更简单. 一维数组 numpy中文网数组创建可以使用array函数从常规 ...
doctrine find的对象转换成数组_「ES6基础」Array数组的新方法（上）
在日常工作中我们经常会与数组打交道,因此需要熟练掌握数组操作的相关方法,ES6中关于数组的操作,又给我们带来了哪些惊喜呢,Array数组操作又添加了哪些新方法? 本篇文章将从以下几个方面进行介绍: A ...
vue 数组元素替换_11. VUE 数组操作
变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() 添加元素 {{ item.message }} varexample1= newVue({ el ...
javascript数组降维_js Array数组实用操作大全(≈28条)不定期更新
来源:(更新:2019-12-26)https://github.com/renzhezhilu/Blog/blob/master/javaScript/jsAdvanced/Array%E6%93% ...

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

循环指令v-for补充:

循环指令key属性补充:

前言

JS数组操作

字符串和数字大小对比

ASCII码值

案例展示1（筛选）：

案例展示2：排序

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

方法1：set方法

方法2：splice替换

要点

Vue Array数组操作（变异更新、替换）相关推荐

最新文章

热门文章