11数组的方法

11数组的方法

方法	描述	参数	返回
forEach	遍历数组	item, index,array	无
map	遍历数组	item, index,array	新数组
push	在末尾添加一个或多个数据	直接写值	新数组长度
unshift	在开头添加一个或多个数据	直接写值	新数组长度
fill	给数组填充某个值	value, start_index, end_index	新数组
pop	在尾部删除一个值	不支持传参	被删除的那一项
shift	在开头删除一个值	不支持传参	被删除的那一项
splice	删除并添加某一项	start_index, num(删除几个), value1, …	被删除的那一项
sort	排序数组	函数(a, b)	新数组
slice	选取数组的的一部分拷贝	begin, end	新数组
concat	合并数组		新数组
copyWithin	从数组的指定位置拷贝元素到数组的另一个指定位置中	target, start, end)	新数组
find	查找数据	函数 ( (item, index, array) )	找到的数据，找不到undefined
findIndex	查找数据	函数 ( (item, index, array) )	找到的数据下标，找不到-1
indexOf	从下标几开始查找	（value，起始下标值）	找到的数据下标，找不到-1
lastIndexOf	从右往左从下标几开始查找	（value，起始下标值）	找到的数据下标，找不到-1
includes	数组中是否包含某一项（简单）	（value，起始下标值）	包含则true，反之false
some	数组中是否包含某一项（复杂）	函数 ( (item, index, array) )	包含则true，反之false
filter	过滤数组，找到符合条件的	函数 ( (item, index, array) )	新数组
every	看数组中每一项是否符合某条件	函数 ( (item, index, array) )	true,false
join	拼接字符串	标点符号	字符串
flat	将数组扁平化	num	新数组
reverse	反转数组		新数组
reduce	累计器	参数：函数（ (acc, item, index, array) )
reduceRight	从右到左累计	参数：函数（ (acc, item, index, array) )

一、创建数组：

①使用new构造Array函数

var colors = new Array();

②直接构造

var colors = Array();//new可以省略

③可以给构造函数传递该数组的数量

var colors = new Array(3);//表示创建一个length为3的数组

④也可以向 Array 构造函数传递数组中包含的内容

var colors = new Array("red", "blue", "green");
var students =[
    {name:'liBai', sex:'boy',age:10},
    {name:'wangZhaoJun', sex:'girl', age:10},
    {name:'luban7hao',sex:'boy',age:3}
];

二、遍历数组：

for

var arr_a = ['你','好','宠','儿'];
for( var a = 0; a <arr_a.length; a++){
    console.log( arr_a[a]);
}

for in

一般用来遍历对象

var array_1 = new Array('a',10.5,true);
var x;
for ( x in array_1 ){
    document.write( array_1[x] + "<br />" );//a 10.5 true
}

foEach

写法：arr.forEach(函数)

参数：浏览器会给forEach分配三个参数（item, index,array）

• item：数组里的每一项（必有）
• index：每一项的下标（可选）
• array：原数组（可选）
• 特点：
  • ①没有返回值
  • ②不能通过item来操作简单数据类型，可以操作复杂数据类型
  • ③可以通过传入的函数去改变原数组，不返回新数组（不推荐使用）

查看这三个参数：

var some = [1, 2, 3];
some.forEach( (item, index, array) => {
        console.log(item, index, array)
} );

改变原数组（简单数据类型）：利用参数index

var some = [1, 2, 3];
console.log(some);//[1, 2, 3]
some.forEach( (item, index, array) => {
    //利用参数index
        array[index] *= 2;//给数组的每一项乘2
} );
console.log(some);//[2,4,6]

改变原数组（引用类型）：利用参数item

var arr = [
    {name: '小明', age: 3}, 
    {name: '小明', age: 4}, 
    {name: '小明', age: 5}
];
arr.forEach( (item, index, array) => {
    //利用参数item
        --item.age;
    // item *= 2;//如果直接使用item，不会有任何变化
} );
console.log(arr);

应用：两数组通过id关联，通过js把他们合并成一个数组

