ES5特性

最新推荐文章于 2024-05-05 04:08:01 发布
最新推荐文章于 2024-05-05 04:08:01 发布
阅读量1.1k 收藏 5
点赞数
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linchaocsdn/article/details/126605896
版权

Es5特性

一、严格模式

  • 在当前代码的顶部添加use strict;
  • 在实际工作中都是用严格模式

1、禁止给未声明过的变量赋值

  • 减少了因为写错变量名造成的全局污染

2、静默失败升级为错误提示

  • 把程序中执行不成功的操作，而后台无提示改善为错误提示

3、普通函数中this不再指向window，而是指向undefined

  • 防止因为错误使用this导致全局污染

4、禁用了arguments.callee

  • arguments.callee在函数中指向该函数
  • 因为某些递归算法效率低，重复计算量太大，比如斐波那契数列


二、保护对象

  • es5提供了一整套保护对象自身的机制

1、保护属性

  • es5中对象的每个属性，不再只是一个简单的值，底层已经变成了一个缩微的小对象，里面存在value（值）、writable（是否可写）、enumerable（是否可以for…in遍历当前属性）、configurable（是否可修改）属性
    在这里插入图片描述

1）、重新定义属性配置

Object.defineProperty(对象名,"属性名",{
	属性定义;
})
（1）、禁止修改属性
let a = {
	name:"姓名",
	age:"年龄"
}
Object.defineProperty(a,"name",{
	writable:false,//禁止修改
	configurable:false//禁止wirtable重复定义，且无法删除
})
（2）、禁止for…in… 遍历属性，实现半隐藏
let a = {
	name:"姓名",
	age:"年龄"
}
Object.defineProperty(a,"age",{
	enumerable:false,//禁止for..in..遍历，实现半影藏
	configurable:false//禁止enumerable重复定义，且无法删除
})
（3）、禁止删除属性
let a = {
	name:"姓名",
	age:"年龄"
}
Object.defineProperty(a,"name",{
	configurable:false;//禁止删除，不可重复定义
})
（4）、一次性设置多个属性的配置
let a = {
	name:"姓名",
	age:"年龄"
}
Object.defineProperties(a,{
name:{
	writable:false,
	enumerable:false,
	configurable.false
},
age:{
	writable:false,
	enumerable:false,
	configurable.false
}
})

2）、访问器属性——用来自定义规则保护属性值

  • 访问器属性：自身不保存属性值，只提供对另一个数据属性的保护（可以看成需要自定义规则保护属性的替身）。
（1）、将需要设置自定义规则保护的属性取别名（想办法隐藏）
let obj = {
	name:"姓名",
	age:"年龄"
}
Object.defineProperty(obj, "zage", {
    value: obj.age,//储存age的值
    writable: true,
    enumerable: false,
    configurable: false,
});
（2）、设置访问器属性，保护和监控属性
  • 访问器属性有两个内置方法，一个是获取受保护属性值的方法，一个是修改受保护属性值的方法（在此方法中可以自定义规则对修改属性进行保护）
      Object.defineProperty(obj, "age", {
        get: function () {
          return this.zage;
        },
        set: function (a) {
          if (a >= 0 && a <= 100) {
            this.zage = a;
          } else {
            throw Error("年龄不符合修改范围");
          }
        },
        enumerable: true,
        configurable: true,
      });
（3）、隐藏受保护属性和访问器属性共同书写
let obj = {
	name:"姓名",
	age:"年龄"
}
      Object.defineProperties(obj, {
        zage: {
          value: obj.age,//将真实的值存入
          writable: true,
          enumerable: false,
          configurable: false,
        },
        age: {
          get: function () {
            return this.zage;//输出受保护属性的值
          },
          set: function (a) {
            if (a >= 0 && a <= 100) {
              this.zage = a;//修改受保护属性的值
            } else {
              throw Error("年龄不符合修改范围");
            }
          },
          enumerable: true,
          configurable: true,
        },
      });

2、保护对象的结构

1）、防扩展

  • 禁止给对象添加新属性
  • Object.preventExtensions(对象)
  • 不防删除

