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

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

完结撒花

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值