什么是ES6?ES6新增声明关键字let、const的用法和区别

什么是ES6？

        ES的全称是ECMAScript，它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范

 

为什么要使用ES6？

        每一次标准的诞生都意味着语言的完善，功能的加强，JavaScript语言本身也有一些令人不满意的地方。

        比如：变量提升特性增加了程序运行时的不可预测，其语言过于松散，实现相同的功能，不同的人可能会写出不同的代码，

        而ES6的版本变动内容最多，具有里程碑意义，同时ES6加入许多新的语法特性，编程实现更简单、高效，ES6是前端发展趋势，就业必备技能

let关键字

let关键字用来声明变量，特点：

1. 不允许重复声明

2. 块级作用域

3. 不存在变量提升

4. 不影响作用域链

5. 暂时性死区

应用场景：声明变量多使用let关键字

const关键字

const关键字用来声明常量，const生命有以下特点

1. 声明必须赋初始值

2. 标识符一般为大写

3. 不允许重复声明

4. 值不允许修改

5. 块级作用域

注意：对象属性修改和数组元素变化不会发出const错误

应用场景：声明对象类型使用const，非对象类型声明选择let

var、let、const的区别

 

解构赋值

概念

ES6允许按照一定模式从数组和对象中提取数据，对变量进行赋值，这被称为解构，只要等号两边的模式相同，左边的变量就会被赋予对应的值。本质上，这种写法属于模式匹配 ，如结构不成功，变量的值就等于 undefined

变量解构基本用法

let [a,b,c] = [1,2,3]
console.log(a,b,c)  //输出 1  2  3
//相当于声明了三个变量  
let a = 1
let b = 2
let c = 3
//也可以用作两个值的交换
let a = 1;
let b = 2;      //切记加分号
let [a,b] = [b,a]
console.log(a,b)    //输出2  1
//解构不成功
let [a,b] = [1]
console.log(a,b)    //输出1  undefined

变量解构指定默认值

let [a = true] = []
console.log(a)  //输出true
​
let [a = true] = [false]
console.log(a)  //输出false

对象解构

根据属性名和变量名进行匹配，相同的属性名的值会赋值给前面相同的属性名

let {foo,bar} = {bar:'aaa',foo:'bbb'}
console.log(foo,bar)    //bbb  aaa
​
var student = {
    stuname : '张三',
    stuage : 20
}
let {stuname,stuage} = student
console.log(stuname,stuage)

模板字符串 ``

模板字符串(template String)是增强版的字符串，用反引号（`）标识，特点：

1. 字符串中可以出现换行符

2. 可以使用$(XXX)形式输出变量

var stu = {
    name:'张三',
    age:18,
    sex:'男'
}
let str = `我叫${stu.name}，性别${stu.sex}，年龄${stu.age}`
console.log(str)    //我叫张三，性别男，年龄18

简化对象写法

ES6允许在打括号里，直接写入变量和函数，作为对象的属性和方法

var name = "张三";
var change = function () {
    console.log("我可以改变")
}
let student = {
    name,
    change,
    say() {
        console.log("Hellow World")
    }
}
console.log(student);       //像普通对象一样正常输出

箭头函数

//无参箭头函数
let fn1 = ()=>{
    console.log("我是一个无参箭头函数")
}
//正常调用
fn1()
​
//有参箭头函数
let fn2 = (a,b)={
    console.log(a,b)
}
fn2(1,2)
​
//如果只有一个参数 ()可以省略
let fn3 = a=>{
    console.log(a)
}
fn3(2)
​
//如果函数体只有一个语句  {}也可简写
let fn4 = a=>console.log(a)
fn4(1)
​
//this指向
var obj = {
    fn1(){
        setTimeout(()=>{
            console.log(this)   //该对象
        },1000)
    },
    fn2:function(){
        setTimeout(function{
            console.log(this)   //window
        },1000)
    }
}

arguments

        当函数中不知道传几个参数的时候 可以在函数体中使用console.log(arguments)查看（箭头函数中不可使用）

rest参数（剩余参数）

function add(...values){
    //values就是 用来存放函数中所传递过来的参数 以数组格式存放
    console.log(values)     //[1,2,3,4,5,6]
}
add(1,2,3,4,5,6)

spread扩展运算符

基本用法

        扩展运算符是三个点(...)，他好比是rest参数的逆运算 功能是把数组或数组对象展开成一些用逗号隔开的值

function add(x,y,z){
    return x+y+z;
}
var number = [1,2,3];
console.log(add(...number)) //6

合并数组

var arr1 = [1,2,3]
var arr2 = [4,5]
var arr3 = [6,7,8,9]
var arr = [...arr1,...arr2,...arr3]
console.log(arr)    //[1,2,3,4,5,6,7,8,9]

与解构赋值相结合

let [first,...rest] = [1,2,3,4,5]
console.log(first,rest)     1, [2,3,4,5]

扩展字符串

[...'hello'] = ['h','e','l','l','0']

深拷贝和浅拷贝

深拷贝：将数组/对象复制一个一摸一样的，新的数组/对象不共用同一个内存地址

浅拷贝：仅仅是复制了数组/对象的指针（内存地址），故新的对象/数组和原来的是公用的一个内存地址，那么在改变时就会将数组/对象中的值进行改变

递归

//求阶乘
function fn(n){
    if(n == 0){
        return 1
    }else if(n>0){
        return fn(n-1)*n
    }
}
var res = fn(4)
console.log(res)

concat方法

let arr1 = [1,2,3];
let arr2 = arr1.concat();   //实现深拷贝
arr2[2] = 0;
console.log(arr1,arr2)  //两个数组互不干扰

slice方法

        slice()方法可从已有的数组中返回选定的元素，arr。slice(start,end)方法返回一个新的数组，包含从start到end（不包括该元素，左闭右开，左包含右不包含）

let arr1 = [1,2,3]
let arr2 = arr1.slice(0);
arr[2] = 0;
console.log(arr,arr2)   //[1,2,3]   [1,2,0]

ES6扩展运算符

        ...扩展运算符是ES6的语法

        但是需要注意的是：用扩展运算符对变量或对象进行拷贝时，只能扩展和深拷贝第一层的值，对于第二层及其以后的值，扩展运算符将不能对其进行大三扩展，也不能对其进行深拷贝，即拷贝后和拷贝前第二层中的对象或者数组仍然引用的是同一个地址，其中一个改变，另一个也改变