转换方法

tostring()

toString()返回由数组中每一个值的字符串形式拼接并且以逗号相隔的字符串(数组转化为字符串),原数组不变

  1. let ary=[1,2,3,'num'];
  2. console.log(ary.toString());//'1','2','3','num'
  3. console.log(ary);//[1,2,3,'num']

valueOf()

valueOf()返回的是数组

  1. let ary = [1, 2, 3, 5];
  2. console.log(ary.valueOf());// [1, 2, 3, 5]
  3. console.log(ary);// [1, 2, 3, 5]

toLocaleString()

toLocaleString()返回一个数组值以逗号相隔的字符串,区别于toString()的是他返回的日期对象格式不同,将数组转化为本地格式的字符串,返回本地化字符串。

  1. let ary = [1, 2, 4, 5];
  2. console.log(ary.toLocaleString());//'1, 2, 4, 5'
  3. console.log(ary);[1, 2, 3, 5]

toLoaleString()和toString()的对象时间格式不同

  1. let time=new Date();
  2. console.log(time.toLocaleString());//2019-9-21 6:54:21 AM
  3. console.log(time.toString());//Sat Sep 21 2019 06:54:21 GMT+0800 (GMT+08:00)

栈方法

push()

push()接受任意数量的参数,并逐个加入到数组的末尾,返回修改后的数组长度,原数组变成新数组

  1. let ary=['11','22','33'],
  2. res=ary.push('12',34);
  3. console.log(res);//5
  4. console.log(ary);//[ '11', '22', '33', '12', 34 ]

pop()

pop: 删除数组末尾项,改变数组长度,返回移除项,原数组变成新数组,pop里添加参数没有作用

  1. let ary = ['11', '22', '33'],
  2. res = ary.pop();
  3. console.log(res);//'33'
  4. console.log(ary);//[ '11', '22' ]

队列方法

shift()

shift:删除原数组的第一项,返回删除元素的值,原数组变成新数组;若为空,则返回undefined

  1. let ary = ['11', '22', '33'],
  2. res = ary.shift();
  3. console.log(res);//'11'
  4. console.log(ary);//[ '22', '33' ]
  5. let ary1=[];
  6. res1=ary1.shift();
  7. console.log(res1);//undefined
  8. console.log(ary1);//[]

unshift()

unshift:将任意参数添加到原数组的开始位置,返回数组的长度,原数组改变

  1. let ary = ['11', '22', '33'],
  2. res = ary.unshift('num');
  3. console.log(res);//4
  4. console.log(ary);//[ 'num', '11', '22', '33' ]

小汇总

在栈方法和队列方法中可得,

  1. 都改变原数组
  2. 添加数组项的方法都返回数组长度
  3. 删除项的方法会返回数组删除项

重排序方法

reverse()方法

reverse()是将原数组反向输出

  1. let ary=[1,2,3,4];
  2. console.log(arr.reserve());//[4,3,2,1]

sort()方法

sort()对数组进行排序,ie6-8下不兼容,能进行10以内的排序,大于10的需要借助下面的方式进行比较

