vue vite es6转译为es5

JavaScript&ES6

• JavaSCript :

• 数据类型
• 数组
• 函数

• ES6:

• 新的变量声明方式
• 解构赋值
• 箭头函数
• 剩余参数
• 参数模板（模板字符串）
• 数组方法

JavaSCript :

数据类型

• 简单数据类型：Number、String、Boolean、Undefined、和Null
• 复杂数据类型：Object
• 获取变量类型：typeof
• 数据类型转换：toString( )、String()、num+" "、Number、parseInt(str)、parseFloat(str)、Boolean( )
• 布尔类型的隐式转换：
• 转换为true: 非空字符串、非0字符串、非0数字、true、任何对象
• 转换成false：空字符串、0、false、null、undefined

数组

数组的定义、获取、遍历、替换、新增：

//  定义
var arr = [ "red","green","blue"]
// 获取
console.log(arr[0]);
// 遍历
arr.forEach(el =>{
    // 数组遍历
    console.log(el);
});
// 替换
arr[0] = "yellow";
// 新增
arr[3] = "pink";

函数

• agruments的使用：

// agruments：
 function pringArgs(){
     console.log(arguments);
 }
 pringArgs("A",'a',0,{
    foo:"Hello"
 });

• 匿名函数的自调用：

// 匿名函数的自调用
(function(){
    alert(124);
})();

• 函数作为返回值：

// 函数作为返回值
function fn(b){
  var a = 10;
  return function(){
      alert(a+b);
  }
}
fn(15)();

• 作用域：

• 全局变量：不使用var生命的变量（不推荐使用），关闭网页或浏览器才会销毁
• 局部变量：固定代码片段可访问的变量，比如：函数内部
• 词法作用域：

• 函数允许访问函数外的数据
• 整个代码结构只有函数可以限定作用域
• 若当前作用规则中已有名字，则不考虑外面的名字

var num =123;
function foo(){
   console.log(num);
}
foo();
//输出：123

if(false){
  var num = 123;
}
console.log(num);
//输出：undefined

• 闭包函数：
• 闭包(closure) 指有权访问另一个函数作用域中变量的函数
• 简单理解：一个作用域可以访问另一个函数内部的局部变量
• 作用：延伸变量的作用域

//闭包函数例子：
var car =(function(){
var start = 13;
var total = 0;
return {
    // 正常的总价
price:function(n){
if(n<=3){
 total = start;
}else{
    total = start + (n-3) * 5;
}
return total;
    },
    // 拥堵之后的费用
    yd:function(flag){
 return flag ? total +10 :total;
    }
}
 } )();

• 递归：

• 如果函数在内部可以调用其本身，那么这个函数就是递归函数
• 递归函数的作用和循环效果一样
• 由于递归很容易发生"栈溢出"错误（stack overflow），所以必须要加推出条件return

//阶乘例子：
    var n;
    var m =fact( n=prompt("请输入一个数字："));
    document.write(n+'的阶乘是：'+m);
    function fact(n) {
    if (n <= 1) {
             return 1;
    } else {
             return n * fact(n - 1);
    }
}

//斐波那契数列例子：
var n=prompt("请输入数字：");
function fib(n){
if(n==1||n==0){
    return 1;
}
else {
    return fib(n-1)+fib(n-2);
}
}
alert(fib(n));

ES6:

新的变量声明方式

• let / const

• 与var 不同，新的变量声明方式带来了一些不一样的特性，其中最重要的两个特性就是提供了块级作用域与不再具备变量提升
• let : 不可重复声明，块级作用域。 const : 声明常量。

var	let	const
函数作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

解构赋值

• 解构赋值语法是一种javascript表达式，用来将数组中的值或对象中的属性取出来区分为不同变量。
• 分为对象解构赋值和数组解构赋值。
• 例子：定义一个对象，表示三维空间中的一个点，用这些坐标点进行开平方运算。

对象的解构复制

//对象的解构赋值
        let newPoint={
            x:2,
            y:3,
            z:4
        };
        let{x,y,z}=newPoint;
        // sqrt平方根函数 toFixed:保留小数位数
        console.log(Math.sqrt(x*x + y*y + z*z).toFixed(2));

