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

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);
}