三、类的本质
- class本质还是function
- 类的所有方法都定义在类的 prototype 属性上
- 类创建的实例，里面也有
__proto__指向类的 prototype 原型对象 - 所以ES6的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
- 所以ES6的类其实就是语法糖
语法糖：语法糖就是一种便捷写法．简单理解，有两种方法可以实现同样的功能，但是一种写法更加清晰、方便那么这个方法就是语法糖
四、ES5 中的新增方法
1、ES5 新增方法概述
ES5 中给我们新增了一些方法，可以很方便的操作数组或者字符串，这些方法主要包括：
- 数组方法
- 字符串方法
- 对象方法
2、数组方法
迭代(遍历)方法：forEach()、map()、filter()、some()、every();
- forEach()
语法：
array.forEach(function(currentValue, index, arr))
参数说明：
currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身
代码：
// forEach 迭代(遍历) 数组 var arr = [1, 2, 3]; var sum = 0; arr.forEach(function (value, index, array) { console.log("每个数组元素" + value); console.log("每个数组元素的索引号" + index); console.log("数组本身" + array); sum += value; }); console.log(sum);
- filter()
语法：
array.filter(function(currentValue, index, arr))
参数说明：
currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身
注意：
1、filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组
2、注意它直接返回一个新数组
代码：
// filter 筛选数组 var arr = [12, 66, 4, 88, 3, 7]; var newArr = arr.filter(function (value, index, array) { // return value >= 20; return value % 2 == 0; }); console.log(newArr);
- some()
语法：
array.some(function(currentValue, index, arr))
参数说明：
currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身
注意：
1、some() 方法用于检测数组中的元素是否满足指定条件，通俗点 查找数组中是否有满足条件的元素
2、注意它返回值是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false
3、如果找到第一个满足条件的元素，则终止循环，不在继续查找
代码：
// some 查找数组中是否有满足条件的元素 var arr = [10, 30, 4]; var flag = arr.some(function (value) { return value > 30; }); console.log(flag); var arr1 = ["red", "pink", "blue"]; var flag2 = arr1.some(function (value) { return value == "purple"; }); console.log(flag2);
- map()
语法：
array.map(function(currentValue, index, arr))
参数说明：
currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身
注意：
1、map() 方法创建一个新的数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成，主要用来处理数组元素
2、注意它直接返回一个新数组
3、不会改变原数组
代码：
// map 处理数组元素 var arr = [1, 4, 9]; var newArr = arr.map(function (num) { return num * 2; }); console.log(arr); console.log(newArr);
- every()
语法：
array.every(function(currentValue, index, arr))
参数说明：
currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身
注意：
1、every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试
2、注意它返回值是布尔值，如果所有元素满足条件，就返回 true，反之则返回 false
3、every() 方法需要判断多有数组元素
代码：
// every() 查询数组中是否全部满足条件 function callback(value, index, array) { return value >= 10; } var arr = [12, 5, 8, 130, 44]; var flag = arr.every(callback); console.log(flag); var arr2 = [12, 54, 18, 130, 44]; var flag2 = arr2.every(callback); console.log(flag2);
查询商品案例
- 定义数组对象数据
// 利用新增数组方法操作数据 var data = [ { id: 1, pname: "小米", price: 3999, }, { id: 2, pname: "oppo", price: 999, }, { id: 3, pname: "荣耀", price: 1299, }, { id: 4, pname: "华为", price: 1999, }, ];
- 获取元素
// 1. 获取相应的元素 var tbody = document.querySelector("tbody"); var search_price = document.querySelector(".search-price"); var start = document.querySelector(".start"); var end = document.querySelector(".end"); var product = document.querySelector(".product"); var search_pro = document.querySelector(".search-pro");
- 把数据渲染到页面中
// 2. 把数据渲染到页面中 function setData(mydata) { // 更新前清空数据 tbody.innerHTML = ""; mydata.forEach(function (value) { var tr = "<tr><td>" + value.id + "</td><td>" + value.pname + "</td><td>" + value.price + "</td></tr>"; tbody.insertAdjacentHTML("beforeend", tr); }); }
- 根据价格查询商品
// 3. 根据价格查询商品 // 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象 search_price.addEventListener("click", function () { var newData = data.filter(function (value) { return value.price >= start.value && value.price <= end.value; }); setData(newData); });
- 根据商品名称查找商品
// 4. 根据商品名称查找商品 // 如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高 search_pro.addEventListener("click", function () { var arr = []; data.some(function (value) { if (value.pname === product.value) { arr.push(value); return true; } }); setData(arr); });
- some() 和 forEach() 区别
- 如果查询数组中唯一的元素，用some方法更合适，在some 里面遇到 return true 就是终止遍历迭代效率更高
- 在forEach 里面 return 不会终止迭代
3、字符串方法
trim() 方法会从一个字符串的两端删除空白字符。
语法：
str.trim()
trim() 方法并不影响原字符串本身，它返回的是一个新的字符串。
5、对象方法
- Object.keys()
Object.keys() 方法返回一个所有元素为字符串的数组
语法：
Object.keys(obj)
效果类似 for…in
输出对象中值大于 2 的 key 的数组
代码：
// 用于获取对象自身所有的属性 var obj = { id: 1, pname: "小米", price: 1999, num: 2000, }; var arr = Object.keys(obj); console.log(arr); arr.forEach(function (value) { console.log(value); });
- Object.defineProperty()
Object.defineProperty() 定义新属性或修改原有的属性
语法：
Object.defineProperty(obj, prop, descriptor)
参数说明：
obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性
Object.defineProperty() 第三个参数 descriptor 说明：
descriptor 是一个对象
value：设置属性的值
writable：值是否可以重写。true | false 默认为 false
enumerable：目标属性是否可以被枚举。true | false 默认为 false
configurable：目标属性是否可以被删除或是否可以再次修改特性 true | false 默认为 false
