ES6中的数组

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ES6中的数组，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5280字，纯文字阅读大概需要8分钟。

内容图文

数组是js中很重要的数据类型，虽然在 ES5 中，关于数组的方法和属性很多。但为了更加简洁、高效的操作数组，ES6 中又在数组原型上和实例上新增了一些方法。

一、Array方法

1.1 Array.from()

js中存在很多类似数组的对象，比如说获取的一组DOM元素，比如说函数的参数。

它们有着类似数组的属性，比如说键值对，或者 length 属性，但它们并不能使用数组里的方法。

要把一个类似数组的对象转换成一个真正的数组有时候可能很麻烦，就拿函数的参数来说，你需要通过如下方式：

                            
                                
                                    function () {
                            

                            
                                var arr = [];
                            

                            
                            

                            
                                for (var i = 0; i < arguments.length; i++) {
                            

                                    arr.push(arguments[i]);
                            

                                }
                            

                            
                            

                            
                                return arr;
                            

                            }
                            

                            
                            

                            
                                console.log(convertArray(1, 2, 3)); 
                            

                            
                                console.log(Object.prototype.toString.call(convertArray(1, 2, 3))); // '[object Array]'

你也可以通过另外一种方式来转换数组，我们再拿一组DOM元素来说：

                            
                                <ul>
                            
                            

                            
                                <li>aa</li>
                            

                            
                                <li>bb</li>
                            

                            
                                <li>cc</li>
                            

                            
                                </ul>

                            
                                var li = document.querySelectorAll('li');
                            

                            
                                var convertArray = Array.prototype.slice.call(li);
                            

                            
                            

                            
                                console.log(convertArray); // [li, li, li]
                            

                            
                                console.log(Object.prototype.toString.call(convertArray)); // [object Array]

虽然上面两种方式都能实现转换成数组的目的，但是因为需要各种代码‘模拟’，我们还是觉得有些繁琐。因此，ES6 中提供了 Array.from() 方法，它有一个参数，即类似数组对象，它的返回值为一个数组。

如果传入的是其他值，Array.from() 会做一些特殊处理：

参数为数组，则该方法返回原数组
参数为字符串，则该方法返回字符串以空格拆分的数组
参数为数字，则该方法返回空数组
参数为 NaN，则该方法返回空数组
参数为其他数据类型，则该方法报错

用代码来说明下：

                            
                                var li = document.querySelectorAll('li');
                            

                            
                            

                            
                                console.log(Array.from({'0': 5, '1': 10, length: 2})); // [5, 10]
                            

                            
                                console.log(Array.from({length: 3})); // [undefined, undefined, undefined]
                            

                            
                                console.log(Array.from(li)); // [li, li, li]
                            

                            
                            

                            
                                console.log(Array.from([1, 2, 3])); 
                            

                            
                                console.log(Array.from('abc')); // ["a", "b", "c"]
                            

                            
                                console.log(Array.from(2)); // []
                            

                            
                                console.log(Array.from(NaN)); // []

1.2 Array.of()

我们通常使用 Array() 方法来创建新数组（其实都是直接使用 []）：

                            
                                console.log(Array()); // []
                            

                            
                            

                            
                                console.log(Array(3)); 
                            

                            
                                // [] 最新chrome，估计是把 [,,,] 优化成 [] 
                            
                            

                            
                                // [,,,] 旧版chrome
                            
                            

                            
                                console.log(Array(3).length); // 3
                            

                            
                                console.log(Array(3)[1]); // undefined
                            

                            
                            

                            
                                console.log(Array('a')); // ["a"]
                            

                            
                            

                            
                                console.log(Array(1, 2, 'abc')); // [1, 2, "abc"]

从上面的代码可以发现，Array() 传入的情况不同，返回的值也有很大差异：

不传参数时，返回的是空数组。
参数为一个数字，则表示创建包含该数字项长度的数组，其中数组的每项都是 undefined。
参数为一个字符串，则直接返回包含该字符串，且数组长度为1的数组。
参数为多项，则直接返回包含这些项，对应的数组。

额，就因为传入的参数不同，就返回各种各样的结果。这很容易让人混淆好吗？而且你也不太可能记录各种传参的情况以及对应的返回值吧。

