数组对象、数组方法总结

就不说如何创建数组了吧，直接开始play方法和对象 

目录

split（‘分隔符’）字符串=>数组

join（‘分隔符‘）数组=>字符串

数组的增删

可指定的数组删除和截取

slice(star,end,'添加的元素')

splice（star, n, node） ==>（开始删除的位置，删除几个，添加新的元素）

作用与数组中的高阶函数

map(ele, index)数组遍历

forEach(ele, index)数组遍历 

 reduce数组计算方法

sort()数组排序

 数组的展开原算法...arr

---

数组和字符串之间的转换，常用的是：数组=>字符串join('分隔符')，字符串=>数组split('分隔符')，toSring强制转化数组=>字符串，不可规定分隔符，默认是逗号

split（‘分隔符’）字符串=>数组

split是把字符串转化为数组,('')括号里面的分隔符是指原字符串以是什么作为分割
myDate的就是用逗号
myStr使用空格分开
如果没有以字符串的分隔符来分开的话默认是单个字母为一个

//一个字符串是逗号隔开，一个是空格隔开
const myData = 'Man,London,Liver,Leeds,Carlisle'
const myStr = 'Man London Liver Leeds Carlisle'

//字符串=>数组split
console.log(myData.split(','))
console.log(myStr.split(' '))

最后答案都是['Man','London','Liver','Leeds','Carlisle']

// 如果是用split但是没有给与分隔符的话,直接按单个字符作为数组元素
console.log(myData.split(''))
最后显示的是['M','a','n','L','o','n','d','o','n'....]

join（‘分隔符‘）数组=>字符串

数组转化为字符串的话就可以任意指定字符串的分隔符，这里其实就是和后面案例用数据渲染后台数据是,页面每行会出现逗号,把分隔符改为空就可以解决啦

const myArr = ['green', 'red', 'blue', 'black', 'pink']

// 可自己规定分隔符
onsole.log(myArr.join(''));

// 默认分隔符位逗号的toString
// 不能任意分隔符,默认是逗号分隔,比join更加有限制性
console.log(myArr.toString());

总结来说就是，join的分隔符是可以通过我们自己来定义（喜欢什么定义什么），但是split的分隔符就是需要通过观察原字符串的分割符号，以及考虑我们自己想要什么样的形式来决定的，向上面的例子，原字符串的分隔符是逗号，如果你想要的数组是以地名为单位的话，那split分隔符就为逗号；如果你要的数组要求的是单个字符，那split分隔符为空。

数组的增删

push	是在数组的末尾（最后边）添加数组，也可也实现数组与数组的拼接	返回新数组的长度
pop	删除数组的最后一个元素（不可以指定）	返回删除的元素
unshift	在数组的开头添加元素	返回新数组的长度
shift	删除数组的第一个元素	返回删除的元素

const myArr = ['green', 'red', 'blue', 'black', 'pink']   
// push添加在数组后面
    const New = myArr.push('white', 'yellow')
    console.log(New);    //7
    console.log(myArr);  

// pop删除数组的最后一个元素不可以指定，返回删除的元素
    console.log(myArr);
    console.log(myArr.pop());

// unshift在数组开头添加元素
    console.log(myArr.unshift('brown'));
// 删除数组的第一个
    console.log(myArr.shift());

可指定的数组删除和截取

slice	数组截取splice(start, end)	返回一个新的数组
splice	可指定删除数组的第几个，删除几个，而且还可以指定位置插入	返回删除元素的数组

slice(star,end,'添加的元素')

如果没有填end的值默认是从起始的索引一直删除到数组的最后一个元素，添加的元素可以写多个，这里的起始star是可以用负数，表述-1从数组的最后一个开始，以此类推下去

（ps：这里应该是不用在说了索引号index的开始都是‘0’）

const myArr = ['green', 'red', 'blue', 'black', 'pink']
const New = myArr.slice(3)
cosole.log(New)
//无end取值到最后['black', 'pink']

const New1 = myArr.slice(2,5)
cosole.log(New2)
//最大的索引号是4，取到5也就是取到全部[ 'blue', 'black', 'pink']

const New2 = myArr.slice(1,3)
cosole.log(New2)
//索引号1取到索引号2，这里的end=3是不截取在新数组中的['red', 'blue']

splice（star, n, node） ==>（开始删除的位置，删除几个，添加新的元素）

这里比起前面的pop和shift优点在于他是可以指定删除===不是写鼠的，还可以边删除边添加新的元素到数组里面去，也可也不删除但是在指定位置添加元素

    const myArr = ['green', 'red', 'blue', 'black', 'pink']
        console.log(myArr);
    //仅删除
        const New2 = myArr.splice(3,2)
        console.log(New2);
    // 索引号的开始是‘0’
    // 从索引号为3的‘black’开始删除，并且删除2个元素：['green', 'red', 'blue']

    //删除并添加元素
        const New2 = myArr.splice(3,1,'skyblue')
    //从索引号为3的‘black’开始删除，并且删除1个元素之后添加上元素'skyblue'
        console.log(New2);
    //['green', 'red', 'blue', 'skyblue',  'pink']

    //star为负数
        const New2 = myArr.splice(-4,2)
    //-1表示数组的最后一个元素，一起类推，这里从-4的'red'开始删除2个
     console.log(New2);
    //['blue', 'black', 'pink']