ary.sort(function(a,b){ return a-b;//升序 }) ary.sort(function(a,b){ return b-a;//降序 })

  1. let ary=[1,4,6,8,3,1];
  2. console.log(ary.sort());//[1,1,3,4,6,8]
  3. let arr=[12,34,1,2,76,4];
  4. console.log(arr.sort()); //[ 1, 12, 2, 34, 4, 76 ] 错误,并未按照要求排序
  5. console.log(arr.sort(function compareArray(a,b){
  6. return a-b;
  7. })); //[ 1, 2, 4, 12, 34, 76 ]
  8. console.log(arr.sort(function(a, b) {
  9. return b-a;
  10. })); //[ 76, 34, 12, 4, 2, 1 ]
  11. console.log(arr);//[ 76, 34, 12, 4, 2, 1 ]

操作方法

concat()方法

concat()用于拼接多个部分,返回新构建的数组,不修改原数组

  1. let ary=[1,2,3,4],
  2. arr=[2,33,44,32];
  3. console.log(arr.concat(ary));//[ 2, 33, 44, 32, 1, 2, 3, 4 ]
  4. console.log(arr);//[ 2, 33, 44, 32 ]
  5. console.log(arr.concat());//[ 2, 33, 44, 32 ]

join()方法

join() 方法用于把数组中的所有元素放入一个字符串,元素是通过指定的分隔符进行分隔的。

fill()方法

slice()方法

slice()返回数组指定的新数组,slice截取数组时包左不包右,s索引从零开始,不改变原数组

slice(n):从索引n的位置开始截取到数组结尾,作为新数组返回 slice(n,m):从索引为n位置开始截取到索引为m的位置,截取的内容作为新数组返回 slice(0)|slice():返回原数组 slice(-n):原数组的长度+(-n)

  1. var ary=[12,45,3,4,32,6,7];
  2. console.log(ary.slice(0)); //[ 12, 45, 3, 4, 32, 6, 7 ]
  3. console.log(ary.slice()); //[ 12, 45, 3, 4, 32, 6, 7 ]
  4. console.log(ary.slice(2, 4));//[ 3, 4 ]
  5. console.log(ary.slice(3)); //[ 4, 32, 6, 7 ]
  6. console.log(ary.slice(-3)); //[ 32, 6, 7 ]
  7. console.log(ary.slice(-11, -3));//[ 12, 45, 3, 4 ]
  8. console.log(ary.slice(-3, -9));//[]
  9. console.log(ary.slice(-3, 6));//[ 32, 6 ]
  10. console.log(ary.slice(5,6));//[6]
  11. console.log(ary.slice(-3,-6))//[]
  12. console.log(ary); //[ 12, 45, 3, 4, 32, 6, 7 ]

splice()方法

splice()方法可以删除,增加,修改,包左包右。

  1. 删除:

    1. 1.splice(n,m)->从索引n开始,删除m个元素,返回删除内容形成的数组,【敲黑板:原数组改变】
    2. 2.splice(n):从索引n开始,删到结尾
    3. 3.splice(0):返回原数组,表示从头删到尾
    4. 4.splice():返回[]
    5. 5.splice(-n):原数组的长度+(-n)
  1. let ary=[1,2,6,7,3,7,9,7,2];
  2. console.log(ary.splice(3, 5));//[ 7, 3, 7, 9, 7 ]
  3. console.log(ary); //[ 1, 2, 6, 2 ]
  4. //console.log(ary.splice(0)); //[ 1, 2, 6, 2 ]
  5. // console.log(ary.splice());//[]
  6. //console.log(ary.splice(2)); //[ 6, 2 ]
  7. //console.log(ary.splice(-1));//[2]
  1. 替换splice

    1. 1.splice(n,x,m):从索引开始删除x个,返回删除的内容,原数组改变,同时在原数组n的前面加上m
    2. 2.splice(n,x,m,s,d,a): 从索引n开始删除x个,返回删除的内容,原数组改变,同时在原数组n的前面加上 m,s,d,a;不论第三项后有多少,直接加在改变的数组后面
    3. 3.支持负索引
  1. var ary=[1,5,3,7,2,7];
  2. //console.log(ary.splice(1,0));//[]
  3. console.log(ary.splice(2, 1, 8));//[ 3 ]
  4. console.log(ary); //[ 1, 5, 8, 7, 2, 7 ]
  5. console.log(ary.splice(2,3,4,5));//[8,7,2]
  6. console.log(ary);//[1,5,4,5,7]
  7. console.log(ary.splice(-4,2,4));//[5,4]
  8. console.log(ary);//[1,4,5,7]
  1. 增加

    1. splice(n,0,m):从索引n开始,一个都不删(返回 []),然后在原数组的n前面添加m,原数组改变
  1. let ary=[1,7,3,7,2,8,9];
  2. console.log(ary.splice(2,0,4,5))//[]
  3. console.log(ary); //[ 1, 7, 4, 5, 3, 7, 2, 8, 9 ]

位置方法

indexOf()方法

indexOf()按元素查找,当前内容在数组出现的第一次索引的位置,参数是:要查找的项和查找起点位置的索引(从开头开始)

lastIndexOf()方法

lastIndexOF:当前内容在数组最后一次出现的位置,参数:查找的项和查找起点位置的索引(从末尾开始)

相同点:若存在,索引是几就返回几,不存在就返回-1,比较第一个参数与数组中的每一项时是使用全等操作符进行严格比较的.

  1. var numbers = [1,2,3,4,5,4,3,2,1];
  2. console.log(numbers.indexOf(4)); //3
  3. console.log(numbers.lastIndexOf(4)); //5
  4. console.log(numbers.indexOf(4,4)); //5
  5. console.log(numbers.lastIndexOf(4,4)); //3
  6. var person = { name: "Nicholas" };
  7. var people = [{ name: "Nicholas" }];
  8. var morePeople = [person];
  9. console.log(people.indexOf(person)); //-1
  10. console.log(morePeople.indexOf(person)); //0
  11. console.log(morePeople)

find()方法

find()按函数查找, 找到第一个满足检测函数条件的元素,并返回该元素,没找到则返回 undefined。

  1. var array = [1, 2, 3, 4, 5];
  2. console.log(array.find(x => x > 3)); // 输出 4

findIndex()方法

findIndex()方法找到第一个满足检测函数条件的元素,并返回该元素索引。找不到返回-1。

  1. var array = [6, 7, 8, 9, 10];
  2. console.log(array.findIndex(x => x > 8)); // 输出 3

迭代方法

相同点:**每种方法接受两个参数,要在每一项上运行的函数跟运行该函数的作用对象—影响this的值(可选),而传入这些方法的函数要接收三个参数:数组项的值,该项在数组中的位置和数组对象本身**

every()方法

every()方法对数组中的每一项运行给定的函数,如果**该函数对任何一项都返回true,则返回true**。(相当于逻辑与)

  1. let ary=[1,4,23,65,7,3];
  2. //item是当前值,index是当前值的索引,array是指数组
  3. let num=ary.every(function(item,index,array){
  4. return item>6
  5. })
  6. console.log(ary);//[ 1, 4, 23, 65, 7, 3 ]
  7. console.log(num);//false

some()方法

some()判断数组中是否存在满足条件的项,只要一项满足,就返回true(相当于逻辑或)

  1. var ary=[1,4,23,65,7,3];
  2. var num=ary.some(function(item,index,array){
  3. return item>6
  4. })
  5. console.log(ary); //[ 1, 4, 23, 65, 7, 3 ]
  6. console.log(num);//true

filter()方法

filter()利用指定的函数确定是否含有在返回的数组中包含某一项,返回满足过滤条件组成的数组敲黑板:原数组不变,新数组改变

  1. let ary=[12, 34, 13, 76];
  2. var an=ary.filter(function(item,index,array){
  3. return item>23;
  4. })
  5. console.log(an);//[34,76]
  6. console.log(ary) //[ 12, 34, 13, 76 ]


forEach()方法

forEach()遍历数组的每一项 ,数组中有几项,就执行几遍,没有返回值,参数是function类型,默认有传参参数是:数组项的值,该项在数组中的位置和数组对象本身,本质上与for迭代一样敲黑板:原数组不变

  1. var ary=[12,34,13,76];
  2. ary.forEach(function(item,index,array) {
  3. console.log(item,index,Array);
  4. consooloe.log(ary)
  5. })
  6. console.log(ary) //[ 12, 34, 13, 76 ]
  7. // 12 0[Function: Array]
  8. // 34 1[Function: Array]
  9. // 13 2[Function: Array]
  10. // 76 3[Function: Array]

map()方法

map()用来遍历数组的每一项,为每一个元素调用制定的函数,同时返回每次函数调用的结果组成的数组。,有返回值,敲黑板:原数组不变,新数组改变

  1. var ary=[12,34,13,76];
  2. console.log(ary.map(function(item,index,array){
  3. return item * 3;//[ 36, 102, 39, 228 ]
  4. }))
  5. console.log(ary) //[12, 34, 13, 76 ]

归并方法

相同点:这两个方法都会迭代数组的所有项,构建一个最终返回的值。
这两个方法接收**两个参数**:一个在每一项上调用的函数和(可选)作为归并 基础的初始值。
而作为参数的函数接收**四个参数**:前一个值、当前值、项的索引值、数组对象,并且这个函数的任何返回值都会作为该函数的第一个参数自动传给下一项。

reduce()方法

reduce()从数组的第一项起,遍历到最后

  1. var ary=[1,4,23,65,7,3];
  2. var num=ary.reduce(function(prev,current,index,array){
  3. return prev+current
  4. })
  5. console.log(ary); //[ 1, 4, 23, 65, 7, 3 ]
  6. console.log(num);//103

reduceRight()方法

reduceRight()从数组的第一项起,遍历到最后

  1. var numbers = [1,2,3,4,5];
  2. var sum = numbers.reduceRight(function(pre, cur, index, array) {
  3. return pre + cur;
  4. });
  5. console.log(sum); // 15

数组创建方法

Array.of()

会创建一个包含所有传入参数的数组,不管参数数量和类型,可以代替Array()或者newArray()

  1. let item=Array.of(1,2);
  2. let items = Array.of(1, 2);
  3. console.log(items.length); // 2
  4. console.log(items[0]); // 1
  5. console.log(items[1]); // 2
  6. items = Array.of(2);
  7. console.log(items.length); // 1
  8. console.log(items[0]); // 2

Array.from()

Array.from(): 1. 伪数组对象或可遍历对象转换为真数组

伪数组

如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为“类似数组的对象”(array-like object),即为伪数组

  1. var obj = {
  2. 0: 'a',
  3. 1: 'b',
  4. 2: 'c',
  5. length: 3
  6. };
  7. obj[0] // 'a'
  8. obj[1] // 'b'
  9. obj.length // 3
  10. obj.push('d') // TypeError: obj.push is not a function 对象obj就是一个类似数组的对象。但是“类似数组的对象”并不是数组,因为它们不具备数组特有的方法。
  11. 对象obj没有数组的push方法,使用该方法就会报错。
  12. 作者:浪里行舟
  13. 链接:https://juejin.im/post/5b5dc4b5f265da0f723883ba

伪数组类型

函数的arguments对象,部分dom元素集,字符串

伪数组转为数组

  1. array.prototype.slice.call()
  1. function arr(){
  2. console.log(arguments);
  3. let args=Array.prototype.slice.call(arguments);
  4. args.push("f");
  5. console.log(args);//[1,2,3,4,"f"]
  6. return args
  7. }
  8. arr(1,2,3,4);
  1. array.from()

    array.from(input,map,context):input为类似数组对象和可遍历对象(必选项);map是对每一个元素进行处理,将处理的值放回到数组;context绑定this中的this

此方法需要部署iterator接口数据结构

  1. let arr = Array.from('juejin');
  2. console.log(arr); //["j", "u", "e", "j", "i", "n"]
  3. Array.from([1, 2, 3], (x) => x * x)// [1, 4, 9]
  4. // 等同于
  5. Array.from([1,2,3].map(x => x * x))
  6. Array.from({ length: 2 }, () => 'jack')// ['jack', 'jack']