JavaScript数组操作总结

目录
  • 1.定义
  • 2.数组的本质
  • 3.数组的length
  • 4. in
  • 5. for…in
  • 6.数组的空位
  • 7.类数组(伪数组)
  • 总结

1.定义

数组是按次序依次排列的一组值

  • 任何数据类型都可以放入数组
  • 数组可以嵌套形成多维数组
const arr = [0,'1',{},function(){}];
//二维数组
const arr1 = [1,2,[3,4,5],6];

2.数组的本质

数组是一种特殊的对象,数组的key是正整数字符串,我们一般使用数字键操作数组,会自动转换成字符串

const arr = [];
arr['1'] = 1;
//1被自动转换成'1'
console.log(arr[1],arr['1']); //1
typeof arr; //obejct

3.数组的length

数组的length计算的是数组中正整数的个数,但你依然可以将数据的key设置为其它类型的值,不过这不会增加length的长度

const arr = [];
arr[2.1] = 2.1;
arr['a'] = 'a';
console.log(arr); //[2.1: 2.1, a: 'a']
console.log(arr.length); //0

length是可写的

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

4. in

in关键用来判断数组中存在某个键,可应用于数组和对象

const arr = ['a','b'];
1 in arr; // true
2 in arr; //fasle

5. for…in

  • for…in用来遍历数组和对象
  • 遍历数组的时候不仅能遍历整数的key,还能遍历所有非整数的key
  • Object.keys()也能获取到数组的非整数的key
const arr = [1,2];
arr['a'] = 3;
arr[4.5] = 4;
for(key in arr){
 console.log(key);
};
// 0
// 1
// a
/  4.5
Object.keys(arr); // ['0', '1', 'a', '4.5']

6.数组的空位

  • 即两个逗号之间没有任何值会产生空值(empty)
  • 使用delete会产生empty
  • 数组的lengt包含empty
var arr = [1,5,,8];
console.log(arr); //[1, 5, empty, 8]
//使用delete也会产生空值
delete arr [0];
console.log(arr); //[empty, 5, empty, 8]
console.log(arr.length); //4
  • 空值和undefined有所区别,undefined参与for…in和forEach的遍历,empty不参与遍历
  • Object.keys能获取到undefined的key获取不到empty的key
  • 使用length能遍历出empty
    const arr1 = new Array(10); //[empty × 10]
    for (key in arr1) {
      console.log(arr1);
    }; //无输出,没有进行遍历
    arr1.forEach((v) => {
      console.log(v)
    }); //无输出,没有进行遍历
    console.log(Object.keys(arr1)); //[]
    const arr2 = [undefined, undefined, undefined]; //[empty × 10]
    for (key in arr2) {
      console.log(key);
    };
    //0
    //1
    //2
    arr2.forEach((value, index) => {
      console.log(value, index)
    });
    // undefined,0
    // undefined,1
    // undefinef,2
    console.log(Object.keys(arr2)); //[3]
    // 使用for循环遍历empty
    for(let i = 0;i<arr1.length;i++){
       console.log(arr1[1])
    };
    //undefined × 10

7.类数组(伪数组)

类数组的定义:键名都是正整数或零,拥有length属性

const arrayLike = {
  0:'a',
  1:'b',
  2:'c',
  length:3
  };
arrayLike[3] = 'd';
console.log(arrayLike[0]); //a
console.log(arrayLike.length); //3

上面的代码为arrayLike添加了一个数字键,但length没有改变,这就说明arrayLike不是数组

典型的类数组有函数的arguments、大多数的元素DOM集合、字符串

function foo(){
  console.log(arguments);
};
foo('tom','jack');
// {0:'tom', 1:'jack', length:2, callee:...}
console.log(document.getElementsByClassName('a'));
//{"0": ...,"1": ...,"2":..., "length":3}
const str = 'apple';
console.log(str.length); //5
consoel.log(str[2]); //p

将伪数组转为数组

  • 使用Array.prototype.slice
  • 使用拓展运算符
function foo(){
  const arr = Array.prototype.slice.call(arguments);
}
function foo(){
  const arr = [...arguments]
}
function foo(...args){
}

总结

  • 数组的empty和undefined有所区别,empty不会被for…in和forEache以及Object.keys运算,但计算length的时候会包含empty,因此使用length循环带有empty的数组时要格外小心
  • 类数组也叫伪数组,是指对象的属性为正整数或者零而且具有length属性的对象
  • 使用Array.prototype.slice.call()或者拓展运算符将类数组转换为数组,类数组可以使用call函数借用数组的方法

