ES全称“ECMAScript”。

优点:1、语法简洁,功能丰富。2、框架开发应用。3、前端开发职位要求。

目录

一、let:声明变量

二、const:声明变量

三、解构赋值(用在解构对象中的函数比较多)

四、模板字符串 

五、简化对象写法

六、箭头函数

一、let:声明变量

<script>
        let a;    //声明变量
        let b,c,d;    //声明多个变量
        let e = 100;    //声明变量并赋值
        let f = 521,g='iloveyou',h=[];    //声明多个变量并赋值
</script>

注意:

1、变量不能重复声明

let star = 'hahaha';
let star = 'hahaha';
//控制台会报错

2、块级作用域    全局,函数,eval

{
     let girl = '小萍';
}
     console.log(girl);
     //控制台并不打印,会报错

3、不存在变量提升

console.log(song);
let song = '小萍';
//控制台会报错,并不打印,如果将let替换成var,控制台将会打印“undefined”,因为var可以变量提升,在使用前自动 var song;

4、不影响作用域链

{
    let school = 'xx大学';
    function fn(){
        console.log(school);
    }
    fn();
    //控制台输出‘xx大学’,在函数内找不到school的属性值时,会向上作用域一层层取,不影响作用域的。
}

二、const:声明变量

注意:

1、一定要赋初始值

const A;    //报错,没有赋初始值

2、一般常量使用大写(潜规则,但小写不报错)

3、常量的值不能二次修改

const SCHOOL = 'xx大学';
SCHOOL = 'haha大学';
//报错,不能修改const常量的值

4、块级作用域

{
    const PLAYER = '小萍';
}
console.log(PLAYER);
//报错,注意块级作用域

5、对数组和对象的元素修改,不算做对常量的修改,不会报错。

const TEAM = ['a', 'b', 'c', 'd'];
TEAM.push('e'); //正确修改,不报错
TEAM = 100; //错误修改,报错

三、解构赋值(用在解构对象中的函数比较多)

ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值。

1、数组的解构

代码:

const F4 = ['道明寺', '花泽类', '忘记了1', '忘记了2'];
let [a, b, c, d] = F4;
console.log(a);
console.log(b);
console.log(c);
console.log(d);

控制台:

es6新特性讲解_javascript

2、对象的解构

代码:

const ping = {
    name:'小萍',
    age: 18,
    xiaoping:function(){
        console.log('我叫小萍,年年18');
    }
}
// 没有解构时
console.log(ping.name);
console.log(ping.age);
console.log(ping.xiaoping);
// 解构时
let {name,age,xiaoping} = ping;
console.log(name);
console.log(age);
console.log(xiaoping);
// 相比之下,解构后每次使用对象内的属性或函数更简洁了

控制台:

es6新特性讲解_es6新特性讲解_02

四、模板字符串 

ES6引入新的声明字符串的方式反引号——``。

1、按回车键自动转换,不需自行使用加号进行字符串拼接。

2、变量拼接。

let lover = `易烊千玺`;
let out = `我喜欢${lover}呀!`;
//不用加号进行字符串的拼接

五、简化对象写法

ES6允许在大括号里面直接写入变量和函数,作为对象的属性和方法,例如:

let name = '小萍';
    let hello = function(){
        console.log('我是小萍');
    }
    // 对象的属性和方法js基础写法:
    const school1 = {
        name:name,
        hello:hello,
        improve:function(){
            console.log('小萍是大美女!');
        }
    }
    // 对象的属性和方法ES6写法(相比之下,更简洁):
    const school2 = {
        name,
        hello,
        improve(){
            console.log('小萍是大美女!');
        }
    }

六、箭头函数

ES6允许使用箭头(=>)定义函数

声明函数:

//声明函数
    // 1、普通函数
    let fn1 = function(){

    }
    // 2、箭头函数 
    let fn2 = () =>{

    }

特性:

1、箭头函数的this是静态的,this始终指向函数声明时所在作用域下的this的值。例子:

function getName1() {
        console.log(this.name);
    }

    let getName2 = () => {
        console.log(this.name);
    }

    // 设置window对象的name属性
    window.name = '小萍';
    const hello = {
        name: 'xiaoping',
    }

    // 直接调用
    getName1();
    getName2();
    // call方法调用,call方法可以动态地修改this指针的指向
    getName1.call(hello); //打印的this.name是'xiaoping',因为普通函数this是动态的,this指向hello,那么this.name指向hello对象下的name属性
    getName2.call(hello); //打印的this.name是'小萍',因为箭头函数getName2所在的作用域在window下,this指向window,那么this.name指向window.name

2、不能作为构造实例化对象(不能new)。

3、不能使用arguments变量。

4、箭头函数的简写

1、省略小括号,当形参有且只有一个的时候。

2、省略花括号,当代码体只有一条语句的时候,此时return必须省略,而且语句的执行结果就是函数的返回值。