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声明的叫做常量
作用: 防止变量被修改,一些不想被修随意修改的属性值,可以用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
数组解构中的剩余元素(RestElement)
let arr = [1, 2, 3, 4, 5]; // ... 语法在数组解构赋值中叫做 RestElement // 剩余元素!! // 1. 剩余元素只能有一个! // 2. 剩余元素只能是最后一个元素 let [num1, ...num2] = arr; console.log(num2); // 输出结果:[ 2, 3, 4, 5 ]
5箭头函数
// 本题要点 : 在浏览器中,函数中的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对象中
参数个数不确定的情况下需要使用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
可以使用:
箭头函数中没有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 可以数组扁平化