关于小黄对javascript数组中的总结与分析（适合对数组方法的复习和小白对数组的学习）

小黄对于学习数组的总结，尽量排的清楚一点，原理尽量说的通俗一点，还有以下所有代码都已经通过测试，由于本人学的较浅，本文都是数组的基本方法，有发现错误的，欢迎前来斧正。
分为四个部分，有什么错误，请大家在下面评论，我会一一回复的，另外这个文章会跟着我的学习进度，会进一步优化。

一丶数组是什么，怎么样构成的

首先对数组和对象改变是通过是一个引用值进行访问的，什么叫做引用值呢，数组是有一个内存空间的，对数组的所有改变都是对数组内存空间的改变，引用值是指向数组内存空间的，通俗一点就是；
你有一辆车，你可以用车钥匙来开车，当然你也可以把车钥匙借给别人，车钥匙就是引用值，别人把车碰坏了（数组改变），你的车也会坏（坏的是车的本身自己的东西，并不是别的东西）；当然还有原始值，这个我以后在let const和var区别的时候再进行总结

let hd =[12,45,87];
let cd=hd;//这个时候cd复制了一份hd的地址引用
cd[0]=46;
console.log(hd)//[46, 45, 87]

变量cd通过引用值改变了hd引用的数组，导致hd数组也发生了改变
在数组内可以包含多种类型的数据，如对象，字符串 ，number ，Boolean NaN ，undefined，Symbol属性

let hd = [{}, "hhh ", true, NaN, undefined, Symbol()]
console.log(hd);//[{…}, "hhh ", true, NaN, undefined, Symbol()]

我们可以通过new Array（）调用，也可以通过字面量[]直接调用，当然还有一些es6的Arrayof（）和将类数组转换为数组的Array.form（）；
关于数组长度，以以下代码为例

 const hd = ["ok"];
        hd[4] = 54;
        console.log(hd);//显示["ok", empty × 3, 54]
        console.log(hd.length);//5个，因为赋值了第五个元素，所以未赋值的会被添加undefined来显示
        const hd = new Array(5);
        console.log(hd);// [empty × 5]

在以上代码中定义了一个数组，将hd的第五个参数定为54；这时候数组会长度自动定为5，中间以undefined代替，当然你若只给new Array（）一个参数，这便将长度自动设为这个参数，内容为undefined；在js中数组的索引号是从0开始的，刚开始我学的时候，还比较懵，但用多了就绝得没啥了。

二丶数组的各种方法

（1）数组的增删改查

在数组方法中最基本的就是对数组的增删改查了
前插入unshift（）
前删除shift（）
后插入push（）
后删除pop（）

const cd = [2, 4, 5];
        cd.push("都是大傻子"); //[2, 4, 5, "都是大傻子"]  向后推入
        cd.pop(); //(3) [2, 4, 5]  最后一个删除
        cd.unshift("听说有人骂我？") // ["听说有人骂我？", 2, 4, 5]  第一个推入
        cd.shift(); //(3) [2, 4, 5]  删除第一个元素

这些都是比较基础的东西了，没啥好说的，当然你也可以通过cd[索引号]=数值，也可以进行增删改查。

 const cd = [12, 15, 12] //这是三个字符长度，索引号从0-2
        cd[0] = "改" //这是改 ["改", 15, 12]
        cd[3] = "增" //这是增加["改", 15, 12, "增"]
        cd.length = 3 //这是删["改", 15, 12]
        console.log(cd[2]) //这是查  12

以上都是这些，有基础的可以不用看；
这是数组的一些常用方法，也不多，多用用就熟记了。

处理数组元素的方法

在这些方法中出现三个参数的，存在第二个参数（开始）到第三个参数（结束）的数据都是，大于等于 第二个参数（开始），小于 第三个参数（结束）（不知道你们，我当初因为这个想了半天-.-）

concat（）

这个方法是用于链接两个数组之间，没啥好说的，代码以下

const cd = [12, 45, 78];
        const hd = [12, 45, 67];
        console.log(cd.concat(hd)); // [12, 45, 78, 12, 45, 67]
        //但一般常用...展开语法来进行链接
        console.log([...cd, ...hd]) // [12, 45, 78, 12, 45, 67]