还好，ES6中引入了 Array.of() 方法。无论你传入怎样的参数，它都是创建一个 “对应” 的数组。来看看它的使用：

                            
                                console.log(Array.of()); // []
                            

                            
                            

                            
                                console.log(Array.of(3)); // [3]
                            

                            
                                console.log(Array.of(3).length); // 1
                            

                            
                            

                            
                                console.log(Array.of('a')); // ["a"]
                            

                            
                            

                            
                                console.log(Array.of(1, 2, 'abc')); // [1, 2, "abc"]

二、数组实例方法

2.1 find()、findIndex()

如果要查询数组中的符合条件的某一项，你通常的做法是：

循环整个数组
逐个匹配该项是否满足条件
把满足条件的数组项返回出来

有点繁琐？的确如此。 ES6 中 find() 方法可以把你从里面解脱出来，该方法用于查询符合条件的第一个数组项，它的参数是一个回调函数，函数里设置查找规则。

它的用法：

                            
                                var positiveNumber = function(value) {
                            

                                <span class= 大专栏  ES6中的数组"keyword">return value > 0;

};

console.log([2, 3, -1].find(positiveNumber)); // 2

除了数组项外，这个回调函数还接受另外两个参数：索引值和原数组

                        
                            var positiveNumber = function(value, index, arr) {
                        

                        
                            console.log(index, arr); // 0  [2, 3, -1]
                        

                        
                            return value > 0;
                        

                        };
                        

                        
                        

                        
                            console.log([2, 3, -1].find(positiveNumber)); // 2

不过我觉得这个方法设计的有点奇怪，它为什么不是返回一个符合条件的数组呢？如果需要对符合条件的多个数组项同时操作怎么办？循环使用 find ?

我们再来说说 findIndex() 方法，它的作用是返回第一个符合条件的数组项的索引位置。如果没有找到则返回 -1 ，它的用法和参数与 find() 相同：

                        
                            var positiveNumberIndex = function(value, index, arr) {
                        

                        
                            console.log(index, arr); // 0  [2, 3, -1]
                        

                        
                            return value > 0;
                        

                        };
                        

                        
                        

                        
                            console.log([2, 3, -1].findIndex(positiveNumberIndex)); // 0

2.2 fill()

fill 在字面上是填充的意思，所以 fill() 就表示通过一个或多个参数，来填充(覆盖)原始数组里的数组项。

当只传递一个参数时，该函数会用这个参数重写所有数组项：

                        
                            console.log([2, 3, -1].fill(1)); // [1, 1, 1]
                        

                        
                            console.log(newArray(5).fill(2)); // [2, 2, 2, 2, 2]

在某些情况下，你可能不想替换数组里的所有项，这时，你可以给它传递一个开始索引和一个结束索引，即该函数的第二个或第三个参数：

                        
                            console.log([2, 3, -1, 0].fill(1, 1)); // [2, 1, 1, 1]
                        

                        
                            console.log([2, 3, -1, 0].fill(1, 1, 2)); // [2, 1, -1, 0]

看到没，当传递了第二个参数后，则该参数索引在数组中后面的所有项都被替换。当传递了第三个参数后，那么就设置了一个替换范围。当同时传递后面这两个参数时，它的功能就有点类似之前操作数组的 splice 方法。但是，它似乎比 splice 方法功能更强大些。

需要注意的是，如果后面两个参数为负数，则需要将这个负数加上数组的长度，从而得到正确的索引位置。

2.3 copyWithin()

copyWithin 方法和前面说的 fill() 方法类似，主要功能还是更新替换数组项，但是它更强调复制功能，它是通过复制数组里的某一项或某几项来替换数组项。

它有三个参数：

target，必选，表示开始替换数组项的索引。
start，可选，表示从该索引数组项开始复制数据，默认值为 0。
end，可选，表示从该索引数组项结束复制数据，默认值为数组长度。

                        
                            console.log([2, 3, -1, 0].copyWithin(1)); // [2, 2, 3, -1]
                        

                        
                            console.log([2, 3, -1, 0].copyWithin(1, 2)); // [2, -1, 0, 0]
                        

                        
                            console.log([2, 3, -1, 0].copyWithin(1, 2, 3)); // [2, -1, -1, 0]

