目录
3. ES5中的新增方法
3.2 数组方法
迭代（遍历）方法：forEach()、map()、filter()、some()、every()
array.forEach(function(currentValue,index,arr){
})- currentValue：数组当前项的值
- index：数组当前项的索引
- arr：数组对象本身
1.forEach
<script>
// forEach 迭代(遍历) 数组
var arr = [1, 2, 3];
arr.forEach(function (value, index, array) {
console.log("每个数组元素：" + value);
console.log("每个数组下标" + index);
console.log("数组本身：" + array);
})
</script> 
<script>
// forEach 迭代(遍历) 数组
var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function (value, index, array) {
sum += value;
})
console.log(sum); //6
</script>2. 筛选数组filter()
array.filter(function(currentValue, index, arr ) {
})- filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组
- 注意它直接返回一个新数组
- currentValue：数组当前项的值
- index：数组当前项的索引
- arr：数组本身
<script>
// filter 筛选数组
var arr = [1, 2, 3, 4, 5, 6];
var newArr = arr.filter(function (value, index) {
return value % 2 === 0;
})
console.log(newArr);
</script> 
3. some()方法
array.some(function(currentValue, index, arr) {
})- some()方法用于检测数组中的元素是否满足指定条件，查找数组中是否有满足指定条件的元素
- 注意它的返回值是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false
- 如果找到第一个满足条件的元素，就终止循环，不再继续查找
- currentValue：数组当前项的值
- index：数组当前项的索引
- arr：数组对象本身
<script>
var arr = [1, 2, 3, 4, , 5];
var flag = arr.some(function (value) {
return value > 3;
});
console.log(flag); //true
</script> <script>
var arr1 = ['red', 'blue', 'pink', 'green'];
var flag = arr1.some(function (value) {
// 循环只执行3次 循环到数组中第3个元素就不再执行
return value == 'pink';
});
</script>案例：查询商品
------------------------------------------------------------渲染页面数据------------------------------------------------
步骤：
- 设置数据，数组类型，数组中的每个元素都是一个对象，对象里是相应的商品信息
- 获取页面元素
- 通过forEach()遍历对象数组，每循环一次，就生成一行（tr）
- 一个tr里面有3个td，每一个td里的内容依次是数组中遍历的对象的属性value.xx
注意：
1.这里的value是数组中的每一个元素，即每一个对象，所以如果要调用对象中的属性就可以用value.xx
// 1.获取元素
var tbody = document.querySelector('tbody');
data.forEach(function (value) {
// console.log(value);
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'
tbody.appendChild(tr);
});-----------------------------------------------------根据价格筛选商品---------------------------------------------------
步骤：
- 获取数据
- 给按钮绑定点击事件
- 当搜索按钮发生点击的时候，用filter()筛选出价格大于第一个文本框的文本值，小于第二个文本框的文本值得数组元素（返回的还是对象数组）
- 接着要把获取到的新数据重新渲染到页面中，所以把之前的渲染操作封装成了一个函数setData()，设置一个参数表示每次传进来的新的数据
- 因为页面一加载的时候就要显示数据，所以在一开始就要调用setData()
- 每次渲染的时候，就要把tbody里面的内容（tbody.innerHTML）先清空
注意：
1.给setData()设置一个形参，使得每次使用的数据都是获取到的最新数据
2.如果得到新数据之后直接渲染页面，就会在原来获取到的数据的后面继续添加，这样就重复了，所以我们要在渲染页面的第一步把tbody的内容清空
setData(data);
// 2.把数据渲染到页面
function setData(myData) {
tbody.innerHTML = '';
myData.forEach(function (value) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'
tbody.appendChild(tr);
});
}
// 3.根据价格查询商品
// 当我们点击了按钮，就用filter()筛选出复合条件的值
search_price.addEventListener('click', function () {
var newData = data.filter(function (value) {
return value.price >= start.value && value.price <= end.value;
});
setData(newData);
});----------------------------------------------------根据商品名称筛选商品-------------------------------------------
步骤：
- 获取元素
- 给查询按钮绑定点击事件
- 当点击按钮的时候，使用some方法 判断data对象数组中是否有和输入框中输入的文本相同的数据，如果有，一定要返回true，并且把获取到的那个值添加到空数组里
- 然后再把这个数组作为参数调用setData()重新渲染页面
注意：
1.如果查询数组中唯一的元素，用some方法更合适，因为它找到这个元素，就不再进行循环，效率更高
2.some方法中，如果满足条件，就一定要返回true，因为some()的返回值就是true/false
// 4.根据商品名称查找商品
search_pro.addEventListener('click', function () {
var arr = [];
data.some(function (value) {
if (value.pname == product.value) {
arr.push(value);
return true;
}
});
setData(arr);
});---------------------------------------------------------------完整代码------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 400px;
border: 1px solid #000;
border-collapse: collapse;
margin: 0 auto;
}
td,
th {
border: 1px solid #000;
text-align: center;
}
input {
width: 50px;
}
.search {
width: 600px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="search">
按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button
class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button
class="search-pro">查询</button>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 利用新增数组方法操作数据
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 search_pro = document.querySelector('.search-pro');
var product = document.querySelector('.product');
setData(data);
// 2.把数据渲染到页面
function setData(myData) {
tbody.innerHTML = '';
myData.forEach(function (value) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'
tbody.appendChild(tr);
});
}
// 3.根据价格查询商品
// 当我们点击了按钮，就用filter()筛选出复合条件的值
search_price.addEventListener('click', function () {
var newData = data.filter(function (value) {
return value.price >= start.value && value.price <= end.value;
});
setData(newData);
});
// 4.根据商品名称查找商品
search_pro.addEventListener('click', function () {
var arr = [];
data.some(function (value) {
if (value.pname == product.value) {
arr.push(value);
return true;
}
});
setData(arr);
});
</script>
</body>
</html>
3.3 字符串方法
trim()方法会从一个字符串的两端删除空白字符
str.trim()trim()方法并不影响原字符串本身，它返回的是一个空字符串
<script>
// trim 方法去除字符串两侧空格
var str = ' andy ';
console.log(str);
var str1 = str.trim();
console.log(str1);
</script>
应用：
<body>
<input type="text"> <button>提交</button>
<div></div>
<script>
var input = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function () {
var str = input.value.trim();
if (value === '') {
alert(111);
}
div.innerHTML = input.value.trim();
});
</script>
</body>3.4 对象方法
1.Object.keys()用于获取对象自身所有的属性
Object.keys(obj)- 效果类似for...in
- 返回一个由属性名组成的数组
<script>
// 用于获取对象自身所有的属性
var obj = {
id: 1,
pname: '小米',
price: 1999,
num: 2000
};
var arr = Object.keys(obj);
console.log(arr);
arr.forEach(function (value) {
console.log(value);
})
</script>
2.Object.defineProperty()定义对象中新属性或修改原有的属性
Object.defineProperty(obj, prop, descriptor);- obj：必需。目标对象
- prop：必需。需定义或修改的属性的名字
- descrptor：必需。目标属性所拥有的特性，以对象形式{}书写
- value：设置属性的值 默认为undefined
- writable：值是否可以重写。true|false 默认为false 是否可以被修改
- enumerable：目标属性是否可以被枚举（能不能被遍历） true|false 默认为false
- configurable：目标属性是否可以被删除 或是否可以再次修改第三个参数里面的特性 true|false 默认false
<script>
// Object.defineProperty() 定义新属性或修改原有的属性
var obj = {
id: 1,
pname: '小米',
price: 1999
};
Object.defineProperty(obj, 'num', {
value: 100
});
Object.defineProperty(obj, 'pname', {
value: '华为'
});
Object.defineProperty(obj, 'id', {
//不允许修改这个属性
writable: false
});
obj.id = 2
console.log(obj);
</script> 
Object.defineProperty(obj, 'address', {
value: '中国山东找蓝翔',
enumerable: true, //默认是false
// configurable: true
});
// delete obj.address
Object.defineProperty(obj, 'address', {
value: 'lajo ',
enumerable: true, //默认是false
// configurable: true
});
console.log(obj);
console.log(Object.keys(obj));
803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
