es6变量及模板字符串(es6学习笔记01)

前言:终于开启了学习es6的旅途,是牛是马来看看吧!

一、es6相关介绍

1、什么是ECMAScript?

ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。

2、为什么要学习ES6?

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

二、let变量声明以及声明特性

1、变量的声明
  • 可以单独声明
  • 可以多个变量一起声明
  • 可以边声明边赋值,赋值可以是字符串、数字、数组等
//声明变量
let a;
let b,c,k;
let e=1000;
let g=123,f='fruit', h=[];

:变量不能重复声明,不然会报错。

2、作用域

有块级作用域、全局、函数、eval作用域等。

块级作用域是用花括号括起来的作用域,也可以是if、else、while、for后面的花括号中的作用域。变量只在块级作用域里面有效,如下,不会打印出name。

{
     
    let name = 'zhangsan'
}
console.log(name);
3、不存在变量提升

即不存在 在变量声明之前去使用这个变量,会报错。如下:(错误用法)

console.log(name);
let name="小化";
4、不影响作用域链

即假如在一个作用域里面,如果定义了一个函数,而函数里的变量会向上面冒泡去寻找这个变量。例如:

{
     
    let name = '小花';
    function a(){
     
        console.log(name);
    }
    a();   //调用这个函数
}
5、一个切换颜色的小栗子
<body>
    

点击切换颜色h3> <div class='item'>div> <div class='item'>div> <div class='item'>div> div> body> <script> //获取div元素对象 let items = document.getElementsByClassName('item'); //遍历并绑定事件 for(let i=0;i<items.length;i++){ items[i] = onclick = function(){ //修改当前元素的颜色 //1、this.style.background = 'green'; items[i].style.background = 'green'; //第二种方法 } } script>

:如果在for循环里面用的是var来声明变量,则使用第二种方法时会报错。因为var没有块级作用域,var最后循环了三次后又自增加1,即当前var的变量的值是3,但是数组下标最大值为2,故会报错。

三、const声明常量以及特点

常量:值不能修改的量称为常量。

const NAME = '小花';

const声明的一些注意事项

  1. 一定要赋初始值
  2. 一般常量常量使用大写(虽然没有明确说明,但这是个潜规则)
  3. 常量的值不能修改
  4. 有块级作用域的特点
  5. 对于数组和对象的元素修改,不算做对常量的修改,不会报错(因为地址没有改变)例如:
const NAME = ['xiaohua','ming','zhangsan'];
NAME.push('aaaa');    //这是允许的

所以一般在声明数组或者对象时,多用const来声明。

四、变量的解构赋值

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

1、数组的解构

const NAME = ['小花','张三','李四','王五'];
let ['hua','zhang','li','wang'] = NAME;

这样就可以把数组中的值赋值给对应位置的变量。

2、对象的解构

const zhang = {
     
    name:'张明',
    age:'18',
    article:function(){
     
        console,log("这是张明的文章");
    }
}
let {
     name,age,article} = zhang;  //相当于声明了三个变量,并对这三个变量进行赋值
article();      //赋值后可以直接调用这个方法,而不用zhang.article()    

let {
     article} = zhang;
article();      //也可以单独赋值然后调用

五、模板字符串

es6引入新的声明字符串的方式 `` 即反引号。

1、声明
let srt = `本仙女也是也是一个字符串!!`
2、内容中可以直接出现换行符
let srt = `我是
			仙女
				大宝贝`;
3、变量拼接
let bing = '冰淇淋'let str = `${
       bing}是我心目中最搞笑的演员!!`;
console.log(srt);

六、对象的简化写法

es6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样书写更加简洁。

let name = '张三';
let change = function(){
     
    console,log('仙女是用来改变的');
}
const all ={
     
    name,
    change,
    //方法的简化,不用加function了,直接跟着小括号
    improve(){
     
        console,log("巴拉啦能量,黑魔变身!!");
    }
}
console.log(all);  //输出all这个对象

你可能感兴趣的:(前端,javascript,es6,前端)