第一行代码只要一个参数，表示从数组第 1 项开始替换，复制的数据是从第 0 项到最后一项。

第二行代码有两个参数，表示从数组第 1 项开始替换，复制的数据是从第 2 项到最后一项。

第三行代码有三个参数，表示从数组第 1 项开始替换，复制的数据是从第 2 项到第 3 项。

需要注意的是，数组里的操作，第二个索引大多数都是不包含在内的，它的作用只是限定一个范围而已。

2.4 entries()，keys()、values()

通过 entries() , keys() 和 values() 方法，ES6 中还新增了数组中键值对、键、值的循环。这三个方法返回的值，内部都是一种 ArrayIterator 结构，无法直接读取。

entries() 循环键值：

                        
                            var arr = ['a', 'b', 'c'],
                        

                            iterator = arr.entries();
                        

                        
                        

                        
                            console.log(iterator.next().value); // [0, 'a']
                        

                        
                            console.log(iterator.next().value); // [1, 'b']
                        

                        
                            console.log(iterator.next().value); // [2, 'c']

当然，如果你了解 ES6 的迭代器的话，你也可以直接循环出来：

                        
                            var arr = ['a', 'b', 'c'],
                        

                            iterator = arr.entries();
                        

                        
                        

                        
                            for (let i of iterator) {
                        

                        
                            console.log(i); // [0, 'a'] , [1, 'b'], [2, 'c']
                        

                        }

keys() 循环键：

                        
                            var arr = ['a', 'b', 'c'],
                        

                            iterator = arr.keys();
                        

                        
                        

                        
                            console.log(iterator.next().value); // 0
                        

                        
                            console.log(iterator.next().value); // 1
                        

                        
                            console.log(iterator.next().value); // 2

values() 循环值：

                        
                            var arr = ['a', 'b', 'c'],
                        

                            iterator = arr.values();
                        

                        
                        

                        
                            console.log(iterator.next().value); // 'a'
                        

                        
                            console.log(iterator.next().value); // 'b'
                        

                        
                            console.log(iterator.next().value); // 'c'

对于 values() 方法，浏览器支持性可能弱一些。在写本片文章时，我用的chrome 54 版本进行测试的，但该方法返回的却是 arr.values is not a function 。

原文：https://www.cnblogs.com/lijianming180/p/12147446.html

内容总结

以上是互联网集市为您收集整理的ES6中的数组全部内容，希望文章能够帮你解决ES6中的数组所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1148149.html

来源：【匿名】

【上一篇】ES6中的箭头函数【下一篇】ES6系列之声明变量let与const

更多 ►

【ES6中的数组】教程文章相关的互联网学习教程文章

前面的话　　定型数组是一种用于处理数值类型(正如其名，不是所有类型)数据的专用数组，最早是在WebGL中使用的，WebGL是OpenGL ES 2.0的移植版，在Web 页面中通过 <canvas> 元素来呈现它。定型数组也被一同移植而来，其可为JS提供快速的按位运算。本文将详细介绍ES6定型数组概述　　在JS中，数字是以64位浮点格式存储的，并按需转换为32位整数，所以算术运算非常慢，无法满足WebGL的需求。因此在ES6中引入定型数组来解决这个问题，...

ES6中的数组【代码】

数组是js中很重要的数据类型，虽然在 ES5 中，关于数组的方法和属性很多。但为了更加简洁、高效的操作数组，ES6 中又在数组原型上和实例上新增了一些方法。一、Array方法1.1 Array.from()js中存在很多类似数组的对象，比如说获取的一组DOM元素，比如说函数的参数。它们有着类似数组的属性，比如说键值对，或者 length 属性，但它们并不能使用数组里的方法。要把一个类似数组的对象转换成一个真正的数组有时候可能很麻烦，就拿函...

es6 Array.from() 将类似数组的对象转化为数组（1）

