JS es6新增方法

最新推荐文章于 2022-10-22 22:01:18 发布

唯一3

最新推荐文章于 2022-10-22 22:01:18 发布

阅读量143

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/wwy6191/article/details/120827883

版权

本文详细讲解了JavaScript中foreach、filter和some这三个数组方法的使用，包括遍历数组、筛选元素和查找满足条件的元素。通过实例演示了如何利用return控制流程，并介绍了字符串trim功能及其应用。

摘要由CSDN通过智能技术生成

一、数组

1.foreach

作用：遍历数组

foreach里面迭代，直接return不会中止迭代而是只会跳出本次。

        var arr = [1, 2, 3],sum=0;
        arr.forEach(function(value, index, array) {
            console.log('每个数组元素' + value); // 1,2,3
            console.log('每个数组元素的索引号' + index); // 0,1,2
            console.log('数组本身' + array); // 1,2,3   1,2,3   1,2,3
            sum+=value; // 结果：6
        })

2.filter

作用：筛选数组并把所有满足条件的元素放到一个数组里并且返回

看到return也不会提前中止

        var arr = [22, 3, 56, 88, 55];
        var newArr = arr.filter(function(value, index,array) {
            return value >= 20; // 返回大于等于20的数并添加到新数组newArr当中
        })
        console.log(newArr);

3.some

作用：查找数组中是否有满足条件的数

        var arr = [10, 30, 4, 6];
        var flag = arr.some(function(value) {
            return value >= 20; // 查找数组中是否有大于等于20的数字 有返回true 没有返回false
        });
        console.log(flag);

找到第一个满足条件的元素直接跳出循环，不再查找。

如果想提前中止，可以return true

            data.some(function(value) {
                if (chaxunneirong.value === value.pname) { // 如果两值相当
                    arr.push(value); // 把找到的值进行处理，用数组储存
                    return true; // return true可以中止，跳出循环
                }
            })

二、字符串

1.trim

作用：除去字符串两侧的空白字符

但是他返回的是新的字符串，需要一个新的字符串来接

 btn.addEventListener('click', function() {
            if (text.value.trim() === '') { // 可以有效去除只输入空格的情况
                alert('你倒是输入呀');
            } else {
                var div = document.createElement('div'); // 新建div类型元素
                div.innerHTML = text.value.trim();
                box.appendChild(div);
            }
        })