前端面试题总结---ES6新特性

ES6新特性

一、let，const

$(function(){
          
   
	//es6 ECMAscript规范，js实现
	//let const var ===  声明变量
	var a = hello; 
	let b = hi;
	// 1.不存在变量提升
		console.log(c);
		var c = c;
		===
		// var c;(此处为js预解析，隐含存在,上面的代码执行中隐藏着这个。)
		console.log(c);
		var c = c;
		---
		// 若var，执行结果为undefined;不是c也不会报错
		// 若let，则会报错，let不存在预解析【error】
	// 2.同一个作用域下不能重复定义同一个名称
		var d = 1;
		var d = 100;
		console.log(d);
		// 若var，执行结果为100，var定义的可以覆盖之前的
		// 若let，执行结果报错，不可再次定义【error】
		let d = 1;
		d = 100 ;
		console.log(d);
		// 这种情况为修改，执行结果为100
	// 3.有着严格的作用域 var属于函数作用域；let属于块级作用域
		function fun(){
          
   
			var n = 10;
			if(true){
          
   
				var n = 100;
			};
			console.log(n)
		};
		fun()
		// var 执行结果为100，后面的会覆盖前面的；用var定义，则在function类中整个函数体内都会作用；因此用var的时候需要注意，不要和全局变量命名相同了，否则局部的会覆盖掉全局的。
		// let 执行结果为10，以{}为一个块级作用域，此处不报错是因为二者不在同一个作用域下，分别执行。
})

ps：js预解析功能，按照浏览器的功能会提前将命名的变量提前解析，然后再逐步加载代码执行。

// 1. const 声明一个只读的**常量**，一旦声明，常量的值就不能改变
	const w = 100;
	w = 200;
	console.log(w)
	// 执行报错【error】
// 2. const 一定要初始化，不能只声明不赋值
	const r; 
	// 报错【error】
// 3. 数组、对象等引用型，定义时相当于定义了一个内存地址，可以对其中的值改变.
	const obj = {
          
   };
	boj.name = amy;
	console.log(obj)
	// 执行结果为{name:amy}
	const arr = [];
	arr.push(1);

ps：常量：字符串、数值、布尔型等

二、箭头函数

简化了函数的定义 箭头函数中对应的this的指向，指向的是定义的时候而不是执行的时候。

// 若不需要传参的时候，不需要加（）
	let f = v => v; // 变量名=参数=>返回值（函数体）
	===
	var f = function(v){
          
   
		return v;
	}
// 若对应多个或0个传参的时候需要加（）
	let f2 = () =>123;
	===
	var f = function(){
          
   
		return 123;
	}
	let f3 = (n1,n2) =>n1+n2;
	===
	var f = function(n1,n2){
          
   
		return n1+n2;
	};

三、新增数据类型：set、map

// set 类似于数组，成员是唯一的
// map 类似于对象，键并不是单纯的字符串，类型更多
	const s = new Set();
	s.add(1);
	s.add(2).add(3).add(4);//支持链式添加
	s.add(2).add(3).add(4).add(2);//这样的情况下不会打印最后的2，因为set中成员是唯一的，去重处理了。
/**
	例子：对var arr=[2,3,4,5,6,6,3,4,5] 去重处理
	 var arr2 = [...new Set(arr)];
*/
// map 以键值对的形式添加值
	const m = new Map();
	m.set(name,amy).set(age,18);
	for(let [key,value] of m){
          
   
	}

五、留言板实例

$(function(){
          
   
    const m = new Map();
    // 提交留言
    $(".submit").click(()=>{
          
   
        let _name = $(".name").val();
            _msg = $(".message").val();
        m.set(_name,_msg);
        listShow();
    });
    // 展示留言
    let listShow = () =>{
          
   
        let str = "";
        for(let [key,value] of m){
          
   
            str += `<li class="list-group-item">${
            
     key}
                        <sapan>说：</sapan>${
            
     value}
                    </li>`
        };
        $(".messageList").html(str);
    }
})