带你快速入坑ES6

一、了解ES6

1）ES6官网：http://www.ecma-international.org/ecma-262/6.0/

2）Javascript是ECMAScript的实现和扩展

3）ES学习建议：

• 基础语法（包括与旧版的差异优劣；新版有哪些坑等等）
• 应用场景
• 多在项目中应用

补充：VSCode的插件Live Server的作用：

• 页面更改后自动刷新
• 使用的是http协议而非file://

二、ES6特性入坑

1）let\const

let

// let定义变量
let name = "zhangsan"

// var会造成变量穿透
for(var i=0;i<5;i++){
  console.log(i);
};
console.log("===这里就是变量穿透===>" + i) // 结果：===这里就是变量穿透===>5
// let不会造成变量穿透
for(let i=0;i<5;i++){
  console.log(i);
};
console.log("===这里就是变量穿透===>" + i) // 结果：i is not defined

const：

// ES5
Object.defineProperty(window, 'es', {
  value:'es6',
  writable:false
})
console.log(es) // window.es,括号内为简写;结果：es6
window.es = 'es2015'
console.log(window.es) // 结果：es6

// ES6 const：常量
// 1
const es = 'es6'
console.log(es) // 结果：es6
//es = 'es2015' // 这行报错 
console.log(es)

// 2.const 常量名不允许重复声明
var str = 'es6'
var str = 'es2015'
console.log(str) // es2015

// 3
// const 声明的常量 不属于 顶层对象window
// var   声明的变量 属于   顶层对象window

// 4.const不存在常量提升
// var变量提升
console.log(str) // 结果：undefined
var str = 'es6'
// 相当于
var str
console.log(str) // 结果：undefined
str = 'es6'

// 5.const声明的常量具有块级作用域
// var
if(true){
  var strsix = 'es6'
}
console.log(strsix) // 结果：es6

const声明常量的本质

const声明的常量真的不可以改变吗

const esObj = {
  name:'es6',
  year:2015,
}
esObj.name = 'es2015'
console.log(esObj.name) // 结果：es2015

const esObj = {
  name:'es6',
  year:2015,
}
Object.freeze(esObj)
esObj.name = 'es2015'
console.log(esObj.name) // 结果：es6


const arr = ['es6', 'es7', 'es8']
Object.freeze(arr)
arr[0] = 'es2015'
console.log(arr[0]) // 结果：es6 


const esObj = {
  name:'es6',
  year:2015,
  extension:['es7', 'es8'],
}
// Object.freeze(esObj)
myFreeze(esObj)
esObj.extension[0] = 'es2016'
console.log(esObj.extension[0]) // 结果：es7

// 对深层次的数据进行冻结
function myFreeze(obj){
  Object.freeze(obj)
  // ES5的forEach;keys()方法得到的是数组
  Object.keys(obj).forEach(function(key){
    if(typeof obj[key] === 'object'){
      myFreeze(obj[key])
    }
  });
}

// 建议优先使用const

2）箭头函数

2-1箭头函数

// 1-1.原始写法
const sum = function(x, y){
  return x + y
}
const res = sum(4, 4)
console.log(res)
// 1-2
// 默认参数 给参数列表设定初始值
function add(a=100,b=100) {
    console.log(a,b);    
}
// 执行方法，会用默认值填充，打印出来100,100
add();
// 覆盖默认值打印  结果是1,2      
add(1,2);

// 2.箭头函数写法
const sum2 = (x, y) => {
  return x + y
}
// 相当于：  const sum2 = (x, y) => x + y
const res2 = sum2(5, 5)
console.log(res2)

// 3.只有一个形参，小括号可省略

// 4
const btnObj = document.querySelector('#btn')
// console.log(btnObj)
btnObj.addEventListener('click', () => {
  /*箭头函数里面没有this，当需要在箭头函数里用到this时，
   它会通过当前的作用域链，向它上层的作用域内去找this指向，到底
   指向的谁*/
  console.log(this) // 结果：window
  this.style.backgroundColor = '#f00'
})

2-2箭头函数任何场景都可以使用吗

// 1
const obj = {
  name1:'cy',
  showName:function(){
      console.log('名字：'+ this.name1) //名字：cy
  },
  // 简写：
  showName(){
      console.log('名字='+ this.name1) //名字=cy
  },

  showName:() => {
    console.log('名字：'+ this.name1) // 名字：undefined
  },
}
obj.showName()

// 2
/*function sum2(x, y){
  // function里面的关键字arguments，arguments能够取到形参的值和其它东西
  console.log(arguments)
}
sum2(3, 3)*/

const sum = (x, y) => {
  // 在箭头函数中不能使用arguments
  console.log(arguments) 
  return x + y
}
sum(4, 4) // arguments is not defined

// 3
// 在ES5中使用函数模拟一个类
function Course(mame, price){
  this.name = name
  this.price = price
}
const c1 = new Course('es', 500)
console.log(c1)
// ES5中类的方法定义在原型中
Course.prototype.study = function(){
  console.log(`学习: ${this.name}`) // ES6模板字符串
}
c1.study()
// ES6箭头函数不能作为构造函数
const Course = (mame, price) => {
  this.name = name
  this.price = price
}
// TypeError:Course is not a constructor
const c2 = new Course('es', 500)
console.log(c2)
// ES6箭头函数不能定义原型方法
Course.prototype.study = () => {
  console.log(`学习: ${this.name}`) // ES6模板字符串
}
c1.study()