到此这篇关于JavaScript数组操作总结的文章就介绍到这了,更多相关JS数组内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 20个常见的JavaScript数组操作总结

    目录 声明数组 1. 常规方式 2. 简洁方式 3. 字面 Array 对象方法 1. forEach 2. map 3. concat 4. push 5. unshift 6. pop 7. shift 8. splice 9. slice 10. join 11. every 12. filter 13. indexOf 14. reduce 15. reverse 16. sort 17. toString 18. at 19. find 20. some JavaScript中的Arr

  • JS对象数组中如何匹配某个属性值

    目录 对象数组中匹配某个属性值 对象数组取出对象属性值完全一样的项 对象数组中匹配某个属性值 如果有一个js对象数组,一个变量如下 var a = [     {         'id' : 2,         'name' : 'xxxx',     },     {         'id' : 3,         'name' : 'bbbbb',     }, ]; var b = 3; 我想要查询 变量b,是否在数组a的id值中,如果在,返回true:不在,返回false 写法如

  • 关于JavaScript中的数组方法和循环

    关于JavaScript中的数组方法和循环

    目录 1.基本概念 2.创建数组的三种方法 3.访问数组 4.数组常用属性 5.数组常用方法 6.常用的循环遍历数组的方法 1.基本概念 JavaScript 数组用于在单一变量中存储多个值.是一个具有相同数据类型的一个或多个值的集合 2.创建数组的三种方法 (1)使用JavaScript关键词 new 一个Array对象,并且单独赋值 //1.创建数组 new 一个Array() 对象 let arr = new Array(); arr[0] = "html"; arr[1] =

  • Javascript数组的 splice 方法详细介绍

    目录 前言 牛刀小试 删除元素 添加元素 并且替换元素 example1 example2 example3 example4 添加元素 example1 example2 负数索引支持 总结 前言 splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容.此方法会改变原数组. 语法格式: array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 参数: start 必选 指定修改的开始

  • JS实现数组/对象数组删除其中某一项

    目录 数组/对象数组删除其中某一项 移除对象数组中指定元素 数组/对象数组删除其中某一项 由于日常工作中经常需要对数组进行操作,最经常使用到的就是对数组进行的删除操作 对于我们前端来说,数组有两种区别 1.var arr = [ 'aaa' , 'bbb' , 'ccc' , ' ddd' , 'eee' ]  这种暂且称之为纯数组 2.var jsonArr =  [ { name: 'cz' , age: '25'} , { name: 'mp' , age: '18'} , { name:

  • JavaScript中数组reduce()方法使用详情

    JavaScript中数组reduce()方法使用详情

    语法: reduce()对数组中的每个元素进行累加,返回一个新的值,可以传入初始值简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回调函数 arr.reduce(function(tmp, value, [index]) { // dosomething... }, [startValue]) // 提供初始值通常更安全 tmp:上一次的累加值,初始值为外部传进去的初始值 startValue,若没传默认是数组第一个值 value:数组元素:若累加值tmp为数组第一

  • js如何获取对象在数组中的index

    目录 获取对象在数组中的index 数组的indexOf()方法 获取对象在数组中的index 需求:数组中的元素是对象,需要获取对象在数组中的index 方法:使用findIndex方法 原数据: const  array = [     {         id:1,         name:'张xx'     },     {         id:2,         name:'王xx'     } ] 方法: const index = array.findIndex(functi

  • JavaScript实现字符串转数组的6种方法总结

    目录 1. 使用 .split('') 2.使用扩展语法 ([…str]) 3.使用 Array.from(str) 4.使用 Object.assign([], str) 5.使用老式方法(for loop 和 array.push()) 6.使用 Array.prototype.slice.call('string') 数组是 JavaScript 中最强大的数据结构,我发现自己通过将字符串转换为数组来解决许多算法.所以我想到了整合和比较各种方法来做同样的事情. 从字符串到数组的转换总是使用

  • JavaScript数组操作之旋转二维数组

    JavaScript数组操作之旋转二维数组

    目录 一.题目描述​ 二.思路与实现 三.总结 一.题目描述​ 给定一个 n × n 的二维矩阵 matrix 表示一个图像.请你将图像顺时针旋转 90 度. 你必须在 原地 旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要 使用另一个矩阵来旋转图像. 示例 1: 输入:matrix = [[1,2,3],[4,5,6],[7,8,9]] 输出:[[7,4,1],[8,5,2],[9,6,3]] 示例 2: 输入:matrix = [[5,1,9,11],[2,4,8,10],[13,3,

  • JavaScript数组操作总结

    目录 1.定义 2.数组的本质 3.数组的length 4. in 5. for…in 6.数组的空位 7.类数组(伪数组) 总结 1.定义 数组是按次序依次排列的一组值 任何数据类型都可以放入数组 数组可以嵌套形成多维数组 const arr = [0,'1',{},function(){}]; //二维数组 const arr1 = [1,2,[3,4,5],6]; 2.数组的本质 数组是一种特殊的对象,数组的key是正整数字符串,我们一般使用数字键操作数组,会自动转换成字符串 const

  • javascript数组操作(创建、元素删除、数组的拷贝)

    1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以

  • JavaScript数组操作函数汇总

    js中数组操作函数还是非常多的,今天忽然想到来总结一下,也算是温故而知新吧.不过不会针对每个办法都进行一下总结,只是针对一些比较常用的做个备注一下. 这里总结到的 js 数组操作函数有:push,pop,join,shift,unshift,slice,splice,concat (1)push 和 pop 这两个函数都是对数组从尾部进行压入或弹出操作.push(arg1,arg2,...)可以每次压入一个或多个元素,并返回更新后的数组长度.注意如果参数也是数组的话,则是将全部数组当做一个元素压

  • javascript数组操作总结和属性、方法介绍

    一.数组的操作 1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);//创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了

  • javascript 数组操作详解

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长

  • JavaScript数组操作详解

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规

  • 分析JavaScript数组操作难点

    分析JavaScript数组操作难点

    以下内容是学习JavaScript数组的时候总结的经验以及需要注意的点. 不要用 for_in 遍历数组 这是 JavaScript 初学者常见的误区.for_in 用于遍历对象中包括原型链上的所有可枚举的(enumerable)的 key,本来不是为遍历数组而存在. 使用 for_in 遍历数组有三点问题: 1.遍历顺序不固定 JavaScript 引擎不保证对象的遍历顺序.当把数组作为普通对象遍历时同样不保证遍历出的索引顺序. 2.会遍历出对象原型链上的值. 如果你改变了数组的原型对象(比如

  • Javascript数组操作函数总结

    其实平时用的比较多的应该是push和pop,不过还是都记下来,以便后面使用. shift :删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined 复制代码 代码如下: var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 unshift :将参数添加到原数组开头,并返回数组的长度 复制代码 代码如下: var a = [1,2,3,4,5]; var b = a.unshift(-2,-1); //a:[-2,-

随机推荐