JavaScript中数组常用方法（详细）

?一、push（）

//在数组末尾添加一个或多个数组元素；
//push 完毕后返回的结果是新数组的长度；
//原数组也会发生变化
var arrayObj = [1, 2 3];
arrayObj.push(4); // 添加一个元素
console.log(arrayObj); // 输出：[1, 2, 3, 4]

arrayObj.push(5, 6); // 添加多个元素
console.log(arrayObj); // 输出：[1, 2, 3, 4, 5, 6]

二、unshift()

// 在数组的前面追加元素
let arr = ['B', 'C'];
arr.unshift('A');
console.log(arr); // 输出：['A', 'B', 'C']

三、pop(没有参数)

 //删除数组最后一个元素；返回的是删除的元素
var fruits = ["apple", "banana", "orange"];
var lastFruit = fruits.pop();
console.log(lastFruit); // 输出：orange
console.log(fruits); // 输出：["apple", "banana"]

四、shift(没有参数)

 //删除数组第一个元素；返回的是删除的元素
var fruits = ["apple", "banana", "orange"];
var shiftedFruit = fruits.shift();
console.log(shiftedFruit); // 输出：apple
console.log(fruits); // 输出：["banana", "orange"]

五、 reverse()

 //翻转数组
var colors = ['red', 'blue', 'green', 'black'];
colors.reverse();
console.log(colors); // 输出：[ 'black', 'green', 'blue', 'red' ]

六、sort（）

 //数组排序(冒泡排序)
 //.sort(function(a,b){return a-b;升序的顺序排列  return b-a;降序的顺序排列 });
//1. 使用sort方法进行排序：
var arr = [3, 44, 38, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48];
arr.sort(function(a, b) {
  return a - b;
});
console.log(arr); // 输出：[2, 3, 4, 5, 15, 19, 26, 27, 36, 38, 44, 46, 47, 48, 50]