Array.from() 将数组对象转化为数组,应用方式Array.from(arr) arr数组对象的名称;常用与类似数组的对象是DOM操作返回的Nodelist集合（如： let ps = document.querySelectorAll(‘p‘)），函数内部的arguments对象（如：function(){ let args = Array.from(arguments); //...}）备注： querySelectorAll(‘‘)返回的是一个类似数组的对象，只有将对象转化为数组才可以调用forEach方法。栗子：let arrlike = {‘0‘:‘a‘,‘1‘:‘b...

找出数组中的最小值（es5/es6）【代码】

1、命令式编程，只需要迭代数组，检查当前最小值是否大于数组元素，如果是更新最小值即可。var s = [2,3,4,5,6,7,8]; for(var i=0,m=s.length;i<m;i++){var min = s[0];if(s[i]<min){min = s[i]} } console.log(min); //22、函数式编程，可用Math.min函数，传入比较的数组元素，使用es6的解构操作符（...），把数组转换成单个的元素。var s = [2,3,4,5,6,7,8]; console.log(Math.min(...s)); //2使用箭头函数let ss = [2,3,4,5,6,...

前端面试之ES6新增了数组中的的哪些方法？!【代码】【图】

前端面试之ES6新增了数组中的的哪些方法？!我们先来看看数组中以前有哪些常用的方法吧！1新增的方法！1 forEach() 迭代遍历数组回调函数中的三个参数value: 数组中的每一个元素-index: 每一个数组元素中的索引号！arr: 数组对象本身 <script>// ES5中新增的方法// forEach() 迭代遍历数组var arr = [2, 3, 5];var sum = 0;arr.forEach(function(value, index, arr) {console.log(‘数组当中的每一个元素‘ + value);console.log(‘...

ES6中有关数组的一些新操作【代码】

1、Array.isArray() 用于确定传递的值是否是一个 Array。Array.isArray([1, 2, 3]);// trueArray.isArray({foo: 123});// falseArray.isArray("foobar");// falseArray.isArray(undefined);// false语法Array.isArray(obj)参数obj需要检测的值。返回值如果值是 Array，则为true; 否则为false。描述如果对象是 Array ，则返回true，否则为false。有关更多详细信息，请参阅文章严格判定JavaScript对象是否为数组。原文：https://www...

JavaScript（es6）数组常用的方法【代码】

常用方法1.forEach()var data = [1,2,3,4,5]; var sum = 0;//求和 data.forEach((item)=>{sum+=item}) //给原数组的每个值加1 data.forEach((value,index,data)=>{data[index] = value + 1}) 2.concat() //合并多个数组，返回合并后的新数组，原数组没有变化。const array = [1,2].concat([‘a‘, ‘b‘], [‘name‘]); // [1, 2, "a", "b", "name"]3.filter() //返回一个新数组，包含通过callback函数测试的所有元素...

es6数组新方法【代码】

es6给我们带来了更多更便利的数组方法，开熏！！1Array.fromArray.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。比如我们在获取标签时如果使用的是document.getElementByClassName获取到的就是一组伪数组，这里用from就很方便转化了let arrayLike = {'0': 'a','1': 'b','2': 'c',length: 3 };// ES5的写法 var arr1 = [].slice...

深入理解ES6之—增强的数组功能【代码】

创建数组Array.of()方法ES6为数组新增创建方法的目的之一，是帮助开发者在使用Array构造器时避开js语言的一个怪异点。Array.of()方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型。let arr = Array.of(1, 2); console.log(arr.length);//2let arr1 = Array.of(3); console.log(arr1.length);//1 console.log(arr1[0]);//3let arr2 = Array.of('2'); console.log(arr2.length);//1 console.log(arr2[0]);//'2'在使用...

ES6中数组的includes方法【代码】

includes()该方法可以用检测数组中是否包含某个值const testArray = [1，2，3，4，5] console.log(testArray.includes(1))输出true该方法可接收第二个参数作为搜索的起始位置const testArray = [ 1 , 2 , 3 , 4 , 5 ] console.log(testArray.includes(1,2))输出false数组去重可以将数组转化为ES6中的set数据类型原文：https://www.cnblogs.com/wwttc/p/12375916.html

ES6数组扩展【代码】

1、扩展运算符扩展运算符（spread）是三个点（...）.它好比rest参数的逆运算，将一个数组转化为用逗号分隔的参数序列；console.log(...[2,3,4,99]) // 2,3,4,992、Array.from 用于将两类对象转为真正的数组：类数组对象（array-like object）(包含length属性，索引：0~n)和可遍历（iterable）的对象（ES6 中的 Set 和 Map）；let arrayLike = { ‘0‘: ‘a‘, ‘1‘: ‘b‘, ‘2‘: ‘c‘, length: 3 }; console.log(Array.fro...

javascript – es6合并两个对象数组并覆盖现有对象【代码】

我有2个对象数组：const arr1 = [{'id':'1' 'value':'yes'}, {'id':'2', 'value':'no'}]; const arr2 = [{'id':'2', 'value':'yes'}];所以,如果我尝试合并这两个数组,结果应该是：arrTemp = [{'id':'1', 'value':'yes'}, {'id':'2', 'value':'yes'}];基本上,它应该类似于Object.assign(),但无论我尝试什么它都不起作用.有人可以帮我吗？我修改了数据结构.是否可以现在合并它们并获得输出. 谢谢解决方法: const result = Object.en...

es6filter()数组过滤的方法小结（附代码）

本篇文章给大家带来的内容是关于es6 filter() 数组过滤的方法小结（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Array.every(x=>x)是每一个都要满足Array.some(x=>x)是有一个满足。Array.find（findIndex)，返回符合条件的第一个值。Array.filter（过滤成新的数组）数组的方法分为两类1）改变原数组push,pop,shift,unshift,sort,reverse,splice2）不改变原数组concat,join-->split，toStringpush：从...

