前端必知 ES6语法

1、ES6常用语法

1、let

特点：

• 在块作用域内有效
• 不能重复声明
• 不会预处理, 不存在提升
• 应用：循环遍历加监听

   //console.log(age);// age is not defined
   let age = 12;
   //let age = 13;不能重复声明
   console.log(age);
   let btns = document.getElementsByTagName('button');
   for(let i = 0;i<btns.length;i++){
           btns[i].onclick = function () {
               alert(i);
           }
   }

2、const

作用：定义一个常量
特点：不能修改
应用：保存不用改变的数据
注意事项：一定要赋初始值，一般常量要大写（潜规则）
对于数组和对象的元素修改，不算做常量的修改，不会报错

    const sex = '男';
    console.log(sex); // 男
    //sex = '女';//不能修改
    console.log(sex);

3、变量的解构赋值

//ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值
//解构赋值
//1数组的结构
const F=['你','好']
let [ni,hao]=F
console.log(ni) // 你
console.log(hao) //好
//2对象的结构
 const zhap={
	 name:'篮球'
 }
 let {name}=zhap;
 console.log(name) //篮球

4、模板字符串

模板字符串 : 简化字符串的拼接

• 模板字符串必须用 `` 包含
• 变化的部分使用${xxx}定义

 let obj = {
        name : 'anverson',
        age : 41
    };
    console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age); //我叫:anverson, 我的年龄是：41
    console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);  //我叫:anverson, 我的年龄是：41
    

5、箭头函数

不能作为构建实例化对象
不能使用arguments变量

//ES6允许使用箭头函数 =>
//  声明一个函数
 let f=function f(){
  console.log("一般函数")
 }
// 箭头函数
let jia=()=>{
    console.log("箭头函数")
}

 
// 调用函数
jia()
//this是静态的，this始终指向函数声明时所在作用域下的this的值
function getName(){
    console.log(this.name)
}

let getName2=()=>{
    console.log(this.name)
}
//设置window对象的name属性
window.name='你好'
const school={
    name:"nihao"
}
//直接调用
getName();
getName2()
//call方法调用
getName.call(school);
getName2.call(school)
// 箭头函数的简写
//   当只有一个参数的时候，省略小括号
let t= n =>{
    return n+1
}
console.log(t(1))
//省略花括号，当代码体只有一句语句的时候,此时return必须省略，而且语句的执行结果就是函数的返回值
let pow =(n)=> n*n;
console.log(pow(2))

6、点点点（…）扩展运算符

…运算符可以将数组转换成逗号分隔的参数序列

let e=['我的','你的','好']
   //声明一个函数
   function c(){
       console.log(arguments)
   }
   c(...e) // ['我的', '你的', '好']
   const r=['2','3']
   //数组的合并
   const er=[...e,...r]
   console.log(er) // ['我的', '你的', '好', '2', '3']
   

7、简化对象写法

 let x = 3;
    let y = 5;
    //普通额写法
//    let obj = {
//        x : x,
//        y : y,
//        getPoint : function () {
//            return this.x + this.y
//        }
//    };
    //简化的写法
    let obj = {
        x,
        y,
        getPoint(){
            return this.x
        }
    };
    console.log(obj, obj.getPoint());
	
	//ES6中允许在大括号里面,直接写入变量和函数,作为对象的属性和方法
	let name='mm'
	let chage=function(){
		console.log("特别好")
	}
	const school={
		name,
		chage,
		improve(){
			console.log("我们可以提高你的技能")
		}
	}

8、函数参数默认值

ES6中允许给函数参数赋初始值

//形参初始值，具有默认参数一般靠后
 function add(a,b,c=10){
       return a+b+c
   }
   let result=add(1,2)
   console.log(result) // 13

9、rest参数

用于获取函数的实参，代替ES5中的arguments

//rest参数必须放在参数的后面
   function data(a,b,...args){
       console.log(args) //['jaja']
   }
   data('da','adja','jaja') 

10、迭代器

迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署了iterator接口，就可以完成遍历操作。
作用：

• 为各种数据结构，提供一个统一的、简便的访问接口；

• 使得数据结构的成员能够按某种次序排列

• ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费。

• 原生具备iterator接口的数据(可用for of遍历)

  1、Array
  2、arguments
  3、set容器
  4、map容器
  5、String
  6、TypedArray
  7、NodeList

 // 原生测试  数组
        let arr3 = [1, 2, 'kobe', true];
        for(let i of arr3){
          console.log(i); // 1 2 kobe true
        }
        // 字符串  string
        let str = 'abcdefg';
        for(let item of str){
          console.log(item);//a b c d e f g
        }