fill（）

fill填充数据

const cd = [12, 45, 15, 26];

一个参数的时候：数组填充的数据，默认全部填充；

cd.fill(2); // [2, 2, 2, 2]

两个参数的时候：第一个参数是将数组填充的数据，第二个是开始填充的位置（索引号），直到结束

cd.fill(2, 2) //从索引号2，位置3开始填充 [12, 45, 2, 2]

三个参数：第一个参数是数组填充的数据，第二个是开始填充的位置（索引号），第三个是结束的位置（索引号）；

cd.fill(2, 1, 2) //大于等于索引号1小于索引号2填充[12, 2, 15, 26]

every（）

every 方法是每一个都满足条件才可以，返回的值是Boolean值也就是true 和false
里面的参数是回调函数，用于判断数组内的元素满不满足条件；

 const cd = [12, 45, 15, 26];
        console.log(cd.every((item) => item > 10));//true 里面所有的元素都满足大于10
        console.log(cd.every((item) => item > 15));//false 里面并不是每个元素都大于15

some（）

some方法则是与every（）完全相反，只要元素内满足一个就会返回true；

const cd = [12, 45, 15, 26];
        console.log(cd.some((item) => item > 40)); //true  尽管只有一个满足情况还是返回true
        console.log(cd.some((item) => item < 10)); //false   都不满足返回false

filter（）

filter过滤的意思，这个在以后用的比较多，他将会过滤所有满足情况的元素，返回一个新的包含满足条件的数组；
对于没有找到的返回一个空数组

  const cd = [12, 45, 15, 26];
        console.log(cd.filter(item => item > 15)); //[45, 26]
        console.log(cd.filter(item => item < 10)); //[]

indexOf（）

indexof方法与字符串的indexof方法类似，都是返回被寻找元素的索引号
找到返回索引号，找不到返回-1。可用于数组去重。

 const cd = [12, 45, 15, 26];
        console.log(cd.indexOf(45));//1
         console.log(cd.indexOf(70));//遇到找不到的返回-1

findIndex（）

顾名思义，这个是返回符合条件元素的索引号。是find方法和indexOf的组合，不太常用

const cd = [12, 45, 15, 26];
        console.log(cd.findIndex(item => item > 13));//1

reduce（）

这个以后的用的比较多，建议认真学习，redcue方法里面有4个参数，我笔记中这样写的。
arr.reduce(function(pre, value, index, array) {
pre是指上次返回的值，return值
value是值，index 是索引号，array是整体数组
})
可以用于返回数组内所有元素加起来的值

 let arr = [1, 5, 4, 3, 6, 8, 1, 2, 2, 1];
        const cd = arr.reduce((v, c) => {
            v += c //因为每次v都会被返回变成一个新的值
            return v;//将v返回出去
        }, 0)//v 总数一个初始值
        console.log(cd)

统计元素在数组中出现的次数

  let arr = [1, 5, 4, 3, 6, 8, 1, 2, 2, 1];
        // 统计元素出现的位置
        function arrayCount(array, item) { //第一个参数是数组，第二个参数是确定重复谁
            return arr.reduce(function(total, cur) { //total是pre值，cur是value
                total += ? 1 : 0;
                return total;
            }, 0)//0,后面跟的参数是第一个参数，用来赋值第一个参数
        }
        console.log(arrayCount(arr, 2));

reduceRight（）

与reduce方法类似，只不过是从后面开始遍历数组，就不过多赘叙了

reserve（）

翻转数组，很简单的一个方法

let arr = [1, 2, 3, 4, 5];
        arr.reverse();
        console.log(arr);// [5, 4, 3, 2, 1] 对原数组进行操作

splice（）