es6删除数组元素或者对象元素的方法介绍（代码）

本篇文章给大家带来的内容是关于es6删除数组元素或者对象元素的方法介绍（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一，删除数组元素let arr = [{name:黎明,id:21111},{name:王小二,id:1111},{name:大小二,id:3222}] arr.splice(arr.findIndex(item => item.id === 3222), 1)arr.filter(obj=>obj.id!==3222)二，删除对象元素let arr = {name: 黎明,id: 1111,age: 24 };方法1：const personUnkonwAg...

es6中filter()数组过滤方法的介绍（附代码）

本篇文章给大家带来的内容是关于es6中filter() 数组过滤方法的介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1.创建一个数组，判断数组中是否存在某个值var newarr = [{ num: 1, val: ceshi, flag: aa },{ num: 2, val: ceshi2, flag: aa2 } ] console.log(newarr.filter(item => item.num===2 ))2.也可以通过上面方法过滤掉num为2的留下num为1的var newarr = [{ num: 1, val: ceshi, flag: aa...

ES6 - 最热教程

express中使用es6的方法介绍（详细）详解JavaScript ES6中的模板字符串微信小程序ES6——箭头函数中的this问题 Vue开发中可以使用的ES6新特征 ES6中全新的数字方法总结（必看）React中ES5与ES6写法的区别总结 ES6新数据结构Map功能与用法示例 ES6 javascript中class类的get与set用法...JS实现集合的交集、补集、差集、去重运...怎样让VueEs6解析为Es5语法

首页 / ES6 / ES6中的数组

ES6中的数组

内容导读

内容图文

一、Array方法

1.1 Array.from()

1.2 Array.of()

二、数组实例方法

2.1 find()、findIndex()

2.2 fill()

2.3 copyWithin()

2.4 entries()，keys()、values()

内容总结

内容备注

内容手机端

【ES6中的数组】教程文章相关的互联网学习教程文章

ES6定型数组【代码】【图】

ES6中的数组【代码】

es6 Array.from() 将类似数组的对象转化为数组（1）

找出数组中的最小值（es5/es6）【代码】

前端面试之ES6新增了数组中的的哪些方法？!【代码】【图】

ES6中有关数组的一些新操作【代码】

JavaScript（es6）数组常用的方法【代码】

es6数组新方法【代码】

深入理解ES6之—增强的数组功能【代码】

ES6中数组的includes方法【代码】

ES6数组扩展【代码】

javascript – es6合并两个对象数组并覆盖现有对象【代码】

es6filter()数组过滤的方法小结（附代码）

es6删除数组元素或者对象元素的方法介绍（代码）

es6中filter()数组过滤方法的介绍（附代码）

数组 - 相关标签

ES6 - 最新教程

ES6 - 最热教程