作用与数组中的高阶函数

map	遍历数组，返回一个新的数组，这个数组的格式是可以自定义的
forEach	遍历数组，返回值：undefined，所有在传输数据的时候需要定义一个空的容器
reduce	返回计算结果，reduce(pre,cur)，起始的pre是我们自己给第一个数，不写的话默认是数组的第一个数据

map(ele, index)数组遍历

返回新的数组，不影响原来的数组（ps：最近在学react，里面也有用到map但是不相同的是他需要给每个数据添加也该key标识符，这个的key可以暂时用index来赋值，后面应该有其对应的值）

const myArr = ['green', 'red', 'blue', 'black', 'pink']
cosnt newArr = myArr.map(ele => {
    //这里是可以填写你要的返回新数组的格式
    return null

})
console.log(newArr)
//['null', 'null', 'null', 'null', 'null']

map的应用肯定不是简简单单上面的例子来修改数组而已，这样就浪费了他的功能。map的话是常用于渲染遍历的数据的时候，之前是用到for循环，等你你用到map的时候就知道有多方便，还可以直接返回你想要的HTML渲染格式，渲染的话要注意的页面渲染需要把数组转化为字符串join

<div class="list"> </div>
let new = myArr.map(item =>{
    return`
           <a href="#" class="item">
                <p>名称</p>
                <p>描述</p>
                <p>价格</p>
           </a>
   `
)}.join('')
//这里可以看到的是用map渲染返回一个HTML的渲染
//但是渲染到页面的话是需要字符串的，这个时候就要用到我们上面写到的join()，数组=>字符串
document.querySelector(".list").innerHTML = new

forEach(ele, index)数组遍历 

map与forEach之间的区别

①返回值不一样        ②也是因为这个原因所以forEach遍历的时候是需要有一个可以承装的遍历的容器        ③他们俩都是常用于页面数据的遍历渲染

let str = ''
myArr.forEach(item => {
    str += `
        <a href="#" class="item">
            <p>名称</p>
            <p>描述</p>
            <p>价格</p>
        </a>
    `
)}
document.querySelector('.list').innerHTML = str.join('')

 reduce数组计算方法

reduce（起始值/当前值 ，要计算的值），返回计算的结果，起始值pre是我们自己给定的计算值的第一个数是多少，如果我们自己没有给于的话默认的pre是数组里面的第一个数据，在每次计算过程中每一步的计算得到的值就成为新的pre

const myArr3 = [1, 6, 9, 28, 5, 7, 3]
const New4 = myArr3.reduce((pre, cur) => pre + cur,2)
//这里写明了我的起始值pre===2
//一开始就是pre + cur = 2+1=3得到一个新的pre===3
//再计算pre + cur = 3+6=9再的得到一个新的pre===9
//以此类推
console.log(New4);
//61

const New5 = myArr3.reduce((pre, cur) => pre + cur)
//这样的话就是没有起始值，pre===1开始计算
console.log(New5);
//59

sort()数组排序

其默认是升序排序，其默认把所有不是undefined的元素变为字符串进行排序，undefined排在最后面，如果需要有序的排序的话需要添加排序的类型compareFn：compareNumber，compareString...

如果是需要升序降序的话，就需要用到（a - b）、（b - a）、（a === b）

a -  b 升序排序	结果 > 0	把a放在b的后面：[b, a]
	结果 < 0	位置保持不变也就a在b之前[a, b]

b -  a 降序排序	结果 > 0	把b放在a的后面：[b, a]
	结果 < 0	位置保持不变也就a在b之前[a, b]

//这里的数组定义记得用let，不然const无法外界改变
let myArr3 = [1, 6, 9, 28, 5, 7, 3]
console.log(myArr3.sort());
//没有说明比较的类型，那么默认是把所有数字变为字符串进行比较
//[1, 28, 3, 5, 6, 7, 9]

升序
function compareNumbers(a, b) {
    return a - b
}
console.log(myArr3.sort(compareNumbers));
//这里是按照int类型来进行对比升序排序的
//[1, 3, 5, 6, 7, 9, 28]

降序
function compareNumbers(a, b) {
    return b - a
}
console.log(myArr3.sort(compareNumbers));
// [28, 9, 7, 6, 5, 3, 1]

 数组的展开原算法...arr

new数组的时候方便添加上新的数据

const p1 = new Data(...myArr)
console.log(p1);
//['green', 'red', 'blue', 'black', 'pink']

 构造新的数组的时候可以之间用展开运算符，对多个数组进行拼接 / 数据于数组进行拼接

const myArr1 = ['tomato', 'eggplant']
const myArr2 = ['gourd', 'pumpkin']

const New7 = [...myArr1,...myArr2]
console.log(New7);

const New8 = ['cabbage', 'potato', ...myArr2, 'corn']
console.log(New8);