a = [{id:1,age:10},{id:2,age:20},{id:3,age:30}];
b = [{id:3,sex:‘男’},{id:1,sex:‘男’},{id:2,sex:‘女’}];
c = [{id:1,age:10,sex:‘男’},{id:2,age:20,sex:‘女’},{id:3,age:30,sex:‘男’}]
var c = [];
a.forEach(function(val) {
       b.forEach(function(val2){
           if(val.id===val2.id){
                 c.push({//push
                         d:val.id,
                          age:val.age,
                          sex:val2.sex
                        })
              }
        })
  });
console.log(c);            

map

• 他也有三个参数（item, index,array）
• map不改变原数组而返回新数组
• map方法会返回一个新的数组，数组里边的每一项需要我们自己返回
• map可以通过item直接操作数组里边的每一项（基本类型、引用类型都可）

基本类型：

var arr_a = [1,2,3,4,5];//原始数据
    var result = arr_a.map( (item, index) => {
        return item *= 2//这里用到了return，而forEach不用
} );
console.log(result);//[2, 4, 6, 8, 10]
console.log(arr_a);//[1,2,3,4,5]
console.log(arr_a === result);//false

引用类型：

 var arr = [
        {
            age:3,
            good: "yes"
        },
        {
            age:4,
            good: "no"
        }
];
var result_a = arr.map( (item, index) => {
    //可以直接使用item，forEach此时不可用
        return item +=2;//["[object Object]2", "[object Object]2"]
});
console.log(result_a);

三、增加内容：

（1）在末尾添加：

①利用下标直接添加

var colors = ['red','blue','green'];
//新增第四项，第五项
colors[3] = "brown";

②利用arr.length

colors[arr.length] = '我是新增色';

③push

添加一个或多个，返回新数组长度

var arr = [1,2,3];
console.log(arr);//[1,2,3]长度3

// arr.push(value1,value2.....)
var result = arr.push(4,{nickname: '小明'},['hello', 'world']);
console.log(result);//[1,2,3,4,{nickname: '小明'},['hello', 'world']]长度6

（2）从开头添加：

unshift

添加一个或多个，返回新数组长度

var arr = [1,2,3];
console.log( arr );//[1,2,3]
arr.unshift(-1,0.1,0.2,0.3);
console.log( arr ); //[-1, 0.1, 0.2, 0.3, 1, 2, 3]
//console.log( arr.unshift(-1,0.1,0.2,0.3) );//返回长度7

（3）填充：

fill

给数组填充某个值

参数：(value, start_index, end_index)

const some6 = [1,2,'hello world', [1,2,3]];
some6.length += 6;
some6.fill(1, 3)
console.log( some6 );[1, 2, "hello world", 1, 1, 1, 1, 1, 1, 1]
//[1,2,3]被覆盖了：用填充可以修改数组里的某一项

四、删除内容：

（1）从尾部删除：

pop

pop只能删除一个,把被删除的那一项返回出去，不支持传参

var arr = [1,2,3];
console.log(arr);//[1,2,3]
arr.pop(1);//不管里边写的数字是几，都只删除一个
console.log(arr);//[1,2]

console.log( arr.pop(1) );//返回被删除的那一项-->3

（2）从开头删除：

shfit

删除数组里的第0项并返回

var some_a = [ {nickname:'小明'}, 2, 3, 4];
console.log(some_a);
var result = some_a.shift();
console.log(some_a, result);

（3）删除某一项

利用delete和下标

var colors = ['red','blue','green'];
delete colors[2];//表示想删除"green"
cosole.log(colors);//但是，数组长度依然不会变，只是color[2]变成了empty(空)（相当于只是删除了值）

五、删除并（或）添加

splice

从某下标开始删除某几项，并可以在被删除的位置添加数据，返回被删除的数据，会改变原数组

参数：(start_index, num(删除几个), value1, value2…)

const some4 = ['hello world', 123, true, false, null ];
console.log( some4.splice(1, 1, 456) );//123
console.log( some4 );//['hello world', 456, true, false, null ];

六、排序数组

sort

用法：arr.sort((a, b) => {})

默认的排序方法是把数组里的每一项都转成字符串，然后比较字符编码

参数：浏览器会传来两个参数：a, b

• a - b : 从小到大
• b - a : 从大到小
• 传参使用“ - ”后，将转成Number类型比较
• 如果未传参，默认从小到大

