ECMAScript6

ECMAScript6
ECMAScript6是前端js的语法规范，Javascript完成遵从了该语法规则。
变量声明和模板字符串
变量声明
var：全局变量
let：局部变量
const:常量，常量的值一旦声明后就不允许在修改。

模板字符串

    </tbody>
</table>


<script>
    //let name = '赵敏';
    //console.log("name为:"+name);
    //console.log(`name为${name}`);

    var userList = [
        {'id':1,"name":'张三','color':'red'},
        {'id':2,"name":'张三1','color':'green'},
        {'id':3,"name":'张三2','color':'yellow'},
        {'id':4,"name":'张三3','color':'#aabbcc'},
        {'id':5,"name":'张三4','color':'#ffaacc'},
        {'id':6,"name":'张三5','color':'#ccaaff'}
    ];
    var html="";
    for( var i = 0 ; i < userList.length; i++){
        //字符串拼接
        //html+="<tr style='background-color: "+userList[i].color+"'><td>"+userList[i].id+"</td><td>"+userList[i].name+"</td></tr>";
        html+=`
            <tr style="background-color: ${userList[i].color};">
                <td>${userList[i].id}</td><td>${userList[i].name}</td>
            </tr>
        `;
    }
    $("#tby").append(html);
</script>

编号

名称

解构表达式
简化集合和对象的遍历过程。
集合： var arr = [1,2,3]
for(var i = 0 ; i < arr.length ; i++){
arr[i];
}
结构表达式
var [x,y,z] = [1,2,3];

对象： var user = {“id”:1,“name”:"zhangsan ",“age”:18};
user.id
for(key in user){
user[key]
}
结构表达式
var [id,name,age] = {“id”:1,“name”:"zhangsan ",“age”:18};

函数优化(箭头函数)
var add = function(params){
return a+b;
}
var add =(params) => {
//业务的操作
//如果有返回值 return返回
}

对象中使用箭头函数

数组中的map方法的使用
数据一个for循环不就解决。
var arr = [“1”,“2”,“3”];
arr.map((s)=>{
return parseInt(s);
});
arr.map(s=>parseInt(s));

数组中的reduce方法的使用
将数组进行循环遍历，进行一些累计操作。
var arr = [1,2,4];
arr.reduce((a,b)=>a+b);

promise(小难点)
常用在发送异步请求的工具类抽取中。
对象的扩展方法
Object.keys({‘name’:‘zhangsan’,‘age’:18}); —> name age
Object.values({‘name’:‘zhangsan’,‘age’:18}); —>zhangsan 18

数据的扩展方法
var arr = [10,20,33,44];
find ：查找，返回符合记录的数据
findIndex ：查询，返回符合记录的索引，从0开始
includes ：判断是否包含

for(var i = 0 ; i < arr.length;i++){
if(){
arr[i]; //find
i//findIndex
//true/false
}
}

Babel:
问题： 浏览器版本低，不支持高版本的ECMAScript的新语法。
结论：
babel是一个将ECMAScript高版本语法翻译成低版本语法，让浏览器能认识和解析这些语法。
安装：
（1）当前的项目的根路径下准备一个 .babelrc文件
{
“presets”:[“es2015”]
}

（2）
npm/cnpm install babel-preset-es2015 --save-dev
npm/cnpm install -g babel-cli

通过案例， 导入导出
exports
require

export
export1.js
let name = ‘itcast’;
let age = 18;
var say = function(str){
console.log(str);
}

export {name,age,say};

import
import.js
import * as api from ‘./export1’

console.log(api.name);

console.log(api.age);

api.say(“hello”);

默认导出 default??
export default {

}