前端笔记——ES6

前端笔记——ES6基础知识

let的使用

用来声明变量。它的用法类似于var ,但是所声明的变量,只在let命令所在的代码块内有效。

存在块级作用域{}

不存在声明提升

不允许重复声明(包括普通变量和函数参数)

链接: let 和 var 的区别

const的使用

用来声明常量,不要试图改变常量的值.其他语法参照let

解构赋值

按照一定模式，从数组和对象中提取值，对变量进行赋值。

数组

let [a, b, c] = [1, 2, 3]; //a = 1; b = 2; c = 3

默认赋值

[a, b = 2] = [3] ; // a = 3, b = 2
let c;
[a = 3] = [c]; // a = 3, c = undefined

对象

let {a,b}= {a:" aaa" , b:" bbb" }; // a = " aaa" , b = " bbb"
let {a:b}= {a:" aaa" }; // a = " aaa" , b = " aaa"
let{a,b= 5}= {a: 1}; // a = 1, b = 5

模版字符串

将变量或表达式直接嵌入字符串，使用反引号(``) 拼接多行字符串，所有模板字符串的空格和换行，都是被保留的。

	let str = `shhsggdhgdgd
    hsjhjhjsggshg`;
    console.log(str);

模板字符串中嵌入变量，需要将变量名写在 ${ } 中，还可以在字符串中调用函数。

		let name = 'marry',
            age = 20;
        console.log(`${name}今年已经${age}岁了`);
        
        function func(){
            return 'string';
        }
        let str=`this is ${func()}`; 
        console.log(str);

模板字符串的大括号内部，就是执行Javascript代码

支持嵌套

链接: 模版字符串.

箭头函数

只含有1个表达式
注意：只有一个参数的话括号才可以省略

	   var f = () => 1;
       console.log(f()); //1
       var t = (a) => a;
       console.log(t(10)); //10
       var f = v => v;
       // 等同于
       var f = function (v) {
       return v;
		};

含有多条语句
由于大括号被解释为代码块，如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

	   var k = (a) =>{
           let b = 2;
           return a +b;
       }
       console.log(k(10)); 

this的指向问题
箭头函数的this指向定义时所在的作用域，而不是执行时所在的作用域！ 因此：

• call，apply，bind 三个方法不适用于箭头函数
• 不能用作构造函数
• 不能使用arguments
• 不能作为对象的方法调用，因为还是指向上下文，而不是调用的对象
• 如果需要this操作，不能用作addEventListener里传的参数

	var obj = {
        'name': 'marry',
        'f' :function(){
            console.log(this);
            //这就是定义时所在的作用域了，this指向和这条语句this的指向一样
            setTimeout(()=>{console.log(this.name)},1000);
        }
    }

参考链接
例题

set结构

类似数组，但是它的成员没有重复值

	let set = new Set([1,2,3,4,4]);
	>undefined
	>set
	Set(4) {1, 2, 3, 4}

[…set] //…扩展运算符,将类数组对象转换以逗号分割的序列

	let set = new Set([1,2,3,4,4]);
	let arr = [...set];//再次将set结构转化为数组

set 的遍历用 for of

	let set = new Set([1,2,3,4,4]);
	for (let i of set){
		console.log(i);
	}

set的属性方法

set.size //长度  
set.add(0)  set.delete(0)  set.has(0)   set.clear()
keys(): 返回键名的遍历器
// for (let item of set.keys0) { console.log(item); }
values(): 返回键值的遍历器
entries(): 返回键值对的遍历器
forEach(): 使用回调函数遍历每个成员
//set.forEach((value, key) => console.log(value * 2))

注意：键名和键值其实都指的是set的值\

例题

变量set具有成员不重复的特点,对于原始值来说,不重复指的是值不重复,而对于对象, 函数, 数组等引用值来说, 看的是地址, 只要地址不一样,就不算重复, 即使数组长得一摸一样. 由此分析之后可得set最后保留的值是[[1], [], [], [1] ] .

map结构

	let map = new Map([["aame","john"],["age", 30]]);

map的属性方法

map.set(1,1);
map.size //长度
map.set(key,value); map.get(key); 
map.delete(key);map.has(key);map.clear();
keys(): 返回键名的遍历器
values(): 返回键值的遍历器
entries(): 返回键值对的遍历器
forEach(): 使用回调函数遍历每个成员
//map.forEach((value, key) => console.log(value * 2))

生成器函数（generator）

生成器函数链接

注意：next()里可以传参数，参数表示上一次yield返回的值。

	function* foo(x){
		var y = 2*(yield(x+1));
		var z = yield(y / 3);
		return(x + y + z);
	}
	var it = foo(5);
	console.log(it.next (3));
	console.log(it.next(12));
	console.log(it.next(13));