[TOC]

一、简介

join、slice()、indexOf和contat方法不能改变数组的结构

1. 增：
     push()         //从数组的最后面添加一个值，可以一次性添加多个
     unshift()      //从数组的前面添加
     concat()       //拼接两个数组，但不能改变原来数组的结构     
     splice(index,0,parmas) //从index的前面添加
2. 删： 
     pop()          //从后面删除
     shift()        //从前面删除
     splice(index,howmany)  //index从那个下标开始，howmany删除多少个
3. 改：
     splice(index,howmany,parmas)
4. 查：
     indexOf()      //
     slice()         
     includes()     //判断数组是否包含某个值

5. 遍历：
     for()      //遍历
     for-in     //遍历属性
     of         
     map        //遍历数组并返回return
     foreach    //遍历数组
     find       //返回第一个满足条件的值

对象继承方法、【toString()】 【toLocaleString()】 【valueOf()】
数组转换方法、【join()("")(" ")("-")】拆 
栈和队列方法、【push()】 【pop()】  【shift()】 【unshift()】
数组排序方法、【reverse()】 【sort()】
数组拼接方法、【concat()】
创建子数组方法、 【slice()】
数组删改方法、【splice()】
数组位置方法、【indexOf()】 【lastIndexOf()】
数组归并方法、【reduce()】【reduceRight()】
数组迭代方法、【map()】 【forEach()】 【filter()】 【some()】 【every()】

二、内容：

1、增

1-1 push() 后面增

push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

arrayObject.push(newelement1,newelement2,....,newelementX)

1-2 unshift() 前面增

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

arrayObject.unshift(newelement1,newelement2,....,newelementX)

1-3 concat() 拼接数组

concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

arrayObject.concat(arrayX,arrayX,......,arrayX)

例子：

添加元素

<script>
var a = [1,2,3];
document.write(a.concat(4,5)); //1,2,3,4,5
</script>

添加数组 ```javascript
```
<a name="9HCwX"></a>
### 1-4 增删改  splice( index,howmany)
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。<br />介绍：

1. index                 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
1. howmany           必需。要删除的项目数量。如果设置为 0，则不会删除项目。
1. item1, ..., itemX  可选。向数组添加的新项目
```javascript
arrayObject.splice(index,howmany,item1,.....,itemX)
```
1-4-1 删
```
splice（index,2）
//从下标为2 的地方删除两个元素
```
1-4-2 增

splice(index 0 “要添加的元素” )

1-4-3 改
splice(index 2 “要修改后的元素 “)

2. 删

2-1. pop() 后面删
arrayObject.pop()

2-2 shift() 前面删
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
arrayObject.shift()

2-3 splice() 定点删
见1-4

3. 改

3-1.splice(index,howmany,params)
index:从那个下标开始
howmany：修改参数的个数
params:要修改的参数的传参
```
var arr=['html','css','javascript']
arr.splice(1,2,'vue','react')
console.log(arr)
```
3-2.join—将数组分割为字符串
join(separatar) //separatar：分隔符,分隔数组的每一项
```
<script>
        var arr=[1,2,3]
        var str=arr.join("");
        console.log(str)     //123
        console.log(arr.join())   //返回原数组  1，2，3
        console.log(arr.join("/"))   //  1/2/3
 </script>
```
3-3.sort升序
```
var arr=[1,2,7,4,9,3]
var c=arr.sort((a,b)=>{
  return a-b;
})
console.log(c)    //[1,2,3,4,7,9]
```
利用算法的方法升序
```
 var arr=[1,2,7,4,9,3]
for(let i=0;i<arr.length;i++){
  for(let i=0;i<arr.length;i++){
    if(arr[i]>arr[i+1]){
      var temp=arr[i];
      arr[i]=arr[i+1];
      arr[i+1]=temp;
    }
  }
}
  console.log(arr)
```
3-4.sort降序
```
var arr=[1,2,7,4,9,3]
var c=arr.sort((a,b)=>{
  return b-a;
})
console.log(c)    //[9,7,4,3,2,1]
```
3-5.reduce求和
```
var arr=[1,2,3,4];
  var sum=arr.reduce((a,b)=>{
    return a+b;
  })
console.log(sum)
```
算法求和
```
var arr=[1,2,3,4];
var sum=0;
  for(var i=0;i<arr.length;i++){
    sum+=arr[i];
  }
 console.log(sum)
```
3-6.reverse反转
```
<script>
        var arr=[11,23,13];
        arr.reverse();
        console.log(arr)   //[13,23,11]
    </script>
```
4. 查

