欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

ES5中的新增方法

程序员文章站 2022-06-16 10:49:20
...

1.1ES5新增方法概述

ES5中给我们新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括：
● 数组方法
● 字符串方法
● 对象方法

1.2 数组方法

迭代（遍历）方法：forEach()、map()、filter()、some()、every();
forEach()

array.forEach(function(currentValue,index,arr))

● currentValue：数组当前项的值
● index：数组当前项的索引
● arr：数组对象本身

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

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

</html>

filter()

array.filter(function(currenValue, index, arr))

● filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组
● 注意它直接返回一个新数组
● currenValue：数组当前项的值
● index：数组当前项的索引
● arr：数组对象本身

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //filter 筛选数组
        var arr = [12, 66, 4, 88, 3, 7];
        var newArr = arr.filter(function(value, index) {
           // return value >= 20;
            //求数组里面的所有偶数
            return value % 2 ===0;
        })
        console.log(newArr);   //输出结果66,88
        console.log(newArr);   //输出结果12,66,4，88
    </script>
</body>
</html>

some()

array.some(function(currentValue, index, arr))

● some()方法用于检测数组中的元素是否满足指定条件，通俗点查找数组中是否有满足条件的元素
● 注意它返回值是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false
● 如果找到第一个满足条件的元素，则终止循环，不在继续查找
● currentValue：数组当前项的值
● index：数组当前项的索引
● arr：数组对象本身

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //some查找数组中是否有满足条件的元素
        var arr = [10, 30, 4];
        var flag = arr.some(function(value, index) {
            return value >= 20;
        })
        console.log(flag);
    </script>
</body>

</html>

1、filter也是查找满足条件的元素，返回的是一个数组，而且是把所有满足条件的元素返回回来
2、some 也是查找满足条件的元素是否存在，返回的是一个布尔值，如果查找到第一个满足条件的元素就终值循环

1.3 字符串方法

trim()方法会从给一个字符串的俩端删除空白字符

str.trim()

trim()方法并不影响原字符串本身，它返回的是一个新的字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //trim()去除俩侧空字符串
        var str = '    andy    '
        console.log(str);
        var str1 = str.trim();
        console.log(str1);
    </script>
</body>

</html>

1.4 对象方法

1、Object.key()用于获取对象自身所有的属性

Object.key(obj)

● 效果类似for…in
● 返回一个由属性名组成的数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
    </script>
</body>
<script>
    //获取对象自身所有的属性
    var obj = {
        id: 1,
        pname: '小米',
        price: 3999
    };
    var arr = Object.keys(obj);
    console.log(arr);
</script>

</html>

2、Object.defineProperty()定义对象中新属性或修改原有的属性

Object.defineProperty(obj, prop, descriptor)

● obj：必需。目标对象
● prop：必需。需定义或修改的属性的名字
● descriptor：必需。目标属性所拥有的特性
Object。defineProperty()第三个参数descriptor说明：以对象形式{}书写
● value：设置属性的值 默认undefined
● writable：值是否可以重写。true | false 默认为false
● enumerable：目标属性是否可以被枚举。true|false默认为false
● configurable：目标属性是否可以被删除或是否可以再次修改特性true|false默认为false

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
    </script>
</body>
<script>
    //获取对象自身所有的属性
    var obj = {
        id: 1,
        pname: '小米',
        price: 3999
    };
    // var arr = Object.keys(obj);
    // console.log(arr);
    //Object.defineProperty()定义新属性或修改原有的额属性
    Object.defineProperty(obj, 'num', {
        value: 1000
    });
    Object.defineProperty(obj, 'price', {
        value: 9.9
    });
    Object.defineProperty(obj, 'price', {
        //如果false，不允许修改属性值，默认值为false
        writable: false,
    });
</script>

</html>

上一篇： HiveServer2的配置使用

下一篇： SQL Server中通过扩展存储过程实现数据库的远程备份与恢复

推荐阅读