浅谈js以及数组最全的内置方法(很细节哦)

简介: 浅谈js以及数组最全的内置方法(很细节哦)

浅谈js


我们通过学习js,会发现js就是基于对象去操作的,我们经常使用的数组也是对象,即万物皆对象,学好js说白了就是对对象的熟悉操作,js的存在就是实现业务逻辑,js必须通过多练,多写项目逻辑能力才能提高,现在正处于js回炉重造期间,对js的基础必须要打牢固,下方是我总结的js数组非常实用的方法。


数组多种方法


concat()

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。




let arr = [1,2,3]
        let arr2 = [4,5,6]
        let newArr = arr.concat(arr2)
        console.log(newArr); //[1, 2, 3, 4, 5, 6]


entries()


entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。

迭代对象中数组的索引值作为 key, 数组元素作为 value。




<p class="demo1"></p>
    <p class="demo2"></p>
    <p class="demo3"></p>
    <p class="demo4"></p>
    <script>
        let arr = [3,4,5,6]
        let newArr = arr.entries()
        document.querySelector('.demo1').innerHTML = newArr.next().value
        document.querySelector('.demo2').innerHTML = newArr.next().value
        document.querySelector('.demo3').innerHTML = newArr.next().value
        document.querySelector('.demo4').innerHTML = newArr.next().value
    </script>


every()


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

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


如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。

如果所有元素都满足条件,则返回 true。

注意: every() 不会对空数组进行检测。

注意: every() 不会改变原始数组。




let arr = [33,15,22,17]
        let a = (age) => {
            return age >= 17
        }
        console.log(arr.every(a)); //false


fill()


fill() 方法用于将一个固定值替换数组的元素。




let arr = [1,2,3]
        let news = arr.fill(3)
        console.log(news); //[3, 3, 3]


filter()


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


注意: filter() 不会对空数组进行检测。

注意: filter() 不会改变原始数组。


let arr = [1,2,3]
        let news = arr.filter(item => item>1)
        console.log(news);  //[2, 3]


这里使用了es6的写法,更加方便快捷

同时,要搞懂filter的原理是什么,要去思考自己能不能手写一个filter函数:




let arr = [1,2,3]
        Array.prototype.myArray = function (arrays){
            if(typeof arrays !== 'function') {
                return 
            }
            let filterArr = []
            for(let i =0;i<this.length;i++) {
                if(arrays(this[i])) {
                    filterArr.push(this[i])
                }
            }
            return filterArr
        }
        let news = arr.myArray(item => item>1)
        console.log(news);  //[2,3]


注意:自己写原生过滤函数时候千万不要使用箭头函数,否则不会出效果


find()


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


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


当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。

如果没有符合条件的元素返回 undefined

注意: find() 对于空数组,函数是不会执行的。




let arr = [1,2,3,4,5]
        let a = (num) => {
            return num>=4
        }
        let news = arr.find(a)
        console.log(news);  //4


注意: find() 并没有改变数组的原始值。


findIndex()


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


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


当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。

如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组,函数是不会执行的。




let arr = [1,2,3,4,5]
        let news = arr.findIndex(item => item>=3)
        console.log(news);  //2


注意: findIndex() 并没有改变数组的原始值。


forEach()


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


注意: forEach() 对于空数组是不会执行回调函数的。

let arr = [1,2,3,4,5]
        arr.forEach((item,index)=>{
            console.log('item:'+item,'index:'+index);
        })


isArray()


isArray() 方法用于判断一个对象是否为数组。


如果对象是数组返回 true,否则返回 false。


join()


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


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




let arr = ['ccc','ooo','ddd']
        let news = arr.join('')
        console.log(news);  //cccoooddd


map()


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


map() 方法按照原始数组元素顺序依次处理元素。


注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。


let arr = [1,2,3,4,5]
        console.log(arr.map(item => item**2));  //[1, 4, 9, 16, 25]


slice()


slice() 方法可从已有的数组中返回选定的元素。


slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。


注意: slice() 方法不会改变原始数组。

let arr = [1,2,3,4,5]
        let news = arr.slice(1,3)
        console.log(news); //[2,3]  第二个参数是不包含的


some()


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


some() 方法会依次执行数组的每个元素:


如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。

如果没有满足条件的元素,则返回false。

注意: some() 不会对空数组进行检测。


注意: some() 不会改变原始数组。




let arr = [1,2,3,4,5]
        let news = arr.some(item => item>3)
        console.log(news);  // true


splice()


splice() 方法用于添加或删除数组中的元素。

注意:这种方法会改变原始数组。




let arr =  [1,2,3,4,5]
        let news = arr.splice(1,3)  
        console.log(news); //[2,3,4]  第二个参数是包含的(注意与slice的区别)


相关文章
|
17天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
29天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
2天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
|
16天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
16天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
5天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
|
16天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
34 7
|
17天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
22天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
1月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。