学习ES6（一）-基础语法

学习ES6（一）-基础语法

变量

     说明ES6新增变量之前，先说明使用ES5变量var存在的问题

新的变量申明方法

ES5变量 var存在以下几个问题：

     1、可进行重复声明

// 1、var可进行重复声明
var a = 10;
var a = 12;
alert(a);

     2、无法控制常量不可进行修改

// 2、无法控制常亮不可进行修改
var BASE = 12;
BASE = 15;
alert(BASE);

    3、不存在块级作用域

这里采用一个简单的demo，设置按个按钮点击，按钮1弹出1，点击按钮2弹出2...

设置按钮如下：

<input type="button" value="按钮1"></input>
<input type="button" value="按钮2"></input>
<input type="button" value="按钮3"></input>

如果js按照以下写法：

// 3、没有块级作用域
var btns = document.getElementsByTagName("input");
for(var i = 0; i < btns.length; i++) {
    btns[i].onclick = function(){
        alert(i);
    }
}

 

按照以前ES5的语法，使用闭包：

// 3、没有块级作用域
var btns = document.getElementsByTagName("input");
for(var i = 0; i < btns.length; i++) {
    (function(i){
        btns[i].onclick = function(){
            alert(i + 1);
        }
    })(i)
}

分析：

    ES5 var的作用域是函数级。例如，在块中（即{}中），定义一个变量a，ES5 var定义的变量在块级外面依然可以进行获取及赋值：

			{
				// 在块级作用域中定义一个变量a
				var a = 5;
			}
			alert(a);
			
			// 进对a行赋值
			a = 10;
			alert(a);

    因此，在上述demo中，变量i是属于函数级，当i发生变化时，函数级的i都将发生变化，而使用闭包，强行给i设置一个函数的作用域，因此每一个i都是一个独立的i不会进行影响。

 

ES6新增变量

    比较完ES5变量存在的问题，那么介绍ES6中新增的两个语法；

    let : 用于设置变量，可防止变量重复申明，作用于块级作用域

    const  : 用于设置常量，可防止变量重复申明，作用于块级作用域

    1、防止重复声明，在ES6中使用let，const进行申明的变量、常量在重复声明后，会报错

			let a = 3;
			let a = 4;

    同样使用const进行声明的常量，如果存在重复申明，也会报相同的错误

     2、可控制常量不可进行修改，如果对const定义的常量进行赋值，则会报错

// 定义一个常量
const BASE = 10;
// 对常量进行赋值
BASE = 20;
alert(BASE);

    3、块级作用域，使用let在块级作用域中定义一个变量a，如果在作用域外进行使用，则会报错

			{
				// 在块级作用域中定义一个变量a
				let a = 5;
			}
			
			// 弹出一个a 
			alert(a);

  还是之前的demo，这里使用ES6中语法let对变量进行声明

        <input type="button" value="按钮1"></input>
		<input type="button" value="按钮2"></input>
		<input type="button" value="按钮3"></input>
		
		<script>
			var btns = document.getElementsByTagName("input");
			for(let i = 0; i < btns.length; i++) {
				btns[i].onclick = function(){
					alert(i + 1);
				}
			}
			
		</script>

 

解构赋值

            // 解构json
			let json = {a:10,b:5};
			let {a,b} = json;
			alert(a);
			
			// 解构数组
			let arr = [10,20,30];
			let [c,d,e] = arr;
			alert(d);

    解构赋值，主要用于方便解析json及数组，使用时需注意三点：

         （1）、两边的结构必须一样，不能一边是数组，一边是json

         （2）、右边语法必须正确，不能存在{12,5}，如果是这种语法不对的那么也不可以进行解构

         （3）、赋值和解构必须同时完成，如果存在如下情况，那么也将不能进行解构

let {a,b};
{a,b} = {a:12,b:5};

函数

箭头函数

   对原来ES5的函数定义进行简写,及修正this

// ES5函数的定义
function (){
    ...
}