2）、密封

  • 即防止添加，又防止删除
  • Object.seal(对象)
  • 实际是使用了Object.preventExtensions(对象)和给每个属性设置configurable:false
  • 对象密封后不可添加和删除属性，但是可以修改属性值，一般对象保护到这个级别就可以了

3）、冻结

  • Object.freeze(对象)
  • 属性既不能添加、也不能删除，也不能修改
  • 相当于在密封后添加了writable:false

3、Object.create

  • 在不使用构造函数的情况下，可以使用Object.create()；来创建并继承某个对象，也可以在创建的时候给新对象强行添加属性
  • a：创建新对象
  • b：设置新对象继承父对象
  • c：强行为新对象添加自有属性
      let obj = {
        n: 1000000000,
        b: "n*",
      };
      let zi = Object.create(obj, {
        name: {
          value: "张三",
          writable: true,
          enumerable: true,
          configurable: false,
        },
      });


三、替换this指向

1、call(当次改变)

  • 使用函数自带的call()方法，将需要指向的对象作为第一参数传进去，可以使得this指向该对象，然后之后的参数依次排列
  • function.call(对象,参数1，参数2…)
  • call()的作用：1、调用了函数；2、将函数中的this指向传入的对象参数，3、传实参
      function jisuan(base, a, b) {
        console.log(`${this.name}的工资为：${base + a + b}`);
      }
      let zhang = { name: "张三" };
      jisuan.call(zhang, 5000, 2000, 2000);

2、apply（当次改变）

  • 当传入的实参为数组时，使用apply()方法
  • apply（）的作用：1、调用函数；2、将函数的this指向传入的对象；3、先拆散数组，再传实参
function jisuan(base, a, b) {
        console.log(`${this.name}的工资为：${base + a + b}`);
      }
      let zhang = { name: "张三" };
      jisuan.call(zhang, 5000, 2000, 2000);
      jisuan.apply(zhang, [5000, 2000, 2000]);

3、bind(永久绑定this指向和参数)

  • 函数.bind(对象，[参数])

  • bind的使用方法：1、创建一个新的函数；2、将新函数里的this替换为传入的对象，参数可以替换

  • 永久绑定后，函数中的this永久已被替换，已无法再改变

      function jisuan(base, a, b) {
        console.log(`${this.name}的工资为：${base + a + b}`);
      }
      let jisuan2 = jisuan.bind(zhang);
      jisuan2(500, 20, 30);
      let jisuan3 = jisuan.bind(zhang, 1000);
      jisuan3(20, 30);


四、Es5新增的数组方法

1、every()

1）、检查数组的每个值是否都满足要求，自带循环，每次循环都会调用一次回调函数

2）、参数是一个回调函数，并且会给我们的回调函数遍历的传入三个实参（原数组当前元素的值、当前的下标、原数组）

3）、返回true或false

4）、不改变原数组

5）、代码演示

      //判断数组的每一个元素都为偶数
      let a = [2, 3, 4, 5, 6, 7];
      console.log(
        a.every((value, index, arr) => {
          return value % 2 == 0;
        })
      );

2、some()

1）、检查数组的元素是否有满足条件的（刚好跟every相反）

2）、参数是一个回调函数，并且会给我们的回调函数遍历的传入三个实参（原数组当前元素的值、当前的下标、原数组）

3）、返回true或false

4）、不改变原数组

5）、代码演示

      //判断数组是否存在奇数
      let a = [1, 2, 3, 4, 5, 6, 7];
      console.log(
        a.some((value, index, arr) => {
          return value % 2 != 0;
        })
      );

3、forEach()

1）、用来遍历索引数组

2）、参数是一个回调函数，并且会给我们的回调函数遍历的传入三个实参（原数组当前元素的值、当前的下标、原数组）

3）、无返回值

4）、不改变原数组

5）、代码演示

      let a = [1, 2, 3, 4, 5, 6];
      a.forEach((v) => {
        console.log(v);
      });

4、map()

1）、读取原数组中的每个值，可进行修改，之后生成一个新数组返回

2）、返回一个数组

3）、不改变原数组

4）、代码演示

      let a = [1, 2, 3, 4, 5, 6];
      let b = a.map((v) => {
        return (v += 2);
      });
      console.log(a, b);