var arr = [10, 5, 7, 60, true, false];
arr.sort();//从小到大排序
//转成字符串，然后比较字符编码
console.log(arr);//[10, 5, 60, 7, false, true]

var students = [
        {nickname: '小明', score: 70}, 
        {nickname: '小红', score: 90},
        {nickname: '小刚', score: 80}
];
students.sort( (a, b) => a.score - b.score );
console.log(students);//70 80 90

友情提醒：最好声明另一个变量来等于这个数组，然后再进行排序。（不要改变源数据）

❓为什么a - b 表示从小到大，b - a 表示从大到小呢？

我们来举个例子，将[4,5,3,1,2]从大到小排序

和冒泡排序有些相似，从左到右两个两个的比较，这里的a是后一个值，b是前一个值

如何排序取决于函数返回的结果：大于零b排前，等于零不对调，小于零a排前

var arr = [4,5,3,1,2];
arr.sort( (a, b) => {
        return b - a;//4 - 5 = -1 < 0 [5,4,3,1,2]
        //4 - 3 = 1 > 0  [5,4,3,1,2]
        //3 - 1 = 2 > 0 [5,4,3,1,2]
        //1 - 2 = -1 < 0 [5,4,3,2,1]
} );
console.log(arr);//[5,4,3,2,1]

七、拷贝、切割数组

（1）浅拷贝

复制值的时候如果是简单数据类型，创建一个新值，如果是引用类型复制地址

slice

拷贝（切割）数组里的值

参数：

• 浏览器给之两个参数(begin, end)，begin和end都是下标数字，从begin复制到end
• 区间：左闭右开 [ )
• 若传了一个参数，则是begin
• 不传参数，默认begin为0，拷贝数组的所有项

返回：新数组

//🎈区间：左闭右开  [  )
var arr = [1, 2, 3, 4, 5];
var result_a = arr.slice(1, 4);//[1,4)
console.log( result_a );//[2, 3, 4]
//🎈不传参数，拷贝数组的所有项
var arr = [1, 2, 3, 4, 5];
var result = arr.slice();//拷贝原数组的所有项
console.log(result);//[1, 2, 3, 4, 5]
//🎈若传了一个参数，则是begin
var arr_a = [6,7,8,9,10];
var result_a = arr_a.slice(-4);//从倒数第四位开始切割
console.log( result_a );//[7, 8, 9, 10]
//🎈如果是一个简单数据类型
var arr_b = [1,2,3,4];
var result_b = arr_b.slice();
result_b[0] = 1.1;
console.log(result_b);//[1.1, 2, 3, 4]
//🎈如果是一个引用类型的话，复制的是一个地址
var arr_c = [ {hello : 'world'}, {hi: 'say'} ];
var result_c = arr_c.slice();
result_c[0].hello = 'hello world';
console.log(result_c);

concat

拷贝（合并）多个数组

返回的是一个新数组

var a = [1,2,3];
var b = [4,5,6];
var c = [7,8,9];
var a_s = a.concat( b, c );
console.log(a_s);//[1, 2, 3, 4, 5, 6, 7, 8, 9]
//可以利用一个空数组来承接
var result = [].concat(a, b, c);
console.log(result);//[1, 2, 3, 4, 5, 6, 7, 8, 9]
//复制值的时候如果是简单数据类型，创建一个新值
a_s[0] = 100;
console.log(a_s);//[100, 2, 3, 4, 5, 6, 7, 8, 9]
 //拷贝引用类型就是在拷贝地址
var d = [ { nickname: '小明' } ];
var e = [ { nickname: '小刚' } ];
var f = d.concat(e);
console.log(f);//[ {nickname: '小明'}, { nickname: '小刚' } ];
f[0].nickname = '小鹏';
console.log(f);

copyWithin

从数组的指定位置拷贝元素到数组的另一个指定位置中，会改变原数组。

参数：(target, start, end)

var arr = [1, 2, 3, 4, 5, 6];
var result = arr.copyWithin(0, 3);
console.log(arr);//[4, 5, 6, 4, 5, 6]

（2）深拷贝

JSON对象的 stringify方法和parse

数组是JSON结构的，键值对都是JSON结构。

stringify表示对象序列化，将引用数据类型生成一个对象字符串。（在强制类型转换时，对象会被转成[Object,Object]，为了避免这个结果，用stringify）；

