🍉JavaScript进阶——类的本质及ES5的新增方法

简介: 🍉JavaScript进阶——类的本质及ES5的新增方法

1. 类的本质


class本质还是fucntion


我们可以简单的认为 类 就是构造函数的另一种写法


构造函数的几大特点:


  1. 构造函数有原型对象prototype
  2. 构造函数原型对象prototype里面有constructor 指向构造函数本身
  3. 构造函数可以通过原型对象添加方法
  4. 构造函数创建的实例对象有__proto__原型指向 构造函数的原型对象


经过验证,类就是构造函数的另外一种写法


新的class的写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

所以ES6的类就是语法糖,语法糖就是一种便捷的写法。


2. ES5新增方法概述


ES5中新增的一些方法,可以很方便的操作数组或者字符串,这些方法主要包括:


  • 数组方法
  • 字符串方法
  • 对象方法


2.1 数组方法


迭代(遍历)方法:forEach(),map(),filter(),some(),every();


foreach()方法


b7088df783b341058a3b00e13054da02_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

700dfc2f844545c794ce41808dc2780f_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


map()方法


map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。


const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
复制代码


filter()方法


filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组它直接返回一个新数组


8863eb54872c413199b30c05300f9d40_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


some()方法


用于检测数组中的元素是否满足指定条件。通俗点 查找数组中是否有满足条件的元素

注意它返回值是布尔值,如果查到这个元素,就返回true,如果查找不到就返回false。

如果找到第一个满足条件的元素,则终止循环,不再继续查找。


be30f6f660e840ad8c0f9b282a56cee5_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


every()方法


every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。


注意:若收到一个空数组,此方法在一切情况下都会返回 true。


const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// expected output: true
复制代码


注意:


foreach和some的区别


  1. 在foreach里面 return 不会终止迭代
  2. 在some里面遇到return 就会终止迭代,效率更高
  3. 在filter里面return不会终止迭代


2.2 字符串方法


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


str.trim()
复制代码


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


var str = "   chengzi  "
        var str1 = str.trim()
        console.log(str1);
复制代码


注意:trim方法不会去掉中间的空格,它只会去掉两端的空格


2.4 对象方法


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


Object.defineProperty(obj,prop,descriptor)
复制代码


  • obj:必需。目标对象
  • prop:必需。需定义或修改的属性的名字
  • descriptor:必需。目标属性所拥有的特性


e860438ff6c7461e833cac1549d3b4df_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


第三个参数descriptor说明:以对象形式{}书写


  • value:设置属性的值 默认的值undefined
  • writable:值是否可以重写。true|false 默认为false
  • enumerable:目标属性是否可以被枚举(遍历)。true|false 默认为false
  • configurable:目标属性是否可以被删除或是否可以再次修改特性true|false 默认为false
相关文章
|
24天前
|
前端开发 JavaScript
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
85 58
|
2月前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
69 13
|
4月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
352 62
|
4月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
108 5
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
4月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
51 1
|
4月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
96 7
|
4月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
4月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
4月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。

热门文章

最新文章