ES5中的新增方法

最新推荐文章于 2023-03-30 14:31:30 发布

前端笨鸟

最新推荐文章于 2023-03-30 14:31:30 发布

阅读量235

点赞数

分类专栏： js学习笔记文章标签： js

本文链接：https://blog.csdn.net/qq_41670147/article/details/103518487

版权

js学习笔记专栏收录该内容

24 篇文章 6 订阅

订阅专栏

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>