ES6新特性

最新推荐文章于 2022-01-18 15:18:35 发布

asdasd1fdsyrt

最新推荐文章于 2022-01-18 15:18:35 发布

阅读量215

点赞数

分类专栏： # Vue 文章标签：前端 es6

本文链接：https://blog.youkuaiyun.com/asdasd1fdsyrt/article/details/110354324

版权

Vue 专栏收录该内容

4 篇文章

订阅专栏

1.let声明变量和var的区别
var 定义的变量可以被修改，不初始化会输出undefined，不会报错
let 定义的变量是块级作用域，函数内部使用let定义，对函数外部无影响

//1.在同一个作用域中，var可以重复定义一个变量，但是let不可以
//2.let一定是定义了变量再使用，let只在定义它的作用域中才可使用
{
	var a = 1;
	var a = 2;
	//1.不可以
	let b = 1;
	let b = 2;
	//2.不可以
	c = 1;
	let c = 2;
	}
	//3.d不加任何修饰，就是全局变量（在语句块里也是全局变量）
	d = 1;

2.const 常量

{
	//1.定义后不可以改变
	const a = 1;
	//不可以
	a = 2;
	//2.引用类型的可以改变（数组，对象）
	const array = [1,2,3,4,5];
	array.push(6);
	console.log(array);
	//[1,2,3,4,5,6]
	const obj = {name:"张三"};
	obj["age"] = 18;
	console.log(obj);
	//{userName : "张三",age : 18}
}

3.es6委托

{
//带参数的委托方法
	 function delegateFunc(func,val){
	 	func(val);
	}
//普通方法
	function testFunc(val){
   		console.log(val+" this is delegate");
 	}
 	
	delegateFunc(testFunc,"Hello");
	//Hello this is delegate
}