在这里插入图片描述

5、filter()过滤

1）、遍历数组元素，将符合条件的元素过滤出来，追加到新的数组中

2）、返回一个新的数组

3）、参数任然是一个回调函数

4）、不改变原数组

5）、代码演示

      let a = [1, 2, 3, 4, 5, 6];
      let b = a.filter((v) => {
        if (v > 4) {
          return v;
        }
      });
      console.log(a, b);

在这里插入图片描述

6、reduce()

1）、遍历数组，将元素跟储存值进行处理，并返储存值

2）、参数是一个回调函数和一个储存初始值，回调函数有四个参数：储存值、元素值、元素下标、数组，回调函数需要返回值

3）、返回一个值（储存值）

4）、不改变原数组

5）、代码演示

      let a = [1, 2, 3, 4, 5, 6];
      let b = a.reduce((result, v) => {
        if (v > 3) {
          return result + v;
        } else {
          return result;
        }
      }, 0);
      console.log(a, b);

在这里插入图片描述

又一个纪年
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES5的新特性（详细）
02-19
学习ES5 的新特性看这篇就够了
es5-shim.js
08-31
`es5-shim.js` 是一个JavaScript库，旨在为不完全支持ECMAScript 5（ES5）特性的旧版浏览器提供兼容性支持。这个库由 kangax 开发，它的主要目标是使得在那些只支持ECMAScript 3或者更早版本的环境中，能够使用ES5的...
九大ES5特性，巩固你的JavaScript基础
青轩桃李能几何，流光欺人忽蹉跎
08-27 709
在编程中，函数是一段可重复使用的代码块，用于执行特定的任务或计算。通过函数的定义和调用，我们可以把代码分成小块，使得程序结构更清晰，易于维护和扩展。函数名称：给函数取一个可识别的名称，用于后续的函数调用。参数列表：定义函数需要接收的参数，可以是零个或多个参数。每个参数都有一个名称和类型。函数体：函数体是函数的实际执行部分，包含一系列的语句和算法，用于完成特定的任务。返回值：函数可以选择性地返回一个值作为结果。返回值的类型可以是任意类型，也可以是空。
前端---【js阶段:ES5的使用】
m0_61307468的博客
04-03 673
ES5 除了正常运行模式（又称为混杂模式），还添加了第二种运行模式："严格模式"（strict mode）。严格模式顾名思义，就是使 JavaScript 在更严格的语法条件下运行。1.1作用消除代码运行的一些不安全之处，保证代码运行的安全为未来新版本的 JavaScript 做好铺垫1.2严格模式声明1.2.1全局开启"user strict"; 1.2.2函数内部function fn() {"user strict"} 只会在函数的内部开启严格模式(1) 不允许使用未声明的变量(2)函数内部的
ES5，ES6的简要说明及浏览器支持性总结(1)
最新发布
2401_84150168的博客
05-05 869
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
es5和es6区别
m0_53579196的博客
04-19 5563
2、块级作用域：在ES5中，只存在全局作用域和函数作用域，而ES6中增加了块级作用域，对于if、for、switch等代码块内部所声明的变量，在外部是不可见的。总之，ES6相对于ES5来说是一个更加完善和现代化的JavaScript版本，提供了更多方便的语法和功能特性，能够使得开发者更加高效和舒适地进行开发工作。同时对于函数参数的默认值、rest参数等也进行了增强和优化。3、箭头函数：ES6中新增了箭头函数，可以更为简洁地定义函数，同时箭头函数没有自己的this，它的this绑定在父级作用域的this上。
Javascript的es5和es6
2202_75802608的博客
06-09 1692
es5和es6的关键字使用，包括继承方式不同的优点和缺点
ES5和ES6
hzg_hou的博客
05-17 273
ES5和ES6
Es5.rar_es5
09-24
在“Robotic university exercise, part n°5”中，你可能需要运用这些ES5特性来编写控制机器人的代码。这可能涉及到事件监听、数据处理、状态管理等多个方面。例如，使用数组方法处理传感器数据，使用闭包封装特定...
ES6转ES5实例工程
01-08
**标题与描述解析** 标题"ES6转ES5实例工程"指出这是一个实际操作项目，目的是将使用...通过深入理解ES6和ES5的差异，以及如何利用工具进行转换，开发者可以更好地利用现代JavaScript特性，同时保证代码的广泛适用性。
继承行为在 ES5 与 ES6 中的区别详解
11-29
3. ES6的`super`关键字还可以用于在子类方法中调用父类的方法，这是ES5中没有的特性。 4. 在ES6中，如果子类构造函数不调用`super`，JavaScript会抛出错误，强调了子类实例的构建必须先遵循父类的规则。 理解这些...
JS(ES5)的基本知识
qq_48637533的博客
08-26 1164
一个学习js（ES5）的笔记
JavaScript快速学习及ES5标准通览
world_universe的博客
09-22 264
以es5标准规范为基础快速过一遍Javascript，以便能看懂boardgame.io教程的源代码。
ES5和ES6的区别是什么？
Mxy18851251178的博客
10-21 613
es6中的symbol是一种新的原始数据类型，用于表示独一无二的值，最大的用法是用来定义对象的唯一属性名；它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。4、箭头函数中 this 的指向不同：在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。ES6中引入了Promise，它提供了一种更好的异步编程方式，用于处理异步操作。2、 箭头函数全都是匿名函数：普通函数可以有匿名函数，也可以有具名函数。1、外形不同：箭头函数使用箭头定义，普通函数中没有。
JavaScript中ES5和ES6的区别
weixin_73426945的博客
07-16 526
💫总之，相对于ES5，ES6提供了更多方便的语法和功能特性，使得开发者能够更加高效和舒适地进行开发工作。⭐️变量声明方式：在ES5中，使用var关键字进行变量声明，而ES6引入了let和const关键字来声明变量。而在ES6中，增加了块级作用域，这意味着对于在if、for、switch等代码块中声明的变量，在外部是不可见的。⭐️箭头函数：ES6中新增了箭头函数，可以更简洁地定义函数，同时箭头函数没有自己的this，它的this绑定在父级作用域的this上。
ES5如何实现继承
冰的博客
07-25 600
这是因为name是基本数据类型，如果属性是基本数据类型而不是引用类型，原型链继承就不存在共享属性问题，每个实例都会拥有独立的副本，也就是说m1.name = ‘m1’这句代码，会在当前m1的对象上新增一个name属性，然后赋值为’m1’,并不会影响到它原型上面的name属性，当打印m2.name的时候，因为m2本身没有name属性，那它就会去它的原型对象上去找这个属性，在这个例子中，也就是父类的name（‘kitty’）。原型链继承只能继承一个父类的属性和方法，无法同时继承多个父类，这限制了它的灵活性。
es5 原型、原型链、继承
weixin_41154070的博客
03-02 767
1. 理解对象 2. 创建对象 2.1 工厂模式 function createPerson(name, age, job){ let o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ console.log(this.name); } return o; } let person1 = createPerson(“Nicholas”, 29, “software Engineer”); le
js笔记（三）ES5、ES5新增的数组的方法、字符串的方法、字符编码、对象的序列化和反序列化、bind
Start2019
10-10 847
一、ES5严格模式； 二、ES5新增的数组的方法：array.isArray()、indexOf()、lastIndexOf()、forEach()、map()、filter()、some()、every()； 三、字符串的方法（偏ES5）：indexOf()、lastIndexOf()、charAt()、charCodeAt()、slice()、substr()、substring()、toLowerCasse()、toUpperCase()、match()、replace()； 四、字符编码；
闲谈一下，ES3、ES4、ES5、ES6 分别是什么
m0_37695902的博客
07-27 1859
闲谈一下，ES3、ES4、ES5、ES6 分别是什么 上图按照时间顺序说明了JavaScript、JScript和ECMAScript的发展。 显示在网景工作的Brendan Eich临危受命，用十天时间设计出LiveScript的第一个版本。临时发布前为了讨好Sun公司和Java程序员，LiveScript改名为JavaScript。 微软这边不甘示弱，你的浏览器有脚本功能，我的浏览器也要有啊。于是在IE3.0版本附带推出JScript。为什么叫JScript？因...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值