Learn some new methods of ES5 today, as well as ES6 and data rendering
1. ES5 new array method
- 5 iteration methods: forEach(), map(), filter(), some(), every();
- some(): The method is used to check whether the elements in the array meet the specified conditions (provided by the function). If one element satisfies the condition, the expression returns true, and the remaining elements will not be checked. Otherwise return false
- every(): The method is used to check whether all elements of the array meet the specified conditions (provided by the function). Return false if one of them does not match
- 2 merge methods: reduce(), reduceRight();
- The reduce() method receives a function as an accumulator, each value in the array (from left to right) is initially reduced, and finally calculated as a value
- The function of reduceRight() method is the same as that of reduce(), the difference is that reduceRight() accumulates the array items in the array from the end of the array forward.
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)
2. ES6
How to declare variables:
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)
Add new string:
//重复功能
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);
Arrow function:
+ 箭头函数是普通函数的简写形式
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);
}
}
Structure assignment:
基本
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()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
3. Data rendering
<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>