分享JavaScript練習的實例教程

歡迎和大家一起討論~

 

#基礎練習（1）：

 

#我的答案是：

function array_diff(a, b) {  if (b == "") return a;  return a.filter(function(item,index,array) {var flag = false;for(var i=0;i<b.length;i++) {      if(item !== b[i]) flag = true;
    }return flag;
  });
}

較優解為：

#

function array_diff(a, b) {  return a.filter(function(x) { return b.indexOf(x) == -1; });
}

 

分析：

對陣列a使用filter（）方法，迭代判斷陣列a中的值是否存在於陣列b中。當x的值，即數組a的值無法在數組b中找到時，b.indexOf（）方法將傳回-1。數組的filter（）方法是指對數組中的每一項運行給定函數，傳回該函數會傳回true的項組成的的數組。

我的思路就稍微想得複雜了，對數組進行迭代的方法filter（）是想到了，卻沒有好好地利用起來，函數內的判斷方法不夠簡潔，也沒有想到可以使用indexOf（）方法來判斷。

 

筆記：

filter（）方法，是指對數組中的每一項運行給定函數，傳回該函數會傳回true的項所組成的的陣列。利用指定的函數決定是否在傳回的陣列中包含某一項。

 

使用範例：

#var numbers = [1,2,3,4,5,4,3 ,2,1];

var filterResult = numbers.filter（function（item，index，array） {

     return （item> 2）;

}）;

#alter（filterResult）； //[3,4,5,4,3]

 

陣列的迭代方法真的很常用的，用來對某個陣列循環某一運算。這些迭代方法要比for迴圈語句簡單很多，要記住！

共有五個迭代方法：every（）、filter（）、forEach（）、map（）、some（）。

 

---

#基礎練習（2）：

# 

#我的答案是：

##

var gimme = function (inputArray) {  var newArray = [];  for(var i=0;i<inputArray.length;i++) {
    newArray[i] = inputArray[i];
  }
  newArray.sort(function(a,b) {if(a < b) {      return -1;
    } else if (a> b) {return 1;
    } else {return 0;
    }
  });  return inputArray.indexOf(newArray[1]);
};

較優解為：

function gimme(a) {  return a.indexOf(a.concat().sort(function(a, b) { return a - b })[1])
}

# 

分析：

### #####在較優解答中，對原數組使用了concat（）方法，該方法可以將原始數組複製並建立新數組。接著對新數組進行排序，並對於中間值求索引值。 ############我的想法和最優解是一樣的，而實作方法還是稚嫩了一些。對於建立新陣列不知道可以使用concat（）方法進行快速複製，也表示對基礎知識的熟悉程度不夠了。另外排序方法中，原來可以直接使用“return a-b”，我的方法就顯得很累贅了。 ############ ######

笔记：

concat（）方法可基于当前数组中的所有项创建一个新数组。该方法会先创建当前数组的一个副本，将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给concat（）方法传递参数的情况下，它只是复制。若传递给concat（）方法的是一个或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。若传递值不是数组，则添加到结果数组的末尾。

 

使用例子：

var colors = ["red","green","blue"];

var colors = colors.concat("yellow",["black","brown"]);

alert(colors); // red,green,blue

alert(colors); // red,green,blue,yellow,black,brown

 

重排序方法：使用sort（）方法可以进行排序，但仍可能会出现一些问题，因此使用比较函数，可以避免这个问题。

对于大多数数据类型可使用，只需要将其作为参数传递给sort（）方法即可：

function compare(value1,value2) {

     if(value1 < value2) {

return -1;

} else if (value1> value2) {

          return 1;

     } else {

          returm 0;

     }

}

对于数值型或其他valueOf（）方法会返回数值类型的对象类型，可以使用更简单的比较函数：

function compare(value1,value2) {

     return value2 - value1;

}

 

---

基础练习（3）：

 

我的解答为：

function minMax(arr){  var newarr = [];
  newarr.push(Math.min.apply(Math,arr));
  newarr.push(Math.max.apply(Math,arr));  return newarr;
}

较优解答为：

function minMax(arr){  return [Math.min(...arr), Math.max(...arr)];
}

分析：

这道题目就很简单了，较优解答中的扩展语法（ spread syntax）也在练习一中提及了。我的写法还是太谨慎了，是不是应该大胆一些呢？

 

---

基础练习（4）：

 

我的解答为：

function XO(str) {   var str = str.toLowerCase();   var countx = 0;   var counto = 0;   for(var i=0;i<str.length;i++) {     if(str[i] === "x") {
       countx++;
     }     if(str[i] === "o") {
       counto++;
     }
    }if(counto == countx) {      return true;
    } else {      return false;
    }
}

较优解答为：

function XO(str) {var a = str.replace(/x/gi, ''),
          b = str.replace(/o/gi, '');return a.length === b.length;
}

分析：

较优解使用的是replace（）方法，结合正则表达式的使用，对原字符串str分别将x和o用空字符串替换得到a和b字符串，比较a和b字符串的长度，从而得到结果。我的解答方法呢，因为实在想不到可以使用什么方法，所以用的最原始的方法，仿佛自己在做C语言的题目。

 

笔记：

replace（）方法，该方法接受两个参数，一个参数可以是一个RegExp对象或者一个字符串，第二个参数可以是一个字符串或者是一个函数。若第一个参数是字符串，指挥替换第一个子字符串。要想替换所有子字符串，是提供一个正则表达式，并且指定全局标志。

 

使用例子：

var text = "cat,bat,sat,fat";

var result = text.replace("at","ond");

alert(result); //"cond,bat,sat,fat"

 

result = text.replace(/at/g,"ond");

alert(result); //"cond,bond,song,fond"

 

---

 总结：

今天的知识点主要是数组的迭代方法中的一种filter（）方法、数组操作方法中的concat（）方法以及字符串的replace（）方法。filter（）方法可用于使用函数判断数组中各项的值中返回true值的结果所组成的数组。concat（）可以复制和创建新数组。而replace（）方法可以替换字符串中的一个或多个值。

从这三天的练习来看，对于数组的各种方法也逐渐使用得熟练起来了。但是其他类型的各种方法还是一种挑战。而我的解答也要从比较冗余的语句，写出更为简洁而有效的语句了。继续加油吧！