지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

가장 실용적인 JS 배열 함수 구성(그래픽 튜토리얼)

亚连
풀어 주다： 2018-05-19 09:15:41
원래의
1245명이 탐색했습니다.

이 기사의 편집자는 독자에게 도움이 되고 참고가 될 수 있도록 매우 포괄적인 JS 배열 함수 및 관련 작성 규칙 세트를 편집했습니다.

Script House는 이전에 JS 배열과 관련된 콘텐츠를 정리한 적이 있습니다. 이번에는 매우 실용적인 JS 배열 작업 기술과 작성 방법을 배워보겠습니다.

instanceof

检测一个对象是否是数组;(用来对付复杂数据类型;)
// 简单数据类型 typeof ;
A instanceof B // A是不是B造出来的;
例：
  var arr = [1,2,3];
  console.log(arr instanceof Array); //arr属不属于Array类型;
로그인 후 복사

Array.isArray( )

Array.isArray(参数); // 判断参数是不是数组,返回布尔值;
例：
  var arr = [1,2,3];
  var num = 123;
  console.log(Array.isArray(arr)); //true
  console.log(Array.isArray(num)); //false
로그인 후 복사

toString( )

数组.toString(); // 把数组变成字符串,去除了[],内容用逗号链接;
例：
  var arr = ["aaa","bbb","ccc"];
  console.log(arr.toString());   //返回 aaa,bbb,ccc
로그인 후 복사

valueOf( )

数组.valueOf(); //返回数组本身;  
例：
  var arr = ["aaa","bbb","ccc"];
  console.log(arr.valueOf());   //返回数组本身 ["aaa","bbb","ccc"]
로그인 후 복사

array.join(parameter)

数组.join(参数); // 数组中的元素可以按照参数进行链接变成一个字符串;
console.log(arr.join()); //和toString()一样用逗号链接
console.log(arr.join("|")); //用参数链接
console.log(arr.join("&")); //用参数链接
console.log(arr.join(" ")); //如果是空格，真的用空格链接
console.log(arr.join("")); //空字符是无缝连接
로그인 후 복사

배열 요소 추가 및 삭제

push( ) 및 팝 ( )

1. 数组.push() //在数组的最末尾添加元素;
2. 数组.pop() //不需要参数;在数组的最末尾删除一项;
例：
  var arr = [1,2,3];
  var aaa = arr.push("abc");//在数组的最末尾添加一个元素;
  console.log(arr);//元素被修改了
  console.log(aaa);//返回值是数组的长度;

  aaa = arr.pop();//不需要参数;在数组的最末尾删除一项;
  console.log(arr);//元素被修改了
  console.log(aaa);//被删除的那一项
로그인 후 복사

unshift( ) 및 Shift( )

1. 数组.unshift() //在数组的最前面添加一个元素;
2. 数组.shift() //不需要参数;在数组的最前面删除一项;
例：
  var arr = [1,2,3];
  aaa = arr.unshift("abc");//在数组的最前面添加一个元素;
  console.log(arr);//元素被修改了
  console.log(aaa);//返回值是数组的长度;

  aaa = arr.shift();//不需要参数;在数组的最前面删除一项;
  console.log(arr);//元素被修改了
  console.log(aaa);//被删除的那一项
로그인 후 복사

배열 요소 정렬

reverse( )

reverse()  //翻转数组
例:
  var arr1 = [1,2,3,4,5];
  var aaa = arr1.reverse(); // [5,4,3,2,1]
로그인 후 복사

sort( )

sort() // 数组中元素排序;(默认：从小到大)
   // 默认：按照首个字符的Unicode编码排序;如果第一个相同那么就比较第二个...
例：    
  var arr = [4,5,1,3,2,7,6];
  var aaa =arr.sort();
  console.log(aaa);     // [1, 2, 3, 4, 5, 6, 7]
  console.log(aaa === arr);// true 原数组被排序了(冒泡排序)
  //默认还可以排列字母;
  var arr2 = ["c","e","d","a","b"];
  var bbb = arr2.sort();
  console.log(bbb);     // ["a", "b", "c", "d", "e"]
  console.log(bbb===arr2); // true 原数组被排序了(冒泡排序)

sort() //数值大小排序方法,需要借助回调函数;
例：
   var arr = [4,5,1,13,2,7,6];
   //回调函数里面返回值如果是：参数1-参数2;升幂；  参数2-参数1;降幂；
   arr.sort(function (a,b) {
    return a-b; //升序
    //return b-a; //降序
    //return b.value-a.value; //按照元素value属性的大小排序;
   });
   console.log(arr); // [1, 2, 4, 5, 6, 7, 13]
로그인 후 복사

