JavaScript进阶学习笔记(三)--- ES5新增方法

news/2024/7/19 16:22:58 标签: js, javascript

JavaScript进阶学习笔记(三)— ES5新增方法

1、forEach()

​ forEach(function(value,index,array){ }) 方法是用来遍历数组元素的,相当于 for循环。参数是一个函数,该函数有三个参数,分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有,其他参数可以看情况选择。forEach() 不支持的 continue 与 break 语句,所以一旦开始,就一定会遍历到最后。该方法不会改变原数组。

js">// 案例代码

var arr = [1,2,3,4,5];
// 遍历数组
arr.forEach(function(value, index, array) {
       //参数一是:数组元素  参数二是:数组元素的索引  参数三是:当前的数组
       console.log(value); // 1 2 3 4 5
       console.log(index); // 0 1 2 3 4
       console.log(array); // [1,2,3,4,5]
 })

2、filter()

​ filter(function(value, index,array) { }) 方法用来过滤数组,筛选数组中所有符合条件的元素,并将这些数组复制到一个新的数组中,然后返回这个新数组。参数是一个函数,该函数有三个参数,分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有,其他参数可以看情况选择。该方法不会改变原数组。

js">// 案例代码

    var arr = [12, 66, 4, 88, 3, 7];
    var newArr = arr.filter(function(value, index,array) {
        //参数一是:数组元素  参数二是:数组元素的索引  参数三是:当前的数组
        if(value >= 20) { // 筛选条件
            return value;
        }
    });
    console.log(newArr);//[66,88] //返回值是一个新数组

3、some()

​ some(function(value, index,array) { }) 方法用于查找数组中是否存在满足条件的元素,返回值为一个布尔值。该方法会从第一个元素开始依次遍历数组中的元素,直到碰到一个满足条件的元素,返回 true ,然后停止遍历,剩下的元素不再进行访问。如果没有符合条件的元素则返回 false 。参数是一个函数,该函数有三个参数,分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有,其他参数可以看情况选择。该方法不会改变原数组。

js">// 案例代码

 var arr = [10, 30, 4, 2];
 var flag = arr.some(function(value,index,array) {
    //参数一是:数组元素  参数二是:数组元素的索引  参数三是:当前的数组
     return value < 3;
  });
console.log(flag);// true 返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

4、every()

​ every(function(value, index,array) { }) 方法用于检测数组中的所有元素是否都符合条件,如果数组中存在一个元素不满足条件,则返回 false ,并且剩余的元素不会再进行检测。如果所有元素都符合条件,则返回 true 。参数是一个函数,该函数有三个参数,分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有,其他参数可以看情况选择。该方法不会改变原数组。

js">// 案例代码

 var arr = [10, 30, 4, 2];
 var flag = arr.every(function(value,index,array) {
    //参数一是:数组元素  参数二是:数组元素的索引  参数三是:当前的数组
     return value < 20;
  });
console.log(flag);// false 返回值是布尔值,只要查找到不满足条件的一个元素就立马终止循环

5、map()

​ map(function(value, index,array) { }) 方法用于处理数组中的元素,比如算术运算、调用数学函数等,然后以一个新数组的形式返回处理后的数据。参数是一个函数,该函数有三个参数,分别为 value — 数组元素、index — 数组元素的索引、array — 当前遍历的数组。参数value必须有,其他参数可以看情况选择。该方法不会改变原数组。只是返回一个新数组。

js">// 案例代码

 var arr = [10, 30, 4, 2];
 var result = arr.map(function(value,index,array) {
    //参数一是:数组元素  参数二是:数组元素的索引  参数三是:当前的数组
     return value -1;
  });
console.log(result);// [9,29,3,1]

6、some() 和 forEach()的区别

​ forEach() 方法是遍历数组中的所有元素,不会受任何语句影响,遇到 return 也不会停止迭代,一定会遍历所有元素。而 some() 方法也是遍历数组中的元素,但是一旦遇到符合条件的元素,就会立即停止遍历,或者遇到 return true; 也会停止遍历。

​ 所以如果是查找数组中的唯一的元素或筛选是否又符合条件的元素,用 some() 效率更高。如果想要查找数组中所有符合条件的元素,则需要使用forEach() 。

7、trim()

​ trim() 方法用于删除字符串的头部和尾部的空白符,只保留中间的字符串,字符串中间的空白符是不会被去除的。空白符包括:空格、制表符 tab、换行符等等。但不会改变原字符串,只是返回一个处理后的新字符串。

js">// 案例代码