splice是一个很好的方法，他能够对数组内的元素进行增删改
其中有三个参数，第一个参数是从哪个位置开始截取
第二个参数是截取的位数，当为0的时候就不再是截取，而是增
第三个参数是要替换的元素，当删一个（第二个参数为1），就是替换，不删就是增加，只写前两个参数，就是删除。

 const cd = [1, 4, 2, 56, 8];     
        cd.splice(0, 3); //[56,8]  删除操作
        cd.splice(0, 1, "woaini")//["woaini", 4, 2, 56, 8]  将第一个删除后并替换目标元素 改操作
        cd.splice(3, 0, "woaini") //[1, 4, 2, "woaini", 56, 8]  增操作
        // 第一个参数目标函数为0时，向第一个添加元素。相当于unshift()
        // 当目标函数为数组长度时，想最后一个位置添加  push()

slice（）

slice() 截取数组的一段，并重新返回一个新的数组，并不会对原数组造成影响

const cd=[1,4,2,56,8]
        cd.slice(1, 4) //截取数组的一部分；并不会对原数组造成影响
        console.log(cd.slice(1, 4)); //[4, 2, 56]  这是被截取的一部分
        console.log(cd)//[1,4,2,56,8]

keys（）

keys方法是返回数组内所有元素的索引号，是一个可迭代对象，我们可以通过for of 方法将其迭代出来

 const cd = [1, 4, 2, 56, 8];
        console.log(cd.keys()) //Array Iterator {}
        for (const value of cd.keys()) {
            console.log(value)//0,1,2,3,4 五个索引号，五个元素
        }

values（）

values 则是通过值的形式返回数组内所有元素，也是一个可迭代对象

 const cd = [1, 4, 2, 56, 8];
        console.log(cd.values()) //Array Iterator {}
        for (const value of cd.values()) {
            console.log(value) //1,4,2,56,8
        }

entries（）

entries 通过以键值对的形式返回这个数组的所有元素，也是一个可迭代对象
这三个在字符串 数组 对象 Set Map 都是相同的方法，可以综合记忆，只不过在Set中返回的值和对是一样的。

 const hd = [1, 4, 2, 56, 8];
        console.log(hd.entries()) //Array Iterator {}
        for (const value of hd.entries()) {
            console.log(value) // [0, 1][1, 4][2, 2] [3, 56] [4, 8]
        }

forEach（）

forEach 顾名思义是每一个的意思，对数组内的元素每一个进行复杂操作，与map很类似，但forEach可以在多个类型中使用，forEach不会返回新数组，允许对原数组进行修改。

const arr = [31, 45, 8, 12, 20, 54];
        const arr1 = []
        const arr2 = arr.forEach(item => arr1.push(item * 2));
        console.log(arr1) //[62, 90, 16, 24, 40, 108]
        console.log(arr2); //undefined 并不会返回新数组

map（）

map映射，对每个元素进行一个一样的操作
map会返回一个新的数组，不会改变原来的数组

const hd = [31, 45, 8, 12, 20, 54];
        const cd = hd.map(item => item * 2);
        console.log(hd) //[31, 45, 8, 12, 20, 54]
        console.log(cd); //[62, 90, 16, 24, 40, 108]

join（）

将array数据中每个元素都转为字符串，如果 join()里面没有参数，则用法与toString()一样
也会返回一个新的数组，不对原数组进行操作

  const arr = [31, 45, 8, 12, 20, 54];
        const arr1 = arr.join() //31,45,8,12,20,54
        const arr2 = arr.join("") //31458122054
        const arr3 = arr.join("-") //31-45-8-12-20-54

sort（）

在目前sort用的最多的便是数组的排序，升序降序；
返回的是一个新的数组

  const hd = [31, 45, 8, 12, 20, 54];
        console.log(hd.sort((a, b) => a - b)); //[8, 12, 20, 31, 45, 54]
        console.log(hd.sort((a, b) => b - a)); //[54, 45, 31, 20, 12, 8]

toString（）

将一个数组内的所有元素，由数组转换为字符串

const hd = [31, 45, 8, 12, 20, 54];
        console.log(hd.toString()); 31,45,8,12,20,54

三丶数组新添加的es6新特性

Array.of（）

在es6之前对于单个元素的填入是有麻烦的，因为在 new Array（）当只有一个参数时给数组设置长度， 当参数数量不小于2时才会返回新的数组。在es6为了解决这个问题，增加了Array.of方法可以把参数全部一等一变成数组；让初始化数组的时候变的更简单。

 const arr3 = Array.of(1)//1
 const arr3 = Array.of(2, 4, 5)//2,4,5

