🍉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
相关文章
|
4天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
4天前
|
JSON JavaScript 前端开发
【JavaScript技术专栏】JavaScript的跨域通信方法
【4月更文挑战第30天】本文探讨了JavaScript中的跨域通信方法,包括:同源策略和跨域通信的概念,以及JSONP、CORS、WebSockets、`window.postMessage()`、代理服务器和WebAssembly的使用。这些技术各有优劣,适用于不同的场景,是Web开发者解决跨域问题的关键工具。随着Web技术的演进,跨域通信的解决方案也将不断更新。
|
2天前
|
JavaScript
Vue.js 中父组件调用子组件的方法
Vue.js 中父组件调用子组件的方法
13 2
|
2天前
|
JavaScript 前端开发 API
Vue.js 中子组件向父组件传值的方法
Vue.js 中子组件向父组件传值的方法
13 2
|
5天前
|
存储 JavaScript 前端开发
javascript中字符串处理,常用的方法汇总
javascript中字符串处理,常用的方法汇总
|
5天前
|
JavaScript 前端开发 索引
JavaScript 数组的索引方法数组转换为字符串方法
JavaScript 数组的索引方法数组转换为字符串方法
|
5天前
|
JavaScript 前端开发
11.JavaScript 事件的概念以及绑定方法
11.JavaScript 事件的概念以及绑定方法
|
5天前
|
前端开发 JavaScript
【Web 前端】JS继承的方法有哪些?
【4月更文挑战第22天】【Web 前端】JS继承的方法有哪些?
|
8天前
|
JavaScript 前端开发
js操作字符串的相关方法
js操作字符串的相关方法
9 3
|
8天前
|
JavaScript 前端开发
js 操作数组的方法
js 操作数组的方法
18 4