整理一些JavaScript的数据方法吧

数组的基本方法

一.原数组改变

1.push()

• 1:作用: 向数组的末尾添加元素
• 2:参数: 一个或多个元素
• 3:原数组: 改变原数组的长度
• 4:返回值: 新数组的长度

var arr = [1,2,3,4,5]
var length = arr.push(1,2)

console.log(arr) // [1, 2, 3, 4, 5, 1, 2]
console.log(length) // 7

2.pop()

• 1:作用: 从数组中删除最后一个元素,并返回
• 2:参数: 没有
• 3:原数组: 改变原数组的长度
• 4:返回值: 删除的元素

var arr = [1, 2, 3, 4, 5]
var el = arr.pop()

console.log(arr) // [1, 2, 3, 4]
console.log(el) // 5

3.unshift()

• 1:作用: 从数组的开头添加元素,并返回新的长度
• 2:参数: 一个或者多个元素
• 3:原数组: 改变原数组的长度
• 4:返回值: 新数组的长度

var arr = [1, 2, 3]
var length = arr.unshift(4, 5, 6)

console.log(arr) // [4, 5, 6, 1, 2, 3]
console.log(length) // 6

4.shift()

• 1:作用:从数组中删除第一个元素,并返回第一个元素的值
• 2:参数: 没有
• 3:原数组: 改变原数组
• 4:返回值: 删除的元素

var arr = [1, 2, 3]
var el = arr.shift()

console.log(arr) // [2, 3]
console.log(el) // 1

5.splice(a,b,c)

• 1:作用: 从 a 位置开始，删除长度为 b 的元素，并用 c 替换；
• 2:参数: a 表示开始位置 (如果是负值,则表示从数组末位开始的第几位)，b 表示删除元素的个数， c 表示替换的元素(可以多个)
• 3:原数组: 改变原数组
• 4:返回值: 由删除的内容组成的新数组

1. splice(a): 一个参数，表示删除，从 a 位置，删除到最后，即默认 b=arr.length - a；

var arr = [1, 2, 3, 4]
var newArr = arr.splice(2)

console.log(arr) // [1, 2]
console.log(newArr) // [3, 4]

2. splice( a, b )：两个参数，表示删除，从 a 位置，删除 b 个元素；

var arr = [1, 2, 3, 4]
var newArr = arr.splice(2, 1)

console.log(arr) // [1, 2, 4]
console.log(newArr) // [3]

3. splice( a, 0, c )：三个参数，且删除长度为0，表示添加，在 a 位置前添加元素；返回空数组（因为没删除）

var arr = [1, 2, 3, 4]
var newArr = arr.splice(0, 0, 0)

console.log(arr) // [0, 1, 2, 3, 4]
console.log(newArr) // []

4. splice( a, b, c )：三个参数，表示修改，从 a 位置开始，删除长度为 b 的元素，并用 c 替换；

var arr = [1, 2, 3, 4]
var newArr = arr.splice(3, 1, 5)

console.log(arr) // [1, 2, 3, 5]
console.log(newArr) // [4]

6.reverse()

• 1作用: 将数组中元素的位置颠倒
• 2:参数: 没有
• 3:原数组: 改变原数组
• 4:返回值: 会改变原来数组的位置，形成颠倒,而不会创建新的数组；

var arr = [1, 2, 3, 4]
var newArr = arr.reverse()

console.log(arr) // [4, 3, 2, 1]
console.log(newArr) // [4, 3, 2, 1]

7.sort()

• 1:作用: sort() 方法在适当的位置对数组的元素进行排序，默认排序顺序是根据字符串Unicode码
• 2:参数: compareFunction（可选）
• 3:原数组: 改变原数组
• 4:返回值: 会改变原来数组的位置，形成从大还是从小排序,而不会创建新的数组；

/*
 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变；
 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
 */

var arr = [1, 3, 2, 50, 23];
arr.sort();// 根据字符Unicode码点 [1, 2, 23, 3, 50]
arr.sort(function(a,b) {return a - b ;});// 从小到大 [1, 2, 3, 23, 50]
arr.sort(function(a,b) {return b - a ;});// 从大到小 [50, 23, 3, 2, 1]

二.原数组不变

1. toString()

• 1:作用: 将数组转换为字符串
• 2:参数: 没有
• 3:原数组: 不变
• 4:返回值: 一个新的字符串

var arr = [1, 2, 3]
var str = arr.toString()

console.log(arr) // [1, 2, 3]
console.log(str) // "1,2,3"

2.join()

• 1作用: 将数组按指定分隔符转为字符串
• 2:参数: separator分隔符
• 3:原数组: 不变
• 4:返回值: 用分隔符连接的新字符串

// 根据参数不同返回不同结果
var arr = [1, 2, 3]
var str1 = arr.join()
var str2 = arr.join('-')
var str3 = arr.join('')

console.log(arr) // [1, 2, 3]
console.log(str1) // "1,2,3"
console.log(str2) // "1-2-3"
console.log(str3) // "123"

3.concat()

• 1:作用: 拼接两个或多个数组
• 2:参数: 可以是一个或多个数值或字符串或数组
• 3:原数组: 不变
• 4:返回值: 新数组

// 传入不同参数，原数组不变
var arr = [1, 2, 3]
var newArr1 = arr.concat(4)
var newArr2 = arr.concat(5, 6, 7)
var newArr3 = arr.concat([5, 6, 7])
var newArr4 = arr.concat([5], [6], [7])