parse是对象反序列化，把被序列化了的对象字符串转成对象

var obj = {nickname: '小明'};
console.log(obj);//现在是对象
//序列化：
var some = JSON.stringify(obj);
console.log(some);//现在是字符串
//反序列化：
var obj_a = JSON.parse(some);
console.log(obj_a);//现在是对象s
console.log( obj_a === obj );//flase
obj_a.nickname = '小刚';

var some = [1, 2, 3, {nickname: '小明'}];
var some3 = JSON.parse( JSON.stringify( some ) );
console.log(some3);

八、按条件查找

find

从左往右找，返回找到的数据，找到一个就结束，找不到返回undefined

参数：函数 ( (item, index, array) )

var arr = [1,2,3,4, 4,{ nickname: '宠儿',age: 13 }, { nickname: '旱麓',age:124 }];
//这个数组里边有没有等于4的值
var result = arr.find( item => item === 4  );
console.log(result);//4

findIndex

从左往右找，返回找到的数据下标，找到一个就结束，找不到返回-1

参数：函数 ( (item, index, array) )

const arr8 = [ 1, 2, 3, 4, 5, 6,3, { nickname: '小明' }, [1,2,3], [1,2,3] ];
const result1 = arr8.findIndex( item => item.nickname === '小刚' );//-1没有找到

indexOf

从左往右找简单数据类型，返回找到的数据的下标，可以自定义从下标几开始找，找不到返回-1

参数：（value，起始下标值）

var arr = [1,2,3,4,5,2,3,4,5, { nickname: '宠儿',age: 16 }];
console.log( arr.indexOf(2, -4) );// -1 //从倒数第四位开始找

lastIndexOf

从右往左找简单数据类型，返回找到的数据的下标，可以自定义从下标几开始找，找不到返回-1

参数：（value，起始下标值）

var arr = [1,2,3,4,5,2,3,4,5, { nickname: '宠儿',age: 16 }];
console.log( arr.lastIndexOf(1, 0) );//0

includes

数组中是否有某一项（简单数据类型），有返回true，没有返回false。

参数：（value，起始下标值）

var arr = [1,2,3,4,5,2,3,4,5, { nickname: '宠儿',age: 16 }];
console.log( arr.includes(3, 7) );//false

some

数组中是否有某一项（复杂数据类型），有返回true，没有返回false。

参数：函数 ( (item, index, array) )

var arr = [1,2,3,4,5,2,3,4,5, { nickname: '宠儿',age: 16 }];
console.log( arr.some( item => item === 10 ) );//false

filter

过滤数组并返回一个新数组，不会改变原数组

参数：函数 ( (item, index, array) )

var a = [1,2,3,4,5];
var result = a.filter( (item, index, array) => item > 2 );//返回出所有大于2的数据
console.log(result);//[3, 4, 5]

var b = [ {nickname: '小明', score: 59},{nickname: '小刚', score: 70},{nickname: '小红', score: 80} ];
console.log(findMing);//[{nickname: '小明', score: 59}]

var result_b = b.filter( item => item.score >= 60 );
console.log(result_b);

九、其他

every

判断是否每一项都满足某一个条件，都满足返回true，反之返回false

参数：函数 ( (item, index, array) )

var c = [1,2,3,4,5];
var result = c.every( ( item, index, array ) => item > 2 );
console.log(result);//false

join

会把数组里边的每一项都转化成字符串然后拼接成一个字符串

参数：（标点符号）

var arr = [1,2,3,4, {nickname: '小明'}];
console.log( arr.join('&') );
1&2&3&4&[object Object]

flat

将数组扁平化 -> 变成一维数组

参数：一个数字num

var arr = [1,2, [3, 4, [7, 8]], [5, 6]];
console.log( arr.flat(2), arr );

reverse

翻转数组

var arr = [1,2,3,4];
console.log( arr.reverse() );//[4, 3, 2, 1]

reduce

累计器，从左到右

参数：函数（ (acc, item, index, array) )

var d = [1,2,3,4];
var result = d.reduce( (acc, item, index, array) => {
     return acc * item;
} );
console.log( result );

reduceRight

var d = [1,2,3,4];
var result_c = d.reduceRight( (acc, item, index) => acc + item, 100 );