操作数组的方法

最新推荐文章于 2024-06-03 16:35:49 发布

小阳生煎

最新推荐文章于 2024-06-03 16:35:49 发布

阅读量381

点赞数

分类专栏： # JS

本文链接：https://blog.csdn.net/m0_53912016/article/details/117163389

版权

JS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

数组方法集合

push 数组的末尾添加元素
unshift 数组的前面添加元素
pop 删除数组中最后一个元素
shift 删除数组中第一个元素
concat/扩展运算符(…) 合并数组

push 数组的末尾添加元素

 var arr=[1,2]
  arr.push(2)
  console.log(arr)

在这里插入图片描述

unshift 数组的前面添加元素

 var arr=[1,2]
  arr.unshift(2)
  console.log(arr)

在这里插入图片描述

pop 删除数组中最后一个元素

  var arr=[1,2]
  arr.pop()
  console.log(arr) //1

shift 删除数组中第一个元素

  var arr=[1,2]
  arr.shift();
  console.log(arr)//2

concat/扩展运算符(…) 合并数组

 var arr=[1,2]
    var arr1=[3,4]
    // var arr3=arr.concat(arr1)//es5方法
    var arr3=[...arr,...arr1]//es6方法
    console.log(arr3)//1234

slice 提取字符串的片断

提取所有字符串

var str="Hello world!";
var n=str.slice(0);

return为 Hello world!

从字符串的第3个位置提取字符串片段

var str="Hello world!";
var n=str.slice(3);

return为 lo world!

从字符串的第3个位置到第8个位置直接的字符串片段

这里面指的是从索引值为3的开始，然后在索引值第8位截止

var str="Hello world!";
var n=str.slice(3,8);

return为 lo wo

只提取第1个字符

var str="Hello world!";
var n=str.slice(0,1);

return为 H

join() 方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的

 var arr=[1,2,30]
 console.log(arr.join())// 1,2,30

splice() 该方法向或者从数组中添加或者删除项目，返回被删除的项目,同时也会改变原数组。

会改变原数组会改变原数组会改变原数组
splice（index,howmany,item1,…itemX）
index参数：必须，整数，规定添加或者删除的位置，使用负数，从数组尾部规定位置。
howmany参数：必须，要删除的数量，如果为0，则不删除项目。
tem1,…itemX参数：可选，向数组添加的新项目。

splice(3)

var array = [1,2,3,4,5];
var array2 = array.splice(3);
// 从下标3的位置开始删除
// array [1,2,3]  会改变原数组
// array2  [4,5]

 var a=[6,5,4,3,0]
 var a1=a.splice(3)//这个是显示从下标3的位置开始删除的值
 console.log(a)//split可以改变原数组 所以这里显示的是删除后的值 
 console.log(a1)

在这里插入图片描述

指定位置增加项

var array = [1,2,3,4,5];
var array2 = array.splice(1,0,["新增","xinzeng"]);
// 下标1的位置，增加添加的项 
// array [1,["新增","xinzeng"],2,3,4,5]  
// array2 []

删除指定位置，并新增项

var array = [1,2,3,4,5];
var array2 = array.splice(1,1,["新增","xinzeng"]);
// 下标1的位置，删除1项，并新增1项
// array [1,["新增","xinzeng"],3,4,5]  
// array2 [2]

sort 排序

// 按照abc的顺序排列
var fruit=['a','d','c','v'].sort()
console.log(fruit)

在这里插入图片描述
// -------------------------------

// 按照abc的顺序排列
var fruit=[1,3,5,6,0,2].sort()
console.log(fruit)

在这里插入图片描述

reverse() 倒序

var fruit=['a','d','c','v'].reverse()
console.log(fruit)

在这里插入图片描述

substring() 和 substr() 截取字符串

相同点

如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。
substr(startIndex);
substring(startIndex);

var str='1,2,3,4,5,6,7,8'
console.log(str.substr(2))
console.log(str.substring(2))

在这里插入图片描述

不相同点

第二个参数
substr（startIndex,lenth）：第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；
substring（startIndex, endIndex）：第二个参数是截取字符串最终的下标（截取2个位置之间的字符串,‘含头不含尾’）。

var str='1,2,3,4,5,6,7,8'
console.log(str.substr(2,5))
console.log(str.substring(2,5))

在这里插入图片描述

☆ indexOf 和 lastIndexOf

indexof 常用语过滤筛选的条件判断

