史上最全JavaScript数组对象详解(二)

简介: 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",

JavaScript数组对象详解(二)


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


1.ES6之前的方法


vararr1= [1, 2, 3];
vararr2= ["a", "b", "c"];
vararr3= ["张三", "李四", "王五", "赵六"];
vararr4= ["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);
varnums= [1, 2, 3, 11, 22, "a", "B", "b", "c", "A"];
// sort()   对数组的元素进行排序。    字典console.log(nums.sort());
console.log(nums.sort(function (a, b) {
returna-b    })); //升序console.log(nums.sort(function (a, b) {
returnb-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));
varaNum= [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) {
returnnum>30    }))
// filter() 检测数值元素,并返回符合条件所有元素的数组。console.log(aNum.filter(function (num) {
returnnum>0;
    }))
varaNum2= [1.2, 1.8, 2.0, 4.3];
// reduce(function(total,val){})    将数组元素计算为一个值(从左到右)。console.log(aNum2.reduce(function (sum, val) {
sum+=val;
returnsum;
    }))
// reduceRight()    将数组元素计算为一个值(从右到左)。console.log(aNum2.reduceRight(function (sub, val) {
sub-=val;
returnsub;
    }))
// toString()   把数组转换为字符串,并返回结果。console.log(aNum2.toString());
// valueOf()    返回数组对象的原始值。console.log(aNum2.valueOf())


2.ES6中中新增的方法


vararr= [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);vararr= [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) {
returnnum>19;
    }));
// findIndex()  返回符合传入测试(函数)条件的数组元素索引。console.log(aNum.findIndex(function (num) {
returnnum>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


相关文章
|
12天前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
23 0
|
2天前
|
JavaScript
JS判断变量是不是数组?方法大全!
JS判断变量是不是数组?方法大全!
|
3天前
|
JavaScript 前端开发
JavaScript 解决数组查重 问题(三种解决方法)
JavaScript 解决数组查重 问题(三种解决方法)
|
8天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
9 2
|
9天前
|
Web App开发 JavaScript 前端开发
JavaScript 中的 Range 和 Selection 对象
JavaScript 中的 `Range` 和 `Selection` 对象用于处理文本选择。`Range` 表示文档中选定的区域,而 `Selection` 表示用户选择的文本或光标位置。`Range` 可以创建并设置于任何元素或文本,具有多个属性(如 `startContainer`, `endContainer`, `collapsed`)和方法(如 `cloneContents`, `deleteContents`)。`Selection` 提供了获取和操作用户选择的方法,如 `anchorNode`, `focusNode` 和 `addRange`。两者在所有现代浏览器中基本兼容。
5 1
JavaScript 中的 Range 和 Selection 对象
|
10天前
|
JSON JavaScript 安全
向js发送含有NSDictionary对象或NSArray对象的消息
向js发送含有NSDictionary对象或NSArray对象的消息
21 0
|
12天前
|
前端开发 JavaScript
前端 JS 经典:判断对象属性是否存在
前端 JS 经典:判断对象属性是否存在
17 0
|
15天前
|
JSON 前端开发 JavaScript
前端 JS 经典:JSON 对象
前端 JS 经典:JSON 对象
19 0
|
15天前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
25 1
|
15天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理