//2. 冒泡排序：
function bubbleSort(arr) {
  var len = arr.length;
  for (var i = 0; i < len - 1; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        var temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}
var arr = [3, 44, 38, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48];
console.log(bubbleSort(arr)); // 输出：[2, 3, 4, 5, 15, 19, 26, 27, 36, 38, 44, 46, 47, 48, 50]

七、indexOf()

// 返回数组元素索引号方法
//array.indexof(element, start)
//返回数组中指定元素的第一个匹配项的索引，如果没有找到则返回-1。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.indexOf(5)); // 输出：4
console.log(arr.indexOf(10)); // 输出：-1
console.log(arr.indexOf(3, 2)); // 输出：2
//array.lastIndexOf(element, start)
//返回数组中指定元素的最后一个匹配项的索引，如果没有找到则返回-1。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 5];
console.log(arr.lastIndexOf(5)); // 输出：9
console.log(arr.lastIndexOf(10)); // 输出：-1
console.log(arr.lastIndexOf(3, 6)); // 输出：2

?八、toString()

 //数组转换为字符串,逗号分隔每一项
var array = ["a", "b", "c"];
var str = array.toString();
console.log(str); // 输出：a,b,c

九、join()

 //把数组中的所有元素转化为一个字符串
var fruits = ["apple", "banana", "orange"];
var result = fruits.join(", ");
console.log(result); // 输出：apple, banana, orange
//使用join()方法将数组的元素连接成一个字符串，并使用逗号和空格作为分隔符。

十、charAt()

//charAt(index)字符串的索引号 
var str = "Hello World";
var char = str.charAt(0);
console.log(char); // 输出：H

十一、charCodeAt()

//charCodeAt(index)返回相应索引号的字符ASCII值，目的：判断用户按下哪个键；
var str = "Hello World";
var charCode = str.charCodeAt(0);
console.log(charCode); // 输出：72

十二、str[index]

// H5新增，访问字符串中的特定字符
let str = "hello";
console.log(str[0]); // 输出：h
console.log(str[1]); // 输出：e
console.log(str[4]); // 输出：o

十三、concat()

// concat()方法用于连接两个或多个字符。拼接字符串，等效于+，+更常用
var str1 = "Hello";
var str2 = "World";
var str3 = "!";
var result = str1.concat(" ", str2, str3);
console.log(result); // 输出：Hello World!

十四、 substr(start,length)

// 从start位置开始（索引号），length取的个数
//1.提取字符串中的一些字符：
var str = "Hello world!";
document.write(str.substr(3)); // 输出：lo world!
//2.提取字符串中指定位置和长度的字符：
var str = "Hello world!";
document.write(str.substr(3, 7)); // 输出：lo worl

十五、slice(start,end)

//从start位置开始，截取到end位置，end取不到（他们俩都是索引号）
var str = "Hello World";
var slicedStr = str.slice(6, 11);
console.log(slicedStr); // 输出：World

十六、substring(start,end)

//从start位置开始，截取到end位置，end取不到,基本和slice相同但是不接受负值
//str.substring(1,3);
//提取字符串中的一部分字符：
var str = "Hello world!"; document.write(str.substring(3)); // 输出：lo world!
//提取字符串中指定范围的字符：
var str = "Hello world!"; document.write(str.substring(3, 7)); // 输出：lo w

?十七、replace()

//repalce（‘被替换的字符’，‘替换的字符’）只替换第一个字符
var str = "Hello, World!";
var newStr = str.replace("World", "JavaScript");
console.log(newStr); // 输出：Hello, JavaScript!

?十八、splice()

//删除元素
var fruits = ["apple", "banana", "orange", "grape"];
fruits.splice(2, 1); // 从索引2开始删除1个元素
console.log(fruits); // 输出：["apple", "banana", "grape"]
//替换元素
var colors = ["red", "green", "blue"];
colors.splice(1, 1, "yellow"); // 从索引1开始删除1个元素，并插入"yellow"
console.log(colors); // 输出：["red", "yellow", "blue"]
//插入元素
var numbers = [1, 2, 3, 4];
numbers.splice(2, 0, 5, 6); // 从索引2开始不删除元素，并插入5和6
console.log(numbers); // 输出：[1, 2, 5, 6, 3, 4]

?十九、toUpperCase()

//转换大写
let str = "hello world";
let x = str.toUpperCase();
console.log(x); // 输出结果：HELLO WORLD

二十、toLowerCase()

//转换小写
let str = "HELLO WORLD";
let x = str.toLowerCase();
console.log(x); // 输出结果：hello world

综合

一，筛选出两个数组不同元素

//方法一：
let arr1 = [
  { name: '安安', value: 'aa' },
  { name: '版本', value: 'bb' },
  { name: '查查', value: 'cc' }
];
let arr2 = [
  { label: '安安', value: 'aa' },
  { label: '版本', value: 'bb' }
];
// 筛选出arr1中不在arr2中的元素
let diffArr1 = arr1.filter(item => {
  return !arr2.some(obj => obj.value === item.value);
});
// 筛选出arr2中不在arr1中的元素
let diffArr2 = arr2.filter(item => {
  return !arr1.some(obj => obj.value === item.value);
});
console.log(diffArr1); // 输出：[{ name: '查查', value: 'cc' }]
console.log(diffArr2); // 输出：[]
//方法二：
var arr1 = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}, {id: 3, name: 'Bob'}];
var arr2 = [{id: 1, name: 'John'}, {id: 4, name: 'Alice'}, {id: 3, name: 'Bob'}];
function getArrDifference(arr1, arr2) {
  var combinedArr = arr1.concat(arr2);
  var differentElements = combinedArr.filter(function(element, index, array) {
    return array.findIndex(function(e) {
      return JSON.stringify(e) === JSON.stringify(element);
    }) === index;
  });
  return differentElements;
}
console.log(getArrDifference(arr1, arr2));
// 输出：[{id: 2, name: 'Jane'}, {id: 4, name: 'Alice'}]

?

?