前端技术栈简介 和 ES6新特性

前后端技术栈类比

ES6

简介

ES6新特性

let 新特性

作用域

		 // var 声明的变量往往会越域
        // let 声明的变量有严格的局部作用域
        {
            var a = 1;
            let b = 2;
        } 
        console.log(a); // 1 
        console.log(b);  //  b is not defined

let 变量名只能声明一次

   // let 变量名只能声明一次，var可以多次声明
        var m = 1;
        var m = 2;  // 2
        let n = 3;  // 3 
        let n = 4;  // Identifier 'n' has already been declared
        console.log(m)
        console.log(n)

let 不存在变量提升, var 变量提示

 	   // var 变量提示
      // let 不存在变量提升
      console.log(x);  // undefined
      var x = 10;
      console.log(y);  // Cannot access 'y' before initialization
      let y = 20;

const 声明常量（只读变量）

  // const 声明之后不许改变
   // const 一旦声明必须初始化，否则报错
   const a = 1;
   a = 2; // Assignment to constant variable.

解构表达式

  	   let arr= [1,2,3];
        // 以前
        // let a = arr[0];
        // let b = arr[1];
        // let c = arr[2];

        // 现在 ,表示解构一个数组，把里面的每一个值拿出来
        let[a,b,c] = arr
        console.log(a,b,c);


        const person = {
            name: "jack",
            age: 24,
            language: ['java','js','html']
        }
        // 以前
        // const name = person.name;
        // const age = person.age;
        // const language = person.language;
        // 现在，解构person对象，把里面的每一个值拿出来
        // name:abc 表示从perons解出name的值 赋值给abc
        const{name:abc,age,language} = person;
        console.log(abc,age,language);

字符串拓展

  let str = `
  hello    
`;
  console.log(str)

字符串插入变量函数，表达式

          // 字符串插入变量和表达式，变量名写在${} 中， ${} 中可以放入 JS 表达式
        let name = "张三";
        let age = "20";
        let info = `我是${name} , 今年${age}了`;
        console.log(info)

        function fun() {
            return "这是一个函数";
        }

        let n = `我是${name} , 今年${fun()}了`;
        console.log(info)
        console.log(n)

函数优化

函数参数默认值

 	 // ES6 以前
        function add(a, b) {
            // 判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
        // 传入一个参数
        console.log(add(10)); // 11

        // 现在写法，直接给参数写上默认值，没传就会自动使用默认值
        function add2(a, b = 1) {
            // 判断b是否为空，为空就给默认值1
            return a + b;
        }
        console.log(add2(10)); // 11

不定参数

   function fun(...value) {
  // 打印出参数的个数
       console.log(value.length)   // 2,4
   }
   fun(1,2)
   fun(1,2,3,4)

箭头函数 =>

     // 以前
        var p = function (obj) {
            console.log(obj);
        }
        // 现在
        var p1 = obj => console.log(obj);  // hello
        p1("hello")

		// 多个参数
	    var sum = (a, b) => a + b;
        console.log(sum(1,3))

多个参数，多个方法体

对象优化

新值API

  const person = {
   name: "jack",
       age: 22,
       language: ['java','php','js']
   }
   // 获取对象的所有key(即属性名),返回数组
   console.log(Object.keys(person)) // ["name", "age", "language"]
   // 获取对象的所有value(即属性值),返回数组
   console.log(Object.values(person)) // ["jack", 22, Array(3)]
   // 获取的所有key 和 value，返回二维数组 ,二维数组的每一个元素是[key，value]
   console.log(Object.entries(person)) // [Array(2), Array(2), Array(2)]

声明对象简写

// ES6以前
  const age = 23;
  const name = "zhangshan";
  const person = {
      age: age,
      name: name
  }

  // 如果对象里面的属性名 和 声明的属性名一样，可以简写
  const person1 = {age, name}

对象函数属性简写

  let person = {
     name: "jack",
      eat: function (food) {
          console.log(this.name +  "在吃" + food);
      },  
      // 箭头函数this 不能使用，可以使用  对象名.属性名
      eat2: food => console.log(person.name +  "在吃" + food),
	 // 简写
      eat3(food) {
          console.log(this.name +  "在吃" + food);
      }
  }

  person.eat("香蕉");
  person.eat2("苹果");
  person.eat3("西瓜")

对象的拓展运算符
拓展运算符 (…) 用于取出参数对象所有可遍历属性，然后拷贝到当前对象

对象拷贝和合并对象

 // 1.对象拷贝
let person = {name: "jack", age: 15}
 let person1 = {...person}
 console.log(person1) // {name: "jack", age: 15}

 // 2.合并对象
 let age = {age: 15}
 let name = {name: "jack"}
 // 如果两个对象的字段名重复，后面对象字段值会覆盖前面对象的字段值
 let person2 = {...age, ...name}
 console.log(person2)  // {age: 15, name: "jack"}

数组的 map 和 reduce 方法

1)、map()
接收一个函数，将原数组中的所有元素用这个函数 处理后放入新的数组返回

// map():接收一个函数，将原数组中的所有元素用这个函数 处理后放入新的数组返回
  let arr = [1,20,-5,3];
  // 将数组中每一个元素乘以2,返回一个新的数组
  let arr2 = arr.map((item) =>{
      return item*2
  })
  console.log(arr2) // [2, 40, -10, 6]

 // reduce(): 为数组中每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素
// reduce(callback, initValue): callback 函数，可以有4个参数:
  //    参数1:上次回调的返回的值，参数2:当前值， 参数3：当前元素的索引， 参数3: 当前数组
let sum =  arr.reduce((a,b)=>{
     console.log("上一次处理后返回的值：" + a)
     console.log("当前的值："+b)
     return a+b;
 })
 console.log("求和：" + sum)

Promise

解释：

 // promise可以封装异步操作
        // promise() 内可以传一个函数，该函数有2个参数，resolve,reject
        // resolve:操作成功了，解析数据              
        // reject:操作失败 拒绝
        let p = new Promise((resolve, reject) =>{
           
            if(true) {
                 // 异常操作成功了，
                 resolve(data);    
            } else {
                // 异步操作失败
                reject(error);
            }
        })

        p.then(obj => {
            // 可以得到上一步 resolve 传进来的数据
            // 成功了干某些事件

        }).catch(err => {
            // 可以得到上一步 reject 传进来的数据
            // 失败了干某些事情
        })

步骤：

简化后：

模块化

export：导出，不仅可以导出对象，一切JS变量都可以导出。比如:基本类型变量，函数，数组，对象

代码示例：

hello.js 文件

export {util,name}

const util = {
    sum(a, b) {
        return a + b;
    }
}

var name = "zhangshan";

导入：

import {util,name} from "./hello.js"

var sum = util.sum(3,1)
console.log(sum)

console.log(name)