今天学习一些ES5新增的方法，以及ES6和数据渲染
一、ES5新增数组方法
- 5个迭代方法：forEach()、map()、filter()、some()、every()；
- some(): 方法用于检测数组中的元素是否满足指定条件（函数提供）。如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。否则返回false
- every(): 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。如果有一个不符合就返回false
- 2个归并方法：reduce()、reduceRight()；
- reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
- reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
var arr = [1,2,3]
//这个是传两个完整参数的，x为自定义的初始值，y为arr的当前子元素,相当等于0+1+2+3
arr.reduce((x,y)=>x+y,0)
//改变初始值，就相当等于100+1+2+3
arr.reduce((x,y)=>x+y,100)
二、ES6
声明变量方式：
var 声明变量，声明会提升,没有块级作用域的概念，全局和局部（函数内部）
let 有块级作用域，在一个大括号中用let声明的变量在外部不可访问了，每个大括号都是独立的作用域
for(let i = 0 ; i < aLi.length ; i ++){
aLi[i].onclick = function(){
console.log(i);// 对应下标
}
}
有了let声明我们在函数外部就无法访问到 i ，i作为下标只存在于for循环中， 所以，这个时候每个i都是独立的；
我们在点击的时候可以轻易的获取当前元素的下标，而不用做很多繁琐的处理了
const 声明变量 常量——无法改变的量，其他方面和let类似
ES6规定在某个区块中， 一旦用let或const声明一个变量，那么这个区块就变成块级作用域，用let 或者const声明的变量即为该
区块绑定， 该变量不受任何变量影响。
在该变量使用let声明前不可以用。在语法上，我们叫这种情况为：暂时性死区 (temporal dead zone，简称 TDZ)
新增字符串：
//重复功能
repeat();
'x'.repeat(3); //xxx
//判断这个字符串里面有没有这个字符
includes()
//判断这个字符串开头有没有这个字符
startsWith()
//判断这个字符串尾部有没有这个字符
endsWith()
//for of 可以用于遍历字符串、数组也可以， 但只能取值
var arr = ['a', 'b', 'c'];
for(let i of arr){
console.log(i); //'a' 'b' 'c'
}
为了解决字符串拼接繁琐，字符串不能换行问题，ES6标准里面给提供了新的方法，字符串模板，模板字符串
var str = `hello world`; //使用` `来表示，还可以实现换行
//用 ${ } 扩住变量让拼接变得非常容易;
var name = '哈哈';
var str = `
<table>
<tr>
<td>${
name}</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
`;
document.write(str);
箭头函数：
+ 箭头函数是普通函数的简写形式
var fn = function(){
console.log('666');
}
fn();
var fn = ()=>{
console.log('666');
}
fn();
let fn = ()=> console.log(666);
fn();
+ 把return也简化
var fn = function(a, b){
return a + b;
}
var res = fn(10, 20);
console.log(res);
var fn = (a, b)=> a + b;
var res = fn(10, 20);
console.log(res);
+ 箭头函数没有自己的this,导致内部的this就是外层代码块的this。正是因为这个，所以箭头函数也不能做构造函数
var obj = {
left : 200,
move : function(){
setTimeout( ()=>{
this.left = 100;
},1000);
}
}
结构赋值：
基本
var [a,b,c] = [1,2,3];
// a = 1
// b = 2
// c = 3
可嵌套
let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3
可忽略
let [a, , b] = [1, 2, 3];
// a = 1
// b = 3
不完全解构
let [a = 1, b] = [];
// a = 1, b = undefined
字符串等
let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'
应用：交换两个变量的值
var a = 10;
var b = 20;
[a,b] = [b,a];
console.log(a, b); //20 10
Set:
Set是新的数据结构。它类似于数组，但是成员的值都是唯一的，没有重复的值。是一个值的集合
add(value)：添加一个值，返回Set结构本身
delete(value)：删除某个值，返回布尔值
has(value)：返回布尔值，表示是否是成员
clear()：清除所有成员，无返回值
可以用于数组去重
var arr = [1, 2, 6, 2, 6];
var s = new Set(arr);
//把类数组对象转成数组返回
var newArr = Array.from(s);
console.log(newArr);
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
三、数据渲染
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #e5e5e5;
}
ul{
width: 1200px;
height: 800px;
border: 1px solid red;
margin: 50px auto;
}
ul li{
list-style: none;
width: 235px;
height: 300px;
background-color: #fff;
float: left;
margin: 10px;
}
ul li div{
height: 190px;
text-align: center;
}
ul li div img{
width: 160px;
height: 160px;
margin-top: 20px;
}
ul li .title{
font-weight: normal;
font-size: 14px;
text-align: center;
margin-bottom: 10px;
}
ul li .des{
font-size: 12px;
text-align: center;
margin: 10px 0;
}
ul li .price{
font-size: 12px;
text-align: center;
margin: 10px 0;
color: #ff6700;
}
</style>
<button>降序</button>
<button>升序</button>
<button>恢复</button>
<ul>
<!-- <li>
<div><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt=""></div>
<h3 class="title">小米MIX FOLD</h3>
<p class="des">天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">1699元</p>
</li> -->
</ul>
<script>
//后端传递
var data = [
{
"id" : 1,
"url" : "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=200&h=200&f=webp&q=90",
"title" : "Note 10 Pro",
"des" : "天玑1100年度旗舰芯，VC液冷散热",
"num" : 2,
"price" : 1699
},
{
"id" : 2,
"url" : "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8909080ddb0851af0b87530e2927844f.jpg?thumb=1&w=200&h=200&f=webp&q=90",
"title" : "Redmi Note 10 5G",
"des" : "5G小金刚，旗舰长续航",
"num" : 5,
"price" : 1099
},
{
"id" : 3,
"url" : "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5dc32ec73299ff79556dcd1cf0f0ac11.png?thumb=1&w=200&h=200&f=webp&q=90",
"title" : "小米MIX FOLD",
"des" : "折叠大屏｜自研芯片",
"num" : 6,
"price" : 9999
},
{
"id" : 4,
"url" : "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb69512d9d6430d865d457ec52eebb51.png?thumb=1&w=200&h=200&f=webp&q=90",
"title" : "小米11 Ultra",
"des" : "1/1.12''GN2｜2K四微曲屏",
"num" : 1,
"price" : 5999
},
{
"id" : 5,
"url" : "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34caee2c867bfd8c5e0dc2d8c663e121.jpg?thumb=1&w=200&h=200&f=webp&q=90",
"title" : "小米11 Pro",
"des" : "1/1.12''GN2｜骁龙888",
"num" : 10,
"price" : 4999
},
{
"id" : 6,
"url" : "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb554f30eaa0316b0a736c3d59f21584.png?thumb=1&w=200&h=200&f=webp&q=90",
"title" : "小米11 青春版",
"des" : "小米11 青春版 轻薄",
"num" : 2,
"price" : 2999
},
{
"id" : 7,
"url" : "https://i8.mifile.cn/v1/a1/d5a39c5e-28e7-f4c1-57fd-59933f26032b!100x100.jpg",
"title" : "小米米家空气净化器 2S",
"num" : 2,
"price" : 599
}
]
//获取元素
var ul = document.querySelector('ul');
var aBtn = document.querySelectorAll('button');
render();
//把数据渲染封装成一个函数
function render(){
//根据数据生产li元素
data.forEach(function(item){
//创建一个li标记
var li = document.createElement('li');
//给li标记赋值
if(item.id == 7){
li.innerHTML = `
<div><img src="${
item.url}" alt=""></div>
<h3 class="title">${
item.title}</h3>
<p class="price">${
item.price}元</p>
`;
}else{
li.innerHTML = `
<div><img src="${
item.url}" alt=""></div>
<h3 class="title">${
item.title}</h3>
<p class="des">${
item.des}</p>
<p class="price">${
item.price}元</p>
`;
}
//把创建的li标记追加到ul里面
ul.appendChild(li);
})
}
//绑定事件
aBtn[1].onclick = function(){
//重新渲染数据之前把之前的情况
ul.innerHTML = '';
data.sort(function(a, b){
return a.price - b.price;
})
render();
}
aBtn[0].onclick = function(){
//重新渲染数据之前把之前的情况
ul.innerHTML = '';
data.sort(function(a, b){
return b.price - a.price;
})
render();
}
aBtn[2].onclick = function(){
location.reload();
}
</script>