// 箭头函数
() => {
    ...
}

    ES6箭头函数简写：

         （1）、如果有且仅有一个参数，（）可以省略不写

// ES5
function xx(a){
    alert(a);
    return a +5;
}

// ES6箭头函数
a => {
    alert(a);
    return a +5;
}

         （2）、如果有且仅有一条已经并且是return语句，{}可以省略不写

// ES5
function xx(a){
    return a +5;
}

// ES6箭头函数
a => a +5;

// ES5
function add(a,b){
    return a +5;
}
// ES6箭头函数
(a,b) => a + b;

修正this

     通过以下demo，我们定义个类，在类中打印this，然后将this赋值给一个新的对象

// ES5   
        class Json {
				constructor(){
					console.log(this);
					this.a = 15;
					this.fn = function(){
						console.log(this);
						alert(this.a);
					}
				}
			}
			
			let json = new Json();
			let oDate = new Date();
			oDate.fn = json.fn;
			oDate.fn();

从结果上看，报undefined且this发生了变化，然后我们使用箭头函数定义类中的方法

// ES6  
        class Json {
				constructor(){
					console.log(this);
					this.a = 15;
					this.fn = () => {
						console.log(this);
						alert(this.a);
					}
				}
			}
			
			let json = new Json();
			let oDate = new Date();
			oDate.fn = json.fn;
			oDate.fn();

从结果上看，打印正常，this没有因为赋值给一个新的对象发生变化

 

参数展开

    （1）剩余参数

    收集参数，示例如下：

			function show(a,b,...c){
				console.log(a,b,c);
			}
			
			show(1,2,3,4,5,6);

   结论：从结果中可以看出，多余的参数以数组的形式进行打印，使用时需注意的是JavaScript定义剩余参数时，必须是形参的最后一个参数，否则会报错（即不能定义为function show（a,b,...c,d）{}）。如果调用时只传对应的参数，没有剩余参数，则会返回一个空的数组。

    数组展开，示例如下:

let arr = [1,2,3]
function show(a,b,c){
	console.log(a,b,c);
}
			
show(...arr);

  结论：使用...arr进行数组展开，在调用show方法时，相当于show(1,2,3).

数组展开

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
alert(arr3);

Json展开

			let jsonA = {
				a:10,
				b:20
			}
			
			let jsonB = {
				...jsonA,
				c:30
			}
			
			console.log(jsonB);

   json展开，...jsonA相当于a:10,b:20

原生对象扩展

Array扩展

    1、map ：映射

			let arr = [62,30,98];
			let arr2 = arr.map(item => item >= 60 ? '及格':'不及格');
			console.log(arr);
			console.log(arr2);

    2、reduce ： 缩减

			let arr = [62,30,98];
			console.log(arr);
			let result = arr.reduce((tem,item,index) => {
				console.log("tem:" + tem + " item:" + item + " index:" + index);
				return tem + item;
			})
			console.log("result:" + result);

    reduce方法拥有三个参数，tem临时结果用于将结果作为参数传入下一循环，item当前值，index当前下标。同样map也存在index，只是上述demo不需要，因此可以不写。

    3、filter ： 过滤

			let arr = [62,31,98,45];
			console.log(arr);
			let arr2 = arr.filter(item => item % 2 === 0)
			console.log(arr2);

    filter拥有两个参数item当前值及index当前下标

    4、forEach ： 遍历

    

			let arr = [62,31,98,45];
			console.log(arr);
			arr.filter((item,index) => {
				console.log("第" + index + "个值为:" + item);
			});

    forEach 拥有两个参数item当前值及index当前下标

模板字符串

			let index = "张三";
			alert(`你好${index}`);

使用``反单引号括起来中的内容可以使用${变量}，将变量中的值植入到字符串中

Json写法

JSON.stringify() ： 解析字符串，将json对象转换为字符串

JSON.paser() ：反序列化，将字符串转换为json对象

附件

ES6学习（一）-基础语法.zip 链接：https://pan.baidu.com/s/1chRUBfXeL5lX9jRA9RwcKQ  提取码：iht1