史上最全JavaScript数组对象详解（二）javascriptqq39155611的博客-

JavaScript数组对象详解（二）

上一篇博客我们讲到了JavaScript数组对象的创建，访问和属性，接下来一篇博客主要讲一下JavaScript数组对象的方法及使用。说到数组的方法，主要分为两大部分，一部分是ES6以前的数组方法，一部分是ES6新增的方法。

1.ES6之前的方法

 var arr1 = [1, 2, 3]; var arr2 = ["a", "b", "c"]; var arr3 = ["张三", "李四", "王五", "赵六"]; var arr4 = ["a", "b", "c", "a", "b", "c", "a", "b", "c"]; // 数组的方法 // concat() 连接两个或更多的数组，并返回新的数组，不改变原数组。     console.log(arr1.concat(arr2, arr3));     console.log(arr1); // indexOf() 搜索数组中的元素，并返回它第一次出现所在的索引值。如果检索不到，返回-1。     console.log(arr1.indexOf(0));     console.log(arr2.indexOf("a")); // lastIndexOf() 搜索数组中的元素，并返回它最后出现的索引值。     console.log(arr4.indexOf("a"));     console.log(arr4.lastIndexOf("a")); // isArray() 判断对象是否为数组。     console.log(Array.isArray(arr1)); // join() 把数组的所有元素放入一个字符串。将数组转换为字符串     console.log(arr3.join()); // pop() 删除数组的最后一个元素并返回删除的元素。改变原数组     console.log(arr4.pop());     console.log(arr4); // push() 向数组的末尾添加一个或更多元素，并返回新的长度。改变原数组     console.log(arr4.push("hello", "China"));     console.log(arr4); // shift() 删除并返回数组的第一个元素。  改变原数组     console.log(arr4.shift());     console.log(arr4); // unshift() 向数组的开头添加一个或更多元素，并返回新的长度。改变原数组     console.log(arr4.unshift("hello", "World"));     console.log(arr4); // reverse() 反转数组的元素顺序。 反向排列  改变原数组     console.log(arr1.reverse());     console.log(arr1); // slice(开始的索引,结束的索引) 选取数组的的一部分，并返回一个新数组。留头不留尾    不改变原数组     console.log(arr4.slice(1, 3));     console.log(arr4); // splice(起始的索引,截取的长度,添加的新元素) 从数组中 添加 或删除元素。返回新数组  改变原数组    在指定位置添加元素 // console.log(arr4.splice(1,6));     console.log(arr4.splice(1, 6, "red", 'green', "blue"));     console.log(arr4); var nums = [1, 2, 3, 11, 22, "a", "B", "b", "c", "A"]; // sort() 对数组的元素进行排序。    字典     console.log(nums.sort());     console.log(nums.sort(function (a, b) { return a - b     })); //升序     console.log(nums.sort(function (a, b) { return b - a     })); //降序 // forEach(function(value,index,arr){}) 数组每个元素都执行一次回调函数。     nums.forEach(function (val, index, arr) { // console.log(val,index,arr);         console.log(val); }) // for(var i=0;i<nums.length;i++){ //     console.log(nums[i]) // } // map() 通过指定函数处理数组的每个元素，并返回处理后的数组。     console.log(aNum2.map(Math.abs)); var aNum = [18, 20, 22, 30]; // every() 检测数值元素的每个元素是否都符合条件。     aNum.every(function (num) {         console.log(num > 0) }) // some() 检测数组元素中是否有元素符合指定条件。     aNum.some(function (num) {         console.log(num > 20) })          console.log(aNum.some(function (num) { return num > 30 })) // filter() 检测数值元素，并返回符合条件所有元素的数组。     console.log(aNum.filter(function (num) { return num > 0; })) var aNum2 = [1.2, 1.8, 2.0, 4.3]; // reduce(function(total,val){}) 将数组元素计算为一个值（从左到右）。     console.log(aNum2.reduce(function (sum, val) {         sum += val; return sum; })) // reduceRight() 将数组元素计算为一个值（从右到左）。     console.log(aNum2.reduceRight(function (sub, val) {         sub -= val; return sub; })) // toString() 把数组转换为字符串，并返回结果。     console.log(aNum2.toString()); // valueOf() 返回数组对象的原始值。     console.log(aNum2.valueOf()) 

2.ES6中中新增的方法

 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // copyWithin(target,start,end) 从数组的指定位置拷贝元素到数组的另一个指定位置中。     console.log(arr.copyWithin(0, 3, 5)); // entries() 返回数组的可迭代对象。 // console.log(nums.entries().next().value); // keys() 返回数组的可迭代对象，包含原始数组的键(key)。 // console.log(nums.keys().next().value); var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // fill(val,start,end) 使用一个固定值来填充数组。     console.log(arr.fill("a", 0, 1)); // find() 返回第一个符合传入测试（函数）条件的数组元素。     console.log(aNum.find(function (num) { return num > 19; })); // findIndex() 返回符合传入测试（函数）条件的数组元素索引。     console.log(aNum.findIndex(function (num) { return num > 19; })); // includes() 判断一个数组是否包含一个指定的值。     console.log(aNum.includes(17)); // from(object,function) 通过给定的 对象 中创建一个数组。     console.log(Array.from([1, 2, 3])); 

总结：

• 数组的方法不仅仅是知道每个方法是什么意思，最主要的是要知道每个方法操作完后返回值是什么。
• 数组中pop(),push(),shift(),unshift()这四个方法是经常再面试的时候会被问到的，记忆技巧(键盘上有shift键，向上，所以这两个代表开头，p开头的:屁股，所以代表末尾，单词长的代表添加，单词短的的代表删除)。(手动偷笑)
• 还要区分开slice()和splice()的区别。
• 最后要知道其实ES6中新增的一些方法主要是数组的一些迭代。其实ES5中的forEach(),map(),every(),some(),filter()都是数组的迭代。下面一篇博客会讲这集中迭代方法的区别。

视频讲解链接：
https://www.bilibili.com/video/BV1St4y1C73g