ES5语法数组遍历、字符串、对象新增方法

已于 2023-12-25 16:28:00 修改
阅读量1.1k 收藏 18
点赞数 21
分类专栏： ES语法 文章标签： javascript
于 2023-12-25 16:26:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36158551/article/details/135200357
版权

  ES5数组遍历forEach\filter\some\every\map、字符串trim、对象keys\defineProperty新增方法
  Elasticsearch 是一个分布式、RESTful 风格的搜索和数据分析引擎，能够解决不断涌现出的各种用例。作为 Elastic Stack 的核心，它集中存储您的数据，帮助您发现意料之中以及意料之外的情况。

1. 数组遍历

1.1. forEach()

  forEach相当于增强版的for循环，回调函数有三个参数分别为：每个遍历数组的值，每个遍历数组的索引，数组本身。

    var arr = [1, 2, 3];
    var sum = 0;
    arr.forEach(function (item, index, array) {
        console.log("==1:", item, index, array);
        sum += item;
    })
    arr.forEach(function (item, index) {
        console.log("==2:", item, index);
        sum += item;
    })
    arr.forEach(function (item) {
        console.log("==3:", item);
        sum += item;
    })

结果：
在这里插入图片描述

1.2. map()

  var arr = [1, 2, 3];
    var sum = 0;
    arr.map(function (item) {
        console.log("map-item:", item);
        sum += item;
    });
    console.log("map-sum:",sum);

结果：
在这里插入图片描述

1.3. filter()

  filter() 创建一个新的数组，新数组的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组。直接返回一个新的数组。回调函数三个参数：当前项的值，当前项的索引，数组本身。

    //得到大于10
    var arr = [2, 534, 2, 23, 4, 234];
    var newArr = arr.filter(function (item, index, arr) {
        return item > 20
    });
    console.log("大于10:",newArr);
    //得到偶数
    var newArr = arr.filter(function (item, index, arr) {
        return item % 2 === 0;
    });
    console.log("偶数:",newArr);

结果：
在这里插入图片描述

1.4. some()

  some() 判断数组中是否有符合条件的元素，有则返回true，无则返回false。可以用于查找数组中是否有某个特定元素。找到第一个符合条件的元素后，则结束循环，不在执行后面的循环。

    var arr = [10, 20, 30, 40];
    var flag = arr.some(function (item, index, array) {
        return item > 20;
    });
    console.log(flag);
    var flag = arr.some(function (item, index, array) {
        return item < 3;
    });
    console.log(flag);
    var flag = arr.some(function (item, index, array) {
        return item === 30;
    });
    console.log(flag);

结果：
在这里插入图片描述

1.5. every()

  every() 对数组中的每一个元素运行给定的函数，如果数组中每一个元素都能通过回调函数的测试，就会返回true，如果其中有一个元素通过回调函数的测试返回的是false，则返回false。

    var arr = [10, 20, 30, 40];
    var flag = arr.every(function (item, index, array) {
        return item > 20;
    });
    console.log(flag);
    var flag = arr.every(function (item, index, array) {
        return item < 3;
    });
    console.log(flag);
    var flag = arr.every(function (item, index, array) {
        return item === 30;
    });
    console.log(flag);

结果：
在这里插入图片描述

1.6. forEach() 、 some() 、 every()、 filter() 遇到return的区别

  在forEach 里面 return 不会终止迭代；
  在some、every 里面 遇到 return true 就是终止遍历 迭代效率更高；
  filter 里面 return 不会终止迭代；
  如果查询数组中唯一的元素, 用some方法更合适。

		var arr = ['red', 'green', 'blue', 'pink'];
        // 1. forEach迭代 遍历
        // arr.forEach(function(value) {
        //     if (value == 'green') {
        //         console.log('找到了该元素');
        //         return true; // 在forEach 里面 return 不会终止迭代
        //     }
        //     console.log(11);
        // })
        // 如果查询数组中唯一的元素, 用some方法更合适,
        arr.some(function(value) {
            if (value == 'green') {
                console.log('找到了该元素');
                return true; //  在some 里面 遇到 return true 就是终止遍历 迭代效率更高
            }
            console.log(11);
        });
        // arr.filter(function(value) {
        //     if (value == 'green') {
        //         console.log('找到了该元素');
        //         return true; //  // filter 里面 return 不会终止迭代
        //     }
        //     console.log(11);
        // });

