ES6常用语法

变量声明

let和const使用

console.log(flag);//undefined
var flag= 123;
console.log(flag);//123

//let声明的变量不存在解析
let flag= 123;
console.log(flag);//报错

var flag = 123;
var flag = 456;			
console.log(flag);//456

let flag = 123;
let flag = 456;			
console.log(flag);//报错

//ES6引入块级作用域
//在块级作用域内部，变量只能先声明再使用
//暂时性访问区
if(true){
	var flag = 12;
}			
console.log(flag);//123

if(true){
	let flag = 12;
}			
console.log(flag);//报错

//const用来声明常量
// 声明的常量不允许重新赋值，而且也必须初始化
const n = 1;
const n = 2;//报错

字符串和函数

变量的结构赋值

var a = 1;
var b = 1;
var c = 1;
var a = 1, b =2;

//数组的结构赋值
let [a,b,c] = [1,2,3];
console.log(a);
console.log(b);
console.log(c);

//结构赋值位置对应
let [a,b,c] = [,2,];
console.log(a,b,c);

//对象的结构赋值，跟顺序无关
let {foo,bar} = {foo:'hello', bar:'hi'}
console.log(foo,bar);

//对象属性别名，如果有了别名，那么原来的名字就无效了
let {foo:abc,bar} = {foo:'hello', bar:'hi'}
console.log(abc,bar);//那么此时foo不能访问

let {con,sin,random} = Math;
console.log(typeof con);//function
console.log(typeof sin);//funciton
console.log(typeof random);//function

//对象结构赋值指定默认值
let {foo:abc='hello',bar} = {bar:'hi'}
console.log(abc,bar);//那么此时foo不能访问

字符串的结构赋值

let [a,b,c,d,e] = "hello";
console.log(a,b,c,d,e);
console.log("hello".length);

let {length} = "hello";
console.log(length);

字符串相关扩展

includes() //判断字符串中是否包含子串 ，，有返回true，否则false
//参数一：匹配的子串
//参数二：从第几个开始匹配
console.log('hello world'.includes('world'));//true  
console.log('hello world'.includes('world',6));//true  //从第几个开始进行判断
starsWith()
//判断字符串以指定的字串开始
let url = "admin/index.php";
console.log(url.startsWith('aadmin'));//false
endsWith()
//判断字符串以指定的字串结束
//模板字符串
let obj = {
	username: 'lisi',
	age : 12,
	gender : 'male'
}
//正常使用方式
let tag = '<div><span>'+obj.username+'</span></div>'
console.log(tag);
//模板使用方式
let tpl = `
	<div>
		<span>${obj.username}</span>
		<span>${1+1}</span>
		<span>${function(){return 1;}}</span>
	</div>
`;

函数相关扩展

//1.参数默认值
function foo(param){
	let p = param || 'hello';
	console.log(p);
}
foo('hi');

function foo(param = 'hello'){
	console.log(param);
}
foo('hi');			  	
//2.参数结构赋值
function foo(uname='lisi', age=12){
	console.log(uname, age);
}
foo('zhangsan',13);

function foo({uname='lisi', age=13}={}){
	console.log(uname, age);
}
foo({uname:'zhangsan', age=12});
//3.rest参数
function foo(a, ...param){
	console.log(a, param);
}
foo(1,2,3);
//4. ...扩展运算符
function foo(a,b,c,d,e){
	console.log(a+b+c+d+e);
}
//正常使用
foo(1,2,3,4,5);
let arr = [1,2,3,4,5];
foo.apply(null,arr);
//扩展属性使用
foo(...arr);
//具体应用
let arr1 = [1,2,3];
let arr2 = [1,2,3];
let arr3 = [...arr1, ...arr2];
console.log(arr3);
//5.箭头函数
function foo(){
	console.log('hello');
}
foo();

let foo = () => console.log('hello');
foo();

function foo(v){
	return v;
}
let foo = v => v;
var ret = foo(111);

let foo = (a,b) => console.log(a + b);
foo(1,3);

//多个参数需要如下方式使用
let foo = (a,b) => {
	let c = 1, console.log(a + b + c);
}
foo(1,3);

//匿名函数使用
let arr = [1,2,3];
arr.forEach(function(element, index){
	console.log(element, index);
})

arr.forEach(f(element,index) =>{
	console.log(element, index);
});

注意事项

1.箭头函数中的this取决于函数的定义，而不是调用
 funtion foo(){
    console.log(this);
 }
 foo();
 foo.call({num:1});//这里的是使用call调用，那么this代表是传入的对象
2.箭头函数不可以new
 let foo = () => {this.num = 123};
 new foo();
3.箭头函数不可以使用arguments获取参数列表，可以使用rest参数替代
 let foo = (a,b) => {
    console.log(a,b);
    console.log(arguments);//这种方式获取不到
 }
 foo(1,2); 
let foo = (...param) = {
    console.log(param);
}
foo(12,34);

以上是针对ES6语法做的简单的总结，以后在补充。