Javascript学习总结 - es6新增的语法

Javascript学习总结 - es6新增的语法

变量

es6新增了俩个关键字 let const

let定义变量：
1.不能重复定义；
2.没有预解析，不能提升；
3.let会创建一个块级作用域，只在定义变量的大括号中有效；
4.不在window对象中；

const定义变量：
1.const是定义常量的；
2.不能重复赋值；
3.没有预解析，不能提升；
4.会有自己的会计作用域；
5.不能重复定义；
6.不在window对象中；

箭头函数

()=>{} (这就是一个函数)；
如果只有一个参数，小括号可以省略；
当大括号中只有一行返回值的代码，大括号可以省略；

var fn = function(a){   
	 return a+2;
}
let fn = a=>a+2;

函数的补充

匿名函数

function(){} (匿名函数 - 不能独立存在)；
要么加名字，要么就赋值给一个变量；
匿名函数的用法：
1.可以赋值给一个变量；
2.匿名函数可以赋值给事件；
3.自调用；

函数自调用

自调用函数的三种表现形式：

1.使用小括号将函数代码包起来；

 (function(){     
 	console.log(123); 
 })()

2.在函数前面加波浪线；

 ~function(){    
 	console.log(123); 
 }();

3.在函数前面加感叹号；

!function(){     
	console.log(456); 
}()

结构赋值

概念：快速的将对象/数组中的值赋值给一个变量；
对象：
1.var {属性名:别名} = 对象；
2.var {属性名{属性名}} = 对象；
数组：
var [变量] = 数组；

对象的简写方式

当对象中的键和代表值的变量同名，就可以省略冒号和值，光写键就ok；

 var obj = {  
 	name:name,    
 	age:age 
 } 
// 如果是这样，那么就可以进行简写
var obj = {    
	name,    
	age
}

字符串新增方法

模板字符串

利用反引号定义 ``；
好处：
1.可以分多行定义一个字符串，怎么写就怎么输出；

var str = `    
	<tr>        
	    <td>123</td>        
	    <td>456</td>        
	    <td>数字</td>    
	</tr>
`

2.字符串中可以识别变量 - 不用拼接了 - 解析变量 ${变量名}；

var name = "张三"var age = 15;var gender = "男"
var str = `    
	<tr>        
	    <td>${name}</td>        
	    <td>${age}</td>        
	    <td>${gender}</td>    
	</tr>
`

新增方法

1.字符串.startsWith(字符/子字符串) - 判断以谁开头；
2.字符串.endsWith(字符) - 判断以谁结尾；
3.字符串.includes(字符) - 判断是否包含；
三种方法的返回值都为布尔值；

展开运算符和合并运算符

展开

语法：…数组/对象；
将一个数组展开多个值使用；
函数需要多个参数，实参传入数组并使用展开运算符；

function fn(a,b,c,d){
	console.log(a+b+c+d); //22
}
var arr = [4,5,6,7];
console.log(...arr); //4 5 6 7
fn(...arr);

合并

语法：…数组/对象；
将多个值合并成一个数组；
将数组作为形参并使用运算符，将传入的多个值合并成一个数组；

function fn(...arr){    
	var sum = 0;    
	for(var i=0;i<arr.length;i++){        
		sum += arr[i];    
	}    
	console.log(sum);//18
}
fn(3,4,5,6);

this关键字

在不同的地方代表的意思不一样；
普通函数中的this是window；
自调用函数的this是window；
定时器的this是window；
对象方法中的this是对象；
箭头函数中的this是上一行代码的this；

改变this的指向

其实this代表谁，并不是在定义的时候得到的，而是在函数调用的时候决定的；
调用方式不一样，this指向就不一样；

通过一些方法来改变this的指向：
1.call() 方法；
函数.call(this想要代表的对象)；
call 方法可以调用函数，顺便将函数中的this变成第一个参数；

 function add(a,b){     
 	console.log(this);//obj
     	console.log(a+b); //3
}
      	var obj = {
           name:"张三" 
}
add.call(obj,1,2); // call的第二个参数开始对应函数原本的参数

2.apply() 方法；
函数.apply(对象)；
可以调用函数，将所有函数需要的参数当做一个数组放到apply的第二个参数；

function add(a,b){    
	console.log(this);    //obj
	console.log(a+b);	//3
}
var obj = {    
	name:"张三"
}
add.apply(obj,[1,2]);

3.bind() 方法；
函数.bind(对象) - 返回一个新的函数，参数就是将要改变的this的指向；
bind不会调用函数 - 复制一个新的函数出来

function fn(){
     console.log(this); //obj
}
var a = fn.bind(); // 将函数复制了一份赋值给了新变量a
console.log(a); 
a();
var obj = {
     name:"战三"
}
var a = fn.bind(obj); // 将fn复制一份，并将新函数中的this改成传入的obj
a();

伪数组

伪数组本质是一个对象，组成部分和对象有点不同，组成部分更像数组；
组成部分，键是数字，还有length属性；
遍历伪数组尽量使用i=0的方法；

// 手动定义一个伪数组：
 var obj = {
	0:1,    
 	1:2,    
	2:3,    
 	length:3
 } 
 console.log(obj);
 // 伪数组可以进行遍历，
 for(var attr in obj){    
 	console.log(attr);
 }
 for(var i=0;i<obj.length;i++){    
  	console.log(i);
 }

伪数组的特点：
1.键有数字和length；
2.可以使用i=0的方法遍历；
3.可以取下标 - 普通操作和数组一样；
4.伪数组不能使用数组的方法；
5.伪数组和对象不一样的地方，键有数字，对象没有length属性，伪数组有；