2. 字符串

2.1. trim()

  trim() 去除字符串前后两端的空白字符，返回值为一个新的字符串，不会覆盖原来的字符串。

    var str = '   HelloWorld    ';
    console.log(str);
    var str1 = str.trim();
    console.log(str1);

结果：
在这里插入图片描述

3. 对象

3.1. Object.keys()

  Object.keys() 用于获取对象自身所有的属性，类似for in ，返回值为所有属性名组成的数组。

    // 用于获取对象自身所有的属性
    var obj = {
        id: 1,
        pname: '鸿蒙',
        price: 1999,
        num: 2000
    };
    var arr = Object.keys(obj);
    console.log(arr);
    arr.forEach(function(item) {
        console.log(item);
    })

结果：
在这里插入图片描述

3.2. Object.defineProperty()

  Object.defineProperty()定义新属性或修改原有的属性，三个参数：需要操作的对象，需要操作的属性，属性的描述。
  Object.defineProperty(obj， prop，descriptor)
  Object.defineProperty（）第三个参数 descriptor说明:以对象形式()书写
  value: 设置属性的值 默认为undefined
  writable:值是否可以重写。truelfalse 默认为false
 &emsp;enumerable: 目标属性是否可以被枚举。truelfalse 默认为 false
  **configurable:**目标属性是否可以被删除或是否可以再次修改特性truelfalse 默认为false

    // Object.defineProperty() 定义新属性或修改原有的属性
    var obj = {
        id: 1,
        pname: '鸿蒙',
        price: 1999
    };
    // 1. 以前的对象添加和修改属性的方式
    // obj.num = 1000;
    // obj.price = 99;
    // console.log(obj);
    // 2. Object.defineProperty() 定义新属性或修改原有的属性
    Object.defineProperty(obj, 'num', {
        value: 1000,
        enumerable: true
    });
    console.log(obj);
    Object.defineProperty(obj, 'price', {
        value: 9.9
    });
    console.log(obj);
    Object.defineProperty(obj, 'id', {
        // 如果值为false 不允许修改这个属性值 默认值也是false
        writable: false,
    });
    obj.id = 2;
    console.log(obj);
    Object.defineProperty(obj, 'address', {
        value: '华为鸿蒙系统',
        // 如果只为false 不允许修改这个属性值 默认值也是false
        writable: false,
        // enumerable 如果值为false 则不允许遍历, 默认的值是 false
        enumerable: false,
        // configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为false
        configurable: false
    });
    console.log(obj);
    console.log(Object.keys(obj));
    delete obj.address;
    console.log(obj);
    delete obj.pname;
    console.log(obj);
    Object.defineProperty(obj, 'address', {
        value: '华为鸿蒙系统',
        // 如果只为false 不允许修改这个属性值 默认值也是false
        writable: true,
        // enumerable 如果值为false 则不允许遍历, 默认的值是 false
        enumerable: true,
        // configurable 如果为false 则不允许删除这个属性 默认为false
        configurable: true
    });
    console.log(obj.address);

4. 全部代码

$(function () {
    /**
     * 数组遍历
     */
    //数组遍历-forEach
    forEachData();
    //数组遍历-map
    mapData();
    //数组遍历-filter
    filterData();
    //数组遍历-some
    someData();
    //数组遍历-every
    everyData();
    /**
     * 字符串-trim
     */
    //字符串-trim
    trimData();

    /**
     * 对象
     */
    //对象-Object.keys()
    keysData();
});

/**
 * 数组遍历-forEach
 */
