es6变量定义和赋值

ES6

ECMAScript 第六个版本

一、let 命令

在ES6之前，都是用 var声明，但是它会变量提升成为全局变量。

function a() {
        if (bool) {
            var b = 'Hello ES6'
        } else {
            console.log(b)
        }
    }

其实是这样的

 function a() {
        var b
        if (bool) {
            b = 'Hello ES6'
        } else {
            //undefined
            console.log(b)
        }
        //undefined
    }

无论bool的值是true 或 false，b 都会被创建声明。改写成let function a() {

  if (bool) {
      let  b = 'Hello ES6'
    } else {
        //ReferenceError: a is not defined.
        console.log(b)
    }
}

let没有变量提升，它的作用域是当前所在的代码块块级作用域
ES5只有全局作用域和函数作用域，带来一些不合理的场景。
(1)、变量提升造成内部变量覆盖外层的变量

var status= true;
function st() {
    if (false) {
        var status = false;
    }
    console.log(status);
​
}
​
st(); //undefined(2)、变量i成为全局变量 var arr=[1,2,3,4,5，6];
 
for(var i=0;i<arr.length;i++){
...
}
console.log(i)  //6ES6块级作用域function num() {
  let n = 6;
  if (true) {
    let n = 7;
  }
  console.log(n); // 6
}

表明外层代码块不受内层代码块的影响，如果用 var 声明，最后的值是7。内层作用域 可以 和 外层作用域 定义 同名 变量

{
  let aa ='Hello Word';
    {
        let aa='Hello ES6';
    }
}相同作用域不能重复声明// 报错
function func() {
  let aa ='Hello Word';   
  let aa='Hello ES6';
   }
// 报错
function func() {
 let aa ='Hello Word';   
 var aa='Hello ES6';
  }

二、const 命令
const 声明一个只读常量，并且常量的值不能改变。

const a='Hello Word';
a //Hello Word
a='Hello ES6'; //报错

const 声明的变量不能改变值，所以const 声明变量就必须初始化，不能以后赋值。

if (true) {
  const a = 'Hello Word';
}
​a  //报错

const 只在声明的块级作用域内有效，不会变量提升。

三、模板字符串

1、用${name}进行字符串拼接和运算

 //ES5
    var a = 'ES5';
    var b = '一起学习' + a + 'go';//ES6
let c = 'ES6';
let d = `一起学习${c}go`;
​
//运算
let e = 1;
let f = 2;
let result = `${e+f}`;

2、常用方法

const es6 = 'hello es6'//includes 是否存在
console.log(es6.includes('h')) // true

//startsWith 判断开头
console.log(es6.startsWith('hello')) // true

//endsWith 判断结尾
console.log(es6.endsWith('!')) // true

// repeat: 复制字符串 如果你是小数, Math.floor(num) 来处理

console.log(es6.repeat(2)) // 'hello es6hello es6'
console.log(es6.repeat(3.6)) // 'hello es6hello es6hello es6'

四、变量的解构赋值

从数组和对象中提取值，对变量进行赋值，这被称为解构。

//对象
let {name, age} = {name: 'ES6', age: '3'};
name //ES6
age  //3

//数组
let [a, b, c] = [1, 2, 3];
//左右两边形式必须统一
let [d, [e, f], g] = [1, [2, 3], 4];

//默认值
let [h = 1] = []
h //1
let {hello = 'ES6'} = {}
hello  //ES6

//使用圆括号
let es6;
{es6} ={es6:'一起学习'}; //报错
  //解决错误
let ES6;
({ES6} = {ES6:'一起学习'});

五、扩展运算符和rest运算符扩展运算符 就是三个点…

//数组
const a = [1, 2]
const b = [...a, 3, 4]
console.log(b) //[1, 2, 3, 4]

//对象
const c = {first: 1, second: 2}
const d = {...c, third: 3}
console.log(d)  //{first: 1, second: 2, third: 3}

rest运算符 数组或者对象除了某几项的其他项

//数组
const a = [1, 2,3,4,5]
const  [b,...num]=a
console.log(num) //[2, 3, 4, 5]

//对象
const c = {first: 1, second: 2,third:3}
const  {first, ...rest}=c
console.log(rest)  //{second: 2, third: 3}

对于Object，当然如果有重复的属性名，后者会覆盖前者

const first = {
        a: 1,
        b: 2,
        c: 5,
    }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second }
    console.log(total) // { a: 1, b: 2, c: 3, d: 4 }