前端知识点 | ES6基础语法

一、什么是ECMAScript6

ECMAScript6.0（简称ES6）是JavaScript语言的下一代标准/规范，2015年6月正式发布
目标：使JavaScript能编写复杂的大型应用，成为企业级开发语言。

1.ECMAScript与JavaScript的关系

ES6是一种规范，JS是ES6的具体实现，ES6的方言还有Jscript和ActionScript
JavaScript创作者公司Netspace将JavaScript交给标准化组织ECMA，希望JS语言能成为国际标准

二、ES6的基本语法

1.声明变量 let

JavaScript 使用 var 来声明变量的特点
1.使用var声明的变量没有局部作用域（全局作用域都能用）
2.可以声明多次
3.存在变量提升，事先会有一个变量收集【相当于先定义后使用，所以提前访问不会报错】

ES6 使用 let 来声明变量的特点
1.使用let声明的变量有局部作用域【块级作用域】（只能在局部作用域里面用）
2.只能声明一次
3.不存在变量提升【提前访问会报错】
4.不影响作用域链的效果【外部定义的变量，可以在内部块级作用域使用】

<script>
	//定义变量
	{
		//局部作用域
	    var a=1; let b=2;
	}
	console.log(a)
	console.log(b) //由于let只能作用于局部作用域，访问不到b，浏览器控制台会报 b is not defined 的错误
	
	var m=1; var m=2;
	let n=20; let n=30;     //由于let定义的变量只能定义一次，浏览器控制台会报 'n' has already been declared 的错误
	console.log(a)  console.log(b)
</script>

2.声明常量 const

ES6 使用 const 来声明常量（只读变量）的特点
1.声明后不允许修改
2.一旦声明必须初始化，否则会报错
3.块级作用域
4.数组和对象元素的修改，由于指向地址没有变，所以不算对常量修改，不会报错
5.约定，大写字母声明常量

<script>
    //定义常量
    const PI="3.14"
    PI=3 //不能修改，修改会报错 TypeError: Assignment to constant variable
   
    const b  //不能不赋值，SyntaxError: Missing initializer in const declaration
    // 数组和对象元素的修改，由于指向地址没有变，所以不算对常量修改，不会报错
    const TEMA = ['wenmiao','yangchao','lvjiabao']
    TEMA.push('wulinghan')
</script>

3.声明对象

默认 对象属性名 与 变量属性 名必须一致

<script>
    //传统定义对象
    const name1="lily"
    const age1=20
    const user1={name:name1,age:age1}  //属性name，值name1
    console.log(user1)

    //ES6定义对象
    const name2="lihua"
    const age2=19
    const user2={name2,age2}  //因为默认 对象属性名 与 变量属性 名必须一致
    console.log(user2)
</script>

4. 解构赋值

解构赋值是对赋值运算符做的扩展，是一种针对数组或对象进行模式匹配，对其中变量进行赋值
代码书写更简介，也方便复杂对象中数据字段获取

数组解构
对象解构

<script>
  // 数组解构
  const F4 = ['宋小宝','刘能','赵本山','肖战']
  let [song,liu,zhao,xiao] = F4
  let [,,zhao2,xiao2] = F4
  console.log(song,liu,zhao,xiao,zhao2,xiao2)  // 宋小宝 刘能 赵本山 肖战 赵本山 肖战
  const COLOR = ['red', ['white', 'black'],'green', 'blue'];
  let [firstColor, secondColor] = COLOR;
  let [, [firstChildColor]] = COLOR;  // firstChildColor解构出来的是第二个数组的第一个值
  let [, ,...restColor] = COLOR;   // 占位符除外的剩余值
  console.log(firstColor,secondColor,firstChildColor,restColor)  // red ['white', 'black'] white  ['green', 'blue']
  // 对象解构
  const PERSON = {
    name:'肖战',
    age:23,
    act:function(){
    console.log("我可以表演")
    }
  }
  let {name,age,act} = PERSON
  console.log(name,age)   // 肖战 23
  act()   // 我可以表演
</script>

5. 模板字符串

加强版字符串，使用反引号 ` ，可定义普通字符串，多行字符串，和在字符串中加入变量和表达式

• 可以出现换行符

<script>
	let str = `<ul>
                <li>沈腾</li>
                <li>玛丽</li>
              </ul>`
    let name="lucy"
    let age=20
    //使用“ ${} ”来取变量值,并且还可以在里面做运算
    let info=`My name is ${name} , I am ${ age + 1 }`
    console.log(str,info)
</script>

6. 对象拓展运算符

拓展运算符："…" 用于取出参数对象所有可遍历属性，然后拷贝到当前对象

<script>
   let person1={name:"Helen",age:18}
    //传统 复制对象 先取出person1属性值，再放入person2
    let name=person1.name
    let age=person1.age
    let person2={name2:name,age2:age}
    console.log(person2)

    //1.使用ES6 复制对象 ,使用...加对象名 ,就可以将person1中所有属性和属性值都复制到person3中
    let person3={...person1}
    console.log(person3)

    //2.使用ES6 合并对象 ,使用...加要合并的属性 ,就可以将属性合并到对象中了
    let city={city:"北京"}    //注意合并的是对象，不能把属性和对象进行合并,如果 写成let city="北京" 就会合并错误
    let person4={...person3,...city}
    console.log(person4)
</script>

7.箭头函数

基本语法：参数 => 函数体，多用于匿名函数的定义
var f2 = (m，n) => m+n ，f2 函数名，（m，n）参数，m+n 返回值

<script>
    //传统方式 定义函数
    //f1是函数名,a是参数,最后返回a
    var f1=function(a){
        return a
    }
    console.log(f1(3))  //函数调用

    //ES6方式 使用箭头函数定义函数
    //f2是函数名,使用 = 后面是参数，如果多个参数可以用()括号括起来,使用箭头函数,后面是函数体
    var f2 = a => {
        return a         //也可以不写return a,直接简写成 var f2 = a => a
    }
    console.log(f2(4))  //函数调用

    //多个参数，用括号括起来
    var f3 = (b,c) => {
        return b+c      //也可以简写成 var f3 = (b,c) => b+c
    }
    console.log(f3(5,6))
</script>