ES6新特性详解-优快云博客

symbol 属性私有化 - 数据保护

	var a = Symbol(123)
    var b = Symbol(123)
    console.log(a==b)
    // a不等于b，结果一样也不想等
 {
        // 作用域:变量的作用范围
        var aa=3;
        let bb = 4;
        const c = 5;
        // let const只在“{}”内使用或者说在这个里面才可以访问的到
        // let const无法重复声明,支持块作用域
    }
    扩展运算符
    var arr =[1,2,6,851,15,25,34];
    console.log( Math.max( ...arr ))
    
	//多重解析 
    let {faa:[ab,ba]} = {faa:[50,30],aaa:'ccc'}
    // console.log(ab,ba)
    // let [ac,ad] = 'abcde'
    // console.log(ac,ad)
    let {left: L, top: T, width: W, height: H} = getComputedStyle(document.body);
    // console.log(style.top)

let const

模板字符串：‘’，“”
se5写法是
var a = '字符串';

es6写法是： ··
var a = `
里面可以支持换行，
`

代码进制：
二进制 0b 例如var a = 0b10；
八进制 0o（es6之前，0开头表示八进制）
十进制:非0开头例如var a = 10
十六进制：0x 例如var a = 0x10

对象简写：
es5写法：
var obj = {
	a:a;
	fu:fn
}

es6写法：
var obj = {
	a,
	fn
}

javascript中属性的值
console.log(obj[属性名]),解析的结果会是“字符串”的格式显示

迭代：循环
迭代对象必须有的属性：symbol.iterator
迭代协议规定迭代器怎么所有：
var c = {
	left:100,
	top:500,
}
obj[symbol.iterator] = function(){
	//let a = 1; 可以给个判断增加循环次数
	let keys = object.keys(c);//object.keys()是获取对象里面的属性，返回的是数组例如['left','top']获得所有keys。
	return {
	//可以在next:function()自定义需要的循环逻辑
		next:function(){
			if(条件){
				return {
					value:'',//返回出去的值
					done:false//判断循环是否终止 ture是终止循环
				}
			}else{
				return{
					value:'',
					done:true
				}
				
			}	
		}	
	} 
}
var a = ['cs','13','aas1']
for(xxx in a){
	consoloe.log(xxx)获取的是索引
}
for(xxx of a){
	consoloe.log(xxx)获取的是值
}

//函数参数
function fn1(x,y){
	//我们x，y的处理，如果不传入实参我们可以通过默认值的方式。
	//var x = x || 0;传入实参或者0这样
}
function fn2(obj = {x:0 ,y:2}){
	console.log(obj);
}
fn2({x:10,y:200});
//es5:
//function fn3(arr,xx,xxx,xxxx)传入不定参
function fn3(){
	//arguments 直接回去就不需要写参数 arguments[i]就是fn3()第几i个
	var arr2 = arguments[0];
	for(var i =1;i<arguments.length;i++){
		arr.push(arguments[i])
	}
}
var arr = [1,2,3,5,15,]
fn3(arr,'a','b','c');
console.log(arr);//结果：1,2,3,5,15,'a','b','c'

es6：
function fn6(arr，...newData){//...表示把后面的参数全部放入newDate里面.
	for(var i =0;i<newDate.length;i++){
		arr.push(newDate[i])
	}
}
var arr = [1,2,3,5,15,]
fn6(arr,'a','b','c');
console.log(arr);//结果：1,2,3,5,15,'a','b','c'

//箭头函数：es6新增的函数写法
//最简单的箭头写法   let fn1=()=>{} 等于这样写 let fn1=function(){}
let fn1=()=>{consloe.log(fn1)}
fn1()
let fn2=x=>{consloe.log(fn1)}//参数只有一个可以省略小括号,没有参数或者多于一个要写括号。
fn2 (x)
//箭头函数一般不会使用到鼠标事件里面，因为箭头函数的this的是绑定无法更改的。一般箭头函数会绑定在时间事件（setInterval（fu，300））里面因为setInterval（）的this是指windin
for(let i=0;i<xxx.length;i++){
	lis[i].onclick=function(){
		//setTimeout(function(){
		//	this.style.background='red'
		//},1000)
		//因为this指向Windows，而Windows里没有style属性所以会报错。
		let fn = () => {
			this.style.background='red'
		};
		//因为let fn = () =>在lis[i].οnclick=function所以会指向lis[i]，而lis[i]里有style属性所以可以使用。
		setTimeout(fn,1000);
	}
}