JavaScript一些常用方法一

整理以前的笔记，在学习JavaScript时候,经常会用到一些方法，但是有时忘掉了具体用法，因此记下。方便以后查阅。

这篇博文先说明这些方法的用途：

splice()、push()、pop() 、shift()、unshift()、hasOwnProperty() 、match() 、map() 、reduce()、filter()。

一、 .splice()

通过删除现有元素和/或添加新元素来更改数组的内容

例如:

var myFish = ["angel", "clown", "mandarin", "surgeon"];
//从第 2 位开始删除 0 个元素，插入 "drum"
var removed = myFish.splice(2, 0, "drum");
//运算后的 myFish:["angel", "clown", "drum", "mandarin", "surgeon"]
//被删除元素数组：[]，没有元素被删除
console.log("1:"+removed+"---"+myFish); //1:---angel,clown,drum,mandarin,surgeon
//从第 3 位开始删除 1 个元素
removed = myFish.splice(3, 1);
//运算后的myFish：["angel", "clown", "drum", "surgeon"]
//被删除元素数组：["mandarin"]
console.log("2:"+removed+"---"+myFish); //2:mandarin---angel,clown,drum,surgeon
//从第 2 位开始删除 1 个元素，然后插入 "trumpet"
removed = myFish.splice(2, 1, "trumpet");
//运算后的myFish: ["angel", "clown", "trumpet", "surgeon"]
//被删除元素数组：["drum"]
console.log("3:"+removed+"---"+myFish);//3:drum---angel,clown,trumpet,surgeon
//从第 0 位开始删除 2 个元素，然后插入 "parrot", "anemone" 和 "blue"
removed = myFish.splice(0, 2, "parrot", "anemone", "blue");
//运算后的myFish：["parrot", "anemone", "blue", "trumpet", "surgeon"]
//被删除元素的数组：["angel", "clown"]
console.log("4:"+removed+"---"+myFish);//4:angel,clown---parrot,anemone,blue,trumpet,surgeon
//从第 3 位开始删除 2 个元素
removed = myFish.splice(3, Number.MAX_VALUE);
//运算后的myFish: ["parrot", "anemone", "blue"]
//被删除元素的数组：["trumpet", "surgeon"]
console.log("5:"+removed+"---"+myFish);//5:trumpet,surgeon---parrot,anemone,blue

二、.push()

一个或多个参数添加到数组末尾

例如：

var arr = [1,2,3];
arr.push(4); // 现在arr的值为 [1,2,3,4]

三、.pop()

“抛出”一个数组末尾的值

例如:

var arr=[1, 4, 6]
var oneDown = arr.pop();//现在 oneDown 的值为 6 ，arr变成了 [1, 4]

四、.shift()

“移出”一个数组的第一个并赋值

例如:

var arr=[1, 4, 6]
var oneDown = arr.shift();//现在 oneDown 的值为 1 ，arr变成了 [4, 6]

五、.unshift()

头部添加元素

例如：

var arr = [1,2,3];
arr.unshift(4); // 现在arr的值为 [4,1,2,3]

六、.hasOwnProperty()

检查对象是否有该属性

例如:

var myObj = {
      top: "hat",
      bottom: "pants"
    };
myObj.hasOwnProperty("top");    // true
myObj.hasOwnProperty("middle"); // false

七、 .match()

匹配字符使用

例如:

   var testString = "Hello World! How are you！Haha";  //定义一个字符串

//设置要查找的格式
/*   / 是这个正则表达式的头部
 h 是我们想要匹配的模式
 / 是这个正则表达式的尾部
g 代表着 global(全局)，意味着返回所有的匹配而不仅仅是第一个。
i 代表着忽略大小写，意思是当我们寻找匹配的字符串的时候忽略掉字母的大小写。
*/
var expressionToGetSoftware = /h/gi;
var softwareCount = testString.match(expressionToGetSoftware).length;//softwareCount为4

八、 .map()

迭代数组

例如:

var oldArray = [1,2,3,4,5];
var newArray = oldArray.map(function(val){
  return val+3;
});
 console.log(newArray);  //[4, 5, 6, 7, 8]

九、 .reduce()

迭代一个数组，并且把它累积到一个值中

例如:

var array = [4,5,6,7,8];
var singleVal = 0;
// 累加器 和当前值
singleVal = array.reduce(function(qq,ww){
    console.log("qq:"+qq+",ww:"+ww); //qq:4,ww:5  qq:9,ww:6 qq:15,ww:7 qq:22,ww:8
  return qq+ww;
});
console.log(singleVal); //30

十、 .filter()

迭代一个数组，并且按给出的条件过滤出符合的元素

例如:

var oldArray = [1,2,3,4,5,6,7,8,9,10];
var newArray = oldArray.filter (function(val){
  return val<6;            //保留小于6的数据
});
console.log(newArray);  //[1, 2, 3, 4, 5]

//删除数组中的所有假值。在JavaScript中，假值有false、null、0、""、undefined 和 NaN。
//通过filter方法来过滤掉假值
function bouncer(arr) {
   var newarr=arr.filter(function(val){
    return !!val;
   });
  return newarr;
}
//判断是否是真值,如果不是就过滤掉
function bouncer(arr) {
  return arr.filter(Boolean);
}

console.log(bouncer([7, "ate", "", false, 9])); //[7, "ate", 9]
console.log(bouncer([false, null, 0, NaN, undefined, ""])); //[]
console.log(bouncer([1, null, NaN, 2, undefined]));  // [1, 2]