ES6 丨 前端基础 】ES6 关键字、新功能和解构作业ES6 关键字、新特性和解构作业
前言
ES全称EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript，是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性
什么是ecmascrpit
ECMA (European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会，这组织的目标是评估、开发和认可电信和计算机标准。1994年后该 组织改名为Ecma国际。ecmascrpit是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。
一，let关键字的特点
1.不能重复声明变量
<script> let name = 'shanyu'; let name = 'AIC'; </script>
2.块级作用域
只能在块内使用，否则会报错
<script> // 2.块级作用域，只在块内可使用（如：if，for，while，else） { let name = '陆小果'; } console.log(name); </script>
3.不存在变量提升
<script> // 3.不存在变量提升（也就是不允许先使用后声明） console.log(start); let start = '武器大师'; </script>
4.不影响作用域链
二，let的使用
<body> <div class="container"> <h2 class="page-header">点击切换颜色</h2> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <script> let item = document.getElementsByClassName('item'); // 使用let声明变量，所声明的变量只在该块内使用所以可以用item[i] for (let i = 0; i < item.length; i++) { item[i].onclick = function () { item[i].style.background = 'skyblue'; } } </script> </body>
三，const 声明常量以及特点
<body> <script> // 声明常量 // 1.必须要赋初始值 const NAME = '山鱼'; // 2.一般常量使用大写（当然小写也不会报错，不成文规定） // 3.常量的值不能修改 NAME = 'JHXL'; // 4.块级作用域 { const START = 'BALEITE'; } console.log(START); // 5.对于数组和对象的元素修改，不算对常量值的修改，不会进行报错 const PLAY = ['SYZ', 'PPD', 'NANDAO', 'UZI']; PLAY.push('ZHIXUN'); </script>
四，const的变量解构赋值
1.数组的结构
<script> //1. 数组的结构 const TW = ['赵天王', '钱天王', '孙天王', '李天王']; let [zhao, qian, sun, li] = TW; console.log(zhao); console.log(qian); console.log(sun); console.log(li); </script>
2.对象解构赋值
<script> const xiaopin = { name: '赵本山', age: '100', skill: function () { console.log('我是白云，我是黑土'); } }; let { name, age, skill } = xiaopin; console.log(name); console.log(age); console.log(skill); skill(); </script>
五，ES6新增字符串声明方式
1.反引号
2.新特性
3.变量拼接
使用${}来拼接
<script> // 3.变量拼接 使用${}来拼接 let hero = `山鱼`; let like = `${hero}爱吃猫`; console.log(like); </script>
六，对象的简化写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
<body> <script> // ES6允许只放变量进到对象里 let name = '山鱼'; let like = function () { console.log('我们一起学前端不放弃！'); } const start = { name, like, skill() {// 可以省略冒号和function console.log('我会ES6'); } } console.log(start); </script> </body>
七，箭头函数
1.箭头函数this是静态的，this始终指向函数声明时所在作用域下的值
<script> // let fn = (a, b) => { // return a + b // } // 调用函数 // let result = fn(3, 3); // console.log(result); // 特性 // 1.this是静态的，this始终指向函数声明时所在作用域下的值 function gName1() { console.log(this.name); } let gName2 = () => { console.log(this.name); } window.name = '山鱼'; const like = { name: 'SHANYU' } // 直接调用 gName1(); //返回值为’山鱼‘ gName2(); //返回值为’山鱼‘ // 用call调用，call可以改变函数内部值 gName1.call(like);// 返回值为'SHANYU' gName2.call(like)//返回值为’山鱼‘ </script>
2.不能作为构造函数作为实例化对象
<script> // 2.不能作为构造函数作为实例化对象 let Person = (name, age) => { this.name = name; this.age = age; } let it = new Person('旺财', 2); console.log(me); </script>
3.不能使用arguments
<script> // 3.不能使用arguments变量（arguments可以用来保存实参） let fn = () => { console.log(arguments); }上一篇： ES6-ES11 基础知识（第一天）