Array.from（）

将一个不是数组的数据强制转换为一个数组；

//类数组概念  ，是一个数组类型，但不是一个真正的数组
         function abc() {
             console.log(arguments); //有数组形式
             console.log(typeof arguments); //object
             console.log(arguments instanceof Array); //false
             console.log(Array.from(arguments) instanceof Array); //true
            //最好声明一个变量来代表转成数组后的内容，
            //因为使用Array.from()并不会改变原类数组性质，
         }
       abc(1, 2, 3)

 const  arr = [1, 20, 3, 4];
  var a = Array.from(arr.keys());
        var b = Array.from(arr.values());
        var c = Array.from(arr.entries());
        console.log(a); //下角标 [0,1,2,3]
        console.log(b); //数值 [1,20,3,4]
        console.log(c); //数组 [[0-1],[2-20],[3-3],[4-4]]
        const hd = "manonghuang"
        console.log(Array.from(hd))
        //["m", "a", "n", "o", "n", "g", "h", "u", "a", "n", "g"]

copyWithin（）

三个参数 第一个参数是指target（必须）从该位置开始替换数据，如果为负值表示为倒数
第二个参数start可选 ：从该位置开始读取数据，默认为0，如果为负值从末位开始计算
第三个参数 end 可选 ：到这个位置停止读取数据，默认为数据长度，如果为负值从末位开始计算
同时，替换的数字将自动填充，填充结束后按原数组接着进行；举个例子
[5, 10, 20, 20, 50, 60].copyWithin(0, 2, 5); //[20, 20, 50, 20, 50, 60]，从0开始替换，用来替换的是索引号是大于等于2小于5的数据 20，20，50；插入索引号0的位置，替换三个，20,20,50然后跟上原数组从索引号3到5的位置 20 50 60；

let arr = Array.of(5, 10, 20, 20, 50, 60)；
console.log([5, 10, 20, 20, 50, 60].copyWithin(2)); //[5, 10, 5, 10, 20, 20]从第三个开始替换 5 10 5 10 20 20
console.log([5, 10, 20, 20, 50, 60].copyWithin(0, 2, 5)); //[20, 20, 50, 20, 50, 60]从0开始替换 替换为从2开始到5的点
console.log([5, 10, 20, 20, 50, 60].copyWithin(0, 4)); //[50, 60, 20, 20, 50, 60]
        //从0替换 从坐标4开始复制50,60 放到0的位置站两个格后面依次后推

展开运算符…

展开运算符是es6新加的特性，他可以进行拼接数组，接受参数，转换数组等

//展开运算符作为函数参数，可实现接受不固定个数的参数
        function plus(...pran) {
            console.log(pran);
        }
        plus(1, 2, 5, 4)
        const arr1 = [1, 2, 3]
        const arr2 = [4, 5, 6]
        console.log([...arr1, ...arr2])//[1,2,3,4,5,6]
         const str = "manongxiaohuang";
        console.log([...str])
        //"m", "a", "n", "o", "n", "g", "x", "i", "a", "o", "h", "u", "a", "n", "g"]
        

find（）

find方法是找到一个符合条件的，然后返回元素；特点 找到就返回
没有找到返回undefined；

 const cd = [12, 45, 15, 26];
        console.log(cd.find(item => item > 10));//12  尽管后面还有符合的，但还是找到就返回
        console.log(cd.find(item => item < 10));//undefined  没有符合条件的，返回undefined

四丶为什么要学会转换数组

因为数组内独特的方法和属性，可以让我们在操作元素的时候更加的方便，就比如给一堆数字比大小；计算某个数字或者字母出现的次数，在整个js基本类型中，都是可以相互转换的，他们可以相互使用对方的方法以便更好得到想要的结果。
这一部分算一个思路吧，这一部分也是无限的，希望大家在以后的学习中，也把这种思路带到学习中。
这是我来csdn第一次发的技术博客，针对的是需要复习数组用法，和需要明确各个方法是干什么用的半技术小白。