关于ES6的新特性
1 let声明变量
01 let声明的变量，不可重复声明，比如 let a=1 ； let a=2 ；这样申明会报错
02 let声明的变量，有块级作用域，比如 if( ){ }这用语句 有了作用域
03 let声明的变量不再声明提前
for (var i = 0; i < 100; i++){ setTimeout(function () { console.log(i); }, 0) } //结果是输出 100个100； //setTimout属于异步操作，它会在主线程代码执行完毕之后，才执行 for (var let = 0; i < 100; i++){ setTimeout(function () { console.log(i); }, 0) } // 结果是输出，0 1 2 3-----直到 99
2 const声明的叫做常量
1. const声明变量不可以进行重复声明
2. const声明也有块级作用域
3. const声明的变量不能被修改值
4. const声明变量的时候必须赋一个初始值！
作用： 防止变量被修改，一些不想被修随意修改的属性值，可以用const定义
总结：
es6中声明变量：
1. let 变量
2. const 常量
都有块级作用域
都不能重复声明
onst声明的变量不能被修改值
const声明变量的时候必须赋一个初始值
3 ES6 对象简写
01 属性简写，如果属性名和属性值的变量名相同，就可以简写为一个
02 方法简写，可以吧：和function去掉。
1 // 如：
2 let name = "周浩"
3 let obj = {
4 name: name,
5 sing: function () {
6 console.log("你好帅！！！")
7 }
8 }
9
10
11 // es6 简写为：
12 let name = "周浩"
13 let obj = {
14 name,
15 sing() {
16 console.log("你好帅！！！")
17 }
18 }
4解构赋值
01对象的解构赋值
1 let obj = {
2 name: "周浩",
3 age: 18
4 }
5 //01普通方法获取对象中的属性值
6 let name = obj.name;//周浩
7 let age = obj.age; //18
8
9
10 // 02解构赋值
11 // let {对象的属性名: 要声明的变量名} = 对象 如 ：let { name: mingzi } = obj;
12 // 就会自动声明一个变量出来，变量的值就是对象中对应的属性的值
13 let { name: mingzi } = obj;
14 console.log(mingzi);
15
16
17 // let {对象的属性名: 要声明的变量名} = 对象
18 // 03如果 对象的属性名 和要声明的变量名同名 可以简写成一个，（对象的简写+解构赋值）
19 // let { name： name, age: age } = obj;
20 let { name, age } = obj;
21 console.log(name, age);
对象和函数的解构赋值应用，如下
1 let obj = { 2 name: "周浩", 3 age: 18 4 } 5 6 function test({name, age}) {//设置解构 7 console.log(name, age) 8 } 9 10 test(obj);//把对象直接传入，在函数形参设置解构
数组的解构，如下
1 let arr = [1, 2, 3, 4];
2 //普通获取数组中值的写法
3 // let num1 = arr[0]
4 // let num2 = arr[1]
5 // let num3 = arr[2]
6 // let num4 = arr[3]
7 //利用解构的写法，获取数组中的值
8 let [num1, num2, num3, num4] = arr;
9 console.log(num1)// 1
10 console.log(num2)// 2
11 console.log(num3)// 3
12 console.log(num4)// 4
// let arr = [[1, 2], [3, 4]];
// let [[num1, num2], [num3, num4]] = arr;
// console.log(num1, num2,num3, num4)
结果 ： 1 2 3 4
数组解构中的剩余元素(RestElement)
let arr = [1, 2, 3, 4, 5]; // ... 语法在数组解构赋值中叫做 RestElement // 剩余元素！！ // 1. 剩余元素只能有一个！ // 2. 剩余元素只能是最后一个元素 let [num1, ...num2] = arr; console.log(num2); // 输出结果：[ 2, 3, 4, 5 ]
5箭头函数
箭头函数的写法 var f = (参数列表)=>{ 函数体 }
箭头函数的简写形式：
01 如果箭头函数的参数列表中只有一个参数， 小括号()可以省略
02 如果箭头函数的函数体只有一句代码，那么大括号{}可以省略
03 如果箭头函数的函数体只有一句代码，并且这句代码是返回语句,那么return和大括号都可以省略
平时确定一个函数中的this是谁，我们需要通过调用模式来确定
1. 函数调用模式 this ---> window 函数名()
2. 方法调用模式 this ---> 调用方法的对象 对象.方法名()
3. 构造函数调用模式 this ---> 创建出来的实例 new 函数名()
4. 上下文调用模式 this ---> call和apply的第一个参数 函数名.call()
箭头函数中没有this(因为箭头函数中没有this，所以要是在箭头函数中使用this，this会向上一级作用域中进行查找this)
如果在箭头函数中使用this, 会向上一级作用域中进行查找this(也就是说箭头函数内外this一致) （也可以这样理解：箭头函数中没this，它和离自己最近的this指向是一样的）
箭头函数中没有arguments！！！
// 本题要点 ： 在浏览器中，函数中的this默认指向window; 在node.js中 函数的this默认指向一个空对象
var name="sb" //window中的name
let obj = {
name: "周浩",//对象中的name
sayHello() {
setTimeout(function(){
console.log('它叫'+ this.name);//函数中的this，在浏览器中指向window，在node中指向空对象
},1000)
}
}
obj.sayHello();
//结果 ： 在浏览器中，console.log 输出的是 它叫 sb 。 在node中输出的结果是 它叫undefined
var name="sb" //window中的name let obj = { name: "周浩",//对象中的name sayHello() { var that=this //对象方法中的this，默认指向 调用方法的对象。也就是说这里的this指的是obj setTimeout(function(){ //函数会先在自己的作用域中找that，自己没有，继续往上找，所以函数中的that和sayHello方法中的that是一样的，都指向obj console.log('它叫'+ that.name); },1000) } } obj.sayHello(); // 输出结果为： 它叫周浩
var name="sb" //window中的name let obj = { name: "周浩",//对象中的name sayHello() { setTimeout(function(){ //01函数作用域中没有obj，它会顺着作用域链继续往上找 //02syHello方法是由obj调用的，所以找到了obj。 console.log('它叫'+ obj.name); },1000) } } obj.sayHello(); // 输出结果: 它叫周浩
箭头函数中this的利用
<!DOCTYPE html> <html lang="en"> <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> <script> let obj = { name: "周浩", sayHello() { let func = () => { //箭头函中没有this，所有它会顺着作用域链往上找 //找到syaHello方法，sayHello方法中的this指向的是obj console.log(this); //obj对象 console.log(this.name);//周浩 } func(); } } obj.sayHello(); </script> </body> </html>
arguments的作用(不是es6新特性)
arguments是一个伪数组
在函数被调用的时候，会将所有的实参存储到arguments对象中
arguments什么时候使用？
参数个数不确定的情况下需要使用arugments来获取所有的实参
例子： 封装一个函数，求和，参数不定，可能是两个参数求和，也可能是10个参数求和
<script> function sum() { var result = 0; for (let i = 0; i < arguments.length; i++){ result += arguments[i]; } return result; } console.log( sum(1) ) console.log( sum(1, 2) ) console.log( sum(1, 2, 3) ) </script>
判断是不是数组的方法：
特别注意：typeof 不能判断是不是数组 typeof array返回的是object
可以使用：
01Array.isArray(判断对象)
02判断对象 instanceof Array
ar arr = [1,2,3,1];
03alert(arr.constructor === Array); // true
箭头函数中没有aguments怎么解决？ 使用...剩余参数
例子： 封装一个函数，求和，参数不定，可能是两个参数求和，也可能是10个参数求和，使用箭头函数
<!DOCTYPE html> <html lang="en"> <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> <script> // 要点：forEach() 遍历数组arr中的每个元素，将每个元素执行相同的操作，无返回结果 // 因为箭头函数没有aguments 所以要使用 剩余参数... var sum=(...arr)=>{ //此时传入的arr是一个数组 let result=0 arr.forEach( elem => result+=elem ) //elem表示arr数组中的每个值,箭头函数简写 return result } console.log( sum(1,2,3,4,2) ) </script> </body> </html>
// 剩余参数只能有一个，并且只能是参数列表的最后一个！！
// 剩余参数是一个真数组！！ 可以使用任何数组的方法！！
function func(...a) {
console.log(a);//[1, 2, 3, 4]
}
func(1, 2, 3, 4);
6 ES6函数默认值的使用
<!DOCTYPE html> <html lang="en"> <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> <script> // 函数参数默认值的使用，如果没传参调用，a默认等于100，b默认等于100 function sum(a = 100, b = 100) { return a + b; } console.log(sum(1, 2));//3 console.log(sum());// 200 console.log(sum(1));//101 </script> </body> </html>
7对象在声明的时候使用变量作为属性名
1 var key = "name"; 2 3 // 如何以变量的值作为属性名 4 // key="name" 就想让对象的属性名是name 5 //只要上边变量key的值变化，下边对象[key]也会随着变化 6 var obj = { 7 [key]: "周浩" //{ name: '周浩' } 8 } 9 10 11 console.log(obj);//{ name: '周浩' }
8对象扩展运算符
//将 a对象中的属性和方法 快速添加到b对象中
使用剩余参数 ...将 a对象中的属性和方法拷贝到b对象中。
var wcs = { name: "周浩", age: 18, sing() { console.log("解开yy的鞋带！") } } // 使用...可以将对象中所有的属性给当前对象添加一份！ var xiaowsc = { ...wcs, money: 9999999999999 }; console.log(xiaowsc) // 输出结果 // { name: '周浩', // age: 18, // sing: [Function: sing], // money: 9999999999999 }
9 class关键字
es6中class关键字 就相当于 构造函数。 用来创建对象的
构造函数写法如下方代码
1 function Person(name, age) {
2 this.name = name;
3 this.age = age;
4 }
5
6 Person.prototype.sayHello = function () {
7
8 }
9
10 var p = new Person("周浩", 18);
构造函数是用来批量创建 具有相同属性 和 相同方法的对象
1 class Person{// 相当于 function Person(){ } 2 constructor(name, age) {//固定格式 constructor 3 this.name = name; 4 this.age = age; 5 } 6 // 在类中的方法会自动添加到构造函数的原型中！！ 7 say() { 8 console.log("lei hao a"); 9 } 10 } 11 var p = new Person("周浩", 18); 12 console.log(p);//Person {name: "周浩", age: 18}
成员：属性和方法的统称
实例成员：通过实例访问的成员
静态成员：通过构造函数本身访问的成员
flat 可以数组扁平化
使用es6中提供的Array.prototype.flat 处理 将数组扁平化
arr=arr.flat(Infinity)
Array.from() 转为数组
