>웹 프론트엔드 >JS 튜토리얼 >자바스크립트의 가장 기본적인 데이터 구조----배열

자바스크립트의 가장 기본적인 데이터 구조----배열

高洛峰
高洛峰원래의
2016-10-13 14:34:011100검색

1.1 Javascript의 배열 정의

배열의 표준 정의: 저장된 요소의 선형 모음입니다. 인덱스는 일반적으로 숫자이며 계산에 사용됩니다. 요소 사이의 저장 위치입니다.
단, JavaScript에서 배열은 특별한 개체입니다. 오프셋을 나타내는 데 사용되는 인덱스는 개체의 속성이며 인덱스는 정수일 수 있습니다. 그러나 JavaScript 개체의 속성 이름은 문자열이어야 하므로 이러한 숫자 인덱스는 내부적으로 문자열 유형으로 변환됩니다.

2.2 배열 사용

2.2.1 배열 생성

var nums = [1,2,3,4] || 이 방법이 더 효율적입니다

var nums = new Array(1,2,3,4);

2.2.2 배열 읽기 및 쓰기

대입문에서 [] 연산자를 사용하여 데이터를 할당합니다. 다음 루프와 같은 배열은 1에서 100까지의 숫자를 배열에 할당합니다.

var nums = [];for (var i =0; i<100;i++){
    nums[i] = i+1;}

[ ] 연산자를 사용하여 배열의 요소를 읽을 수도 있습니다.

var nums = [1,2,3,4];
var sum = nums[0]+nums[1]+nums[2]+nums[3];
console.log(sum)

2.2.3 문자열에서 배열 생성

var sentence = "the quick brown fox jumped over the lazy dog"; 
var  words = sentence.split(" ");
for (var  i=0; i<words.length;i++){
    console.log("word " + i + ":" +words[i]);
}

위 프로그램에서 Splite() 메소드를 호출하고 단어 사이의 공백 구분 기호를 통해 문장을 부분으로 나누고 각 부분을 요소로 처리합니다. 새로 생성된 배열에 저장됩니다.

2.2.4 배열 무결성에 대한 작업

1. 하나의 배열을 다른 배열에 할당

var nums = [];
for (var i = 0; i<10;i++){
    nums[i] = i+1;
}
var samenums = nums;

그러나 위의 할당 작업은 할당된 추가에만 해당됩니다. 배열에 대한 새로운 참조. 원래 참조를 통해 배열의 값이 수정되면 다른 참조도 변경됩니다.

var nums = [];
for (var i = 0; i<10;i++){
    nums[i] = i+1;
}
var samenums = nums;
nums[0] = 400;
console.log(samenums[0]);  //显示400

이 동작은 얕은 복사본이며 새 배열은 여전히 ​​원래 배열을 가리킵니다.
더 나은 해결책은 원본 배열의 각 요소를 새 배열에 복사하는 전체 복사(deep copy)입니다.

//写个深复制函数function copy(arr1,arr2){
    for (var i = 0;i<arr1.length;i++){
        arr2[i] = arr1[i];
    }}var nums = [];for (var i = 0; i<10;i++){
    nums[i] = i+1;}var samenums = [];copy(nums,samenums);nums[0] = 400;console.log(samenums[0]);   //显示1

2.3 접근 함수

2.3.1 요소 찾기 =====indexOf()

는 전달된 매개변수가 대상 배열에 있는지 찾는 데 사용됩니다. 존재하다. 대상 배열에 이 매개변수가 포함되어 있으면 배열에 있는 요소의 인덱스가 반환되고, 그렇지 않으면 -1이 반환됩니다.

2.3.2 배열의 문자열 표현 ===== Join() 및 toString()

두 메서드 모두 배열의 모든 요소를 ​​포함하는 문자열을 쉼표로 구분하여 반환합니다.

2.3.3 기존 배열에서 새 배열 만들기 =====concat() 및 splice()

concat() 메서드는 여러 배열을 병합하여 새 배열을 만들 수 있습니다.
splice() 메서드는 배열의 하위 집합을 가로채서 새 배열을 만듭니다. 이 방법의 첫 번째 매개변수는 차단 시작 인덱스이고, 두 번째 매개변수는 차단 길이입니다.

var itDiv = ["Mike","Clayton","Terrill","Raymond","Cynthia","Danny","Jennifer"]; 
var dmpDept = itDiv.splice(3,3);  // Raymond,Cynthia,Danny print(cisDept);
var cisDept = itDiv; 
console.log(dmpDept);// Mike,Clayton,Terrill,Jennifer

2.4 변수 함수

2.4.1 배열에 요소를 추가======push() 및 unshift()

push() 메소드는 배열의 끝에 요소가 추가됩니다.
unshift() 메서드는 배열의 시작 부분에 요소를 추가할 수 있습니다.

var nums = [2,3,4,5]; console.log(nums); // 2,3,4,5 var newnum = 1;
 nums.unshift(newnum); 
 console.log(nums); // 1,2,3,4,5 
 nums = [3,4,5];
  nums.unshift(newnum,1,2); 
  console.log(nums); // 1,2,3,4,5

2.4.2 배열에서 요소 삭제 pop() 및 Shift()

