目录

一.数组基础

1.创建数组

1.使用Array构造函数创建

2.使用字面量方法创建

3.应用：创建一个包含1-100的数组

 2.数组遍历

遍历的两种方式f（for、for-in循环）

二.数组实现深拷贝、浅拷贝

1.深拷贝与浅拷贝

2.数组的深拷贝与浅拷贝

三.可迭代对象或类数组转化为真数组

1.可迭代对象与类数组的区别

可迭代对象（ITerable）

类数组（Array-like）

2.可迭代对象或类数组转化为真数组

Array.From()方法进行转换(ES6）

使用遍历方式(for-in)把成员放到一个新数组中 

四.数组检测

instanceof操作符

Array.isArray（）方法

五.数组的序列化与反序列化

六.数组的原型方法

1.构造函数的方法

2.原型的方法

栈与队列的方法（改变原数组）

排序方法

操作方法

位置方法

迭代方法

---

一.数组基础

ecmascript数组是有序列表，是存放多个值的集合。

有以下特性：

每一项都可以保存任何类型的数据。（字符串、数值、数组）数组一般都放置同一类型的数据

数组的大小是可以动态调整。

数组length属性：可读可写，可以通过设置length的值从数组的末尾移除项或向数组中添加新项

js中的数组是可以存放任意数据类型值的集合，数组的元素可以是任意数据类型，数组的长度可以动态调整。

1.创建数组

1.使用Array构造函数创建

//数组创建
//使用Array构造函数创建
VAR arr1 = new Array(5);//()内数字表示在创建时初始化数组长度
arr1[0] = 'zhangshan';
arr1[1] = 'lisi';
arr1[2] = 'wangwu';
console.LOG(arr1);//[ 'zhangshan', 'lisi', 'wangwu', <2 empty items>(两项为空值) ]
console.log(arr1.length);//5

2.使用字面量方法创建

//字面量创建  数组是[]  对象是{}
var arr2=['zhangshan','lisi','wangwu'];
console.log(arr2);//[ 'zhangshan', 'lisi', 'wangwu' ]

3.应用：创建一个包含1-100的数组

push()方法是数组的栈底添加 意思是往数组的底部添加 unshift()方法是数组的栈顶添加 意思是往数组的头部添加

//创建一个数组包含1-100
//方法一：var nums = [1,2,...]
var nums = [];
for(var i=0;i<100;i++){
    nums[i] = i+1;
}
console.log(nums);//1-100

//从小到大输出1-100所有的偶数
var nums = [];
for(var i=0;i<100;i++){
    if(i%2==0){nums.push(i)}
}
console.log(nums);
//从大到小输出1-100所有偶数
var nums = [];
for(var i=0;i<100;i++){
    if(i%2==0){nums.unshift(i)}
}
console.log(nums);
//从小到大输出1-100所有奇数
var nums = [];
for(var i=0;i<100;i++){
    if(i%2!=0){nums.push(i)}
}
console.log(nums);

 2.数组遍历

遍历的两种方式f（for、for-in循环）

//数组遍历（将每一个成员提取一次） 循环提取数组成员
//for 循环
var nums = [1,2,3];
for(var i=0;i<nums.length;i++){
    console.log(nums[i]);//1,2,3
//可以做一些操作 nums[i]='数字:'+nums[i];
}
console.log(nums);//[1,2,3]

//for...in循环
for(var k in nums){
    console.log(nums[k]);
}

二.数组实现深拷贝、浅拷贝

1.深拷贝与浅拷贝

主要针对于引用数据类型参数说的，浅拷贝表示仅拷贝引用地址，深拷贝表示对于对象的克隆

如何实现深拷贝：

1、JSON序列化     ：JSON.parse(JSON.stringify(obj))

2、Object.assign()拷贝    ：Object.assign({}, obj1);//深拷贝

2.数组的深拷贝与浅拷贝

浅拷贝(数组): (会改变原数组)

就是数组A重新赋值给数组B,数组B里的属性值被改变,则数组A里的值也会跟着发生改变。

深拷贝(数组): (不会改变原数组)

（1）使用slice() 和 concat()方法来实现深拷贝

（2）利用循环实现

//数组也为引用数据类型{}
var arr3 = [1,2,3];
var arr4 = arr3;
arr4[3] = 4;
console.log(arr3);//[ 1, 2, 3, 4 ] 发生浅拷贝

//数组实现深拷贝
var arr5 = [];//创建新数组，把数组3的成员遍历，一个一个加入数组5
for(var k in arr3){
    arr5.push(arr3[k]);
}
var arr6 = arr3.concat(5,6);//数组拼接函数，返回新数组[1,2,3,5,6]
arr6.push(4) //[1,2,3,4,5,6]不影响被拷贝的数组

三.可迭代对象或类数组转化为真数组

1.可迭代对象与类数组的区别

可迭代对象（Iterable）

Iterable 对象是数组的泛化。即任何对象都可以被定制为可在 for..of 循环中使用的对象。数组、字符串都是可迭代的。从技术上讲，对象不是数组，而是表示某物的集合（列表，集合），for..of 是一个能够遍历它的很好的语法

Iterable 如上所述，是实现了 Symbol.iterator 方法（用于使对象可迭代的内置 symbol）的对象。

类数组（Array-like）

Array-like 是有索引和 length 属性的对象，所以它们看起来很像数组

var obj = {
    0:'zhangsan',
    1:'lisi',
    2:'wangwu',
    length:3
}

可迭代对象和类数组对象通常都 不是数组，它们没有 push 和 pop 等方法

2.可迭代对象或类数组转化为真数组

Array.from()方法进行转换(ES6）

Array.from 方法接受对象，检查它是一个可迭代对象或类数组对象，然后创建一个新数组，并将该对象的所有元素复制到这个新数组。j然后我们就可以对这个数组进行真数组的操作了

//将可迭代对象或者类数组对象转换为真数组
var obj = {
    '0':'zhangshan',
    '1':'lisi',
    '2':'wangwu',
    'length':3
}
console.log(obj);//{ '0': 'zhangshan', '1': 'lisi', '2': 'wangwu', length: 3 }
var arr_obj = Array.from(obj);
arr_obj.push('zhaoliu');
console.log(arr_obj);//[ 'zhangshan', 'lisi', 'wangwu', 'zhaoliu' ]

使用遍历方式(for-in)把成员放到一个新数组中 

四.数组检测

如何检测一个数据是数组类型

instanceof操作符

Array.isArray（）方法

//如何检测一个数据是数组类型
//instanceof 操作符
var arr = [1,2,3];
var obj_arr = {'0':1,'length':1}//类数组
var str = 'hello'//既是类数组也是可迭代对象
console.log(arr instanceof Array); //true
console.log(obj_arr instanceof Array); //false

if(!(obj_arr instanceof Array)){
    obj_arr = Array.from(obj_arr);
}//检测类数组是否为真数组，不是的话就转为真数组
console.log(obj_arr);//【1】


//Array.isArray()  判断一个数据是否是数组
console.log(Array.isArray(arr));//true

console.log(tyPEof arr);//object 引用数据类型typeof都为object

 五.数组的序列化与反序列化

数组序列化     JSON.stringify()

数组反序列化    JSON.parse()

//数组的序列化和反序列化
var arr = [{id:0,
            name:'zhangshan',
            age:10,
            class:'4-1',
            sex:'nan'},{
                id:1,
                name:'lisi',
                age:10,
                class:'4-1',
                sex:'nan' 
            }];
var arr_str = JSON.stringify(arr);//将数组转为json字符串
console.log(arr_str);//[{"id":0,...,"sex":"nan"},{"id":1,...,"sex":"nan"}]

var new_arr = JSON.parse(arr_str);//将json字符串转回数组
console.log(new_str);//[{ id:0, ...,sex:'nan'},{id: 1, ..., sex: 'nan' }]

 将数据封装为表格

toString() 在默认情况下都会以逗号分隔字符串的形式返回数组项

join() 使用指定的字符串用来分隔数组字符串

split()反序列化,返回一个新数组

//把数据封装成一个表格数据(3*tr>5*td>内容)
var num_arr = [1,2,3];
//通过toSting（）将数组转换成字符串，默认以，分割的字符串
var str = num_arr.toString();
console.log(str);//1,2,3
//通过join（）将数组通过某个字符拼接转化为字符串
var str2 = num_arr.join('|');//1|2|3
console.log(str2);
//可以通过split()反序列化,返回一个新数组
var new_arr = str.split(',');//字符串方法
console.log(new_arr);//[ '1', '2', '3' ]

六.数组的原型方法

1.构造函数的方法

Array.isArray()     用来判断某个变量是否是一个数组对象

Array.from()         从类数组对象或者可迭代对象中创建一个新的数组实例。

Array.from('foo');   // [ "f", "o", "o" ]
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);    // [ "foo", "bar", "baz" ]

Array.of()/New Array（） 根据一组参数来创建新的数组实例，支持任意的参数数量和类型。

Array.of(7);       // [7]
New Array(7);      //7项空值的数组 length=7
Array.of(1, 2, 3); // [1, 2, 3]

2.原型的方法

栈与队列的方法（改变原数组）

栈  LIFO (Last-In-First-Out)  先进的后出

pop() 移除数组中的最后一个项并且返回该项，同时将数组的长度减一，

push()  可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度

队列   FIFO (First-In-First-Out)   先进的先出

shift()   移除数组中的第一个项并且返回该项，同时将数组的长度减一

unshift()  在数组的前端添加任意个项，并返回数组的长度

//栈和队列方法，会改变原数组
var arr = [1,2,3];
//arr.push在末尾追加元素
arr.push(4);//[1,2,3,4]
//arr.pop删除最末尾的那个元素
arr.pop();[1,2,3]
//arr.unshift在第一项前面放置元素
arr.unshift(0);[0,1,2,3]
//arr.shift删除第一项元素
arr.shift();[1,2,3]
console.log(arr);

排序方法

排序

 reverse()  反转数组项的顺序，改变原数组

arr.reverse();//3,2,1
console.log(arr);

 sort()

默认排序：该方法会调用每个数组项的toString() 方法，然后按照字符序列排序

自定义排序：

a.该方法可以接受一个比较函数作为参数，比较函数有两个参数

b.如果第一个参数位于第二个参数之前，返回负数

c.如果第一个参数位于第二个参数之后，返回正数

//sort排序，从左起第一位数开始排列,然后向右逐位排序
var num_arr = [1,33,113,223,23,111];//[ 1, 111, 113, 223, 23, 33 ]
console.log(num_arr.sort());
//sort可以完成正常的排序功能，需要传入一个排序的函数
console.log(num_arr.sort(function(v1,v2){
            if(v1>v2)
                return 1;//不换位置
            else if(v1<v2)
                return -1;//换位置
            else
                return 0;
}));//[ 1, 23, 33, 111, 113, 223 ]

排序的算法：冒泡排序、快速排序、插入排序、选择排序

//自己写一个排序函数：冒泡排序
function mysort(arr){
    for(var i=0;i<arr.length-i-1;i++){//排几次
        for(var j=0;j<arr.length-i-1;j++){
            if(arr[j]<arr[j+1]){
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
    console.log(arr);
}
mysort([2,3,7,1,4]);

ps：这里有常用的十大排序方法，配有动图生动形象

 操作方法

数组的截取与拼接

截取方法

 concat()  

数组拼接，先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，返回副本，不改变原数组

//数组的截取与拼接
//concat返回拼接后的新数组
var arr1=[1,2,3];
var arr2=arr1.concat(4,5,6);
console.log(arr2);//[ 1, 2, 3, 4, 5, 6 ]

 slice()  

数组切割，可接受一个或者两个参数（返回项的起始位置，结束位置），当接受一个参数，从该参数指定的位置开始，到当前数组末尾的所有项。当接受两个参数，起始到结束之间的项，但是不包含结束位置的项，即结束索引前。不改变原数组

var arr2 = [ 1, 2, 3, 4, 5, 6 ];
//slice数组切割;返回截取后的新数组
var arr3 = arr2.slice(0,3);//返回结束索引前的部分
console.log(arr3);//[ 1, 2, 3 ]

 splice()  

向数组的中部插入数据将始终返回一个数组，该数组中包含从原始数组中删除的项。

删除：指定两个参数(起始位置，要删除的项数)

插入：指定三个参数(起始位置，0，要插入的任意数量的项)

替换：指定三个参数(起始位置，要删除的项数，要插入的任意数量的项)

var arr2 = [ 1, 2, 3, 4, 5, 6 ];

//splice():接收3个参数(start_index,length,替换或追加的元素)。
//会直接改变原数组,返回选中的元素,可以替换、增加、删除
arr2.splice(2,3,8,8,8);//从下标为2的数值开始替换3个元素，替换为8,8,8
console.log(arr2);// [1, 2, 8, 8, 8, 6 ]

var res=arr2.splice(0,2,66,66);//新建一个数组res存放arr2中被替换掉的元素
console.log(arr2);//[ 66, 66, 8, 8, 8, 6 ]
console.log(res);//[ 1, 2 ]

arr2.splice(2,3,8);//从下标为2的元素开始提取3个元素，但只加了一个8，相当于删除
console.log(arr2);//[ 66, 66, 8, 6 ]

arr2.splice(0,0,8);//未提取，加了一个，相对于追加
console.log(arr2);//[ 8, 66, 66, 8, 6 ]

位置方法

索引方法

 indexOf()  

从数组开头向后查找，使用全等操作符，找不到该元素返回-1。第一个参数为要查找的项，第二个参数（可选）为索引开始位置

 lastIndexOf()  

从数组末尾向前查找，使用全等操作符，找不到该元素返回-1。第一个参数为要查找的项，第二个参数（可选）为索引开始位置

//位置方法 
//indexOf比较适合判断一个数组中是否有某个成员
var arr = [1,2,3,4,5,4,3,2,1];
console.log(arr.indexOf(1));//0 从头开始查找指定元素，找到就退出
console.log(arr.lastIndexOf(1));//8 从末尾开始查找
console.log(arr.indexOf(6));//找不到 -1

//如何将一个数组去重
function qc(arr){//把函数封装
var new_arr=[];
for(var k in arr){
    if(new_arr.indexOf(arr[k])==-1)//如果没有就放入新数组
    new_arr.push(arr[k]);
}
// return new_arr
console.log(new_arr);
}

 迭代方法

      every：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true

//数组的迭代方法
//every 全部成员都满足，才会返回true （判断一组学生是否满足18岁）
var ages = [19,20,21,18,17,19,20];
var res=ages.every(function(v,index,arr){
    return v>=18;//返回布尔类型的值
})
console.log(res);//false

      some：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true

//some 只有一个成员满足，就会返回ture （判断一组学生是否含有满足18岁）
var ages1=[19,3,5,7];
var res=ages1.some(function(v,index,arr){
    return v>=18;//返回布尔类型的值
})
console.log(res);//ture

       filter： 对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组

//filter 过滤器 获取一些符合条件的成员（在一群学生中获取满足18岁的）
var ages1=[19,3,5,19,334,3,7];
var res=ages1.filter(function(v,index,arr){
    return v>=18;//返回布尔类型的值
})
console.log(res);//19,19,334

map：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

//map方法，遍历方法，有返回值 (过了一年，将所有学生的年龄加一)
var res=ages1.map(function(v,index,arr){
    return v+1;//操作完毕的结果
})
console.log(res);//[20, 4, 6, 20, 335, 4, 8]

           foreach：对数组中的每一项运行给定函数，该方法没有返回值

//foreach方法，无返回值 遍历一次数组成员，做一些操作，没有返回值
var new_arr=[];
ages1.forEach(function(v,index,arr){
    new_arr.push(v+1);
})
console.log(new_arr);//[20, 4, 6, 20, 335, 4, 8]