JavaScript一些常用方法一

你的名字 2022-06-16 10:28 188阅读 0赞

整理以前的笔记，在学习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() ##

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