4-1 indexOf() 在字符串中
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。(如果要检索的字符串值没有出现，则该方法返回 -1)
1. searchvalue 必需。规定需检索的字符串值
2. fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length -1
```
                    如省略该参数，则将从字符串的首字符开始检索。
```
```
stringObject.indexOf(searchvalue,fromindex)
```
4-2 slice() 查询方法（截取）
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
1. start 要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是。
```
       说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推
```
2. end 紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符
```
    串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。
```
```
stringObject.slice(start,end)
```
4-3 includes() 查询方法判断
includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
1. searchElement 必须。需要查找的元素值。
2. fromIndex 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex
```
                                      的索引开始搜索。默认为 0。
```
```
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
```
5、遍历

5-1 for 传统遍历
这是标准for循环的写法也是最传统的语句，字符串也支持，定义一个变量i作为索引，以跟踪访问的位置
```
    <script>
        var arr = [1, 2, 3, 4]
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i])
        }// 1 2 3 4
    </script>
```
5-2 for …in 对象属性遍历
一般会使用for-in来遍历对象的属性的,不过属性需要 enumerable,才能被读取到.for-in 循环只遍历可枚举属性。一般常用来遍历对象，包括非整数类型的名称和继承的那些原型链上面的属性也能被遍历。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性就不能遍历了.
```
var obj = {
    name: 'test',
    color: 'red',
    day: 'sunday',
    number: 5
}
for (var key in obj){
console.log(obj[key])
//test red sunday 5
}
```
5-2 forEach() 数组遍历（回调）
forEach 方法对数组的**每个元素执行一次提供的CALLBACK函数,forEach是一个数组方法，可以用来把一个函数套用在一个数组中的每个元素上，forEach为每个数组元素执行callback函数只可用于数组**.遍历一个数组让数组每个元素做一件事情
没有返回值。
**

·参数：value数组中的当前项，index当前项的索引，array原始数组；
·数组中有几项，那么传递出去的匿名回调函数就需要执行几次；
·理论上没有返回值，仅仅是遍历数组中的每一项，不对原来数组进行修改；但是可以自己通过数组的索引来修改原
来的数组。
```
arr[].forEach(function(value,index,array){
　　//do something
})
```
例子：1.
```
var arr = ['a', 'b', 'c'];
arr.forEach(function(item) {
  console.log(item);
  //a b c
});
```
1. 请求数据中：
```
songs.forEach(item=>{
       var obj = {};
       obj.name = item.name;
       obj.id = item.id;
       obj.artistName = item.artists[0].name;
       obj.time = item.duration;
       obj.musicUrl = `https://music.163.com/song/media/outer/url?id=${item.id}`
       musics.push(obj)
     })
```
5-3 map() 数组遍历
```
**   `map` 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。** **callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。让数组通过某种计算产生一个新数组,影射成一个新的数组**<br />**
```
有返回值，可以return 出来。
·参数：value数组中的当前项，index当前项，index当前项的索引，array原始数组
·与forEach()的区别：map()回调函数支持return返回值；return的是啥：相当于把数组中的这一项便为啥（并不影响原来的数组，只是相当与把原来的数组克隆一份，把克隆的一份数组中的对应项改变了）
```
arr[].map(function(value,index,array){
　　//do something
　　return XXX
})
```
```
 var urls=casts.map(item=>{
      return item.avatars.small;
    })
```
5-4 for-of 遍历对象属性
```
 ** `for-of`语句在可迭代****对象****（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。只要是一个iterable的对象,就可以通过`for-of`来迭代.**
