带你快速入坑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请求应用

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);
//========= 实战应用 =============
//
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:
};
console.log(person2);
// ==== ... 对象取值====
var person3 = {
    name:"李四",
    gender:1,
    tel:"",
    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);

名称栏目：带你快速入坑ES6
网页URL：http://dzwzjz.com/article/dsojhps.html

大橙子网站建设，新征程启航