js，jQuery，vue函数练习

最新推荐文章于 2021-12-16 17:19:57 发布

Andrelia20171760

最新推荐文章于 2021-12-16 17:19:57 发布

阅读量316

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # JavaScript

本文链接：https://blog.youkuaiyun.com/Andrelia20171760/article/details/97836233

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文深入解析JavaScript数组方法，包括filter、unshift、splice、some、forEach、findIndex等，详解其语法、特点及应用场景，助您提升编程技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面的话

好记性不如烂笔头，此博客用来写js,jquery,vue函数,孰能生巧，写到不再查文档为止，将大部分函数都练熟。

一、 javascript

Array filter() 方法
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

语法

array.filter(function(currentValue,index,arr), thisValue)

在这里插入图片描述

实例

 <p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>

<p>所有大于指定数组的元素有？ <span id="demo"></span></p>
  <script>
   var ages=[32,33,12,40];
   function checkAdult(age){
      return age>=document.getElementById("ageToCheck").value;
      }
   function myFunction(){
         document.getElementById("demo")/innerHTML=ages.filter(checkAdult);
     }
     </script>

2.unshift() 方法
将新项添加到数组起始位置

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.unshift("Lemon","Pineapple");
//fruits 将输出：
Lemon,Pineapple,Banana,Orange,Apple,Mango

3.splice() 方法
splice() 方法用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2,0,"Lemon","Kiwi");
//fruits 输出结果：
Banana,Orange,Lemon,Kiwi,Apple,Mango

语法

array.splice(index,howmany,item1,.....,itemX)

在这里插入图片描述

4.some() 方法
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

语法

array.some(function(currentValue,index,arr),thisValue)

在这里插入图片描述

实例

<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>

  <button onclick="myFunction()">点我</button>

<p>判断结果: 
  <span id="demo"></span></p>

<script>
var ages = [4, 12, 16, 20];

  
function checkAdult(age) {
    return age >= 
  document.getElementById("ageToCheck").value;
}

function 
  myFunction() {
    
  document.getElementById("demo").innerHTML = ages.some(checkAdult);
}

  </script>

5.forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。

语法

array.forEach(function(currentValue, index, arr), thisValue)

在这里插入图片描述

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>点击按钮将数组中的所有值乘以特定数字。</p>
<p>乘以: <input type="number" id="multiplyWith"></p>
<button onclick="numbers.forEach(myFunction)">点我</button>

<p>计算后的值: <span id="demo"></span></p>
<script>
  var numbers=[1,2,3,4,5];
  var jieGuo=0;
  function myFunction(item,index,arr){
      var a=document.getElementById("multiplyWith").value;
      arr[index]=item*a;
      demo.innerHTML=numbers;
  }
</script>
</body>
</html>

运行结果

在这里插入图片描述

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。

语法

array.findIndex(function(currentValue, index, arr), thisValue)

在这里插入图片描述

del(id) {
                    //根据id删除

                    // this.list.some((item,i)=>{
                    //     if(item.id==id){
                           /*  根据id找到要删除的那一项的索引，所以用some函数，
                            对数组的每一项执行匿名函数
                            如果满足条件，那么删除*/
                    //         this.list.splice(i,1)
                    //         return true;
                    //     }
                    // })
                    //还有一种写法是
                    var index = this.list.findIndex(item => {
                        if (item.id == id) {
                            return true;
                        }
                    })

                    this.list.splice(index, 1);
                }
            }

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

语法

array.filter(function(currentValue,index,arr), thisValue)

在这里插入图片描述
注意:这里返回的是数组

实例

search(keywords){
                    return this.list.filter(item => {
                        if(item.name.includes(keywords)){
                            return item;
                        }
                    });
                }