ES6学习(一)

ES6初识

ECMAScript

JavaScript组成：ES（语法规范） DOM（文档对象模型） BOM（浏览器对象模型）

ECMAScript是JavaScript组成中的语法规范
ES6是指ECMAScript 6.0版本

let/var/const的异同

三者相同点

• 都是声明变量的关键字；
• 在局部声明的变量是局部关键字（比如在函数中声明变量）

let和var的区别

• let在一个html页面中不能重复声明变量，var重复声明的变量会进行覆盖
• var在函数外声明的变量在全局作用域都有效，let声明的变量只在块作用域有效（如函数、for循环等使用{}包起来的区域）
  比如在for循环中使用var声明的变量在循环外也可以访问，let声明的变量在外部不能被访问，不会受影响，因此for循环中使用let声明变量更合适
  举个栗子：定义一个数组，给数组中添加一百个函数，调用某个元素打印该元素索引。let声明的变量只在当次循环中有作用，比如在第90次循环中i为90，第10次循环中i为10，不会被影响；而var声明的变量会随着循环的进行逐渐+1，最后i始终为100

    var arr = []
    for (var i = 0; i < 100; i++) {
        arr[i] = function () {
            console.log(i);
        }
    }
    arr[2]();//无论调用哪一个都会打印100
    for (let i = 0; i < 100; i++) {
        arr[i] = function () {
            console.log(i);;
        }
    }
    arr[2]();//打印2

• 使用let声明的变量必须先声明再使用，var声明的变量由于预解析会提升到作用域顶部并初始化undefined

	console.log(a);
    let a = 111;//发生报错

• let声明的变量会产生暂时性死区

let和const的区别

• const声明的是一个常量，不能改变值
• const声明的常量必须赋初值

const a;//报错

const和var的区别就是把上面提到的加起来

解构赋值

将数组中的元素，字符串中的字符，对象中的属性分解成单独的变量
数组和对象的解构赋值使用较多

数组：完全解构

从第一个元素开始一一对应赋值

	let [a, b, c, d, e] = [1, 2, 3, 4, 5]
	console.log(a,b,c,d,e);;//1 2 3 4 5

数组：不完全解构

从第一个元素开始一一对应

    let [x, y, z] = [1, 2, 3, 4, 5]
    console.log(x, y, z);//1,2,3

数组：嵌套

	let [a, b, [x, y]] = [6, 7, [0, 1]]
    console.log(x, y);//0 1

数组：赋初值

只能给未定义的元素赋初值，不能改变已经赋值的元素

   let [a, b, c, d, e, f = 6] = [1, 2, 3, 4, 5]
    console.log(a, b, c, d, e, f);//1 2 3 4 5 6

字符串解构

从第一个字符开始对应赋值

	var str = '字符串的解构'
	var [a,b,c] = str
	console.log(b)//“符”

对象解构

因为对象是无序的，因此要赋值的变量名必须和要解构的对象中的属性名一致

    var obj = {
        name: 'zs',
        age: 19,
        color: "red",
        size: 100,
    }
    var { name, age, color, size } = obj
    console.log(age);//19
    console.log(size);//100

解构赋值的用处——交换变量

在js中要实现两个变量交换赋值还需要用到第三个变量，使用解构赋值可以直接实现
注意不能使用let声明变量，因为let不能重复声明变量

	var a = 10;
	var b = 30;
	var[b,a]=[a,b]
	console.log(a);//30
	console.log(b)//10