>웹 프론트엔드 >JS 튜토리얼 >JS 배열 방법을 사용하는 단계에 대한 자세한 설명

JS 배열 방법을 사용하는 단계에 대한 자세한 설명

php中世界最好的语言
php中世界最好的语言원래의
2018-05-24 16:06:222017검색

이번에는 JS 배열 방식을 사용하는 단계에 대해 자세히 설명하겠습니다. JS 배열 방식을 사용할 때 주의사항은 무엇인가요?

1.join

기능: 문자를 지정하여 배열문자열으로 연결합니다.
구문: ​​ string arr.join([separator = ',']);
매개변수: 구분 기호는 선택 사항입니다. 생략할 경우 기본값은 쉼표입니다. seprator가 빈 문자열이면 배열의 모든 요소가 직접 연결됩니다.
반환 값: 연결된 문자열.

<script>
        var arr=[2,3,4,5];
        console.log(arr.join());//"2,3,4,5"
        console.log(arr.join(""));//"2345"
        console.log(arr.join("+"));//"2+3+4+5"
        console.log(arr);//[2,3,4,5]
</script>
2.push

기능: 배열의 end에 하나 이상의 요소를 추가합니다.
구문: ​​number arr.push(element1, ..., elementN);
매개변수: elementN, 하나 이상의 요소.
반환 값: 새 배열의 길이입니다.
참고: 는 원래 배열을 수정합니다.

 <script>
        var att=[1,2,3,4];
        console.log(att.push("a","b"));//6
        console.log(att);//[1,2,3,4,"a","b"];
 </script>
3.unshift

기능: 배열의 head에 하나 이상의 요소를 추가합니다.
구문: ​​number arr.push(element1, ..., elementN);
매개변수: elementN, 하나 이상의 요소.
반환 값: 새 배열의 길이입니다.
참고: 는 원래 배열을 수정합니다.

 <script>
        var att=[1,2,3,4];
        console.log(att.unshift("a","b"));//6
        console.log(att);//["a","b",1,2,3,4];
 </script>
4.pop

기능: Delete arraylast one element.
구문: mixed arr.pop();
반환 값: 삭제된 요소.
참고: 는 원래 배열을 수정합니다.

<script>
    var arr=[1,2,3,4];
    console.log(arr.pop());//4
    console.log(arr);//[1,2,3]
</script>
5.shift

기능: 배열에서 첫 번째 요소를 삭제합니다.
구문: mixed arr.pop();
반환 값: 삭제된 요소.
참고: 는 원래 배열을 수정합니다.

<script>
    var arr=[1,2,3,4];
    console.log(arr.shift());//1
    console.log(arr);//[2,3,4]
</script>
6.concat

기능: 들어오는 배열 또는 비배열 값원래 배열과 결합하여 새 배열을 만들고 를 반환합니다.
구문: ​​ 배열 배열. (value1, value2, ..., valueN);
매개변수: valueN은 원래 배열과 병합해야 하는 배열 또는 배열이 아닌 값을 나타냅니다.
반환 값:병합된 배열
참고 : 원본 배열의 내용은 수정되지 않습니다.

<script>
        var att=[1,2,3];
        var attO=["a","b"];
        var attT=[5,true];
        console.log(att.concat(10,attO,attT));//[1,2,3,10,"a","b",5,tru]
        console.log(att);//[1,2,3]
</script>
7.reverse

함수:

reverse배열에 있는 요소의 위치.구문: ​​배열 arr.reverse()
반환 값
: 순서를 뒤집은 후의 배열 참고:
원래 배열을 변경합니다.

<script>
    var arr = [1,2,3,6,5,4];
    var res = arr.reverse();
    res.push( "a" );
    console.log( res );//[4,5,6,3,2,1,"a"]
    console.log( arr );//[4,5,6,3,2,1,"a"]
</script>
8.slice

기능:

** ​​배열의 일부를 가로채서 이 새 배열을 반환합니다.

구문:
array arr.slice([ 시작[,end] ]);반환 값:
차단 후의 새 배열참고:
시작 위치를 포함하고, 끝 위치를 포함하지 않으며원본을 변경하지 않습니다. array.원본 배열에는 아무것도 전달되지 않습니다.

<script>
    var arr = ["a","b","c","d"];
//    var res = arr.slice( 1,3 );//["b","c"]
//    var res = arr.slice( 3,1 );//[]
    var res = arr.slice( -3,-1 );//["b","c"]
    var res = arr.slice();//["a","b","c","d"]
    console.log( res );
    console.log( arr );//["a","b","c","d"]
</script>
9.splice
기능:

배열의 내용을 수정하려면 이전 요소를 새 요소로 교체

구문: ​​array array.splice(start,
deleteCount[, item1[, item2[, ...]]])매개변수:

    - start    起始位置
    - deleteCount    删除长度
    - item    添加的内容

반환 값: 삭제된 요소로 구성된 배열

참고: 수정
원래 배열의 내용을 수정합니다.

<script>
    var att="Liangzhifang".split("");
    console.log(att.splice(2,4,["a"]));//["a","n","g","z"]
    console.log(att);//["L","i",["a"],"h","i","f","a","n","g"]
</script>

10.sort

作用: 对数组的元素进行排序。
语法: array arr.sort([compareFunction]);
参数: compareFunction可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
返回值: 排序后的数组.

<script>
    //当什么都不传入的时候,sort()默认由小到大排列。
    var attr=[9,5,4,3,2];
    console.log(attr.sort());//[2, 3, 4, 5, 9]
    //传入function的时候,sort()内的function返回值大于0,由小到大排列。
    var attrO=[9,5,4,3,2];
    console.log(attrO.sort(function () {
        return 1;
    }));//[2, 3, 4, 5, 9]
    //传入function的时候,sort()内的function返回值小于或者等于0,数组序列不变。
    var attrT=[9,5,4,3,2];
    console.log(attrT.sort(function () {
        return -1;
    }));// [9, 5, 4, 3, 2]
    //由于sort内部是随机抽取两个值,我们在利用function函数的返回值,大于0的时候,交换位置。小于或者等于0的时候不变,来排序。
    //以下是由小到大排序
    var attrTh=[9,5,4,3,2];
    console.log(attrTh.sort(function (a,b) {
        return a-b;
    }));// [2, 3, 4, 5, 9]
    //以下是由大到小排序
    var attrF=[9,5,4,3,2];
    console.log(attrF.sort(function (a,b) {
        return b-a;// [9, 5, 4, 3, 2]
    }));
</script>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

使用js变量作用域遇到的bug

自定义搭建前端脚手架

위 내용은 JS 배열 방법을 사용하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.