javascript 数组调整元素顺序 js数组

一、js创建数组的方式

1、使用 Array 构造函数

let arr = new Array();
// 括号里可以带参数

// 传入一个数字, 这个数组代表这个数组的长度
let arr = new Array(3);

// 传入多个数字、一个或多个非数字 代表这些是传递到数组中的初值
let arr1 = new Array(3, 5, 8);
console.log(arr1);  // [3, 5, 8]

2、使用数组字面量

let arr = ['温情', 'key', 'GAI'];
console.log(arr);  // ["温情", "key", "GAI"]

二、js数组的方法

这里只总结数组自己的原型方法(还有就是从Object继承的)

join()
push() 和 pop()
shift() 和 unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf() 和 lastIndexOf()
forEach()
map()
filter()
every()
some()
reduce()和 reduceRight()

join()

该方法可以将整个数组的元素放入到一个字符串, 返回一个字符串， 通过指定的分隔符进行分割，参数可选，不传的话默认为逗号分割,

let arr = ['温情', '杨和苏', '周延', '法老', '大傻'];
let str = arr.join('/');
console.log(str);  //    温情/杨和苏/周延/法老/大傻

push() 和 pop()

Array.push() 向数组的末尾追加一个或多个元素，第一个参数必需(就是至少添加一个参数)，返回值为追加完元素之后的数组长度
Array.pop() 移除数组的最后一个元素，返回值是被移除的元素

// push()
let arr = ['温情', '杨和苏', '周延', '法老', '大傻'];
let arr1 = arr.push('邓紫棋');

console.log(arr1);  // 6
console.log(arr);  // ["温情", "杨和苏", "周延", "法老", "大傻", "邓紫棋"]

let arr2 = ['热狗', '刘聪'];
arr.push(...arr2);
console.log(arr);  // ["温情", "杨和苏", "周延", "法老", "大傻", "邓紫棋", "热狗", "刘聪"]

// pop()
let arr = ['温情', '杨和苏', '周延'];
let arr1 = arr.pop();

console.log(arr);  // ["温情", "杨和苏"]
console.log(arr1);  // 周延

shift() 和 unshift()

Array.unshift() 向数组的开头添加一个或多个元素，返回值是加了之后新的长度
Array.shift() 移除数组的第一个元素，返回值是被移除的元素

// unshift()
let arr = ['温情', '杨和苏', '周延'];
let backValue = arr.unshift('邓紫棋')
console.log(arr);  // ["邓紫棋", "温情", "杨和苏", "周延"]
console.log(backValue);  // 4

// shift()
let arr = ['温情', '杨和苏', '周延'];
let backValue = arr.shift();
console.log(arr);  // ["杨和苏", "周延"]
console.log(backValue);  // 温情

sort()

Array.sort() 对数组的元素进行排序,并返回数组
语法： Array.sort(function) 参数可选，必须是一个函数，可以指定排序的顺序
如果没有指明 function ，那么元素会按照转换为的字符串的诸个字符的 Unicode 位点进行排序。例如 “Banana” 会被排列到 “cherry” 之前。当数字按由小到大排序时，9 出现在 80 之前，但因为（没有指明 function），比较的数字会先被转换为字符串，所以在 Unicode 顺序上 “80” 要比 “9” 要靠前。[节选自MDN]
比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前
若 a 大于 b，在排序后的数组中 a 应该出现在 b 之后
简单点就是：比较函数两个参数 a 和 b，返回 a-b 就是升序，返回 b-a 就是降序

let arr = [125 , 5, 2, 6, 9, 33];
console.log(arr.sort());  // [125, 2, 33, 5, 6, 9]
console.log(arr.sort((a, b) => a - b));  // [2, 5, 6, 9, 33, 125]
console.log(arr.sort((a, b) => b - a));  // [125, 33, 9, 6, 5, 2]

reverse()

Array.reverse() 方法将数组中元素的位置颠倒，并返回该数组。

let arr = [1, 2, 3];
console.log(arr.reverse());  // [3, 2, 1]

concat()

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

let arr = [1, 2, 3];
let arr1 = [4, 5, 6];
let arr2 = [7, 8, 9];
let arr3 = arr.concat(arr1, arr2);
console.log(arr3);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

slice()

Array.slice(begin, end) 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的（包括 begin，不包括end）。原始数组不会被改变。
begin: 元素下标，表示从哪里开始截取 (包含)
end: 元素下标，表示截取到哪里 (不包含)

let arr = ['温情', '杨和苏', '周延', '刘聪'];
let newArr = arr.slice(2, 3);
let newArr1 = arr.slice(1, 3);
console.log(newArr);  // ["周延"]
console.log(newArr1);  // ["杨和苏", "周延"]

splice()

Araay.splice(start, deleteItem, items) 方法通过删除或替换现有元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
start 指定元素下标，表示从哪个元素开始选择
deleteItem 指定要删除的元素个数
items 要添加进数组的元素,从 start 位置开始。如果不指定，则 splice() 将只删除数组元素。
返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

