es5中新增的方法

DB_鸠

已于 2022-02-06 11:31:28 修改

阅读量416

点赞数

分类专栏：笔记文章标签： leetcode typescript javascript

于 2022-02-05 10:57:08 首次发布

本文链接：https://blog.csdn.net/m0_66711291/article/details/122788606

版权

笔记专栏收录该内容

16 篇文章 2 订阅

订阅专栏

一、数组方法

1.foreach(value,index,arr);

遍历数组，第一个值为数组中的每个元素，第二个值为每个元素的索引，第三个值为数组本身。

var arr2 = [1,2,3];
        arr2.forEach(function(value,index,array){
            console.log("每个数组元素"+value);
            console.log("每个数组索引"+index);
            console.log("数组本身"+array);
        })

2.filter(value,index,arr)

查找数组中对应符合要求的项并返回新的数组。

 var arr2 = [1,2,3];
var newarr = arr2.filter(function(value,index,array){
            return value >= 2;
        })
        console.log(newarr);

3.some(value,index,arr)

查找数组中是否存在符合要求的值，返回值为布尔类型。

var arr2 = [1,2,3];
var flag = arr2.some(function(value,index,array){
            return value >= 3;
        })
        console.log(flag);

返回值为true。

二、应用实例———商品查找

要求可以利用价格和名称对商品进行查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品查找页面</title>
    <style>
        *{
            text-align: center;
            padding: 0px;
            box-sizing: border-box;
        }
       
        div{
            width: 1400px;
            text-align: center;
        }
        table,td,th{
            border: 1px solid black;
            margin: 0 auto;
        }

        td{
            width: 150px;
        }
    </style>
</head>
<body>

    <div>
        <span>价格区间</span>

        <input type="number" id="smaller">
        - 
        <input type="number" id="bigger">

        <button onclick="cheekbyprice();">搜索</button>

        <span>商品名称</span>

        <input type="text" id="name">

        <button onclick="cheekbyname();">查询</button>
    </div>
    <br>
    <div>
        <table>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>价格</th>
            </tr>
            <tbody id="table">

            </tbody>
        </table>
    </div>
   
    <script>
        var data = [
            {
                index:1,
                name:"MuseDash",
                price:18,
            },
            {
                index:2,
                name:"Phigros",
                price:0,
            },
            {
                index:3,
                name:"Cytus",
                price:12,
            },
            {
                index:4,
                name:"同步音律",
                price:128,
            },
        ] 

        var table = document.getElementById("table");
        
        var setdata = function(mydata){
            table.innerHTML = "";
            mydata.forEach(function(value){
            var tr = document.createElement("tr");
            tr.innerHTML = "<td>"+value.index+"</td><td>"+value.name+"</td><td>"+value.price+"</td>";
            table.appendChild(tr);
        })}

        setdata(data);
        
        var cheekbyprice = function(){
            var small = document.getElementById("smaller").value;
            var big = document.getElementById("bigger").value;
            var newdata = data.filter(function(value,index,arr){
            return (value.price >=small && value.price <=big);
            })
            setdata(newdata);
        }
        
       var cheekbyname = function(){
            // var name = document.getElementById("name").value;
            // var newdata = data.filter(function(every){
            //     return (every.name == name);
            // })
            // setdata(newdata);

            var name = document.getElementById("name").value;
            var arr = [];
            data.some(function(value){
                if(value.name == name)
                {
                    arr.push(value);
                    return true;
                }
                })
                setdata(arr);
            }
    </script>
</body>
</html>

1.利用数组储存商品信息

2.利用foreach()方法将商品信息渲染到页面上

3.利用filter方法创建新的数组，使用封装好的setdata()方法重新渲染页面

4.对于单一的元素使用some()方法更高效

三、字符串方法

trim（）去除字符串两端的空格字符并返回新的字符串

var str = "   wowo     ";
str.trim();

四、对象方法

Object.key（obj）遍历对象，返回一个由对象属性组成的数组

Object.defineProperty(name,xp,{

value:"purple",

writable:false,

enumerable:false,

configurable:false, });为对象添加或修改属性和特性

name：目标对象的名称

xp：目标对象的属性

{}目标对象的特性

{}中有四个值：

value：目标对象属性的值

writable：该值是否可以被修改

enumerable:该值是否允许被遍历

configurable：该值是否允许被删除，是否可以修改这四个特性的值

Object.defineProperty(keqing,"color",{
            value:"purple",
            writable:false,//如果值为false不允许修改属性值，默认为false
            enumerable:false,//默认值为false不允许被遍历，默认为false
            configurable:false,//如果值为false则该属性不允许被删除，不允许修改第三个参数里面的特性默认值为false
        });

        console.log(keqing);
        var newarr = Object.keys(keqing);
        console.log(newarr);
        delete keqing.color;
        console.log(keqing);