理解-数组的常用方法

文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
图 / 自己画

❥❥❥❥点个赞，让我知道你来过~❥❥❥❥

0 / 数组

数组是引用数据类型的对象数据类型（特殊的对象）。

创建一个数组，需要开辟一个堆内存，以键值对的形式存储数组内容。

（1）数组属性名默认是数字。数字从零开始递增，表示当前是第几项，把这个数字称为”索引“。

数组是以数字为索引，索引从零开始递增的结构。

（2）默认存在一个 length 属性，代表数组的长度，是可以动态调整的。
（3）数组中的每一项可以保存 任何类型的数据。

let arr = [
    1,
    '2',
    {
        id:'zhaoxiajingjing',
        name:'朝霞的光影笔记'
    },
    [4],
    function (){},
    Symbol(1),
    false
];

△ 数组举个例子

（1）arr[索引] 获取某一项，或操作它

（2）arr.length-1 数组最后一项

（3）arr[arr.length-1]=true; 修改数组最后一项的值

（4）arr.length=10;增加数组的长度，新增的每一项都会取得 undefined 值。length 不是只读的

（5）arr[arr.length-1]初始化未定义值，默认是 undefined

（6）delete arr[arr.length-1] 把数组当做普通对象来操作，键值可以删掉，但是length 的长度不会改变

（7）arr.length-- 删除数组最后一项

数组是一个 有序 的，可以存储任何数据类型值的对象数据类型值。

1 / 检测数组

let arr = [];

console.log(arr instanceof Array); //=>true

△ 检测数据类型

instanceof操作符问题在于，它假定只有一个全局执行环境。

如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的 Array 构造函数。如果从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

不管在哪个全局执行环境中创建的数组，都可以检测：

console.log(Array.isArray(arr));

△ Array.isArray()

数组中常用的内置方法，要熟记：

① 方法的意义和作用

② params 参数（执行方法时传递的值）

③ return 返回值（执行完方法返回的结果）

④ 原始数组是否改变

数组是对象数据类型的值，存储在堆内存中，所以要清楚其是否会变化。

1、增删改

push、pop、unshift、shift、splice

2、查询和拼接

slice、concat

3、转换为字符串

toString、join

4、验证是否包含某一项

indexOf、lastIndexOf、includes

5、排序

reverse、sort

6、迭代

forEach、map、filter、some、every

7、归并

reduce、reduceRight

提问：数组中常用的方法有哪些？要不打磕巴的脱口而出哦~

2 / 增删改

push

① 向数组末尾 追加 元素

② 个数不定，类型不定，都是向数组末尾依次追加的

③ length 新增后的数组长度

④ 改变

pop

① 删除数组最后一项

② 无

③ 被删除的那一项内容

④ 改变

unshift

① 向数组开始位置新增内容

② 个数不定，内容不定，都是依次新增的内容

③ length 新增后数组的长度

④ 改变

shift

① 删除数组第一项

② 无

③ 被删除的那一项

④ 改变

splice 实现数组的增删改——原数组改变

3 / 查询

slice

① 实现数组查询功能

② arr.slice(n, m)从索引 n 开始，查找到索引 m（不包含 m）

③ 把查找到的内容以新数组的方式返回

④ 不变

let arr = [100, 200, 300, 400];
//=> 第二个参数不写，默认直接查找到数组末尾
let arr2 = arr.slice(0); 
console.log(arr === arr2); //=> false

△ 数组的浅拷贝

arr.slice(n) 第二个参数不写，默认直接查找到数组的末尾

arr.slice(0) 从索引 0 开始，查找到数组末尾；已查找到的内容以新数组存储返回。即：浅拷贝数组。

4 / 拼接

concat

① 把多个数组或者多个值，拼成一个新的数组

② 个数不定，内容不定

③ 返回拼接后的新数组

④ 不变

let arr1 = [100, 200];
let arr2 = [300, 400];
let result = arr2.concat({id:'zhaoxiajingjing', name:'朝霞的光影笔记'}, arr1, 500);
console.log(result); //=> [300, 400, {id:'zhaoxiajingjing', name:'朝霞的光影笔记'}, 100, 200, 500]

△ 数组拼接

