一、let
//let是ES6新增的关键字 用于定义变量 与var的区别之一：let定义的变量会遵守块级作用域 //与var的区别1.第一个区别:let定义的变量遵守块级作用域凡事{}就是一个作用域 2.第二个区别：let定义的变量不能重名
var a = 10; let a = 11;//出错 变量名不可以重复 console.log(a);3.第三个区别:let定义的变量没有声明提升
console.log(a);//出错 此时a还没有定义 let a = 10;4.第四个区别：let 定义的全局变量 不会挂载到window上
//window.name 这个属性特别特殊 他表示的是window的名字 //window.top 这个属性更特殊 它表示的是最顶层的框架 let a = 10;//这是使用window.a不可以得到a的值 console.log(a);5. 第五个区别 for循环中的不同
var lis = document.querySelectorAll('ul li'); for (let i = 0; i < lis.length; i++) { lis[i].onclick = function() { console.log(i + 1); } } //不使用let的话 点击li的时候 就会每次都输出5 //如果循环变量用var定义 那么就是全局变量 //如果循环变量用let定义 那么就是每个小作用域中的局部变量二、常量const
//常量是变量的一种 但是与变量不同 //变量的值可以修改 常量的值一旦确定不能修改 指的是不能用=号修改 var a = 10; a = 11; //变量的值可以修改 console.log(a); const PI = 3.1415926; console.log(PI); PI++; //错误 常量不可以修改 const arr = []; arr.push(1); //可以改变 因为不是使用等号改变arr的值 console.log(arr); //因为变量 常量保存引用类型时 保存的是地址 所以只要地址不变 里面发生什么变化常量都不会管 //常量的其他特点与let一致 //遵守块级作用域 不能定义重复的变量 不会挂在到window 没有声明提升 不能当做循环变量 //常量名的命名规范 全大写 如果有单词 用下划线分隔三、对象定义的简化
//对象定义的简化 var sex = 12; var obj = { sex //等价于sex:sex } //简化条件：当属性名和属性值一样时 可以只写一个 console.log(obj.sex);//输出12 //属性名部分可以用[]语法了 var hello = 'ok' var obj = { ["a" + "b"]: 12, [hello]: 13 } console.log(obj); //{ab:12,ok:13} //当定义方法时 var dog = { name: '小白', loud() { console.log('喵喵喵'); } } dog.loud();四、模板字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> </ul> <script> var ul = document.getElementsByTagName("ul")[0]; // 字符串定义： 多了一个字符串模板的定义方式 也叫'多行字符串' var str = ''; var str1 = ""; var arr = [{ title: "论吃地沟油的正确方式", src: "https://img12.360buyimg.com/n7/jfs/t1/116255/16/11624/300744/5f027218E5b23731c/396f1934df47d0d4.jpg", price: "179.90", intro: '鲁花 食用油 5S物理压榨 压榨一级 花生油 6.18L（京东定制）', commentNumber: 2142352, labels: ["自营", "放心购"] }, { title: "论吃地沟油的正确方式", src: "https://img12.360buyimg.com/n7/jfs/t1/137951/29/5120/82102/5f320689E4892bb56/c7144a675e98be78.jpg", price: "179.90", intro: '鲁花 食用油 5S物理压榨 压榨一级 花生油 6.18L（京东定制）', commentNumber: 2142352, labels: ["自营", "放心购", "秒杀"] }]; arr.forEach(function(value) { console.log(value) var str1 = value.labels.map(function(value) { return `<span>${value}</span>`; }).join("") var str2 = ` <li> <h3>${value.title}</h3> <div> <img src="${value.src}" /> <p>${value.intro}</p> <p>${value.commentNumber}万+评论</p> <div>${value.price}</div> <div>${str1}</div> <div> <p><input type="checkbox">对比</p> <p>关注</p> <p><a>加入购物车</a></p> </div> </div> </li> `; ul.innerHTML += str2; }); </script> </body> </html>五 字符串新增方法
//ES6中字符串的新增方法 //1.startsWith 该方法用于判定字符串是否是以另一个字符串开始 而接受两个参数 接收两个参数 //第一个参数是开头字符串 第二个参数是原字符串中检测开始位置 var str = '青青河边草'; //需求 想知道该字符串是否以'青青河'这个字符串开头的 var isStart = str.startsWith('河边', 2); console.log(isStart); //2. endWith 该方法用于判定一个字符串是否是以另一个字符串结束的 //endsWith //第一个参数是开头字符串 第二个参数是原字符串中检测结束的位置 var str = "东边日出西边雨"; //判定是否是以'西边雨'结束的 var isEnd = str.endsWith('出', 4); console.log(isEnd); //3.includes 包含 //第一个参数是包含的字符串 第二个参数是开始检测的位置 var arr = ["色情", "反动", "贩毒"]; var str = '色情爱神的箭按时大大方贩毒示范法发大发色情色情色情色情' for (var i = 0; i < arr.length; i++) { while (str.includes(arr[i])) { str = str.replace(arr[i], '**') } } console.log(str); var a = '0'; var c = a.repeat(10); console.log(c);六、数组新增方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //数组在ES6中新增了3个普通方法 2个静态方法 //静态方法:构造函数调用的方法叫做静态方法 //普通方法:数组调用的方法叫做普通方法 //Array 是数组的构造函数 //Array.from 用于将类数组对象转为数组 function demo() { console.log(arguments); //将类数组转化为数组 var arr = Array.from(arguments) console.log(arr); //用reduce方法将arr数组中的值累加起来 return arr.reduce(function(pre, value) { return prev + value; }, 0) } demo(1, 2, 3, 4, 5, 6, 7, 8, 9); //Array.of 用于定义数组 解决了当new Array参数是一个时代表的是数组长度的问题 var arr = Array.of(10); console.log(arr); //普通方法 //ES6中新增的普通方法有3个 //find var arr = [{ province: "北京", type: "直辖市", cities: [{ name: "朝阳区", county: [] }, { name: "东城区", county: [] }, { name: "西城区", county: [] }, { name: "大兴区", county: [] }, { name: "丰台", county: [] }, { name: "昌平", county: [] }] }, { province: "山东", type: "省", cities: [{ name: '济南', county: [{ name: '天桥区' }, { name: '市中区' }, { name: "长清区" }] }, { name: "青岛", county: [{ name: "市南区" }, { name: "市北区" }, { name: "胶南市" }, { name: "城阳区" }] }] }, { province: "广东", type: "省", cities: [{ name: "广州", county: [{ name: "天河区" }, { name: "白云区", }, { name: "黄浦区" }, { name: "海珠区" }] }, { name: "深圳", county: [{ name: "宝安区" }, { name: "福田区" }, { name: "罗湖区" }, { name: "南山区" }] }, { name: "江门", county: [{ name: "蓬江区" }, { name: "江海区" }, { name: "新会" }, { name: "台山" }] }, ] }] //现在要得到 省份的名称是山东省的那个对象 //find 返回的是内容 function中的第一个参数是当前元素，第二个参数是当前元素的索引值 第三个参数是被检索的数组本身 var obj = arr.find(function(value) { return value.province === '山东' }) console.log(obj); //findIndex 返回的是下标 function中的第一个参数是当前元素，第二个参数是当前元素的索引值 第三个参数是被检索的数组本身 var idx = arr.findIndex(function(value, index, self) { return value.province === '山东' }) console.log(idx); //copyWithin() 数组的内部复制 //第一个参数是替换开始的位置 第二个是截取的开始位置 第三个是截取结束的位置 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //1,2,3,5,6,6,7,8,9 arr.copyWithin(3, 4, 6); </script> </body> </html>七、对象新增方法
//对象方法在ES6中就增加了两个 而且都是静态方法 //Object.is()用于判定两者是否全等 //等价于=== //但是与===又有细微的不同 //1.NaN===NaN =>false Object.is(NaN,NaN)=>true //2. 0===-0 =>true Object.is(0,-0)=>false // Object.assign 用于浅复制 第一个参数是接受属性的对象 后面的每一个参数都是提供属性的对象 如果参数冲突 以后面的为准 var obj = {}; var obj1 = { red: 'red' } var obj2 = { son: { name: '小明' } } Object.assign(obj, obj1, obj2); console.log(obj); obj.son.name = "daming" console.log(obj2.son);八、ES6解构语法
<script> //封装 var arr = [1, 2, 3, 4, 5, 6]; var obj = { nickname: "昵称", age: 13, sex: '男' }; //解构语法: 简化了拆数组或者对象的一种语法 var [a, b, c, d, e, f] = arr; console.log(a, b, c, d, e, f);//1,2,3,4,5,6 //交换两个变量 var a = 10; var b = 20; [a, b] = [b, a]; console.log(a, b); //解构对象 var { nickname, age, sex } = obj; console.log(nickname, age, sex); </script>注：对象解构要属性名一一对应，因为对象是根据属性名查找的对应的值 数组的结构则是下标一一对应 要求要注意顺序
九、rest语法 即…
<script> //rest语法：... //1. 代替arguments 收集函数参数 function sum(a, b, c, ...args) { // //a接受第一个参数 // //b接受第二个参数 // //c接受第三个参数 // //args接受剩余的参数 console.log(args); // } sum(1, 2, 3, 4, 5, 6, 7) //2 帮助解构 var arr = [1, 2, 3, 4, 5, 6, 7] var [a, b, ...arr1] = arr; console.log(a, b, arr1);//arr1是一个数组 var arr = [1, 2, 3, [4, 5, 6], 7, 8, 9]; var [a, b, c, [d, e, f], g, h, i] = arr; console.log(d, e, f); //解构语法：只要结构对应即可 // 3.传递参数 var arr = [1, 2, 22, 33, 44, 42, 32, 22, 556, 65, 7]; Math.max.apply("", arr);//556 Math.max(...arr);//556 //等价于 Math.max(1, 2, 22, 33, 44, 42, 32, 22, 556, 65, 7)//556 </script>十、箭头函数
<script> //箭头函数 是ES6中新增的一种函数定义方式 //第一种定义函数的方式 let fun = function() {} //第二种定义函数的方式 function fun1() {} //第三种定义函数的方式 //Function 接受参数的规则:所有参数都是字符串 只有最后一个参数是函数体代码 前面所有的参数都是形参 let fun2 = new Function("a", "b", "return {name:1,age:2,sex:2}") console.log(fun2()); //定义箭头函数 let fun = () => { console.log(1); } fun(); //箭头函数的出现是为了解决this的问题 // 1.箭头函数中没有arguments 可以使用...语法代替arguments let fun = () => { console.log(arguments); } fun(1, 2, 3, 4); //arguments is not define //2 箭头函数中this不变 this是谁要看它上级作用域中的this let fun = () => { console.log(this); } let obj = { fun } fun() obj.fun(); var obj = { fun() { return () => { console.log(this); } } } let arrow = obj.fun.call(document.body);//将fun函数的this指向document.body然后箭头函数的this也会指向document.body了 因为 fun函数是箭头函数的上一层作用域 let arrow = obj.fun; arrow(); document.onclick = arrow; arrow.apply(document);//无法改变箭头函数的指向 因为上面定义arrow的时候已经把箭头函数的this的指向确定了 arrow.call(document);//无法改变箭头函数的指向 因为上面定义arrow的时候已经把箭头函数的this的指向确定了 let arr1 = arrow.bind(document);//无法改变箭头函数的指向 因为上面定义arrow的时候已经把箭头函数的this的指向确定了 arr1(); //箭头函数中的this一旦确定 将再也无法改变 //箭头函数中的this指向谁 要看到它所在的作用域中的this是谁 //箭头函数不可以通过new运算符进行调用 // let arrow = () => { // }; //new arrow(); //arrow is not a constructor //简化写法 let arrow = a => a + 1; let result = arrow(1); console.log(result); //简化规则1:如果箭头函数的形参只有一个 那么可以把圆括号省略 //简化规则2:如果箭头函数体内只有一条代码并且是返回值 可以把大括号和return省略