var str = '   hello   '
console.log(str.trim()//hello 去除两端空格
var str1 = '   he l l o   '
console.log(str.trim()//he l l o  去除两端空格

8、Object.keys()

​ Object.keys(obj) 方法是用来获取对象中的属性名,只有一个参数obj,代表要获取属性名的对象。返回值是一个数组,数组里面的元素就是获取的属性名。

js">// 案例代码

 var obj = {
     id: 1,
     pname: '小米',
     price: 1999,
     num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id,pname,price,num]

9、Object.defineProperty()

​ Object.defineProperty(对象,设置或修改对象的属性名,{value: 设置或修改对象的属性值}) 方法用于修改对象的属性值,或者给对象新增一条属性。共有三个参数,分别为: 要操作的对象、要操作的属性值、一个对象里面包含修改后的值,以及设置是否能被再次修改、是否能够被删除等属性。

js">// 案例代码

/*Object.defineProperty(对象,修改或新增的属性名,{
		value:修改或新增的属性的值,
		writable:true/false,//如果值为false 不允许修改这个属性值
		enumerable: false,//enumerable 如果值为false 则不允许遍历
        configurable: false  //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})	*/

        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: '中国山东蓝翔技校xx单元',
            // 如果只为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: '中国山东蓝翔技校xx单元',
            // 如果只为false 不允许修改这个属性值 默认值也是false
            writable: true,
            // enumerable 如果值为false 则不允许遍历, 默认的值是 false
            enumerable: true,
            // configurable 如果为false 则不允许删除这个属性 默认为false
            configurable: true
        });

http://www.niftyadmin.cn/n/803659.html

相关文章

【Oracle】ORA-00600: [kfgFinalize_2]

环境&#xff1a; OS&#xff1a;OEL5.6 RAC&#xff1a;10.2.0.1.0 [rootrac2 ~]# crs_stat -t Name Type Target State Host ------------------------------------------------------------ ora....B1.inst application ONLINE ON…

JavaScript进阶学习笔记(四)--- 函数和闭包

一、函数的定义 1、function 关键字 function fn(){}2、函数表达式&#xff08;匿名函数&#xff09; var fn function(){}3、new Function() var f new Function(a, b, console.log(a b)); f(1, 2);var fn new Function(参数1,参数2..., 函数体) 注意 /*Function 里面…

JavaScript进阶学习笔记(五)--- 严格模式

一、严格模式 1、严格模式的概念 ​ JavaScript 除了提供正常模式外&#xff0c;还提供了严格模式&#xff08;strict mode&#xff09;。ES5 新增的严格模式是采用具有限制性 JavaScript变体的一种方式&#xff0c;即在严格的条件下运行 JS 代码。格模式在 IE10 以上版本的浏…

激光推送

1&#xff0c;首先需要将你的app在极光官网上进行注册&#xff0c;获取一个ApiKey&#xff0c;一个APIMasterSecret&#xff08;密码&#xff09;&#xff0c;将这两个值保存在配置文件&#xff08;app/web.config&#xff09;中&#xff0c;具体手机开发端需要做什么操作我们.…

JavaScript进阶学习笔记(六)--- 正则表达式

一、正则表达式 1、正则表达式概述 ​ 正则表达式&#xff08; Regular Expression &#xff09;是一种用于匹配字符串中字符组成的模式&#xff0c;用来检测某个字符串的组成是否符合某种要求或规则&#xff0c;通常用来验证表单&#xff1a;例如验证用户名只能由英文字母、…

配置Tomcat虚拟路径

Tomcat虚拟路径&#xff1a;作用类似于访问某个设定的路径时&#xff0c;根据虚拟路径的配置去访问一个绝对路径下的项目 1.E盘根目录下创建demo文件夹(E:\demo)。复制Tomcat目录下的webapps\ROOT中的WEB-INFO文件夹到demo文件夹。 (里面带有一个web.xml文件) 2.在tomcat\conf下…

JavaScript进阶学习笔记(七)--- ES6相关

一、ES6的概念 ​ ES 的全称是 ECMAScript &#xff0c;6 是指 版本 &#xff0c;是由 ECMA 国际标准化组织制定的一项脚本语言的标准化规范。ES6 的出现修改了 JavaScript 一些不足之处&#xff0c;使其更加完善。 二、ES6新增语法 1、let ​ ES6 中新增了 let 关键字用来…

AngularJS 学习笔记(一)--- 表达式和指令

注&#xff1a;最近实习的公司接手了一个17年的项目用到了 AngularJS &#xff0c;让我去做一些东西&#xff0c;我想既然用到了 那我就整理一下学习笔记吧&#xff0c;也算留个印象。但肯定比较粗糙&#xff0c;只是说怎么用&#xff0c;而不去深入探究原理机制 一、AngularJ…