本文深入探讨ES6引入的重要新特性，包括let和const声明、解构赋值、扩展运算符、箭头函数、模板字符串、Symbol类型、Set与Map数据结构、Iterator接口和for...of循环等，同时涵盖函数this指向、面向对象编程、类数组转数组、数组和对象的扩展方法等内容。
let和const命令：
ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。
不存在变量提升
let不允许在相同作用域内，重复声明同一个变量。
ES6允许块级作用域的任意嵌套，外层无法读取内层作用域的变量，反之可以
const声明一个只读的常量。一旦声明，常量的值就不能改变。
const声明的常量，也与let一样不可重复声明。
const的作用域与let命令相同：只在声明所在的块级作用域内有效。
核心：var 和 let const的区别
变量的解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构.
解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者 obj[key]等传统方式进行赋值
数组的解构赋值
对象的解构赋值
字符串的解构赋值。
核心的应用(返回多个参数，交换位置，for...of循环)
[注意]一定要用一对小括号包裹解构赋值语句，JS引擎将一对开放的花括号视为一个代码块。语法规定，代码块语句不允许出现在赋值语句左侧，添加小括号后可以将块语句转化为一个表达式，从而实现整个解构赋值过程
扩展运算符
扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值
rest运算符
rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一 个数组
字符串扩展
模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通 字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量（${}）。
repeat(n)方法返回一个新字符串，表示将原字符串重复n次。
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
=>函数
函数默认值
箭头函数有几个使用注意点。
1、函数体内this对象，就是定义时所在的对象，而不是使用时所在的对象。This不会改变了。
2、不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
3、不可以使用arguments对象，该对象在函数体内不存在。
4、箭头函数一定是匿名函数。
5、箭头函数应用总结：
箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如用在map、reduce、filter的回调函数定义中；
不要在最外层定义箭头函数，因为在函数内部操作this会很容易污染全局作用域。最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内；
箭头函数最吸引人的地方是简洁。在有多层函数嵌套的情况下，箭头函数的简洁性并没有很大的提升，反而影响了函数的作用范围的识别度，这种情况不建议使用箭头函数。
Symbol类型
symbol--表示独一无二的值，它是js中的第七种数据类型。
基本数据类型：null undefined number boolean string symbol
引用数据类型：object
Symbol():首字母大写。
symbol 函数前不能使用new,否则会报错，原因在于symbol是一个原始类型的 值，不是对象。
1、symbol函数接收一个字符串作为参数，表示对symbol的描述，主要是为了 在控制台显示，或者转为字符串的时候，比较容易区分。描述的内容相同仅仅表示 的是描述，不代表其他的意义。
2、symbol数据类型转换。
symbol可以利用String()、toString()转换成字符串
利用Boolean()或者！转换成布尔值(只有true值)
不能转换成数字。
不能使用任何运算符进行运算。
3、作为对象的属性名。
4、注意事项
不能直接使用[symbol()]作为键值，最好添加对应的参数进行区分，而且也不能被 for...in遍历出来。但可以通过 Object.getOwnPropertySymbols(obj)方法获 取一个对象所有的symbol属性。
Set（array）和Map(object)结构
ES6提供了数据结构set. 它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set 本身是一个构造函数，用来生成 Set 数据结构，数组作为参数。
每一项即是键也是值,键和值是相同的。
1、创建一个Set；
2、Set类的属性--size
3、Set类的方法
Set.add(value) 添加一个数据，返回Set结构本身，允许进行链式操作。
Set.delete(value) 删除指定数据，返回一个布尔值，表示删除是否成功。
Set.has(value) 判断该值是否为Set的成员，返回一个布尔值。
Set.clear() 清除所有的数据，没有返回值。
forEach()：使用回调函数遍历每个成员
数据结构--map
JavaScript 的对象（Object），只能用字符串当作键。这给它的使用带来了很大 的限制。ES6 提供了 Map 数据结构。它类似于对象，但是“键”的范围不限于 字符串，各种类型的值（包括对象）都可以当作键。Symbol类型当作key输出时
无法确认是同一个key.
1、创建一个map
2、map类的属性--size
3、map类的方法
map.set(key,value) :设置键名key对应的键值value,然后返回整个map结构，如 果key已经有值，则键值会被更新，否则就生成该键，可以链式操作。
map.get(key) get方法读取key对应的键值，如果找不到key，返回undefined
map.delete(key) 删除某个键，返回true.如果删除失败，返回false.
map.has(key) 方法返回一个布尔值，表示某个键是否在当前map对象之中。
map.clear() 清除所有数据，没有返回值
map.keys() 返回键名的遍历器
map.values() 返回键名/键值的遍历器
map.entries() 返回键值对的遍历器
map.forEach() 使用回调函数遍历每个成员。
iterator接口和for...of循环
它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作
Iterator 的作用有三个：
一是为各种数据结构，提供一个统一的、简便的访问接口；
二是使得数据结构的成员能够按某种次序排列；
三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。
Generator 函数的语法
Generator函数的概念
Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同
Generator 函数是分段执行的，yield表达式是暂停执行标记，而next方法可以恢复执行
yield 表达式
由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态， 所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。
yield表达式与return语句的区别
既有相似之处，也有区别。相似之处在于，都能返回紧跟在语句后面的那个表达式的值。区别在于每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。
Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数。
数组和对象的扩展
数组的扩展方法
1、Array.from()方法用于将对象转为真正的数组(类数组转数组)
2、Array.of()方法用于将一组值，转换为数组。
3、fill()方法使用给定值，填充一个数组。
对象的扩展方法
1、对象的简洁表示法
2、object.assign()用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。
应用
1．了解class面向对象编程
2．掌握es6语法的灵活运用
综合应用
3．封装拖拽效果
4．封装常见兼容
1.<body>
<script type="text/javascript">
//this是javascript里面的关键字,存在于函数内部.
//this指向有一个总的原则,谁调用这个函数,this指向谁.
//但是有一个总的原则，那就是this指的是调用函数的那个对象
//1.普通函数this
/* function fn(){
alert(this);//[object window]
}
fn();
window.fn(); */
//2.对象的方法
/* var num=100;
var obj={
num:10,
fn:function(){
alert(this);//[object Object]
alert(this.num);//10
}
}
obj.fn();//obj调用
var c=obj.fn;
c();//window调用的额，结果是100 */
//3.事件处理函数里面
/* document.onclick=function(){
alert(this);//document调用[object HTMLDocument]
} */
//4.定时器和回调函数(函数做参数)
/* window.setTimeout(function(){
alert(this);//[object Window]
},2000); */
d//直接执行的函数都是window调用的
/* function a(fn){
fn();//[object Window]
}
a(function(){ alert(this) }); */
//5.构造函数:首字母大写,new运算符调用.
//构造函数this指向new出来的实例对象.
/* function Fn(){
this.num=10;
}
var f1=new Fn();
var f2=new Fn();
alert(f1.num);//10
alert(f2.num);//10 */
</script>
</body>
2.
<html lang="zh">
<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>
</head>
<body>
<ul>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
</ul>
<script type="text/javascript">
//函数是对象,同时也是对象的构造器
//函数也有属性和方法
//alert(function(a,b,c,d,e){}.length); //代表函数参数的个数.
//函数下面的方法：call/apply/bind
//上面三个方法主打用途:改变this指向.
//call和apply改变this指向.
//第一个参数this指向
//从第二个参数开始:代表函数的参数.
//call从第二个参数开始代表函数的参数，用逗号分隔。
//apply第二个参数代表函数的参数，将参数放入数组中.
/* var a=10;
var obj={
a:100,
showa:function(){
alert(this.a);
}
}
obj.showa();//100
obj.showa.call(window);//10
obj.showa.apply(window);//10 */
/* var a=10;
var obj={
a:100,
showa:function(b,c){
alert(this.a+b+c);
}
} */
//obj.showa(10,20);//130
//obj.showa.call(window,10,20);//40
//obj.showa.bind(window,10,20)();//40 返回的是函数体，需要再次调用.
//obj.showa.apply(window,[10,20]);//40
//案例:点击li换内容
/* function fn(){
alert(1);
}
setTimeout(fn,2000); */
/* var aLi=document.querySelectorAll('li');//对于数组对象，只能挨个调用事件，用for循环挨个赋事件
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
//this:当前点击的li
alert(this)//
setTimeout(function(){
this.innerHTML='222222222222222222';
alert(this)//
},2000);//和定时器无关,主动触发.
//若没有call(this)，则定时器无效，因为setTimeout是window调用的， this指向window
}
} */
var aLi=document.querySelectorAll('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
//this:当前点击的li
alert(this)
setTimeout(function(){
this.innerHTML='222222222222222222';
alert(this)//加上call(this),后，this指向外面的this
}.call(this),2000);//和定时器无关,主动触发.，因为fn()会自动调用，fn.call()也会
}
}
//bind:改变this指向,参数和call一样,返回的是函数体（call返回的函数，会自动执行）,需要再次触发.
/* var aLi=document.querySelectorAll('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
//this:当前点击的li
setTimeout(function(){
this.innerHTML='222222222222222222';
}.bind(this),2000);
}
} */
/* var aLi=document.querySelectorAll('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
//this:当前点击的li
var _this=this;//将this存储下来.
setTimeout(function(){
_this.innerHTML='222222222222222222';
},2000);
}
} */
</script>
</body>
<body>
<ul>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
</ul>
3.
<script type="text/javascript">
//一.定义变量:var和let
//var定义的变量:局部变量(函数内部)和全局变量
/* var num=10;//全局
var fn=function(){
var num=100;//局部变量,作用于函数内部
} */
//1.let用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效.
//{代码块}
/* for(var i=0;i<10;i++){//i:全局的
console.log(i);
}
for(let j=0;j<10;j++){//j:代码块内有效
console.log(j);
} */
//alert(i);
//alert(j);//j is not defined
//2.只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。
/* var aLi=document.querySelectorAll('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
alert(i);//6//因为for不依赖点击onclick，它照常循环，等点击时已经循环完了
}
} */
/* var aLi=document.querySelectorAll('li');
for(let i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
alert(i);//0,1,2,3,4,5
}
} */
/* var a=100;
var a=200;
function fn(){
num=200;
}
fn();
alert(num); 200*/
//3.不存在变量提升
/* alert(num);//undefined
var num=10;
alert(10); */
//alert(num);//报错num is not defined
//let num=10;
//alert(num);//10
//4.let不允许在相同作用域内，重复声明同一个变量。
//let a=100;
//let a=200;//报错的
//5.ES6允许块级作用域的任意嵌套，外层无法读取内层作用域的变量，反之可以
/* {
let a=10;
alert(a);//10
//alert(b);//报错
{
alert(a);//10
let b=20;
{
alert(b);//20
}
}
}
alert(a);//报错
alert(b);//报错 */
//二.常量:值不能改变.
const num=10;
num=100;
console.log(num);//报错.
</script>
</body>
4.
<body>
<script type="text/javascript">
//let arr=[100,200,300,400,500];
/* let a=arr[0];
let b=arr[1];
let c=arr[2];
let d=arr[3];
let e=arr[4];
console.log(a,b,c,d,e); */
//解构赋值:解构的作用是可以快速取得数组或对象当中的元素或属性及值.
//1.数组的解构赋值.
/* let [a,b,c,d,e]=arr;
console.log(a,b,c,d,e); */
/* let arr=[1,2,[3,4,[5,6,[7,8,[9]]]]];
let [a,b,[c,d,[e,f,[g,h,[i]]]]]=arr;
console.log(a,b,c,d,e,f,g,h,i); */
//核心:一一匹配.
//let [a,b]=[2,4,6];
//console.log(a,b);
//let [a,b,c,d]=[1,2,3];
//console.log(a,b,c,d);//1 2 3 undefined
/* let [a,b,c,d]=[1,2,[3,4]];
console.log(a,b,c,d);//1 2 [3, 4] undefined */
//函数应用解构赋值.
/* function fn([a,b,c,d]){
console.log(a,b,c,d);
}
fn([1,2,3,4]) */
/* function arrcalc(arr){
arr.sort(function(a,b){
return a-b;
});
return [arr.length,arr[arr.length-1],arr[0]];
}
let [len,max,min]=arrcalc([12,6,89,5,7,123,6,8]);
console.log(len);
console.log(max);
console.log(min); */
//2.对象的解构赋值.
/* let obj1={
a:1,
b:2,
c:3
}; */
//变量的名称和属性名一致.
/* let {b,c,a}=obj;
console.log(b);//2
console.log(c);//3
console.log(a);//1 */
/* let {name,age,sex,obj}={name:'zhangsan',age:100,sex:'男',obj:obj1};
console.log(obj); */
//如果变量名和属性名不一致,通过赋值的方式改变,得到值的是后者.
//let {name:xingming,age,sex}={name:'zhangsan',age:100,sex:'男'};
//console.log(xingming);
//console.log(name);//空
//字符串的解构赋值
/* let str='javascript';
let [a,b,c,d,e,f,g,h,i,j]=str;
console.log(a,b,c,d,e,f,g,h,i,j); */
/* var a=10;
var b=50;
var [a,b]=[b,a];
console.log(a,b);//50,10 */
//for...of最好的循环.
/* let arr=['zhangsan','lisi','wangwu'];
for(let value of arr){
alert(value);
} */
//遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。
//Iterator 的作用有三个：
//一是为各种数据结构，提供一个统一的、简便的访问接口；
//二是使得数据结构的成员能够按某种次序排列；
//三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。
/* let arr=['zhangsan','lisi','wangwu'];
let obj={
a:1,
b:2,
c:3
} */
//let str='hello';
/* for(var value of obj){
alert(value);//obj is not iterable
} */
/* for(var value of str){
alert(value);
} */
//console.log(arr[Symbol.iterator]);
//console.log(str[Symbol.iterator]);
//console.log(obj[Symbol.iterator]);//undefined
</script>
</body>
5.
<body>
<ul>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
</ul>
<script type="text/javascript">
//扩展运算符:扩展运算符用三个点表示，功能是把数组或类数组对象展开成一系列用"逗号"隔开的值.
//var arr=[14,5,6,32,785,69,1];
//console.log(arr);
//console.log(...arr);
//1.求数组的最大最小值.
//console.log(Math.max(...arr));//14,5,6,32,785,69,1
//2.数组的合并
//var arr1=[1,2,3];
//var arr2=[4,5,6];
//var arr3=[7,8,9];
//console.log([...arr1,...arr2,...arr3]);// [1, 2, 3, 4, 5, 6, 7, 8, 9]
//3.浅拷贝--引用传递
/* let a=[1,2,3];
let b=a;//引用传递
b.push(4);
console.log(a);//[1, 2, 3, 4]
console.log(b); *///[1, 2, 3, 4]
/* let a=[1,2,3];
let b=[];
for(let i in a){
b[i]=a[i];
}
b.push(4);
console.log(a);
console.log(b); */
/* let a=[1,2,3];
let b=[...a];
b.push(4);
console.log(a);
console.log(b); */
//4.类数组转真正的数组.
var aLi=document.querySelectorAll('li');//类数组
aLi=[...aLi];
aLi.push('<p></p>');
console.log(aLi);
</script>
</body>
6.
<body>
<ul>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
</ul>
<script type="text/javascript">
//箭头函数最吸引人的地方是简洁.箭头函数是函数的一种简洁的写法.
//省略了function 和 return
//如果函数执行多条语句,添加语句块.
//除了一个参数,其他情况参数都不能省略括号.
/* var fn=function(str){
return str;
} */
//var fn=str=>str;
//alert(fn('hello123'));
/* var sum=function(a,b){
alert(a);
alert(b);
alert(a+b);
}
var sum=(a,b)=>{
alert(a);
alert(b);
alert(a+b);
} */
//函数体内this对象，就是定义时所在的对象，而不是使用时所在的对象。This不会改变了。
//不要在最外层定义箭头函数，因为在函数内部操作this会很容易污染全局作用域。最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内；
var obj={
num:10
}
var num=100;
/* function fn1(){
alert(this.num);
}
fn1.call(obj); */
var fn=()=>{
alert(this.num);
}
//fn();//[object Window]
//fn.call(obj);//100
var aLi=document.querySelectorAll('li');
for(var i=0;i<aLi.length;i++){
/* aLi[i].onclick=()=>{
alert(this);//window
} */
//最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内；
aLi[i].onclick=function(){//箭头函数的this来自父级.
setTimeout(()=>{
this.innerHTML='22222222222222';//this不会发生变化.
},2000);
}
}
//[123,456,789].forEach(v=>alert(v));
</script>
</body>
7.
<body>
<script type="text/javascript">
//数组的扩展方法
//1、Array.from()方法用于将对象转为真正的数组(类数组转数组)
/* let obj={
a:1,
b:2,
c:3
}; */
//对象需要有下标和length
/* let obj={
0:'zhangsan',
1:'lisi',
2:'wangwu',
length:3
}
console.log(Array.from(obj)); */// ["zhangsan", "lisi", "wangwu"]
//Set结构的新的数据类型,参数是数组,不允许重复.
let arr=[1,56,89,4,1,56,89,7,32,1,569,9];
/*console.log(arr);
let s1=new Set(arr);
console.log(s1);//set结构
console.log(Array.from(s1)); */
console.log(Array.from(new Set(arr)));
//2、Array.of()方法用于将一组值，转换为数组。
//3、fill()方法使用给定值，填充一个数组。
//对象的扩展方法
//1、对象的简洁表示法
//2、object.assign()用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。
</script>
8.
<body>
<script type="text/javascript">
let str='ECMAscript';
//repeat(n)方法返回一个新字符串，表示将原字符串重复n次。
console.log(str.repeat(5));
//includes()：返回布尔值，表示是否找到了参数字符串。---indexOf
console.log(str.includes('scr'));//true
//startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
console.log(str.startsWith('EC'));//true
console.log(str.startsWith('ECWA'));//false
//endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
console.log(str.endsWith('ipt'));//true
console.log(str.endsWith('ot'));//false
</script>
</body>
10.
<body>
<script type="text/javascript">
//rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组
//取代arguments
function fn(b,c,...a){//rest运算符只能做最后一个参数
//b:1
//c:2
//alert(arguments.length);
//alert(arguments[0])
//alert(a.length);
//alert(a[0]);
for(var i=0,sum=0;i<a.length;i++){
sum+=a[i];
}
alert(sum);
}
fn(1,2,3,4,5,6,7,8,9,10);
</script>
</body>
cart.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/cart.css" />
</head>
<body>
<!--main-->
<div id="container" class="cart">
<div class="w">
<!--购物车为空时显示的盒子-->
<div class="empty-cart">
<div class="empty-cart-msg">
购物车空空的哦~，去看看心仪的商品吧~
<a href="">去购物></a>
</div>
</div>
<!--全部商品哪一行-->
<div class="cart-top" style="display: block;">
<div class="cart-top-left">
<a href=""><em>全部商品</em></a>
</div>
<div class="cart-top-right">
<span>配送至：</span>
<div class="jdarea">
<div class="areawrap">
<div class="areatext">北京朝阳区三环到四环之间</div>
<b></b>
</div>
</div>
</div>
<div class="footline">
<div class="line"></div>
</div>
</div>
<!--包裹购物车-->
<div class="cart-wrap" style="display: block;">
<div class="w">
<div id="jd-cart">
<div class="cartmain">
<div class="cart-thead">
<div class="cart-col t-checkbox">
<div class="cart-checkbox">
<input type="checkbox" checked="" name="" id="" class="allsel" value="" /> 全选
</div>
</div>
<div class="cart-col t-goods">商品</div>
<div class="cart-col t-props"></div>
<div class="cart-col t-prices">单价(元)</div>
<div class="cart-col t-quantity">数量</div>
<div class="cart-col t-sum">小计(元)</div>
<div class="cart-col t-action">操作</div>
</div>
<div id="cart-list">
<div class="cart-item-list">
<div class="cart-tbody">
<div class="shop">
<div class="cart-checkbox">
<input type="checkbox" checked="" name="" id="" value="" />
</div>
<span class="shop-info">
<a href=""></a>
</span>
<div class="shop-ex">
购满￥99.00 已免运费
<span class="tips-icon" data-tips="部分超重超大商品运费单独收取，不在本功能范围内，准确运费以结算页为准"></span>
</div>
</div>
<div class="item-list">
<div class="item-head">
<div class="header-left">
<a class="header-left-p1" href="">
<span>
换购
<b></b>
</span> 活动商品已购满999.00元，可加价换购商品10件>
</a>
<a class="header-left-p2" href="">换购商品</a>
<a href="">去凑单 ></a>
</div>
<div class="header-price">
<b></b>
</div>
</div>
<div class="goods-item goods-item-sele" style="display: none;">
<div class="goods-info">
<div class="cell b-checkbox">
<div class="cart-checkbox">
<input type="checkbox" checked="" name="" id="" value="" />
<span class="line-circle"></span>
</div>
</div>
<div class="cell b-goods">
<div class="goods-name">
<div class="goods-pic">
<a href=""><img src="images/5631d31eN50010b03.jpg" alt="" /></a>
</div>
<div class="goods-msg">
<div class="goods-d-info">
<a href="">Apple iMac 27英寸一体机（Core i5 处理器/8GB内存/1TB存储/2GB独显/Retina 5K屏 MK462CH/A）</a>
</div>
<div class="goods-ex">
<span class="promise"></span>
<span class="promise">
<i></i><a href="">购买京东服务</a>
</span>
</div>
</div>
</div>
</div>
<div class="cell b-props">
<div class="prop-text">尺码：27英寸Retina 5K 显示屏</div>
</div>
<div class="cell b-price">
<strong>13488.00</strong>
<a class="sales-promotion" href="">
促销优惠
<b></b>
</a>
<div class="sales-promotion-dropdown">
</div>
</div>
<div class="cell b-quantity">
<div class="quantity-form">
<a class="quantity-down" href="javascript:void(0)">-</a>
<input type="text" value="1" />
<a class="quantity-add" href="javascript:void(0)">+</a>
</div>
<div class="quantity-text">有货</div>
</div>
<div class="cell b-sum">
<strong>13488.00</strong>
</div>
<div class="cell b-action">
<a href="javascript:void(0)">删除</a><a href="javascript:void(0)">移到我的关注</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="cart-floatbar">
<div class="select-all">
<div class="cart-checkbox">
<input type="checkbox" checked="" name="" id="" class="allsel" value="" /> 全选
</div>
</div>
<div class="operation">
<a href="javascript:void(0)">删除选中的商品</a><a href="javascript:void(0)">移到我的关注</a>
</div>
<div class="toolbar-right">
<div class="btn-area">
<a href=""></a>
</div>
<div class="price-sum">
<span class="txt">总价（不含运费）：</span>
<span class="totalprice">￥0.00</span>
<span class="txt">已节省：</span>
<span class="totalsave">-￥0.00</span>
</div>
<div class="amount-sum">
已选择
<em>0</em> 件商品
<b></b>
</div>
</div>
</div>
</div>
</div>
<div class="goods-list goods-selected">
<ul>
<!-- <li>
<div class="goodsinfo">
<div class="p-img">
<a href="##"><img class="loadimg" src="" alt="" sid="" /></a>
</div>
<div class="p-name">
<a class="loadt" href="##"> </a>
</div>
<div class="p-price"><strong><em>￥</em><i class="loadpcp"> </i></strong></div>
<div class="p-btn"><a href="javascript:void(0)"><b></b>加入购物车</a></div>
</div>
</li> -->
</ul>
</div>
</div>
</div>
<script type="text/javascript">
let dataarr= [{
"title": "Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/256GB SSD闪存/Retina屏 MF840CH/A)",
"price": "10788.00",
"img": "images/5631d31eN50010b03.jpg"
}, {
"title": "Apple iPad Air 2 平板电脑 9.7英寸（64G WLAN版/A8X 芯片/Retina显示屏/Touch ID技术 MH182CH）金色",
"price": "3299.00",
"img": "images/5440d612Nb61beccf.jpg"
}, {
"title": "Apple iPad Air 平板电脑 9.7英寸（16G WLAN版/A7芯片/Retina显示屏 MD788CH）银色",
"price": "2099.00",
"img": "images/rBEhVVJ3VY8IAAAAAAG_9yE_xEwAAFBZQCT4x0AAcAP271.jpg"
}, {
"title": "Apple Mac mini台式电脑 (Core i5 处理器/8GB内存/1TB 存储 MGEN2CH/A)",
"price": "4988.00",
"img": "images/5440f42eN5b4677a6.jpg"
}];
var oUl=document.querySelector('.goods-list ul');
var htmlstr='';
for(var i=0;i<dataarr.length;i++){
/* htmlstr+='<li>'+
'<div class="goodsinfo">'+
'<div class="p-img">'+
'<a href="##"><img class="loadimg" src="'+dataarr[i].img+'" alt="" sid="" /></a>'+
'</div>'+
'<div class="p-name">'+
'<a class="loadt" href="##">'+dataarr[i].title+'</a>'+
'</div>'+
'<div class="p-price"><strong><em>￥</em><i class="loadpcp">'+dataarr[i].price+'</i></strong></div>'+
'<div class="p-btn"><a href="javascript:void(0)"><b></b>加入购物车</a></div>'+
'</div>'+
'</li>'; */
//使用模板字符串--使用反引号
//引用值采用${值}
htmlstr+=`
<li>
<div class="goodsinfo">
<div class="p-img">
<a href="##"><img class="loadimg" src="${dataarr[i].img}" alt="" sid="" /></a>
</div>
<div class="p-name">
<a class="loadt" href="##">${dataarr[i].title} </a>
</div>
<div class="p-price"><strong><em>￥</em><i class="loadpcp"> ${dataarr[i].price}</i></strong></div>
<div class="p-btn"><a href="javascript:void(0)"><b></b>加入购物车</a></div>
</div>
</li>
`;
}
oUl.innerHTML=htmlstr;
</script>
</body>
</html>
扫一扫
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
