1. let和const
-
let（变量）
- 不会重复声明
- 变量-可以修改
- 块级作用域
-
const（常量）
- 不会重复声明
- 常量-不可以修改
- 块级作用域
-
对比之前ES5的 var
- 可以重复声明
- 没有块级作用域
- 无法限制修改
// 经典案例 采用闭包方式来解决 var btns = document.getElementsByTagName('input'); // for (var i = 0; i < btns.length; i++) { // (function (i) { // btns[i].onclick = function () { // alert(i) // } // })(i) // } // 采用ES6 块级作用域来解决 for (let i = 0; i < btns.length; i++) { btns[i].onclick = function () { alert(i) } }
2. 箭头函数
-
只有一个参数（）可以省略
// ES5之前函数 function fn1(a) { return a * 2 } alert(fn1(2)) // 演变箭头函数 let fn2 = a => a * 2 alert(fn2(2)) -
只有一个return 可以省略{ }
// ES5之前的函数 var arr = [10, 2, 6, 8, 55, 446] var res1 = arr.sort(function (a, b) { return a - b }) alert(res1) // 演变成箭头函数 var res2 = arr.sort((a, b) => a - b) alert(res2)
3. 函数参数
-
函数扩展/展开（延展操作符）
-
收集剩余参数
// 注意args可以随便起变量名，agrs必须放在形参最后一位，否则报错。 function show(a, b, ...agrs) { alert(a) // 10 alert(b) // 20 alert(agrs) // 2,21,16 } show(10, 20, 2, 21, 16) -
展开数组
// 展开后的效果，跟直接把数组内容写在这儿一样 var num = [10,20] let show = (...args) => { fn(...args) } let fn = (a, b) => { alert(a + b) } // 展开数组num show(...num)
-
-
默认参数
let showArgs = (a,b=10,c=15)=>{ console.log(a); console.log(b); console.log(c); } // 没传就显示默认值 showArgs(1); // 1,10 15 // 传了就覆盖默认值 showArgs(12,13,14); // 12,13 14
4. 解构赋值
-
左右两边结构必须一样
-
右边必须是个东西
-
声明和赋值不能分开（必须在一句话里完成）
// ES5之前想取出 let arr = [1, 2, 3] let a = arr[0] let b = arr[1] let c = arr[2] console.log(a, b, c); // ES6结果赋值 (左右结构必须一致) let [z, x, d] = [1, 2, 3]; console.log(z, x, d); let [arrs, obj, num, str] = [ [1, 2, 3], { a: 12, b: 15 }, 8, "Jason" ] console.log(arrs, obj, num, str); //[1, 2, 3] {a: 12, b: 15} 8 "Jason"
5. 数组
-
map（映射） 一 对一
// map() 方法 let arr = [10, 20, 30]; // 返或一个结果 所有的数据都会从function(){}里走一下 var res = arr.map(item => item * 2) console.log(res); // [20, 40, 60] let score = [19, 85, 95, 65, 49]; let result = score.map(item => item >= 60 ? "价格" : "不及格") console.log(result); // ["不及格", "价格", "价格", "价格", "不及格"] -
reduce（汇总） 一堆数据出来一个数据
// reduce() 一堆数据出来一个 // 求数组的总和,平均数 let sums = [10, 30, 50, 80]; // reduce()里接收三个参数 分别是第一次相加的结果，得出结果的下一位数，索引 let getSum = sums.reduce((sum, item, index) => sum + item) console.log(getSum); //170 let getAvg = sums.reduce((sum, item, index) => (sum + item) / sums.length) console.log(getAvg); //23.75 -
filter（过滤器） 按照一定的规则刷选数据
// filter 按照一定的规则 返回 一些结果 let goods = [{ name: "电脑", price: 10000 }, { name: "电视", price: 5000 }, { name: "投影仪", price: 8000 }, ] // 接收一个参数 let getFilter = goods.filter(item => { if (item.price >= 6000) { return item } }) console.log(getFilter); //{name: "电脑", price: 10000} {name: "投影仪", price: 8000} -
forEach（循环、迭代）
// forEach 循环 let number = [10, 3, 5, 52, 69, 133] number.forEach((item, index) => { console.log(item,index); })
6. 字符串
-
新增加了两个方法
-
startsWith()以什么开头var str = "https://www.baidu.com"; console.log(str.startsWith("https://")); //true console.log(str.startsWith("http://")); //false -
endsWith()以什么结尾var str = "https://www.baidu.com"; console.log(str.endsWith(".com")); //true console.log(str.endsWith(".coms")); //false
-
-
模板字符串（用反单引号来表示 `）
-
使用
${}语法来拼接 -
可以折行
let a = 12; let b = `a${a}bc` console.log(b); // a12bc var str = "haozhicong"; var date = "19950917"; var res = `名字是：${str},出生年月是：${date}` console.log(res); // 名字是：haozhicong,出生年月是：19950917
-
7. 面向对象
-
class关键字，和类分开
-
class里直接加方法
// ES5之前的面向对象 // function Student(name, age) { // this.name = name; // this.age = age; // } // Student.prototype.show = function () { // console.log("名字是:" + this.name + "年龄是：" + this.age) // } // ES6面向对象写法 // 1. class 关键字 // 2. class 里面直接加方法 class Student { constructor(name, age) { this.name = name; this.age = age; } show() { console.log(this.name, this.age); } } var s1 = new Student('Jack', 22); s1.show() var s2 = new Student('Jason', 24); s2.show() -
extends继承class Student { constructor(name, age) { this.name = name; this.age = age; } show() { console.log(this.name, this.age); } } class vipStudent extends Student { constructor(name, age, num) { super(name, name) // super 指向父类 this.num = num } shownum() { console.log(this.num); } } var s1 = new vipStudent('Jack', 22, 'G14190117'); s1.show() s1.shownum() -
ES5通过call来继承
function Student(name, age) { this.name = name; this.age = age; } Student.prototype.show = function () { console.log("名字是:" + this.name + "年龄是：" + this.age) } function vipZtudent(name, age, num) { Student.call(this, name, age) this.num = num } // new一下Student() vipZtudent.prototype = new Student(); // 这里把构造函数指向vipZtudent vipZtudent.prototype.constructor = vipZtudent; // vipZtudentt增加新的方法 vipZtudent.prototype.showvipZtudent = function () { console.log("学号是：", this.num); } var s1 = new vipZtudent('Jack', 22, 'G14190117'); s1.show() s1.showvipZtudent()
8. JSON 对象
-
JSON.stringify()把JSON转成字符串 -
JSON.parse()把JSON字符串转成JSON对象 -
JSON格式
- 只能用双引
- 所有的名字都必须用引号抱起来
{ "firstName":"John" , "lastName":"Doe" }
9. Promis（解决异步）
-
原生ajax请求
$.ajax({ url: "data/a.txt", dataType: "json", success: function (data) { console.log(data); }, error: function (err) { console.log(err); } }) $.ajax({ url: "data/c.txt", dataType: "json", success: function (data) { console.log(data); }, error: function (err) { console.log(err); } }) $.ajax({ url: "data/b.txt", dataType: "json", success: function (data) { console.log(data); }, error: function (err) { console.log(err); } }) -
Promise使用
// 1. 创建Promise对象 let p1 = new Promise(function (resolve, reject) { $.ajax({ url: "data/b.txt", dataType: "json", success: function (data) { resolve(data); }, error: function (err) { reject(err); } }) }) let p2 = new Promise(function (resolve, reject) { $.ajax({ url: "data/a.txt", dataType: "json", success: function (data) { resolve(data); }, error: function (err) { reject(err); } }) }) let p3 = new Promise(function (resolve, reject) { $.ajax({ url: "data/c.txt", dataType: "json", success: function (data) { resolve(data); }, error: function (err) { reject(err); } }) }) // 2. 使用Promise Promise.all([p1, p2, p3]).then((res) => { debugger // 这里得出的是个数组 用解构赋值取出来 let [a1, a2, a3] = res console.log(a1); console.log(a2); console.log(a3); }, err => { console.log(err); }) -
Promise.all（）的使用
// ajax 是有返回值的 可以这样写 Promise.all([ $.ajax({ url: "data/a.txt", dataType: "json" }), $.ajax({ url: "data/b.txt", dataType: "json" }), $.ajax({ url: "data/b.txt", dataType: "json" }) ]).then((resolve) => { debugger console.log(resolve); }, (reject) => { console.log(reject); })
网友评论