都接受两个参数：查找的值、查找起始位置
不存在，返回 -1 ；存在，返回位置。indexOf 是从前往后查找， lastIndexOf 是从后往前查找。
indexOf
indexOf
lastIndexOf
在这里插入图片描述

搜索过滤的案例 indexOf

案例
就是过滤筛选操作
在这里插入图片描述

代码

<!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>
    <div id="app">
        <div class="main">
                   <div class="bar">
                           <input type="text" v-model="searchStr" palceholder="搜索"/>
                       </div>
                   <ul>
                            <li v-for="a in searchFor(articles,searchStr)"> 
                                   <a :href="a.url"><img :src="a.image" /></a>
                                   <p>{{a.title}}</p>
                               </li>
                       </ul>
               </div>  
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [],
                searchStr: "",
                articles: [

                    {
                        "title": "What You Need To Know About CSS Variables",
                        "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables-100x100.jpg"
                    },
                    {
                        "title": "Freebie: 4 Great Looking Pricing Tables",
                        "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables-100x100.jpg"
                    }
                ]
            },
            methods: {
                searchFor(value, searchStr) {
                    var result = []; //用result来存放查到的结果
                    if (!searchStr) {
                        return value;
                    }
                    searchStr = searchStr.trim().toLowerCase(); //把查询的内容转为小写的
                    result = value.filter(function (item) { //这里value是个数组,他也有filter方法的.item是value里面的。
                        if (item.title.toLowerCase().indexOf(searchStr) != -1) {
                            return item;
                        }
                    });
                    return result;
                }
            }
        });
    </script>
</body>
</html>

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。

如果一个不对全部都不对一个检查不到剩下的全部都不检查了
用法如下所示

 var arr=[1,2,3,40]
     var b=arr.every(item=>item>0)
     console.log(b)

在这里插入图片描述
这边是true与false

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

const arr= [4, 9, 16, 25];
const b = arr.some(item => item>10)
const c = arr.some(item => item<1)
console.log(arr)   // [4, 9, 16, 25]
console.log(b)  // true
console.log(c)  // false

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

是否改变原数组：否
是否对空数组进行检测：否

var arr=[12,12,43,43,54,76]
     const arr1=arr.filter(item=>item>=18)
     console.log(arr1)

在这里插入图片描述

indexof 与flite的用法

常见用于关键字过滤搜索
代写-----------------------------------------------------------------------------------------

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。
是否改变原数组：否
是否对空数组进行检测：否

const arr= [4, 9, 16, 25];
const arr1 = arr.map(item => item+2)
console.log(arr)   // [4, 9, 16, 25]
console.log(arr1)  // [6, 11, 18, 27]

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。
tips: forEach()中不支持使用break(报错)和return(不能结束循环)，有需要时可使用常规的for循环。

const arr= [4, 9, 16, 25];
const arr1 = [];
arr.forEach(item => arr1.push(item))
console.log(arr)   // [4, 9, 16, 25]
console.log(arr1)  // [4, 9, 16, 25]

ES6新增新操作数组的方法

find（）

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。

const arr= [4, 9, 16, 25];
const b = arr.find(item => item>10)
const c = arr.find(item => item<1)
console.log(arr)   // [4, 9, 16, 25]
console.log(b)  // 16
console.log(c)  // undefined

findIndex()

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

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

const arr = [4, 9, 16, 25];
        const b = arr.findIndex(item => item > 10)
        const c = arr.findIndex(item => item < 1)
        console.log(arr) // [4, 9, 16, 25]
        console.log(b) // 2
        console.log(c) // -1

fill()用新元素替换掉数组内的元素，可以指定替换下标范围。

在这里插入图片描述

from 将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组

在这里插入图片描述

of 用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数 Array() 的不足。因为参数个数的不同，会导致 Array() 的行为有差异。

在这里插入图片描述

includes

判断数组中是否存在该元素，参数：查找的值、起始位置，可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN，会判断错误。
在这里插入图片描述

小阳生煎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
操作数组的方法

数组方法集合push 数组的末尾添加元素unshift 数组的前面添加元素pop 删除数组中最后一个元素shift 删除数组中第一个元素concat/扩展运算符(…) 合并数组push 数组的末尾添加元素 var arr=[1,2] arr.push(2) console.log(arr)unshift 数组的前面添加元素 var arr=[1,2] arr.unshift(2) console.log(arr) pop 删除数组中最后一个元
复制链接

扫一扫