pop() 메서드는 배열 끝의 요소를 삭제할 수 있습니다.

var nums = [1,2,3,4,5,9]; 
nums.pop(); 
console.log(nums); // 1,2,3,4,5

shift() 메서드는 배열의 첫 번째 요소를 삭제할 수 있습니다.

var nums = [9,1,2,3,4,5];
 nums.shift(); 
 console.log(nums); // 1,2,3,4,5

pop() 和 shift() 方法都将删掉的元素作为方法的 返回值返回,因此可以使用一个变量来保存删除的元素:

var nums = [6,1,2,3,4,5]; 
var first = nums.shift(); // first gets the value 9 
nums.push(first);
 console.log(nums); // 1,2,3,4,5,6

2.4.3 从数组中间位置添加和删除元素=====splice()

用splice()方法为数组添加元素,需提供如下参数:

起始索引(就是希望开始添加元素的地方)

需要删除的元素个数(添加元素时该参数设为0)

想要添加进数组的元素
such as:

var nums=[1,2,3,7,8,9];
var newElements = [4,5,6];
nums.splice(3,0,newElements);
console.log(nums);   //1,2,3,4,5,6,7,8,9

下面是用splice()删除数组元素的例子:

var nums = [1,2,3,100,200,4,5];
nums.splice(3,2);
console.log(nums);   //1,2,3,4,5

2.4.4 为数组排序

1.reverse() ====> 将数组中元素的顺序进行翻转

2.sort() ======>对字符型的元素按字典顺序进行排序

对于数字类型的元素,如果要用sort()排序,可以在调用方法时传入一个大小比较函数,排序时,sort()方法会根据该函数比较数组中两个元素的大小,来决定整个数组的顺序。

function compare(num1,num2){
return num1-num2;
}
var nums = [3,4,1,80,27];
nums.sort(compare);

sort()使用了compare()函数对数组按照数字大小进行排序,而不是按照字典顺序。

2.5 迭代器方法

2.5.1 不生成新数组的迭代器方法

1.forEach()

接受一个函数作为参数,并对数组中的每个元素使用该函数。

    function square(num){
      console.log(num,num*num);
    }
    var nums = [1,2,3,4,5,6];
    nums.forEach(square);

2.every()

接受一个返回值为布尔型的函数,对数组中的每个元素使用该函数。如果对于所有的元素,该函数都返回true,则该方法返回true。

function isEven(num){
    return num%2 == 0;
}
var nums = [2,4,6,8];
var even = nums.every(isEven);
if(even){
    console.log("all numbers are even");
}else{
    console.log("not all numbers are even");
}

可以改改数组里的元素试试。

3.some()

some() 方法也接受一个返回值为布尔类型的函数,只要有一个元素使得该函数返回 true, 该方法就返回 true.

function isEven(num) {   
     return num % 2 == 0;
      } 
 var nums = [1,2,3,4,5,6,7,8,9,10]; 
 var someEven = nums.some(isEven); 
 if (someEven) {    
        console.log("some numbers are even"); 
 } else {   
        console.log("no numbers are even");
   }
    nums = [1,3,5,7,9]; 
    someEven = nums.some(isEven); 
    if (someEven) {    
            console.log("some numbers are even");
     } else {    
          console.log("no numbers are even");}

4.reduce()

接受一个函数,返回一个值。该方法会从一个累加值开始,不断对累加值和 数组中的后续元素调用该函数,直到数组中的最后一个元素,最后返回得到的累加值。
下 面这个例子展示了如何使用 reduce() 方法为数组中的元素求和:

function add(runningTotal,currentValue){
    return runningTotal + currentValue;
}
var nums = [1,2,3,4,5,6];
var sum = nums.reduce(add);
console.log(sum);

reduce() 方法和 add() 函数一起,从左到右,依次对数组中的元素求和。
reduce() 方法也可以用来将数组中的元素连接成一个长的字符串:

function concat(accumulatedString,tiem){
    return accumulatedString + item;
}
var words = ["the ", "quick ","brown ", "fox "]; 
var sentence = words.reduce(concat);
console.log(sentence);

2.5.2 生成新数组的迭代器方法

1. map()

map() 和 forEach() 有点儿像,对 数组中的每个元素使用某个函数。两者的区别是 map() 返回一个新的数组,该数组的元素 是对原有元素应用某个函数得到的结果。

function curve(grade){
    return grade += 5;
}
var grades = [78,89,92,74];
var newgrades = grades.map(curve);
console.log(newgrades);  // 83,94,97,79

2. filter()

filter() 和 every() 类似,传入一个返回值为布尔类型的函数。和 every() 方法不同的是, 当对数组中的所有元素应用该函数,结果均为 true 时,该方法并不返回 true,而是返回 一个新数组,该数组包含应用该函数后结果为 true 的元素。

function passing(num) {    
        return num >= 60;
 } 
 var grades = []; 
 for (var i = 0; i < 20; ++i) {    
        grades[i] = Math.floor(Math.random() * 101); 
    }
 var passGrades = grades.filter(passing);
console.log("All grades: "); 
console.log(grades);
console.log("Passing grades: "); 
console.log(passGrades);


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