手把手搞懂JavaScript数组的常用API

Posted 2021-09-05 做只努力的小咸鱼

常用API

• • 1. 创建数组
  • 2. 添加元素
  • 3. 删除元素
  • 4. 数组连接
  • 5. 截取数组
  • 6. 拼接数组
  • 7. 数组反转
  • 8. 数组排序
  • 9. 数组转为字符串
  • 10. 数组内元素查找
  • 11. arr.splice();
  • 12. Array.from();
  • 13. Array.of();

1. 创建数组

使用Array构造函数创建数组：
let arr = new Array();

let arr = new Array(5); // 也可以给构造函数传值,这里创建了一个初始length为5的数组

let arr = new Array(“aa”,“bb”); // 创建一个两个字符串值的数组

使用数组字面量表示法创建数组：
let arr = []; // 创建空数组

let arr = [“aa”,“bb”, ]; //创建一个包含2个元素的数组

2. 添加元素

数组内添加元素可以使用开头入栈和结尾入栈

arr.unshift(); // 开头入栈,把元素添加到数组的开头位置
arr.push(); // 结尾入栈,把元素添加到数组的结尾位置

这两个方法均会改变原数组，并返回新数组的length。

var arr = ['a','b','c','d'];
arr.unshift('e');
console.log(arr);   // [ 'e', 'a', 'b', 'c', 'd' ]

var arr = ['a','b','c','d'];
arr.push('e');
console.log(arr);   // [ 'a', 'b', 'c', 'd', 'e' ]

3. 删除元素

删除元素可以有开头出栈和结尾出栈

arr.shift(); // 开头出栈，将数组的第一个元素移除，并使数组前移一位
arr.pop(); // 结尾出栈，将数组的最后一位移除
delete arr[index]; // 删除数组指定的下标元素

两个方法均会改变原数组，并会返回被修改的值。

var arr = ['a','b','c','d'];
arr.shift();
console.log(arr);   // [ 'b', 'c', 'd' ]

var arr = ['a','b','c','d'];
arr.pop();
console.log(arr);   // [ 'a', 'b', 'c' ]

4. 数组连接

arr.join(""); // 内部不填写连接符会视作无缝连接

不会改变原数组

var arr = [1,2,3,4];
var b = arr.join("");
console.log(arr);  // [ 1, 2, 3, 4 ]
console.log(b);   // 1234

5. 截取数组

arr.slice(start, end); // 取值可以理解为含头不含尾，即取的值是[start, end),从下方例子可以看出来，b只有1和2，并没有三个元素

不会改变原数组

var arr = [1,2,3,4];
var b = arr.slice(0, 2);
console.log(arr);  // [ 1, 2, 3, 4 ]
console.log(b);  // [ 1, 2 ]

6. 拼接数组

arr.concat(“a”, “b”);

不会改变原数组

var arr = [1,2,3];
arr.concat(4,5); // [1,2,3,4,5]
arr.concat([4,5]); // [1,2,3,4,5]
arr.concat(4, [5, [6, 7]]); // [1,2,3,4,5,[6,7]]

7. 数组反转

arr.reverse();

会改变原数组

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

8. 数组排序

arr.sort(); // 他是按照数组中每个元素的第一位进行比较（ASCII码从小到大）

会改变原数组

arr.sort(function(a,b){return a-b;}); // a在前为升序,只对数字有效果
arr.sort(function(a,b){return b-a;}); // a在后为降序,只对数字有效果

var arr = [1, 2, 13, 4];
arr.sort(); // [1, 13, 2, 4]
arr.sort(function(a,b){return a-b;});  // [ 1, 2, 4, 13 ]
arr.sort(function(a,b){return b-a;}); // [ 13, 4, 2, 1 ]

9. 数组转为字符串

arr.toString();

不改变原数组

var arr = [1, 2, 3, 4];
var b = arr.toString();
console.log(b);  // 1,2,3,4

10. 数组内元素查找

arr.indexOf(value);

成功找到元素则返回该元素的下标，如果没找到则返回-1。

var arr = [1, 2, 3, 4];
console.log(arr.indexOf(1));   // 1
console.log(arr.indexOf(5));   // -1

11. arr.splice();

具体方法有：

arr.splice(index, length, value); （插入和替换）

从index这个索引位置开始，将length个元素替换成新元素value的值

var arr = [1, 2, 3, 4];
arr.splice(1, 2, 5);
console.log(arr);  // [ 1, 5, 4 ]

如果length的值为0时，将会视为插入元素，不会删除原数组的其他元素：

var arr = [1, 2, 3, 4];
arr.splice(1, 0, 5);
console.log(arr);  // [ 1, 5, 2, 3, 4 ]

arr.splice(index,length); （删除）

从index这个下标开始，删除length个长度的元素

var arr = [1, 2, 3, 4];
arr.splice(1, 2);
console.log(arr);  // [ 1, 4 ]

arr.splice(0); (清空数组)

var arr = [1, 2, 3, 4];
arr.splice(0);
console.log(arr);  // []

12. Array.from();

用于将类数组结构转换成数组实例

console.log(Array.from("Hello")); // [ 'H', 'e', 'l', 'l', 'o' ]

const arr1 = [1, 2, 3, 4];
const arr2 = Array.from(arr1, x => x**2);
console.log(arr2);  // [ 1, 4, 9, 16 ]

13. Array.of();

将一组参数转化为数组

console.log(Array.of(1, 2, 3, 4)); // [ 1, 2, 3, 4 ]
console.log(undefined); // undefined

完结撒花

您的每一次阅读都是对我莫大的帮助！