JavaScript进阶:数组常用方法

xiaoxiao2021-02-28  100

前言

为了加深对数组多个方法的理解,再此对数组常用方法进行总结。

转换方法

分别是:toLocaleString()、toString()、valueOf()。 定义:这里直接看看W3Cschool的定义,简单理解一下

1、toLocaleString()、toString()有什么区别? 看我写的两段代码: 代码1: var arr = [1,2,3]; console.log(arr.toLocaleString()); console.log(arr.toString());

结果没有区别。 其实不仅仅是数字数组,包括数字值、字符串数组两个方法输出都是一样的。

再看代码2: var arr = new Date(); arr.getTime(); console.log(arr.toLocaleString()); console.log(arr.toString()); 区别显而易见。 2、valueOf()介绍 这里介绍valueOf()方法。如果存在任意原始值,它就默认将对象转换为表示它的原始值;对象是复合值,而大多数对象无法真正表示为一个原始值,因此默认的valueOf()方法简单地返回对象本身,而不是返回一个原始值。 那什么是原始值? 原始值是表示Javascript中可用的数据或信息的最底层形式或最简单形式。原始类型的值被称为原始值,是因为它们是不可细化的。也就是说,数字是数字,字符是字符,布尔值则是true或false,null和undefined就是null和undefined。这些值本身很简单,不能表示由其他值组成的值。 看一段代码: 代码1: var a = 111; var b = true; var c = “apple”; var d = null; var e = undefined; console.log(a.valueOf()); console.log(b.valueOf()); console.log(c.valueOf()); console.log(d.valueOf()); console.log(e.valueOf()); 结果: 数值类型、字符串类型、布尔类型都可以,但undefined和null是不可以的。

再看一段代码: 代码2: document.writeln( foo.valueOf() === foo ); // true var foo2 = new Function(“x”, “y”, “return x + y;”); document.writeln( foo2.valueOf() === foo2 ); // true

// Object:返回对象本身 var obj = {name: “张三”, age: 18}; document.writeln( obj.valueOf() === obj ); // true

// String:返回字符串值 var str = “http://www.365mini.com“; document.writeln( str.valueOf() === str ); // true // new一个字符串对象 var str2 = new String(“http://www.365mini.com“); // 两者的值相等,但不全等,因为类型不同,前者为string类型,后者为object类型 document.writeln( str2.valueOf() === str2 ); // false } 结果: valueOf相对来说比较简单,理解比较容易。

3、join()方法 join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分 隔符进行分隔的。返回一个字符串。 看例子: var arr = [1,2,3]; console.log(arr.join(‘|’)); console.log(arr.join(‘a’)); console.log(arr.join(‘5’)); console.log(arr.join(‘abc’)); 结果: join()方法的参数须为字符串,字符串的内容可任意。 栈方法 这里介绍后进先出的两个方法:ArrayObj.push()方法和ArrayObj.pop()方法

(1)ArrayObj.push():就是向数组末尾添加新的元素,返回的是数组新的长度。 (2)ArrayObj.pop():就是向数组中删除数组最后一个元素并且返回该元素。如 果数组为空就返回undefined。 看一段代码: var arr = [1,2,3]; console.log(arr.push(1)); //返回元素个数4 console.log(arr.pop()); //返回出栈的元素1 结果:

队列方法

介绍两个先进后出的方法:ArrayObj.shift()和ArrayObj.unshift() ArrayObj.shift():方法用于把数组中的第一个元素删除,并返回第一个元素的值。如果数组是空的,则shift() 方法不进行任何操作,返回undefined。请注意,该方法不创建新数组,而是直接修改原来的数组。该方法会改变数组的长度。 ArrayObj.unshift() :该方法可把它的参数添加到数组的头部。它直接修改了数组,而不是创建一个新的数组。返回的是新数组的长度。 var arr = [1,2,3]; console.log(arr.shift()); //删除第一个元素 console.log(arr); //[2,3] console.log(arr.unshift(5)); console.log(arr); //[5,2,3] 结果:

重排序方法

常用的重排序方法有:reverse()和sort() 1、reverse()方法反转数组的顺序; 代码: var arr = [1,2,3,12]; arr.reverse(); console.log(arr); 结果:

2、(1)sort()方法为将数组按从小到大的顺序排列,因为在排序前,该方法会调用toString()方法,将数组内元素转换为字符串,所以会出现“12”在“2”前面的情况,因为比对的是两元素的第一个数字。 看一个例子: var arr = [1,2,3,12]; arr.sort(); console.log(arr); 结果:

(2)这种排序方式在很多情况下都不是最佳方案。因此sort()方法可以接受一个比较函数作为参数,以便我们指定那个值位于那个值的前面。 看一段代码: var arr = [1,2,3,12]; arr.sort(cmp); console.log(arr);

function cmp (value1, value2) { if(value1 < value2){ return -1; } else if(value1 > value2){ return 1; } else { return 0; } }

结果:

操作方法

concat()、slice()和splice()方法: (1)concat(array)方法用于连接两个或多个数组。 代码: var arr1 = [1,2,3]; var arr2 = [4,5,6]; console.log(arr1.concat(arr2)); 结果: (2)slice(start,end)方法: start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 返回值:返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。 代码: var arr1 = [1,2,3,4,5,6]; var arr2 = arr1.slice(1,5); console.log(arr2); //[2,3,4,5]

(3)splice() 有删除,插入,替换的功能 删除: 需要两个参数,要删除的第一项的位置和要删除的项数。 var colors = [“red”, “green”, “blue”]; var removed = colors.splice(0,1); console.log(colors); // greeen, blue console.log(removed); // red 插入 需要三个参数:起始位置、0(要删除的项数)和要插入的项 var colors = [“red”, “green”, “blue”]; var removed = colors.splice(1,0,”yellow”, “orange”); console.log(colors); // [“red”, “yellow”, “orange”, “green”, “blue”] console.log(removed); // 返回空 替换 需要三个参数:起始位置、要删除的项数和要插入的任意数量的项。 var colors = [“red”, “green”, “blue”];var removed = colors.splice(1,1,”yellow”, “orange”); console.log(colors); // [“red”, “yellow”, “orange”, “blue”] console.log(removed); // [“green”]

转载请注明原文地址: https://www.6miu.com/read-65042.html

最新回复(0)