```
```
var arr = [{name:'bb'},5,'test']
for (item of arr) {
    console.log(item)
}
```
5-5 every（）判断遍历
every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。检测数组中的每一项是否符合条件,如果每一项都符合条件,就会返回true,否则返回false,有点像遍历数组且操作callback。只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。
```
var arr=['html','css','js','vue']
arr.every(item=>{
return item>1
})
```
5-6 some() 判断遍历
1. some 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。否则，some 返回 false。callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用。检查数组中是否有某些项符号条件,如果有一项就返回true,否则返回false,有点像遍历数组或者操作.。
```
var arr = [1,2,3,4,5]
var result = arr.some(function (item,index) {
 return item > 3
})
```
三、数组遍历的速度
```
for > for-of > forEach > filter > map > for-in
```
```
      这很明显处理大量循环数据的时候还是要使用古老`for`循环效率最好,但也不是不使用`for-in`,其实很多时候都要根据实际应该场景的,`for-in`更多使用在遍历对象属性上面,`for-in`在遍历的过程中还会遍历继承链,所以这就是它效率比较慢的原因,比如`map` 速率不高,不过处理在Es6实现数组功能上面非常好用方便,轻松影射创建新数组.或者例如使用[**Iterator**](http://es6.ruanyifeng.com/#docs/iterator)属性也是行的,所以每个循环都有合适使用的地方.
```
1、for-of和 for-in 的区别
for-in 语句以原始插入顺序迭代对象的可枚举属性。for-in会把继承链的对象属性都会遍历一遍,所以会更花时间.
for-of 语句只遍历可迭代对象的数据。

2、every 和 some不完全属于数组操作方法
every 和 some 都是判断条件直接返回整个数组Boolean类型的方法.every速度会比some快很多.

3、方法干货关系图

JavaScript 从入门到进阶

第二节增删改查遍历

一、简介

join、slice()、indexOf和contat方法不能改变数组的结构

二、内容：

1、增

1-1 push() 后面增

1-2 unshift() 前面增

1-3 concat() 拼接数组

1-4-1 删

1-4-3 改

2. 删

2-1. pop() 后面删

2-2 shift() 前面删

2-3 splice() 定点删

3. 改

3-1.splice(index,howmany,params)

3-2.join—将数组分割为字符串

3-3.sort升序

3-4.sort降序

3-5.reduce求和

3-6.reverse反转

4. 查

4-1 indexOf() 在字符串中

4-2 slice() 查询方法（截取）

4-3 includes() 查询方法判断

5、遍历

5-1 for 传统遍历

5-2 for …in 对象属性遍历

5-2 forEach() 数组遍历（回调）

5-3 map() 数组遍历

5-4 for-of 遍历对象属性

5-5 every（）判断遍历

5-6 some() 判断遍历

三、数组遍历的速度

1、for-of和 for-in 的区别

2、every 和 some不完全属于数组操作方法

3、方法干货关系图

第二节 增删改查 遍历

一、简介

join、slice()、indexOf和contat方法 不能改变数组的结构

二、内容：

1、 增

1-1 push() 后面增

1-2 unshift() 前面增

1-3 concat() 拼接数组

1-4-1 删

1-4-3 改

2. 删

2-1. pop() 后面删

2-2 shift() 前面删

2-3 splice() 定点删

3. 改

3-1.splice(index,howmany,params)

3-2.join—将数组分割为字符串

3-3.sort升序

3-4.sort降序

3-5.reduce求和

3-6.reverse反转

4. 查

4-1 indexOf() 在字符串中

4-2 slice() 查询方法（截取）

4-3 includes() 查询方法判断

5、遍历

5-1 for 传统遍历

5-2 for …in 对象属性遍历

5-2 forEach() 数组遍历（回调）

5-3 map() 数组遍历

5-4 for-of 遍历对象属性

5-5 every（）判断遍历

5-6 some() 判断遍历

三、数组遍历的速度

1、for-of和 for-in 的区别

2、every 和 some不完全属于数组操作方法

3、方法干货关系图

第二节增删改查遍历

join、slice()、indexOf和contat方法不能改变数组的结构

1、增