sort( )기본 원리

  var aaa = bubbleSort([1,12,3], function (a,b) {
//    return a-b;//实参：array[j]-array[j+1]；
    return b-a;//实参：array[j+1]-array[j]；
  });
  console.log(aaa);

  function bubbleSort(array,fn){
    //外循环控制轮数，内循环控制次数，都是元素个数-1;
    for(var i=0;i<array.length-1;i++){
      for(var j=0;j<array.length-1-i;j++){//次数优化，多比较一轮，少比较一次;
        //满足条件交换位置;
//        if(array[j]>array[j+1]){//大于升幂排序；否则降幂;
        //a-b>0 和 a>b是一个意思;
        //b-a>0 和 a<b是一个意思;
//        if(array[j]-array[j+1]>0){//升幂排序
//        if(array[j+1]-array[j]>0){//降幂排序
        //把两个变量送到一个函数中;
        if(fn(array[j],array[j+1])>0){
          var temp = array[j];
          array[j] = array[j+1];
          array[j+1] = temp;
        }
      }
    }
    //返回数组
    return array;
  }
로그인 후 복사

배열 요소의 작동

concat( )

数组1.concat(数组2); // 链接两个数组;
var arr1 = [1,2,3];
var arr2 = ["a","b","c"];
var arr3 = arr1.concat(arr2);
console.log(arr3)  //  [1, 2, 3, "a", "b", "c"]
로그인 후 복사

slice( )

数组.slice(开始索引值，结束索引值);   //数组截取;
例 ：
   var arr = [1, 2, 3, "a", "b", "c"];
   console.log(arr.slice(3));      //从索引值为3截取到最后;["a", "b", "c"]
   console.log(arr.slice(0,3));      //包左不包右;[1, 2, 3]
   console.log(arr.slice(-2));      //负数是后几个;["b", "c"]
   console.log(arr.slice(3,0));      //如果前面的比后面的大，那么就是[];[]
   console.log(arr);             //原数组不被修改;[1, 2, 3, "a", "b", "c"]
로그인 후 복사

splice( )

数组.splice(开始索引值，删除几个，替换内容1，替换内容2，...); // 替换和删除;
                           //改变原数组;返回值是被删除/替换的内容
例:
  var arr = [1,2,3,4,5,6,"a", "b", "c"]
  arr.splice(5);    //从索引值为3截取到最后;(删除)
  console.log(arr);   // [1, 2, 3, 4, 5]
  arr.splice(1,2);  //(删除指定个数)从索引为1的开始删除2个
  console.log(arr);  //[1, 4, 5]

//替换
  var arr = [1,2,3,4,5,6,"a", "b", "c"];
  console.log(arr.splice(3,3,"aaa","bbb","ccc"));  //(删除指定数并替换)
  console.log(arr);   // [1, 2, 3, "aaa", "bbb", "ccc", "a", "b", "c"]
//  添加
  arr.splice(3,0,"aaa","bbb","ccc");//(删除指定个数)
//
  console.log(arr);//截取或者替换之后的;  [1, 2, 3, "aaa", "bbb", "ccc", "aaa", "bbb", "ccc", "a", "b", "c"]
로그인 후 복사

indexOf / lastIndexOf

数组.indexOf(元素);   // 给元素，查索引(从前往后)
数组.lastIndexOf(元素); // 给元素，查索引(从后往前)
例：
  var arr = ["a","b","c","d","c","b","b"];
  console.log(arr.indexOf("b"));    // 1 查到以后立刻返回
  console.log(arr.lastIndexOf("b"));  // 6 找到以后立刻返回
  console.log(arr.indexOf("xxx"));  // -1; 查不到就返回-1；
로그인 후 복사

배열 반복(순회)

every()

对数组中每一项运行回调函数，如果都返回true，every返回true，
如果有一项返回false，则停止遍历 every返回false；不写默认返回false
像保镖失误一次，游戏结束！！！
例：
1.  var arr = [111,222,333,444,555];
  arr.every(function (a,b,c) {
    console.log(a);  //元素
    console.log(b);  //索引值
    console.log(c);  //数组本身;
    console.log("-----");  //数组本身;
    //数组中元素赋值：c[b] = 值;   a=有时候无法赋值;
    return true;
  });

2. //every返回一个bool值，全部是true才是true；有一个是false，结果就是false
  var bool = arr.every(function (element, index, array) {
    //判断：我们定义所有元素都大于200;
    //if(element > 100){
    if(element > 200){
      return true;
    }else{
      return false;
    }
  })
  alert(bool); //false
로그인 후 복사

filter()

//  对数组中每一项运行回调函数，该函数返回结果是true的项组成的新数组
//   新数组是有老数组中的元素组成的，return为ture的项;
例：
  var arr = [111,222,333,444,555];
  var newArr = arr.filter(function (element, index, array) {
    //只要是奇数，就组成数组;(数组中辨别元素)
    if(element%2 === 0){
      return true;
    }else{
      return false;
    }
  })

  console.log(newArr); // [222, 444]
로그인 후 복사

forEach( )

rreee

map ()