3）解构赋值

3-1解构赋值

// 1
const course = {
  name:'es6',
  price:500,
  teacher:{
    name2:'cy',
    age:89,
  },
  say(){
    console.log(this) // this指window
    console.log('名字');
  }
}
/*传统的做法：
var name = course.name
var price =course.price
course.say()
 */
/*const {name2, price} = course
  默认情况name,price必须是JSONKey.
  console.log(name2) //结果：undefined */
const {name, price, teacher:{name2, age}, say} = course
console.log(name, price, name2, age)
say()

// 2
const course = {
  name:'es6',
  price:500,
  teacher:{
    name:'cy',
    age:89,
  }
}
// courseName:为别名,可以用冒号取别名
const {name:courseName, price, teacher:{name, age}} = course
console.log(courseName, price, name, age)

// 3
const arr = ['es6', 'es7', 'es8']
const [a, b, c] = arr
console.log(a, b, c)

3-2准确的使用解构赋值

• 函数参数
• 函数返回值
• 变量互换
• JSON应用
• Ajax请求应用

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.js"></script>
<script>
// 1.作为函数的形式参数使用
/*const sum = arr =>{
    let res = 0
    for(let i = 0; i < arr.length; i++){
      res += arr[i]
    }
    console.log(res)
  }
  sum([1, 2, 3])

  const sum = ([a, b, c]) =>{
      console.log(a + b + c)
  }
  sum([1, 2, 3]) */

const foo = ({name, age, school='默认值，传值则改'}) => {
  console.log(name, age, school)
}
foo({
  name:'张三',
  age:20
})

// 2.作为函数的返回值使用
const foo = () => {
  return {
    name:'cy',
    age:20
  }
}
const {name, age} = foo()

// 3.两个变量的值互换
let a = 1
let b = 2
[b, a] = [a, b]
console.log(a, b) // 结果：2 1

// 4.JSON应用
const json = '{"name":"es","price":"500"}'
/*const obj = JSON.parse(json)
        console.log(obj) // {name:"es", price:"500"} */
const {name, price} = JSON.parse(json)
console.log(name, price)

// 5.Ajax请求应用
/*axios.get('./data.json').then(function(res){
     console.log(res)
  })*/
axios.get('./data.json').then(res => {
  console.log(res.data)
})
// axios.get('./data.json').then(res => {console.log(res.data)})相当于
axios.get('./data.json').then(({data}) => {
  console.log(data)
})
axios.get('./data.json').then(({data:{name, type}}) => {
  console.log(name, type)
})
</script>

4）模板字符串

const name = 'itcast'    
console.log(`hello ${name}`)

5）对象简写

如果一个对象中的key和value的名字一样的情况下可以定义成一个。

function person(name, age) {
    // return {name:name,age:age};
    // 对象简写
    return {name, age};
};
// 调用和执行
var json = person("小花花美美", 20);
console.log(json.name, json.age);
//========= 实战应用 =============
//<button onclick="login()">登录</button>
function login() {
    var username = $("#username").val();
    var password = $("#password").val();
    // 发送ajax
    $.ajax({
        type: "post",
        // 对象简写
        data: {username, password},
        // 原始写分
        //data:{username:username,password:password},
        success() {
        }
    });
}

6）传播操作符【...】

把一个对象的属性传播到另外一个对象中

// ==== ... 对象融合====
var person1 = {
    name: '小飞飞',
    age: 16,
};
var person2 = {
    ...person1,
    gender:1,
    tel:13478900
};
console.log(person2);
// ==== ... 对象取值====
var person3 = {
    name:"李四",
    gender:1,
    tel:"11111",
    address:'广州'
};
// ...person4 把剩下没取走给我
var {name,gender,...person4} = person3
console.log(name)
console.log(age)
console.log(person4)

// 模拟后台：异步查询返回用户数据
function findUsers(){
    $.get("xxxxx",function(res){
        var res = {
            pages:11,
            pageSize:10,
            pageNo:1,
            firstFlag:true,
            lastFlag:false,
            total:123,
            data:[{},{},{},{}],
        };
        // ... 对象取值
        var {data:users,...pagesjon} = res;
        // 等价于
        /*  var users = res.data;
           var pagesjon = {
            res = {
                pages:11,
                pageSize:10,
                pageNo:1,
                firstFlag:true,
                lastFlag:false,
                total:123,
            }; */
    })
}

7）数组map和reduce方法

map

方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组

let arr = ['1', '20', '-5', '3'];
var newarr = arr.map(value => {
    return parseInt(value) * 2;
});
console.log("原数组：" + arr)
console.log("new数组：" + newarr)

reduce

reduce(function()(必须),初始值(可选) )

• 第一个参数是上一次reduce处理的结果
• 第二个参数是数组中要处理的下一个元素

reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是 第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var result = arr2.reduce((a, b) => a + b);
console.log(result);