zoukankan      html  css  js  c++  java
  • JavaScript中数组的基础知识和相关方法

     

    数组基础

    数组是大多数语言里面最常见的一种数据结构,它是一个有序的值列表。

    创建数组

    1.创建字面量数组 let arr=[]; 2.创建构造函数数组 let arr=new Array(); 注:无论是字面量形式数组,还是构造函数数组,当我们要使用typeof打印数据类型时,都会返回一个object

    例:

     let arr1 = []; let arr2 = new Array(); console.log(typeof arr1);//object console.log(typeof arr2);//object

    赋值

    1.先声明再赋值 let arr = []; arr[0] = 1; arr[1] = 2; arr[2] = 3; 注(重要!!!):数组的下标是从0开始的。 2.声明直接赋值 let arr = [1,2,3,4,5]; 注:我们可以在数组任意位置进行赋值,数组长度会自动改变,空的位置使用undefined填充。

    例:

     let arr = []; arr[0] = 1; arr[4] = 10; console.log(arr); //[ 1, <3 empty items>, 10 ]

    访问

    例:

     let arr = [1,2,3,4,5]; console.log(arr[0]);//1 //访问下标为0的值,也就是数组的第一个数 除了这种方式,我们还可以使用变量的方式来访问 例2let arr = [1,2,3,4,5]; let i = 2; console.log(arr[i]);//3

    删除

    我们可以用delete来删除数组的某一个元素,但删除的元素位置不会消失,会有个替代: let arr = [1,2,3,4,5]; delete arr[2];//删除数组中的第3个元素; console.log(arr); //[ 1, 2, <1 empty item>, 4, 5 ]

    遍历

    1.for循环遍历 使用最多的一种遍历方法,

    例:

    let arr = [1, 2, 3, 4, 5]; for (let i=0;i<arr.length;i++) { console.log(arr[i]); }// 1 // 2 // 3 // 4 // 5

    2.for-in遍历 for-in主要迭代的是数组的键,然后我们通过键就可以找到相应的数组元素。

    例:

     let arr = [1, 2, 3, 4, 5]; for (let i in arr) { console.log(键为{i}的元素值为${arr[i]}); } // 键为0的元素值为1 // 键为1的元素值为2 // 键为2的元素值为3 // 键为3的元素值为4 // 键为4的元素值为5 注(再次声明!!!):数组的下标是从0开始.

    3.for-of遍历 for-of是直接迭代数组的值

    例:

     let arr = [1, 2, 3, 4, 5]; for (let i of arr) { console.log(i); }// 1 // 2 // 3 // 4 // 5

    4(扩展).forEach遍历 forEach涉及到了回调,目前并不说回调内容: let arr = [1,2,3,4,5,6,7,8,9,10]; //将数组的每一项传入到回调函数,然后执行回调函数里面的操作 let i = arr.forEach(function(item){ console.log(item); });

    5.使用迭代器遍历 在ES6中,还专门提供了三个使用迭代可迭代的元素方法,分别是keys(),values()和entries()。

    1keys()它便利出的是数组的键

    例:

     let arr = [3,5,8,1]; for(let i of arr.keys()){ console.log(i); } // 0 // 1 // 2 // 3 2entrise()遍历出的是数组的键和值

    例:

     let arr = [3,5,8,1]; for(let i of arr.entries()){ console.log(i); } // [ 0, 3 ] // [ 1, 5 ] // [ 2, 8 ] // [ 3, 1 ]

    3values()它可以找到可迭代元素的值 注:数组内部无法使用values()方法

    解构

    JS中,解构数组就是讲一个复杂类型的数据分解为一个普通类型的数据。

    例:

     let arr = [1,2,3]; let [a,b,c] = arr; console.log(a);//1 console.log(b);//2 console.log(c);//3 在其中,可以使用,跳过不想解构的数组

    例:

     let arr = [1,2,3];

     let [a,,b] = arr; console.log(a);//1 console.log(b);//3

    多维数组

    例: let a = ["Bill","Mary","Lucy"]; let b = [21,24,27]; let c = [a,b];//这里c就是一个多维数组 1.访问: let a = ["Bill","Mary","Lucy"]; let b = [21,24,27]; let c = [a,b]; console.log(c[0][2]);//Lucy 2.解构 let arr = [[1,2,3],4,5]; let [a,b,c] = arr; console.log(a);//[1,2,3] console.log(b);//4 console.log(c);//5

    扩展运算符

    ES6开始新增的运算符,用于去除刻碟带对象的每一项。 1.例: let a = ["Bill","Mary","Lucy"]; let b = [21,24,27]; let c = [...a,...b]; console.log(c); //[ 'Bill', 'Mary', 'Lucy', 21, 24, 27 ] 2.字符串转化为数组 例: let str = "Hello"; let arr = [...str]; console.log(arr); //[ 'H', 'e', 'l', 'l', 'o' ]

    数组属性

    相关属性

    length:返回数组元素的个数

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

    数组的相关方法

    1.添加删除 数组像栈一样。 栈是一种LIFO(Last-In-First-Out)数组解构,这种数据结构特点是后进先出。

    例:

     let arr = []; let i = arr.push("red","blue");

    //push

    在数组后面插入括号中内容,内容可以用,隔开,插入多个。 console.log(arr);

    //[ 'red', 'blue' ] console.log(i);

    //2 let j = arr.pop();

    //pop从数组最后开始删除 console.log(arr);

    //[ 'red' ] console.log(j);

    //blue let arr = []; arr.push("red","green","pink") let item = arr.shift();

    //shift从数组前面删除 console.log(item);//red console.log(arr);

    //[ 'green', 'pink' ] let arr = []; arr.unshift("red","green","pink");

    //unshift从数组前面开始添加 let item = arr.pop(); console.log(item);

    //pink console.log(arr);

    //[ 'red', 'green' ]

    2.操作方法

    1concat():先船舰当前数组的一个副本,然后将接收到的参数添加到副本的末尾,最后返回新构建的数组,但原来的数组不会变化

    例: let arr = [1,2,3]; let arr2 = arr.concat("red","blue"); console.log(arr);//[ 1, 2, 3 ] console.log(arr2);//[ 1, 2, 3, 'red', 'blue' ] 2slice():它可以接受一个或者两个参数,代表返回项的起始和结束位置。 一个参数:代表起始位置,返回从指定的起始位置到数组末尾的所有项目 两个参数:代表从指定的起始位置到指定的末尾位置的项,但不包括结束位置的项目。

    注:slice()方法不会影响原始数组

    例: let arr = [1,2,3,4,5,6,7,8,9,10];

    //一个参数

    let i = arr.slice(3);

    console.log(i);

    //[ 4, 5, 6, 7, 8, 9, 10 ]

    console.log(arr);

    //[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

    //两个参数

    let j = arr.slice(2,6);

    console.log(j);

    //[ 3, 4, 5, 6 ]

    console.log(arr);

    //[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

    注:如果传入的是负数,用数组的长度加上该数来确定相应的位置 3splice():它可以实现三种类型操作,删除插入和替换 ——删除

    例: let arr = [1,2,3,4,5,6,7,8,9,10];

    //从下标为3的元素开始删除,删除5个元素 //将删除的元素返回给i let i = arr.splice(3,5); console.log(i);

    //[ 4, 5, 6, 7, 8 ] console.log(arr);

    //[ 1, 2, 3, 9, 10 ] ——插入

    例: let arr = [1,2,3,4,5,6,7,8,9,10];

    //从下标为3的元素之前开始插入

    let i = arr.splice(3,0,"red","blue");

    console.log(i);

    //[] console.log(arr);

    //[ 1, 2, 3, 'red', 'blue', 4, 5, 6, 7, 8, 9, 10 ] ——替换

     例: let arr = [1,2,3,4,5,6,7,8,9,10];

    //从下标为3的元素之前开始插入

    //插入多少,就刚好删除多少

    let i = arr.splice(3,2,"red","blue");

    console.log(i);

    //[ 4, 5 ] console.log(arr);

    //[ 1, 2, 3, 'red', 'blue', 6, 7, 8, 9, 10 ]

    4join():将数组转为字符串,可以传入分隔符作为参数

     例: let arr = [1,2,3];

    let str = arr.join("");

    console.log(str);

    //123 let str2 = arr.join(","); console.log(str2);

    //1,2,3

    5split():将字符串转为数组,传入参数指明以什么作为分隔符 let str = "Hello";

    let arr = str.split("");

    console.log(arr);

    //[ 'H', 'e', 'l', 'l', 'o' ] let arr2 = str.split("l");

     console.log(arr2);

    //[ 'He', '', 'o' ]

    3、数组重排序方法

    重排序涉及到两个方法:reverse()strt()

    reverse。:反转数组项的顺序,注意使用该方法时会改变原来数组的顺序,而不是返回一个副本

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

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

    strt():按照升序排列数组每一项

     

    let arr = [-6,-1,-12,1,9,47,3,45];

    console.log(arr.sort(function(a,b){

    return a - b;

    }));

    最后需要注意的是,reverse。和sort。方法,返回值是经过排序之后的数组

    ECMAScript还为数组提供了两个位置方法:indexOf。和lastlndexOf

    这两个方法都接收两个参数:要查找的项目和查找的起点位置索引。区别在于一个是从数组开头

    开始找,一个是从数组末尾开始找。如果没找到就返回-1

    let arr = ["H","e","l","l","o"];

    console.log(arr.indexOf("l"));//2 console.log(arr.lastIndexOf("l"));//3 console.log(arr.indexOf("z"));//-1

    这两个方法进行查找时使用的是全等进行比较

    includes():用于查看数组里面是否包含某个元素,包含返回true,否则返回false

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

    console.log(arr.includes(2));//flase

    console.log(arr.includes("2"));//true

    console.log(arr.includes(7));//false

  • 相关阅读:
    反射技术的入口 获取类的Class信息
    Dom4j(Dom for Java) Day24
    通过反射 修改访问和修改属性的值 Day25
    通过反射 往泛型Integer的集合里添加String 类型的数据 Day25
    计算机网络(七),TCP与UDP的区别
    计算机网络(六),UDP报文段详解
    计算机网络(五),TCP四次挥手
    计算机网络(四),TCP三次握手
    计算机网络(三),TCP报文段详解
    计算机网络(二),TCP/IP四层模型常见协议
  • 原文地址:https://www.cnblogs.com/zai1/p/11148317.html
Copyright © 2011-2022 走看看