// 和for循环一样；没有返回值;
例：
  var arr = [111,222,333,444,555];
  var sum = 0;
  var aaa = arr.forEach(function (element,index,array) {
    console.log(element); // 输出数组中的每一个元素
    console.log(index); // 数组元素对应的索引值
    console.log(array); // 数组本身 [111, 222, 333, 444, 555]
    sum += element; //数组中元素求和;
  });
  console.log(sum); // 数组元素加起来的和
  console.log(aaa);//undefined；没有返回值 所以返回undefined
로그인 후 복사

some()

// 对数组中每一项运行回调函数，返回该函数的结果组成的新数组
//  return什么新数组中就有什么; 不return返回undefined; 对数组二次加工
例：
  var arr = [111,222,333,444,555];
  var newArr = arr.map(function (element, index, array) {
    if(index == 2){
      return element; // 这里return了 所以下面返回的值是333
    }
    return element*100; // 返回的元素值都乘上100后的值
  })
  console.log(newArr); // [11100, 22200, 333, 44400, 55500]
로그인 후 복사

Arrayclearing

//对数组中每一项运行回调函数，如果该函数对某一项返回true，则some返回true; 像杀手，有一个成功，就胜利了！！！
例：
  var arr = [111,222,333,444,555];
  var bool = arr.some(function (ele,i,array) {
    //判断：数组中有3的倍数
    if(ele%3 == 0){
      return true;
    }
    return false;
  })
  alert(bool); //true ; 有一个成功就是true
로그인 후 복사
  1. arr.length = 0; // (不好，伪数组无法清空)
  2. arr.splice(0); // 伪数组没有这个方法;
  3. arr = [];   // 可以操作伪数组; (推荐!)
로그인 후 복사

Array case

1 "Liu Bei|Zhang Fei|Guan Yu"와 같이 |분할 형식으로 문자열 배열을 출력합니다. 

// 伪数组: 就是长的像数组，但是没有数组的方法;也不能添加和删除元素;
例： // arguments
    fn(111,222,333);
    function fn(){
      arguments.length = 0; // 无法清空 返回 [1, 2, 3]
      arguments.splice(0); // 会报错 arguments.splice is not a function
      arguments = []; // 可以清空,返回空数组[] 
      console.log(arguments);
    }
로그인 후 복사

2를 구현하려면 두 가지 방법을 사용하세요. 문자열 배열의 요소 순서를 반대로 바꿉니다. ["a", "b", "c", "d"] -> [ "d", "c", "b", "a"]. 이를 달성하려면 두 가지 방법을 사용하십시오. 팁: i번째와 길이-i-1

    var arr = ["刘备","张飞","关羽"];
    var separator = "|";
    //通过for循环累加
    var str = arr[0];
    for(var i=1;i<arr.length;i++){
      str += separator+arr[i];
    }
    console.log(str); // 刘备|张飞|关羽
    //join()可以把数组中的元素链接成字符串;
    console.log(arr.join("|")); // 刘备|张飞|关羽
로그인 후 복사

3을 교환하세요. 급여 배열 [1500, 1200, 2000, 2100, 1800], 급여가 2000

 // 数组.reverse() 方法
      var arr = ["a", "b", "c", "d"];
      console.log(arr.reverse()); // ["d", "c", "b", "a"]
    
    // 三种：1.正向遍历，反向添加; 2.反向遍历，正向添加;  3.元数组元素交换位置;
      for(var i=0;i<arr.length/2;i++){
        var temp = arr[i];
        arr[i] = arr[arr.length-1-i];
        arr[arr.length-1-i] = temp;
      }
      console.log(arr);
로그인 후 복사

4를 초과하는 항목을 삭제하세요.["c" , "a", "z", "a", "x", "a"] 배열에서 각 a가 나타나는 위치를 찾습니다

  var arr = [1500, 1200, 2000, 2100, 1800];
  //利用filter()形成一个数组;return true;组成的数组;
  var newArr = arr.filter(function (ele, i, array) {
    //2000以上返回false;
    if(ele<2000){
      return true;
    }else{
      return false;
    }
  });
  console.log(newArr); // [1500, 1200, 1800]
로그인 후 복사

5. 배열에서 중복 요소를 제거하는 방법을 작성합니다(배열 중복 제거)

  var arr = ["c", "a", "z", "a", "x", "a"];
  //遍历数组(for/while/do...while)  forEach();
  arr.forEach(function (ele, index, array) {
    //如果元素等于“a”，那么就输出索引值；
    if("a" === ele){
      console.log(index);
    }
  });
로그인 후 복사

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 글 :

VueJs 컴포넌트의 부모-자식 상호 통신 방법 요약

JS에서 자주 발생하는 BUG 및 오류

JS에서 이를 가리키는 것과 호출 및 적용의 역할_기본 지식

위 내용은 가장 실용적인 JS 배열 함수 구성(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript 그래픽 및 텍스트 整理
원천：php.cn
이전 기사：JS 기능 디바운싱 및 제한에 대한 자세한 분석(그래픽 튜토리얼) 다음 기사：js 문자열을 기반으로 한 indexof와 검색 방법의 차이점(그래픽 튜토리얼)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