arr.concat(); 与空拼接在一起，返回一个新数组 => 克隆，浅拷贝，不常用

result.concat();
result[2].age = 2;
//=> [300, 400, {id:'zhaoxiajingjing', name:'朝霞的光影笔记', age:2}, 100, 200, 500]
console.log(result);

△ 接上一个代码

5 / 转换为字符串

toString

① 把数组中的每一项按照 ” 逗号分隔 ”，拼接成对应的字符串

② 无

③ 拼接完成的字符串

④ 不变

let arr = [1, 0, 10, [20], 
    {id:'zhaoxiajingjing', name:'朝霞的光影笔记'}
];
//=> '1,0,10,20,[object Object]'
console.log(arr.toString()); 

join

① 可以指定分隔符，拼接成成字符串

② char: 指定分隔符

③ 拼接完成的字符串

④ 不变

 let arr = [100,200,300];
 //=> '100,200,300'
 console.log(arr.join()); 
 //=> '100-200-300'
 console.log(arr.join('-'));
 //=> '100200300'
 console.log(arr.join(''));

6 / 检测是否包含

获取数组中指定项的索引

arr.indexOf(searchElement) 获取查找项在数组中第一次出现位置的索引，没有找到返回 -1

arr.lastIndexOf(searchElement) 获取查找项在数组中最后一次出现位置的索引，没有找到返回 -1

arr.includes(searchElement) 查找项在数组中存在返回 true，不存在返回 false

let arr = [100, 200, 300, 200];
console.log(arr.indexOf(200, 2)); //=> 第二个参数指定查找的起始索引

7 / 排序

reverse

① 把原始数组倒过来排序

② 无

③ 倒过来的原始数组

④ 改变

let arr = [200, 100, 300];
let result = arr.reverse();
console.log(arr === result); //=> true

sort

① 把原始数组按照规则进行排序

② 排序规则

③ 改变后的原始数组

④ 改变

let arr = [11, 23, 2, 9, 110, 12];
//=> 默认是按照每一项的每一个字符编码进行排序的
let result = arr.sort(); 
//=> [11, 110, 12, 2, 23, 9]
console.log(result); 

let arr = [11, 23, 2, 9, 110, 12];
//=> 从小到大排序
let result = arr.sort((a,b)=>a-b);
//=> [2, 9, 11, 12, 23, 110]
console.log(result); 

8 / 迭代

① 遍历数组中的每一项

② 第一个参数：在每一项上运行的 函数；第二个参数（可选）：指定 this

函数的参数(item, index, array)：每一项、索引、数组对象本身

③ 返回值：

forEach 没有返回值

map 每次函数调用的结果组成的数组

filter 每次函数调用返回 true 的项组成的数组

some 找 true，函数调用有一个 true，则返回 true

every 找 false，函数调用有一个 false，则返回 false

④不会改变原数组的值

let arr = [100, 200, 300, 400];
let result = arr.filter((item, index, array)=>{return item>300;});
console.log(result); //=> [400]

9 / 提问

1、下代码输出结果是什么？

let arr = [10, 20, 30, 40];
arr.splice(
    arr.length-1, 0, 
    {id:'zhaoxiajingjingjing', name:'朝霞的光影笔记'}
);
console.log(arr);

2、向数组末尾增加字符串 ” 朝霞的光影笔记 ” 有几种方案？

let arr = [10, 20, 30, 40];

3、删除数组末尾这一项，写出几种方案

let arr = [10, 20, 30, 40];

4、输出结果是什么？

let arr = [10, 20, 30, {id:'zhaoxiajingjingjing', name:'朝霞的光影笔记', age:1}];
let arr2 = arr.slice(0);
arr2[arr2.length-1].age = 2;
console.log(arr);

5、结果是什么？

let arr = [10, 20, 30, {id:'zhaoxiajingjingjing', name:'朝霞的光影笔记'}];
console.log(arr.indexOf({id:'zhaoxiajingjingjing', name:'朝霞的光影笔记'}));

6、数组去重（任意写几种都可以）

let arr = [1, 2, 3, 4, 2, 3, 5, 2];

10 / 预告

数组归并方法：reduce、reduceRight