function forEachData() {
    var arr = [1, 2, 3];
    var sum = 0;
    arr.forEach(function (item, index, array) {
        console.log("==1:", item, index, array);
        sum += item;
    })
    arr.forEach(function (item, index) {
        console.log("==2:", item, index);
        sum += item;
    })
    arr.forEach(function (item) {
        console.log("==3:", item);
        sum += item;
    })
}

/**
 * 数组遍历-map
 */
function mapData() {
    var arr = [1, 2, 3];
    var sum = 0;
    arr.map(function (item) {
        console.log("map-item:", item);
        sum += item;
    });
    console.log("map-sum:", sum);
}

/**
 * 数组遍历-filter
 */
function filterData() {
    //得到大于10
    var arr = [2, 534, 2, 23, 4, 234];
    var newArr = arr.filter(function (item, index, arr) {
        return item > 20
    });
    console.log("大于10:", newArr);
    //得到偶数
    var newArr = arr.filter(function (item, index, arr) {
        return item % 2 === 0;
    });
    console.log("偶数:", newArr);
}

/**
 * 数组遍历-some
 */
function someData() {
    var arr = [10, 20, 30, 40];
    var flag = arr.some(function (item, index, array) {
        return item > 20;
    });
    console.log(flag);
    var flag = arr.some(function (item, index, array) {
        return item < 3;
    });
    console.log(flag);
    var flag = arr.some(function (item, index, array) {
        return item === 30;
    });
    console.log(flag);
}

/**
 * 数组遍历-every
 */
function everyData() {
    var arr = [10, 20, 30, 40];
    var flag = arr.every(function (item, index, array) {
        return item > 20;
    });
    console.log(flag);
    var flag = arr.every(function (item, index, array) {
        return item < 3;
    });
    console.log(flag);
    var flag = arr.every(function (item, index, array) {
        return item === 30;
    });
    console.log(flag);
}

/**
 * 字符串-trim
 */
function trimData() {
    var str = '   HelloWorld    ';
    console.log(str);
    var str1 = str.trim();
    console.log(str1);
}

/**
 * 对象-Object.keys()
 */
function keysData() {
    // 用于获取对象自身所有的属性
    var obj = {
        id: 1,
        pname: '鸿蒙',
        price: 1999,
        num: 2000
    };
    var arr = Object.keys(obj);
    console.log(arr);
    arr.forEach(function (item) {
        console.log(item);
    })
}

/**
 * 对象-Object.keys()
 */
