JavaScript의 배열 메서드 및 루프 정보

이 글은 javascript에 대한 관련 지식을 제공합니다. 주로 JavaScript의 배열 메서드와 루프를 소개하며 좋은 참조 가치가 있으므로 모든 사람에게 도움이 되기를 바랍니다.

【관련 권장 사항: javascript 비디오 튜토리얼, web front-end】

1. 기본 개념

JavaScript 배열은 단일 변수에 여러 값을 저장하는 데 사용됩니다. 동일한 데이터 유형의 하나 이상의 값 모음입니다

2. 배열을 만드는 세 가지 방법

(1) JavaScript 키워드 new를 사용하여 Array 객체를 만들고 값을 개별적으로 할당합니다

//1、创建数组  new 一个Array() 对象
    let arr = new Array();
    arr[0] = "html";
    arr[1] = "css";
    arr[2] = "javascript";
    arr[3] = "java";

(2) Assignment

//2、创建数组  在Array()对象里面直接赋值
    let arr1 = new Array("html","css","java","javaweb","javascript");

선언 시 (3)

 //3、通过[]直接创建
    let arr2 = ["html","css","java","javascript","javaweb"];

를 직접 생성하려면 배열 리터럴을 사용하세요. 단순성과 가독성, 실행 속도를 위해 세 번째 방법(배열 리터럴 방식)을 사용하세요.

3. 배열 액세스

(1) 색인 번호(첨자 번호) 를 참조하여 배열 요소를 참조합니다. [0]은 배열의 첫 번째 요소입니다. [1] 두 번째입니다. 배열 인덱스는 0부터 시작합니다.

document.write(arr1[0]);

(2) 전체 배열은 배열 이름

console.log(arr1);

(3)을 참조하여 액세스할 수 있습니다. 배열 요소를 수정합니다.

arr[1] = "css";

4. 일반적으로 사용되는 배열 속성

길이 속성은 배열의 길이(배열 요소 수)를 반환합니다.

console.log(arr,arr.length);//控制台输出数组和数组长度

5. 배열의 일반적인 방법

(1) Join(): 배열의 모든 요소를 ​​구분 기호로 구분하여 문자열에 넣습니다. 구분 기호를 통해 배열 배열 유형으로 변환

 //1、join()方法 以分隔符将数组分隔转化为string
    let arr = new Array("html","css","javascript","java","web","mysql");
    console.log(arr,typeof(arr));
    let newarr = arr.join("+");
    console.log(newarr,typeof(newarr));

위의 두 가지 방법을 사용하여 문자열 사이의 공백을 모두 제거

// 2、split()方法  将字符串通过分隔符转化为array数组类型
    // split() 函数验证邮箱格式
    let email = prompt("请输入你的邮箱：");
    console.log(email);
    let arr1 = email.split("@");
    console.log(arr1,typeof(arr1));
    document.write("你的账号为："+arr1[0]+"<br>"+"你的网站时："+arr1[1]);

(3) sort(): 오른쪽 배열 정렬

//功能  剔除字符串里的所有空格
    function trimAll(str){
        let nowstr = str.trim();//先剔除两端的空格
        let arr = nowstr.split(" ");//split()  转换为数组 用空格分隔
        for(let i = 0;i<arr.length;i++){//循环遍历
            if(arr[i] == ""){
                arr.splice(i,1);//遇到空格删除
                i--;
            }
        }
        return arr.join("");//join() 转化为字符串
    }
 
    let nowstr = trimAll("     1     2    4    5    ");
    console.log(nowstr);

참고: 다음 메서드는 배열 자체에서 작동합니다

(4) push(): 배열 끝에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.

(5) pop():

(6) unshfit(): 배열의 선두에 요소를 추가합니다.

(7) shfit(): 배열의 선두에 있는 요소를 삭제합니다. (8) splice(): 배열 범용 방법: 1. 배열의 요소 삭제, 2. 요소 추가, 3. 요소 교체

let arr = [31,23,26,76,45,1,90,6,24,56];
    //sort() 函数  对数组进行排序  默认按数字首位进行排序
    //添加参数  参数为匿名函数
    arr.sort(function(a,b){
        // return a-b;         //正序排序
 
        return b-a;           //倒序排序
    });
 
    console.log(arr);

6. 배열을 반복하는 데 일반적으로 사용되는 방법: 반복은 다음과 같습니다. 조건이 충족되면 계속합니다.

1. 알려진 조건과 알려진 길이를 순회합니다. 먼저 판단한 다음, 루프를 사용하여 알 수 없는 조건을 순회합니다. 길이를 알 수 없는지 먼저 판단한 다음 루프

 let arr = ["html","java","csss","javascript"];
    console.log("旧数组："+arr);
    //对数组自身进行操作
    arr.push("weeb");//在数组末尾添加元素  可以有多个参数 之间用逗号隔开
    arr.pop();//删除末尾元素  没有参数
    arr.unshift("react","mysql");//在数组头部添加元素  可以有多个参数  之间用逗号隔开
    arr.shift();//删除数组头部的元素  没有参数
    arr.shift();//删除需要多次删除  或者利用循环
    arr.splice(0,2);//数组万能方法  删除任意位置元素  参数为： 起始下标，删除数目
    arr.splice(3,2,"java","html");//添加元素  参数为：数组没有的下标，添加数目，添加的数据
    arr.splice(1,1,"javaweb")//替换元素  参数为：起始下标，替换个数，替换数据  如果替换数据小于替换个数  则执行删除功能
    console.log("新数组："+arr);

3. 배열을 통해 루프를 실행하고 적어도 한 번 실행합니다. 4. 루프의 배열 값은 바로 요소 값입니다

let arr = new Array("html","css","javascript","java","web","mysql");
    //1、利用for循环遍历数组  已知条件  已知长度  先判断后循环
    for (let i = 0;i < arr.length;i++){
        document.write(arr[i]+"<br>");
    }

5. 객체 i를 통해 키는 객체를 반복하는 데 특별히 사용되며 배열을 통해 반복할 수도 있습니다

//2、利用while循环遍历数组  未知条件 未知长度  先判断后循环
    let i = 0;
    while(i < arr.length){
        document.write(arr[i]+"<br>");
        i++;
    }

6. forEach() 배열 메서드 익명 콜백 함수 [배열을 통해 반복]

//3、至少执行一次 do while 循环遍历数组
    let j = 0;
    do{
        document.write(arr[j]+"<br>");
        j++;
    }
    while(j < arr.length);

7. map() 배열 메서드를 사용하여 배열을 순회하고 값을 반환합니다

//4、for of  循环遍历数组  value直接元素值  
    for(let value of arr){
        document.write(value+"<br>");
    }

8. flatmap() 배열 메서드를 사용하여 배열을 순회하고 값을 반환합니다. 또한 새 배열을 반환합니다. 권장사항:

javascript 비디오 튜토리얼

,

웹 프론트엔드

】

위 내용은 JavaScript의 배열 메서드 및 루프 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!