{
//委托方法(带参数)
	 function delegateFunc(func,val){
	 	func(val);
	}
	delegateFunc(function(val){
		console.log(val+"this is delegate");
		},"123");
		
	//匿名方法赋给委托方法的变量	
	var func1 = delegateFunc(function(val){
		console.log(val+" this is delegate");
	});
	delegateFunc(func1,"123");
	//123 this is delegate

	//箭头函数
 	delegateFunc((val=>{
		console.log(val+" this is delegate");
		},"hahaha");
	//hahaha this is delegate
}

c#中的委托

{
//委托方法
	 function delegateFunc(func){
		 func();
	}
	delegateFunc(delegate(){
		console.log("this is delegate");
		});
//lambda表达式
	delegateFunc(()=>{
	        console.log("this is delegate");
	    	});
	}

4.es6字符串

{
	let userName = "张三"
	let str = userName+ " say hello "+"world";
	console.log(str);
	/*
	 //C#7中 ""外$占位符拼串
	 $"{userName} say hello world"
	 //张三 say hello world
	*/
	//字串换行
	let str2 = "adsasdasdasdas"+
	"dasdasdasdasdasd"+
	"asdasd"; 
//字串 `` 保留原格式输出
	 let str3 = `asdasdasdasdasdasdasdasfcas
	 asdasdasdasdasdasd
	 asdasdasdasdasd
	 asdasdasdasdf`
	 //${userName} 占位符
	let str4 =`${userName} say hello world`
	console.log(str4);
	//张三 say hello world
    }

5.es6 Filter ==> 类比c#中的FindAll 或者 Where

{
	let array = [1,2,3,4,5,6,7,8];
	let newArray = array.filter(m => m>5);
	console.log(newArray);
	//[6,7,8]

	let objArray = [
		{userName : "张三",age : 18},
		{userName : "李四",age : 20}
		 ];
	//返回的还是一个数组，即使只有一个对象
	let newobjArray =  objArray.filter(m=>m.userName=="张三");
	console.log(newobjArray);
	// {userName : "张三",age : 18}
}

6.es6 concat 拼接数组

{
     var list1 = [1,2,3,4];
     var list2 =[5,6,7,8];
     list1 = list1.concat(list2);
     console.log(list1);
     //[1,2,3,4,5,6,7,8]
}

7.es6 扩展运算符 (…)①可变参数类比c#的Params关键字
②解构字符串

{
	var [list1,...list2]=[1,2,3,4,5,6];
	console.log(list1);//1
	console.log(list2);//[2,3,4,5,6]
	
	function func(...list){
		console.log(list);
	}
	func(1,2,3,4,5);//[1,2,3,4,5]
	func(1);//[1]

	var [list1, ...list2] = [];
	console.log(list1);//undefined
	console.log(list2);//[]
	
	var [list1, ...list2] = [1];
   	console.log(list1);//1
    	console.log(list2);//空
	
	//展开数组
	var value = [..."Hello"];
    	console.log(value);
   	//["H","e","l","l","o"]

	//使用展开符来结合数组
	const A = ["a", "b", "c"];
	const B = ["d", "e", "f"];
	const res= [...A,...B];
	console.log(res);
	//["a","b","c","d","e","f"]
}

//对于参数不固定的函数,ES6之前是使用参数对象(arguments)处理:
	function sum() {
	  let total = 0;  
	  for(const argument of arguments) {
	    total += argument;
	  }
	  return total;
	}
//在ES6中使用剩余参数运算符则更为简洁,可读性提高
	function sum(...nums) {
	  let total = 0;  
	  for(const num of nums) {
	    total += num;
	  }
	  return total;
	}

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
<script>
{
	var nodeList = document.getElementsByTagName("div");
   	var value = [...nodeList];//节点集合转换为数组
    	console.log(nodeList);//html 集合
    	console.log(value);//标签数数组
}
</script>

{
//初始化map [[键,值],[键,值],[键,值]]
	let map = new Map([
            [1,'a'],//数组 键值对
            [2,'b'],
            [3,'c'],
         ])
    console.log(map);
    //{1=>"a",2=>"b",3=>"c"}
    //map 字典转为数组
    let arr = [...map];
    let arrKey = [...map.keys()];
    let arrValue = [...map.values()];
    console.log(arr);
    //[Array(2),Array(2),Array(2)]
    //[1,"a"] [2,"b"] [3,"c"]
    console.log(arrKey);
    //[1,2,3]
    console.log(arrValue);
    //["a","b","c"] 
}

Map 字典对象
类比于c#中的Dictionary

{
	//key value 的键值对
        var userMap = new Map();
        userMap.set("userName", "张三");
        userMap.set("age", 18);
        console.log(userMap);
        //{"username"=>"张三","age"=>18}
        //key:"username" (键值对)
        //value:"张三"
        console.log(userMap.get("userName"));  
        //张三
 
 //遍历Map  for..of
        for (const [key,value] of userMap) {
           console.log(key);//username   age
           console.log(value);//张三     18
        }
//普通对象
       var user = {}
       user["userName"] = "张三";
       user.age = 18;
       console.log(user);
       //{"username":"张三","age":18}
       //"username":"张三"
       //"age":18
       
    }

9.class类

{
//ES5中类的使用
	function Class(){ //类  大写
	     function func(){ //方法 小写
		      }
	   }
//ES6中类的使用	
	class Person{ //类
        constructor(){ //构造方法
            this.A = "a";  //原型属性
            this.AA = "aa";
        }
        A = "a"; //成员属性
        run(){  //方法
            console.log("person can run");
        }
    }
    
	var person = new Person();
	console.log(person.A); //a
	console.log(person.AA); //aa
	person.run();   //person can run

//ES6中类的继承
	class Student extends Person{
        eat(){
            console.log("student can eat");
        }
        run(){
            console.log("student can run");
        }
    }
    //可以使用父类的属性和方法
    var student = new Student();
    student.run();  //student can run
    //方法名和父类的方法相同，调用子类自己的方法
    student.eat();  //student can eat
}