javascript 数组的常用方法

学习javascript的过程中，总是容易array忘记方法，把数组的一些方法全部汇总在一起，方便查看和增加记忆.

创建数组

let arr = ['apple', 'banana'];
console.log(arr, '---------访问数组'); //[ 'apple','banana' ]

通过索引访问元素

let arr = ['apple', 'banana'];
let first = arr[0];
console.log(first, '----通过索引访问数组'); //'apple'
console.log(arr[arr.length - 1], '-------访问数组中最后一位元素') //'banana'

遍历数组

let arr = ['apple', 'banana'];
arr.forEach((item, index, array) => {
    console.log(item, '------item')  //'apple' 'banana'
    console.log(index, '------index') // 0,1
    console.log(array, '-----array') //['apple','banana']
})

push() 添加元素到数组末尾

let arr = ['apple', 'banana'];
arr.push('orange');
console.log(arr, '----添加元素到数组末尾'); // ['apple', 'banana', 'orange' ]

pop() 删除数组末尾元素

let arr = ['apple', 'banana','orange'];
arr.pop();
console.log(arr, '----删除数组末尾元素'); //['apple', 'banana']

shift() 删除数组最前面的元素

let arr = ['apple', 'banana'];
arr.shift();
console.log(arr, '----删除数组最前面的元素') //[ 'banana' ]

unshift() 添加元素到数组的头部

let arr = ['banana'];
arr.unshift('eggs');
console.log(arr, '----添加元素到数组的头部')  //[ 'eggs', 'banana' ]

indexOf() 查看某个某个元素在数组中的位置,存在就是当前下标，如果不存在就为-1；

let arr = [ 'eggs','banana'];
let index = arr.indexOf('banana');
console.log(index, '------查看某个某个元素在数组中的位置；') //1
//--------------------
let index1 = arr.indexOf('watermelon');
console.log(index1, '------查看某个某个元素在数组中的位置；') //-1

splice是数组中最强大的功能之一，增，删，改

let arr = [ 'eggs','banana'];
splice(start,end,string) start是开始下标的位置  end是删除几个元素 string是插入或替换的元素
arr.splice(0, 1, 'grapes'); //在0的位置删除一个元素，并且加入一个元素 ，删除插入
console.log(arr,'------') //[ 'grapes', 'banana' ] '------'
arr.splice(1, 2, 'fruits'); //在下标为1的位置插入2个元素，如果后面只传了一个就插入一个
console.log(arr,'------') //[ 'grapes', 'fruits' ] '------'
arr.splice(2, 2, 'fruits', 'fruits'); //在下标为2的位置插入2个元素
console.log(arr,'------') //[ 'grapes', 'fruits' ] '------'
arr.splice(0, 1);  //删除元素
console.log(arr, '---通过索引删除某个元素')

slice 不会改变原数组

let arr=[ 'fruits', 'fruits', 'fruits' ];
let copyArr = arr.slice();  //拷贝数组
console.log(copyArr) //[ 'fruits', 'fruits', 'fruits' ]
let sliceArr = arr.slice(0, 1);  //获取元素 
console.log(sliceArr)  //[ 'fruits' ]

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

const bar = ['a', 'b', 'c'];
Array.from(bar);
const foo = Array.from('foo');
console.log(foo); //[ 'f', 'o', 'o' ] 

Array.isArray() 用于确定传递的值是否是一个 Array。

console.log(Array.isArray([1, 2, 3])) //true
console.log(Array.isArray('str')) //false
console.log(Array.isArray({ 'foo': '1' })) //false
console.log(Array.isArray(null)) //false
console.log(Array.isArray(undefined)) //false

Array.of() 方法创建一个具有可变数量参数的新数组实例

console.log(Array.of(5)) //[5] 创建一个数组为[5]
console.log(Array.of(1, 2, 3)) //[1,2,3]
console.log(Array.of(1, [1, 23], 3)) //[ 1, [ 1, 23 ], 3 ]

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

let array1 = ['a', 'b'];
let array2 = ['1', '2'];
let array3 = [].concat(array1, array2);
console.log(array3) //[ 'a', 'b', '1', '2' ]

array.copyWithin(target, start, end)

方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。

target    必需。复制到指定目标索引位置。
start    必需。元素复制的起始位置。
end    可选。停止复制的索引位置 (默认为 array.length)
let copyWithinArr = ["alpha", "beta", "copy", "delta"].copyWithin(1, 2, 3);
1=='beta'
2=='copy'
3=='delta'
console.log(copyWithinArr) // [ 'alpha', 'copy', 'copy', 'delta' ]
let copyWithinArr1 = ["alpha", "beta", "copy", "delta"].copyWithin(2, 0);
console.log(copyWithinArr1) //[ 'alpha', 'beta', 'alpha', 'beta' ]

entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

var entries = ["a", "b", "c"];
var iterator = entries.entries();
console.log(iterator, '---')
console.log(iterator.next().value, '---')
console.log(iterator.next())
var iter = entries.entries();
var a = [];
// for(var i=0; i< arr.length; i++){   // 实际使用的是这个 
for (var i = 0; i < arr.length + 1; i++) {    // 注意，是length+1，比数组的长度大
    var tem = iter.next();             // 每次迭代时更新next
    console.log(tem.done);             // 这里可以看到更新后的done都是false
    if (tem.done !== true) {             // 遍历迭代器结束done才是true
        console.log(tem.value);
        a[i] = tem.value;
    }
}
console.log(a);  // [ [ 0, 'a' ], [ 1, 'b' ], [ 2, 'c' ] ] 遍历完毕，输出next.value的数组

keys()方法返回一个新的Array迭代器，它包含数组中每个索引的键。 返回的是下标

values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。

for (let index of ['a', 'b'].keys()) {
    console.log(index);
}
// 0  
// 1  

every() 方法测试数组的所有元素是否都通过了指定函数的测试。

function isBigEnough(element, index, array) {
    return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

console.log([1,2,3,4,5].some(isBigEnough),'----some'); //一个都没有通过false 
// passed is false
console.log([12, 54, 18, 1,2].some(isBigEnough),'--------some'); //只要有一个通过即为true
// passed is true

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

arr.fill(value，start，end)
let fillArr = [1, 2, 3, 4, 5];
console.log(fillArr.fill(3)) //[ 3, 3, 3, 3, 3 ]
console.log(fillArr.fill(2, 0, 2)) //[ 2, 2, 3, 3, 3 ]
console.log(fillArr.fill(5, 1)) // 2, 5, 5, 5, 5 ]

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

let filter = (value) => {
    return value > 10
}
console.log([15, 13, 2, 16, 3].filter(filter))  // 15, 13, 16 ]

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

console.log([15, 13, 2, 16, 3].find(filter))  // 15 返回第一个满足条件的值  否则undefined

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

console.log([15, 13, 2, 16, 3].findIndex(filter))  // 0 返回第一个满足条件的下表  否则-1

forEach() 方法对数组的每个元素执行一次提供的函数。 //item是值,index下标,array是原数组

fillArr.forEach((item, index, array) => console.log(item))

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回

console.log(fillArr.includes(2)) //true 检查数组中是否有该值有为true，否则false
console.log(fillArr.includes(4)) //false  

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

console.log(fillArr.indexOf(2))  //0
console.log(fillArr.indexOf(4))  //-1 

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。

let joinArr = ['Wind', 'Rain', 'Fire'];
console.log(joinArr.join());  //Wind,Rain,Fire

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

console.log(['a','b'].lastIndexOf('a'));   //0  从后面往前面找

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

let numbers=[1,2,3,45,7,8,9];
let doubles=numbers.map(x=>x+1);
console.log(doubles,'------map') //[ 2, 3, 4, 46, 8, 9, 10 ] '------map'

reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。

const reduceArr=[1,2,3,4,5,6];
const reduce=(accumulator,currentValue)=>{
    console.log(accumulator,'-------accumulator'); //累加的值
    console.log(currentValue,'-------currentValue'); //当前元素
    return accumulator+currentValue
};
console.log(reduceArr.reduce(reduce))  //21 从左往右

reduceRight() 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

console.log(reduceArr.reduceRight(reduce))  //21 从右往左

reverse() 方法将数组中元素的位置颠倒。

console.log(reduceArr.reverse()) //[ 6, 5, 4, 3, 2, 1 ] 数组顺序颠倒

sort() 数组的元素进行排序，并返回数组

let items = [
    { name: 'Edward', value: 21 },
    { name: 'Sharpe', value: 37 },
    { name: 'And', value: 45 },
    { name: 'The', value: -12 },
    { name: 'Magnetic' ,value :0},
    { name: 'Zeros', value: 37 }
  ];
  items.sort((a,b)=>{
      return a.value-b.value
  })

  console.log(items)

  items.sort((a,b)=>{
    var nameA = a.name.toUpperCase(); // ignore upper and lowercase
    var nameB = b.name.toUpperCase(); // ignore upper and lowercase
    if (nameA < nameB) {
        return -1;
      }
      if (nameA > nameB) {
        return 1;
      }
    // names must be equal
    
      return 0;
    // return   nameA-nameB  转成NAN
  })
  console.log(items)

toLocaleString()返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，

  let str=[1,2,3,4,5];
  console.log(str.toLocaleString())  //1,2,3,4,5 

希望大家喜欢，也希望大家指点错误，也可以加入qq群439667347，大家一起讨论，一起进步，后续更新中...