💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、豆包、星火、月之暗面及文生图、文生视频 广告
[TOC] # 3.1 ES5新增方法概述 ES5中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括: ●数组方法 ●字符串方法 ●对象方法 ## 3.2数组方法 迭代(遍历)方法: forEach()、map()、**filter()**、some()、every() ; ~~~ array.forEach ( function (currentvalue,index,arr) ) ~~~ ●currentValue :数组**当前项的值** ●index :数组**当前项的索引** ●arr:**数组对象本身** ### filter()**筛选数组**(return 返回值) ~~~ array.filter (funct ion (currentValue, index, arr)) ~~~ ![](https://img.kancloud.cn/b9/4c/b94c8862a417c94cd2bd8caa403aa52a_1081x262.png) ![](https://img.kancloud.cn/a5/d5/a5d59a5c6d809fa7448db1ffd1ae1cf3_880x304.png) ### some(). (**查找**函数**是否有满足条件的函数**)(返回布尔值) ~~~ array.some (function (currentValue, index, arr)) ~~~ ![](https://img.kancloud.cn/ea/df/eadfa0e56e5a08d0d8e7076fcc60658c_964x312.png) ![](https://img.kancloud.cn/18/4a/184a74cb21cb77b80cbf1d2bc11742e9_1263x542.png) ## 3.3字符串方法 (删除两端空白字符) trim()方法会从一个字符串的**两端删除空白字符**。 ~~~ str.trim() ~~~ trim()方法并不影响原字符串本身,它返回的是一个新的字符串。 ![](https://img.kancloud.cn/ad/6c/ad6cdf459c7655ec44f321100e8322f7_1004x735.png) ## 3.4对象方法 ### 1.获取属性名 1.Object.keys() 用于**获取对象**自身所有的**属性**(**获取属性名**) ~~~ object.keys (obj) ~~~ ●效果类似fr..in ●返回一个由属性名组成的数组 ![](https://img.kancloud.cn/1c/2b/1c2bd5beb3d7874f3f97bef9216eac52_581x448.png) ### 2.修改属性 2.Object.defineProperty() 定义对象中新属性或修改原有的属性。 ~~~ object.def ineProperty(obj, prop, descriptor) ~~~ ●obj:必需。 目标对象 ●prop :必需。 需定义或修改的属性的名字 ●descriptor :必需。目标属性所拥有的特性 ![](https://img.kancloud.cn/3f/03/3f03fc36a14f5b236d71f765fe7beb81_911x264.png) ![](https://img.kancloud.cn/c3/3f/c33f8e3a1cf6871c171d14465282042c_921x379.png) ![](https://img.kancloud.cn/07/90/079088b31d6e163325d901447f072f94_1210x520.png) `delete obj.address;`删除属性 # 查询商品案例 1.把数据渲染到页面中 2.根据价格显示数据 3.根据商品名称显示数据 ![](https://img.kancloud.cn/aa/bb/aabb229afc8a7eacda0dc753551170d1_675x221.png) html 里数据全删了,用js 渲染 ![](https://img.kancloud.cn/8c/31/8c317994d2a685a8c095a3305189b9d5_1216x719.png) 其他用js 书写数据 ![](https://img.kancloud.cn/27/90/279048cc1f30938b07cad4cf11ee9ddf_460x613.png) ## 1.渲染页面 ![](https://img.kancloud.cn/6d/19/6d190e90b97f4a774abcb8c61fc62a23_375x300.png) ![](https://img.kancloud.cn/96/6e/966e2c15ee87dc16f1fc6527a22322fc_1169x351.png) ## 2.根据价格查询商品 ![](https://img.kancloud.cn/ac/6d/ac6db6851b36f3156e3350520994b68a_1114x176.png) ![](https://img.kancloud.cn/ce/32/ce3231ebbf102e6031b013cbbcbc2dff_1132x348.png) 2.根据价格查询商品 优化 ![](https://img.kancloud.cn/4a/5d/4a5d71e2b6e2be92b906c04ed30e9888_1225x448.png) ![](https://img.kancloud.cn/71/15/7115968d3f00fa82d6705d47d17e5742_1071x377.png) ## 3.根据商品名称查找商品 ![](https://img.kancloud.cn/f7/09/f7094aa7a9a3e05cce855a712554c998_1071x79.png) ![](https://img.kancloud.cn/4a/e1/4ae145cbd1254979da949fc736764755_1201x473.png)