数组的解构复制

let newPoint = [2,4,5];
let [x,y,z]=newPoint;
console.log(Math.sqrt(x*x + y*y + z*z).toFixed(2));

箭头函数

• 箭头函数用于代替匿名函数
• 相当于简写了 function,使用**（）**代替，使用 => 代替 { }

//不带参数
var show2 = () => console.log("hello,world");
show2();

//带参数
var show4 = (name)=>console.log(name);
show4('happiness');

• 传递两个参数，实现一个计算两个数之和的add函数：传递两个参数必须使用括号包裹着
• 如果使用return返回一个执行语句，可以省略return

var add2 = (a,b)=>{
    return a+b;
}
console.log(add2(1,2));

省略return

var add3 = (a,b)=>a+b;
console.log(add3(1,2));

剩余参数

• …用于声明剩余的参数，a,b是命名参数，…c用来收集剩余参数

// 剩余参数
      function show(a,b,...c){
           console.log(a);
           console.log(b); 
           console.log(c);
      }
      show(1,2,4,6,7,9);

参数模板（模板字符串）

• 模板字符串是为了解决使用" + "号拼接字符串的不便利出现的
• 它的功能非常强大，但是大多时候使用它则非常简单
• ${变量名称 / 常量名称}，外面使用反单引号包裹

// 字符串模拟
    let a='hello';
    let b='world';
    let c= `${a,b}`;
    let d=`${a} ${b}`;
    console.log(c);
    console.log(d);

// 对运算的支持
    let x=1;
    let y=2;
    let result = `${x+y}`;
    console.log(result);

数组方法

• Array.from(json)：将json字符串转为数组，json字符串务必要有长度属性

// json数组格式转换
let json={
    '0':'niit',
    '1':'computer',
    '2':'mobile',
    length:3
}
let arr1= Array.from(json);
console.log(arr1);

• 实例方法 find():从数组中查找，传入一个有3个参数的匿名函数

• value：当前查找的值
• index:当前查找的数组索引
• arr : 当前数组

//查找
let arr= [1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
    return value >5;
}));

• 实例方法 fill(value , start , end ): 使用给定值填充数组，数组中的原有元素会被抹去，从位置start开始填充，不包含end位置

// 填充
let arr= [1,2,3,4,5,6,7,8,9];
arr.fill(1,2,5);
console.log(arr4);

• 遍历数组可以使用for…of 或next( )遍历

• entries( ):键值对遍历
• keys( ):键名遍历
• values( ):键值遍历

// 数组遍历
let arr = ['niit','conputer','mobile'];
// 输出索引
for(let index of arr.keys()){
    console.log(index);
}
// 输出值
for(let index of arr.values()){
    console.log(index);
}
// 输出索引和内容
for(let [index,val] of arr.entries()){
    console.log(index+":"+val);
}
// entries()方法
let list = arr.entries()
console.log(list.next().value);

• Array—map
• map( ):返回一个新数组，数组的元素为原始数组元素调用函数处理后的值
• 例如一个数组存放了6位学生的成绩，大于等于60显示及格，否则显示不及格，按照成绩顺序，将及格/不及格显示在新的数组中。

// map
let scores = [25,79,67,85,88,63];
let scores1 = scores.map(score =>{
if(score>=60){
    return "及格";
}else{
   return "不及格";    
}
})
console.log(scores);
console.log(scores1);

• Array—reduce
• reduce( ):接收函数作为累加器，数组的元素从左到右缩减，最终计算为一个值
• 例：将数组[1,3,5,7,9]转换为13579

let arr=[1,3,5,7,9];
let result=arr.reduce((x,y)=>(x*10+y));
console.log(result);

• Array—filter
• filter()： 创建新数组，新数组中的元素通过检查指定数组中符合条件的所有元素
• 例：挑选数组中是偶数的元素：

let scores = [23,45,76,85,12,91];
console.log(scores.filter((item)=>item%2==0));

• Array—forEach

let scores  =[23,45,76,85,12,91];
scores.forEach((item,index)=>{
    console.log(`第${index}个元素`+'是'+item);
})