let arr = ['温情', '杨和苏', '周延', '刘聪'];
let newArr = arr.splice(1, 2);

console.log(newArr);  // ["杨和苏", "周延"]
console.log(arr);  // ["温情", "刘聪"]

arr.splice(1, 1, '邓紫棋');
console.log(arr);  // ["温情", "邓紫棋"]

indexOf() 和 lastIndexOf()

Array.indexOf(searchEle) 方法返回在数组中可以找到一个给定元素的第一个索引(下标)，如果不存在，则返回-1。
Array.lastIndexOf(searchEle, fromIndex) 方法返回指定元素在数组中的最后一个的索引(下标)，如果不存在则返回 -1。从数组的后面向前查找，第二个参数可选，如果有第二个参数从 fromIndex 处开始往前找。

let arr = ['温情', '杨和苏', '周延', '刘聪', '温情'];

console.log(arr.indexOf('周延'));  // 2
console.log(arr.lastIndexOf('温情'));  // 4
console.log(arr.indexOf('杨'));  // -1

forEach()

Array.forEach() 方法对数组的每个元素执行一次给定的函数。
语法：Array.forEach(callback(currentValue, index, array), thisArray)

callback 处理数组每个元素的函数，必需，里面有三个参数：

1. currentValue 数组正在处理的元素，必需
2. index 数组正在处理的元素的索引，可选
3. array 正在处理的这个数组，可选

thisArray 执行callback的时候，当做函数this的值，可选

// 去重
let arr = [1, 2, 2, 2, 3, 4, 5, 5, 6, 6];
let newArr = [];
arr.forEach(cur => {
    if (newArr.indexOf(cur) === -1) {
        newArr.push(cur)
    }
})
console.log(newArr);  // [1, 2, 3, 4, 5, 6]

// 去 0
let arr1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
let newArr = [];
arr1.forEach(val => {
    if(val !== 0) {
        newArr.push(val);
    }
})
console.log(newArr);  // [2, 6, 1, 77, 52, 25, 7]

let arr2 = ['温', '情']
arr2.forEach((cur, index, arr) => console.log(cur, index, arr));  
// 温 0  ["温", "情"]
// 情 1  ["温", "情"]

map()

Array.map(calback(currentValue, index, array))方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
参数参照 forEach 的参数，返回值是一个由原数组每个元素执行回调函数的结果组成的新数组。

let arr = [1, 2, 3];
let newArr = arr.map(val => val * 2);
console.log(newArr); // [2, 4, 6]

filter()

Array.filter(callback(currentValue, index, array)) 通过指定的函数过滤数组中某些元素，判断为 true 就保留下来， 否则就过滤掉，参数参照 forEach

// 保留偶数, 过滤奇数
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let newArr = arr.filter(val => val % 2 === 0);
console.log(newArr);  // [2, 4, 6, 8]

every() 和 some()

Array.every(callback(currentVal, index, arr), thisArr) 方法用于检测数组中所有元素是否都符合指定条件，若符合返回true，否则返回false；
Array.some(callback(currentVal, index, arr), thisArr) 方法用于检测数组中的元素是否有满足指定条件的，若满足返回true，否则返回false；
every() 若收到一个空数组，此方法在一切情况下都会返回 true。
every() 不会改变原始数组。

let fruits = [{
        name: 'banana',
        color: 'yellow'
    },
    {
        name: 'apple',
        color: 'red'
    }
];

// 判断是否所有水果都为红色
function everyTest(FruitsClass) {
    let isRed = FruitsClass.every(cur => cur.color === 'red');
    console.log(isRed);
}

everyTest(fruits); // false

// 判断是否有水果为红色
function someTest(FruitsClass) {
    let isRed = FruitsClass.some(cur => cur.color === 'red');
    console.log(isRed);
}

someTest(fruits)  // true

reduce()

Array.reduce(callback(previousValue , cur, index, arr), defaultValue) 1、previousValue （累加器，上一次调用回调返回的值，或者是提供的初始值（ defaultValue））
2、cur（数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、arr（调用 reduce 的数组）
5、defaultValue （作为第一次调用 callback 的第一个参数。）

注意：如果没有提供 defaultValue ，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供 defaultValue ，从索引0开始。

let arr = [1, 2, 3, 4];

// 求和
let sum = arr.reduce((pre, cur) => pre + cur);
console.log(sum);  // 10

// 求元素出现的个数
let person = ['温情', '杨和苏', '周延', '刘聪', '温情', '温情', '邓紫棋', '邓紫棋'];
let nameNum = person.reduce((pre, cur) => {
    if(cur in pre) {
        pre[cur]++
    } else {
        pre[cur] = 1;
    }
    return pre
}, {})
console.log(nameNum);  // {温情: 3, 杨和苏: 1, 周延: 1, 刘聪: 1, 邓紫棋: 2}