ES6新增语法总结与案例

ES6新增语法

1、let、const

(1)、变量声明let和const
	var a = 123
	// let 声明的变量不存在预解析
	console.log(a);
	let a = 123
(2)、// let 声明的变量不存在预解析
	let a = 123
	let a = '123'
	console.log(a);
(3)、// ES6 引入了块级作用域
	if(true) {
	    // var flag = 12
	    let flag = 11
	}
	console.log(flag);
	{
	    // 这里是块级作用域
	    let a = 1
	    // console.log(a);
	}
	// console.log(a);
(4)、for (let i=0;i<3;i++){
		    // for 循环括号中声明的变量只能在循环体中使用
		    console.log(i);
		}
		console.log(i);
(5)、// 在块级作用域内部， 变量只能先声明在使用
	if(true) {
	    console.log(flag);
	    let flag = 123
	}
(6)、// const 用来声明常量
		// const 声明的常量不允许重新赋值
		 const a = 1
		 a=2
(7)、// const 声明的常量必须初始化
	const acb

变量的解构赋值

 1. 变量的解构赋值
 	var a =1
	var b =2
	var c =3
	// console.log(a,b,c);
	var a =1,b =2,c =3
	console.log(a,b,c);
2.数组的解构赋值
	var [a,b,c ] = [1,2,3]
	console.log(a,b,c);
	let [a,b,c ] = [,123,]
	console.log(a,b,c)
3.对象的解构赋值
	let {foo,bar} = {bar: "hi", foo:"hello"}
	console.log(foo,bar);
	对象属性别名(如果有了别名，那么原来的名字就无效了)
	let {foo:abc,bar} = {bar: "hi", foo:"nihao"}
	console.log(abc,bar);
	
	let {cos,sin,random} = Math
	
	console.log(typeof cos);
	console.log(typeof sin);
	console.log(typeof random);
4.字符串的解构赋值
	let [a,b,c,d,e,length] = "hello"
	console.log(a,b,c,d,e);
	console.log(length);
	console.log("hello".length);

字符串扩展
icludes() 判断字符串中是否包含指定的字符串（有的话返回true，否则返回false）
              参数一：匹配的字符串； 参数二：从第几个开始匹配
(1)、	console.log('hello world'.includes('world', 7));
		let url = 'admin/index.php'
		console.log(url.startsWith('admin'));
		console.log(url.endsWith('phph'));
(2)、	let obj = {
		    username: 'lisi',
		    age: '12',
		    gender: 'male'
		}
	反引号表示模板，模板中的内容可以有格式，通过${}方式填充数据
		let tpl = `
		    <div>
		    <span>${obj.username}</span>
		    <span>${obj.age}</span>
		    <span>${obj.gender}</span>
		    </div>
		`
		console.log(tpl);

函数扩展
(1)、function foo(param) {
	    let p = param || "hello"
	    console.log(p);
	}
	foo('hi')
(2)、function foo(param='nihao') {
	    // let p = param || "hello"
	    console.log(param);
	}
	foo('hello kitty')
(3)、rest参数(剩余参数)
	function foo(a,b,...param) {
	    console.log(a);
	    console.log(b);
	    console.log(param);
	}
	foo(1,2,3,4,5)
结果是：
	1
	2
	[ 3, 4, 5 ]
(4)、扩展运算符
	function foo(a,b,c,d,e) {
	    console.log(a+b+c+d+e);
	}
	foo(1,2,3,4,5)
结果是：15