function keysData() {
    // Object.defineProperty() 定义新属性或修改原有的属性
    var obj = {
        id: 1,
        pname: '鸿蒙',
        price: 1999
    };
    // 1. 以前的对象添加和修改属性的方式
    // obj.num = 1000;
    // obj.price = 99;
    // console.log(obj);
    // 2. Object.defineProperty() 定义新属性或修改原有的属性
    Object.defineProperty(obj, 'num', {
        value: 1000,
        enumerable: true
    });
    console.log(obj);
    Object.defineProperty(obj, 'price', {
        value: 9.9
    });
    console.log(obj);
    Object.defineProperty(obj, 'id', {
        // 如果值为false 不允许修改这个属性值 默认值也是false
        writable: false,
    });
    obj.id = 2;
    console.log(obj);
    Object.defineProperty(obj, 'address', {
        value: '华为鸿蒙系统',
        // 如果只为false 不允许修改这个属性值 默认值也是false
        writable: false,
        // enumerable 如果值为false 则不允许遍历, 默认的值是 false
        enumerable: false,
        // configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为false
        configurable: false
    });
    console.log(obj);
    console.log(Object.keys(obj));
    delete obj.address;
    console.log(obj);
    delete obj.pname;
    console.log(obj);
    Object.defineProperty(obj, 'address', {
        value: '华为鸿蒙系统',
        // 如果只为false 不允许修改这个属性值 默认值也是false
        writable: true,
        // enumerable 如果值为false 则不允许遍历, 默认的值是 false
        enumerable: true,
        // configurable 如果为false 则不允许删除这个属性 默认为false
        configurable: true
    });
    console.log(obj.address);
}
雪芽蓝域zzs
关注
专栏目录
ES5新增方法遍历数组方法 forEach()、map()、filter()、some()、every()
weixin_44253584的博客
04-18 341
# 数组方法 迭代（遍历方法）：forEach()、map()、filter()、some()、every() arry **1.forEach():** array.forEach(function(Value,index,arr)) ```javascript var arr = [1, 2, 3] var sum = 0 arr.forEach(function (value, index, array) { console.log('每个数组元素' + value); conso.....
JavaScript中，数组和对象的遍历方法总结
weixin_43852267的博客
02-23 532
循环遍历是写程序很频繁的操作，JavaScript 提供了很多方法来实现。 这篇文章将分别总结数组和对象的遍历方法，新手可以通过本文串联起学过的知识。 数组遍历 方法一：for 循环 for 循环是使用最多，也是性能优化最好的一种遍历方式。 var arr = ["a", "b", "c"]; for (var i = 0; i < arr.length; i++) { console...
带你学习ES5中新增的方法
01-08
文章目录1. ES5中新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括以下几个方面2. 数组方法2.1 forEach跟jQuery的each用法类似。语法是：2.2 map()2.3 filter()2.4 some()2.5 every()2.6 isArray()3. 字符串方法4. 对象方法总结 1. ES5中新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括以下几个方面 数组方法 字符串方法 对象方法 2. 数组方法 迭代遍历方法：forEach()、map()、filter()、some()、every()判断方法：isArray() 2.1 forE
ES5新增方法
最新发布
zjx_1234的博客
09-13 252
ES5的数组方法和实例
ES5中遍历数组的方式：
zw_wen的博客
05-15 265
//ES5中数组的遍历方式 //1.普通for循环；支持break，continue； //2.forEach循环：写法简洁，但是不支持break，continue; //3.every：返回true时继续遍历，返回false时停止遍历，可以模拟break，continue效果 //4.for...in：转为对象设计的:支持break，continue效果 var arr = [1,2,4,3,5] // 遍历每一个元素 arr.every(ele=>{ cons...
【js】在ES5中常用的10种数组遍历方法
AAAXiaoApple的博客
03-28 684
在ES5中常用的10种数组遍历方法
ES5之数组遍历七大方法
陈皮糖的博客
04-09 5257
* 方法1 : forEach 遍历数组, 等同于 for(但是性能没有for好) * 返回值 : 没有返回值 // var arr = ['zs', 'ls', 'ww'] // item : 数组里的每一个元素 (最最多) // index : 数组元素的下标/索引 (很少用) // array : 数组 本身 // arr.forEach(function ( item,i,ar...
JavaScriptES5常用的数组遍历
m0_61848095的博客
08-23 386
forEach遍历数组，里面包含了一个匿名函数，匿名函数里面有三个参数，第一个参数为item为元素的值，第二个为index，元素的索引号，第三个为arr，原数组，我们只需要根据自己所需要的去写即可。every也是查找符合条件的数组，不过every的要求是数组中全部满足条件就返回true，只要有一个不满足就返回false。map，与forEach相似，都是遍历数组，不过map可以对数组里的每一项进行操作，并且返回一个新的数组。filter是一个过滤，相当于根据你设置的条件来过滤数组。
数组的方法和ES5、ES6新增数组方法的语法，作用，返回值和注意事项
qq_57334853的博客
07-18 841
数组的方法在项目逻辑中无处不在、因为后端传过来数据不一定可以直接用那么就需要用数组的方法来进行转换了、还有其它地方都能用到就不一一举例了，总之很重要，很重要，要把这些方法烂熟于心，能很好的提升工作效率，比别人早下班。以下是保姆及的方法、有漏掉的或者错误的地方大家可以在评论区指出来..................
ES5和ES6新增常见方法
tangyu520lehua的博客
10-09 506
ES5和ES6新增常见方法
六，JavaScript中的ES5和字符串
weixin_50337713的博客
03-21 1614
一，ES5 （一），介绍 ES：ECMAScript简称ES - ECMA公司指定的规范 ES5：ECMA语法规范第5个版本 ECMAScript一开始被制定出来的时候，有很多当时考虑不到的情况，所以最开始的语法规范还有一些漏洞，不严谨的地方 ECMAScript随着时代的发展，前端工程师的进步，会一直进行升级迭代，让语言变得更严谨，更健全 我们所使用的js语法，大部分都是es3的语法，从es3开始，js的语法已经趋于稳定了 es5到目前为止，是公认的兼容性最好的一般js版本 （二），严格模式 就是js的
ES5|数组的各种遍历方式
Julia.wen的博客
07-19 446
ES5|数组的遍历方式 之后所有例子都使用以下这个数组： let arr=[1,2,3,2,4] for循环 //for for(let i=0;i<arr.length;i++){ console.log(arr[i]) } 1 2 3 2 4 forEach() array.forEach(function(elem,index,array), thisValue) *elem必需，表当前元素 *index可选，表当前元素索引值 *array可选，表当前元素所属的数组对象 *thi
es5数组遍历方法
qq_43042062的博客
01-29 295
//forEach(fn) &lt;!-- 1. forEach无返回值 2. 代替for循环，但不能随意跳出循环（break无效） 3. fn回调函数有三个参数（item,index,arr） item:数组的每一项 index:数组的索引值 arr: 数组本身 --&gt; //示例 arr.forEach(item=&gt;{ consol.log(item); }...
ES5/ES6较常用的数组遍历方法
ldoit的博客
11-26 672
数组的常见方法 map (some, every, filter,forEach) es5 find findIndex --es6 reduce (遍历两两相加方法) 收敛 叠加 for of(); Array.form 配合new Set() 实现数组去重 keys，values，entries --es6新提供的遍历方法 reduce 返回的结果是叠加后的结果 函数的返回结果会作为下一次循环的prev let result = [1,2,3,4,5].reduce((prev, nex
ES5数组操作以及遍历迭代方法
qq_41559229的博客
12-20 336
写这篇博文是因为最近学习Vue的时候发现自己忘记了好多JS的数组操作方法和一些数组遍历的迭代方法，下面将一下我自己最近经常用得到的方法，总结一下。 栈方法 这个所谓的栈方法就是类似于数据结构的方法，就是后进先出。也就是最新添加的数据最先被移除。这里介绍的ES5中的方法，只是类似栈方法而已。 push 这个方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。 var col...
ES5新增语法汇总
qq_41800649的博客
11-21 665
????总: 5个迭代方法：forEach()、map()、filter()、some()、every()； 2个索引方法：indexOf() 和 lastIndexOf()； 2个归并方法：reduce()、reduceRight()； 场景:循环遍历数组，每个元素做相同操作: ????for循环 ????es5的forEach循环 优点:不用写for循环 缺点:需要新建数组，每一次循环都要push ????es5的m...
ES5-数组的新方法(都是遍历)
tsw529的博客
03-15 397
forEach forEach()的方法对数组的每个元素执行一次提供的函数.功能等同于for循环. 应用场景:为一些相同的元素,绑定事件处理器! 需求 : 遍历数组[“张飞”,“关羽”,“赵云”,“马超”] var arr = ["张飞","关羽","赵云","马超"]; //第一个参数：element，数组的每一项元素 //第二个参数：index，数组的下标 //第三个参数：array，正在遍历...
ES5语法
WYF857446152的博客
05-02 708
ES5语法 逐渐进军JS
ES5 的语法
Gesturecc的博客
02-20 661
文章目录JSON 处理丰富数组操作参考 JSON 处理 ES5 提供了一个全局的 JSON 对象，做序列化和反序列化操作，并能在处理时做简单的过滤和转换。 将 JSON 对象序列化为字符串： 语法格式：JSON.stringify(value [, replacer [, space]]) replacer 用来做过滤和转换，space 用来控制格式化的缩进空格数 JSON.stringify({name: "lee", age: 18}); // '{"name":"lee","age":18}' JS
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值