console.log(arr) // [1, 2, 3]
console.log(newArr1) // [1, 2, 3, 4]
console.log(newArr2) // [1, 2, 3, 5, 6, 7]
console.log(newArr3) // [1, 2, 3, 5, 6, 7]
console.log(newArr4) // [1, 2, 3, 5, 6, 7]

4.slice(a,b)

• 1:作用: 选取从位置 a 到位置 b 的数组的一部分（[ a, b) => 包含a，不包含b）
• 2:参数: 起始位置 a （可选，省略时为0）；终点位置 b （可选，省略时为arr.length-1）
• 3:原数组: 不变
• 4:返回值: 由选取的内容组成的新数组
• 5: 注意：slice 不修改原数组，只会返回一个浅拷贝了原数组中的元素的一个新数组，即地址都指向了同一个对象。
• 6:用法: 传入的参数不同

1. slice( )：不传参数，表示从 0 到 arr.length-1

var arr = [1, 2, 3, 4]
var newArr = arr.slice()

console.log(arr) // [1, 2, 3, 4]
console.log(newArr) // [1, 2, 3, 4]

2. slice( a )：传一个参数，表示从位置 a 到 arr.length-1；
3. slice( a, b )：传两个参数，表示从位置 a 到 b（不包含b)

var arr = [1, 2, 3, 4]
var newArr = arr.slice(1, 2)

console.log(arr) // [1, 2, 3, 4]
console.log(newArr) // [2]

ES5中数组的方法

一.迭代方法

1.forEach()

• 1:作用: 遍历数组,使用函数遍历每一个数组项
• 2:没有返回值
• 3:原数组: 不变
• 4:返回值: 新数组
• 5:不会改变原数组
• 语法:

arr.forEach( function( value, index, arr ){
  /*内容*/
})
//没有返回值，即使用return返回，用变量接收也是显示undefined

• 注意: jQuery中的each方法中回调函数的参数顺序与forEach不同

$arr.each( function( index, value, arr ){
  /*内容*/
})
//没有返回值，即使用return返回，用变量接收也是显示undefined

• 补充: forEach除了接受一个必须的回调函数参数，还可以接受一个可选的上下文参数（改变回调函数里面的this指向）（第2个参数）默认指向window。map、filter、some、every都有该可选参数。

arr.forEach(function(currentValue, index, arr), thisValue)

2.map

• 作用: 映射
• 让数组中的每个元素都调用一次提供的函数
• 返回每次函数调用的结果组成的新数组
• 不会改变原数组
• 语法:

arr.map( function( value, index, arr ){
  return 改变后的数据；
})

//必须要有返回值，否则返回一个全是undefined的数组

var arr = [1, 2, 3]
var res1 = arr.map(function(v, i, arr){return v*2})
var res2 = arr.map(function(v, i, arr){v*2})

console.log(arr) // [1, 2, 3]
console.log(res1) // [2, 4, 6]
console.log(res2) // [undefined, undefined, undefined]

• 注意: jQuery中的map方法中回调函数的参数顺序先index，后value。

3.filter

• 作用:过滤
• 该方法对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
• 即符合规则的元素会被存放到新数组中。
• 语法:

arr.filter( function( value, index, arr ){
  return value>n(该表达式为true的值)；
})

//必须要有返回值，否则返回一个空数组

var arr = [1, 2, 3, 4]
var res1 = arr.filter(function(v, i, arr){return v>2})
var res2 = arr.filter(function(v, i, arr){v>2})

console.log(arr) // [1, 2, 3, 4]
console.log(res1) // [3, 4]
console.log(res2) // []

• 注意:jQuery中的过滤数组方法是grep
• grep(array,callback,invert)

1. array: 带过滤数组
2. callback：数组过滤函数，该函数包含两个参数，第一个是当前数组元素的值value，第二个是数组元素的下标index；
3. invert：布尔型可选项，默认为false，即返回的是过滤函数处理以后为true的数组；选项设置为true的时候，返回的是过滤函数处理以后为false的数组 。

$.grep(arr, function( value, index ){
  return value>n;
},false/true)//默认false，返回表达式为true的值的数组

4. 补充: jQuery中的filter方法，参数为选择器，用于筛选元素。

$("a"),filter("#foo");
//选择标签为“a”且其ID为“foo"的标签

4.some

• 作用: 存在满足
• 判断数组中的每一个元素，只要有一个符合回调函数的要求，就返回true。

var arr = [1, 2, 3, 4]
var res = arr.some(function(v, i, arr){return v>2})


console.log(arr) // [1, 2, 3, 4]
console.log(res) // true

5.every

• 作用: 全部满足
• 判断数组中的每一个元素，所有元素都符合回调函数的要求，就返回true。

var arr = [1, 2, 3, 4]
var res = arr.every(function(v, i, arr){return v>2})


console.log(arr) // [1, 2, 3, 4]
console.log(res) // false

二.索引方法

1.indexOf()

• 作用: 从数组的开头开始向后查找数组中某个元素第一次出现的索引位置，如果找不到，返回-1
• **语法: **

arr.indexOf( item, start );
//参数一：查找的元素
//参数二：开始查找的下标index，不选默认从0索引开始

• 常用:

//常用于操作数组中的元素，没有就添加。
var index=arr.indexOf( item );
if ( index ===  -1 ){
  arr.push( item );
}

• 注意: 在比较第一个参数与数组中的每一项时，会使用全等操作符， 要求必须完全相等,否则返回-1。

2.lastIndexOf()

• 作用: 从数组的末尾开始向前查找数组中某个元素第一次出现的位置，如果找不到，返回-1