ES6 语法 浅析
【摘要】 ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。之前的写的练习大差不差都用了ES6+的语法，当然并不只限于es6版本的语法，还有其他的版本，目前好像都更新到了ES13。所以并不能只局限于ES6，应该...
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
之前的写的练习大差不差都用了ES6+的语法，当然并不只限于es6版本的语法，还有其他的版本，目前好像都更新到了ES13。所以并不能只局限于ES6，应该是ES6+
ES6 语法
变量声明
新增加的两个关键字：let 、 const
let 变量
const 常量var、let、const的区别
-
预解析
- var进行预解析
- let const 不进行预解析，必须要先声明后使用
-
重复变量名
- var 可以在同一个作用域定义两个相同变量
- let const 则不可以
-
块级作用域（任何一个可以执行代码段的{}，都会形成块级作用域，都会限制变量的使用范围）
- var没有块级作用域，只能被函数限制其适用范围
- let const有块级作用域，会被限制适用范围
function show(){
var a = 100
}
console.log(a) //不显示
//==========================================
if(true){
var b = 100
let c = 200
}
console.log(b) //100
console.log(c) //报错，const也一样let和const的区别
let 变量可以被修改，const 常量常量是不可以修改- 声明的时候，let定义的变量可以声明不赋值，但是const声明时候必须赋值
模板字符串
反引号： ``
可以换行，可以通过${xxx} 传参
箭头函数
箭头函数：
- 匿名函数可以写成箭头函数（箭头函数就是对曾经匿名函数的简写方式）
- 声明式函数不能写成箭头函数
- 语法 (形参)=>{代码段} ，形参可有可不有
箭头函数和匿名函数的区别
//声明函数
let show = function(){
console.log('你好')
}
show();
//箭头函数
let show2=() =>{
console.log('你好')
}
show2();箭头函数的特点：
- 可以省略小括号（前提条件是有1个形参，没有形参或多个形参的不能省略）
- 可以省略大括号（前提条件：大括号内原本只有一条语句，且该语句默认return出去）
- 箭头函数内没有argument
- 箭头函数内没有this，箭头函数打印的this是当前箭头函数外部作用域的this
const show=(a,b){
console.log(a)
console.log(b)
}
show(1,2)
const list = [1,2,3,4,5,6]
list.forEach((item)=>{
console.log(item);
})
//也可以单个形参时候，省略小括号
list.forEach(item=>{
console.log(item);
})
//省略大括号
//常规：
//function sum(a, b) {
// return a + b
//}
//箭头函数
const sum = (a, b) => a + b
//this
const show5 = ()=> {console.log(this)} //这里的this是window函数默认值
函数参数的默认值
包括所有函数都可以应用：
- 定义形参的时候可以设置默认值
- 在函数调用阶段如果不写参数会制动按照默认值补充
function show(a= 0 , b = 0){
console.log(a+b)
}
show()注意：箭头函数如果定义默认值的话，一个参数也要写小括号
const show = (a = 0){console.log(a)}对象简写语法
简写场景：
- key和value值一样时候
- 当对象内有function的时候，可以省略function和冒号
- 注意，箭头函数不可以省略
const name = 'barbatos'
const age = 5000
//常规
const obj1={
name:name,
age:age,
show:function(){console.log('你好')},
fn:()=>{console.log('我是一个箭头函数')}
}
console.log(obj)
//ES6 对象简写：
const obj={
name,
age,
score:'score', //相当于score = 'score'，可以这样
show(){console.log('你好')},
fn:()=>{console.log('我是一个箭头函数')} //箭头函数不可以省略
// score //下边的console.log(obj)报错
//score没有定义，key = score 和 value=undefined值不一样
}
console.log(obj) 解构
解构赋值
解构：
解构数组：把数组中的数据取出
语法：let [a,b,c,d,e] = arr
解构对象：把对象中的值拿到
语法： let {key1,key2,key3} = obj
解构的时候重命名：想要给对象拿到的数据重新修改名字的时候
语法： let {key1,key2:key21,key3} = obj
//结构数组
const arr = [1,2,3,6,4]
//一般写法
console.log(arr[0])
//es6解构
var [a,b,c,d,e]=arr
console.log(a,b,c,d,e)
//可以来拿多维数组
const data = [1,2,3,4,[5,6,7]]
var [a,b,c,d,[d,e,f]]=data
console.log(data[4][2])//传统 7
console.log(f) //es6 7
//解构对象
const obj={
name : 'Morax',
age : 6000,
gender : 'M'
}
console.log(obj.name,obj.age,obj.gender) //传统
//解构
const {name,age,gender}=obj
consloe.log(name,age,gender) //es6
const obj={
name : 'Morax',
age : 6000,
gender : 'M'
}
//解构重命名
const {name:n,age:nian,gender:g}=obj
consloe.log(nian) //6000
//面试题
console.log(gender) // is not defined ,是因为重命名之后gender变量没用了
console.log(gender) // 打印空值。因为name是js保留字，重命名之后name变为系统默认的空值扩展运算符
语法： ...
功能：
1. 展开运算都
2. 合并运算符展开
var arr = [100,200,300]
console.log(arr) // [100,200,300]
console.log(...arr) //直接展开为 100 200 300
var arr1 = [100,200,300,400,500]
var arr2 = [1,2,3,4,5]
var arr3 = [...arr1,...arr3]
console.log(arr3) //[100,200,300,400,500,1,2,3,4,5]
//也可以利用展开操作实现 传递到数组当中的值到方法
var res = Math.max(...arr3)
console.log(res)
//展开合并对象
const obj = {
name = 'nahida',
age = 500,
}
const.obj2 = {
...obj, //合并
name1 = 'morax',
age2 = 6000
}
console.log(obj2) // {name = 'nahida',age = 500,name1 = 'morax',age2 = 6000 }
合并
const arr = [100,200,300]
//const [a,b,c] = arr
//console.log(a,b) //100,200
//以下写法；a拿到第一个值100 ，b拿到后面的数形成的一个数组[200,300]
const[a...b] = arr;
console.log[a,b] //100 [200,300]
//可以通过合并运算符的方式进行箭头函数接收数据工作
const show = (a,...b)=>{
console.log(a,b)
}
show(100,200,300,400) // 100 [200,300,400] a拿到第一个值，剩下的形成一个数组存到b中案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
let checkAll = document.querySelector('#checkAll');
let cks = document.querySelectorAll('.ck');
let all = document.querySelector('.all')
let items = [...cks]
//全选操作
checkAll.addEventListener('click',function () {
cks.forEach(item=>item.checked = this.checked);
if (this.checked){
all.innerHTML = '取消';
}else {
all.innerHTML = '全选';
}
})
//当点击每个选项的时候 全部选中，全选按钮也选中
// 如果有个没选中，全选按钮不能选中
cks.forEach((item)=>{
item.addEventListener('click',()=>{
let res = items.every(function (t) {
return t.checked;
})
if (res){
checkAll.checked = res;
all.innerHTML = '取消';
}else {
checkAll.checked = res;
all.innerHTML = '全选';
}
})
})
</script>
</body>
</html>模板化语法
在js中可以理解为每一个js文件都是一个一个模块化。每一个模块都是独立的，不对外开放的。
ES6中提出一个模块化概念，可以让每个js文件打通
开放自己的资源，然后其他模块引用使用的时候进行导入的方式来实现模块之间的相互调用
组合方法一：
//导入
语法： import 自定义名字 from "文件地址"
import a_data from "./a.js" ;//导出
语法：export default 对象
export default {
fn,
n,
}//引用
在html导入需要引入js的文件的时候 要加上 type="module"
<script type="module" src="index.js"></script>//使用的时候：
import a_data from "./a.js" ;
a_data.fn();
console.log(a_data.n)组合方法二
//导入
语法：import { , , } from "文件地址"
import {genshinImpact,str,show} from "./b.js";//导出
语法：export 变量
export const genshinImpact = 'morax';
export const str = 'nahida';
export function show(){
console.log('from b')
}//引用
在html导入需要引入js的文件的时候 要加上 type="module"
<script type="module" src="index.js"></script>//使用的时候：
import {genshinImpact,str,show} from "./b.js";
console.log(genshinImpact)
console.log(str)
show();其他
this指向
全局时候，this指向window
私有作用域当中（函数内部）
+私有作用域当中的this指向问题？
+决定权在函数的调用方式（不同的调用方法htis指向不一样）
函数调用方式
1. 普通调用： 函数名()
- this指向：windows
2. 通过对象来调用：对象.函数名()
- this指向对象本身
3. 通过定时器调用：setTimeout(函数，数字)
- this指向：window
4. 事件处理函数
- this指向事件源 元素
5. 箭头函数打印的this是当前箭头函数外部作用域的this改变this的指向性
- call()
- 函数名.call(指向,参数1,参数2,...)
- 执行时主动调用
- apply()
- 函数名.call(指向，数字参数列表)
- 执行时主动调用
- bind()
- 函数名.bind(指向,参数1,参数2,...)
- 不调用
- 本质是复制了这个函数形成新的函数
- 返回值：新的函数 this被锁死
function show(a,b){
console.log(a,b);
console.log('this',this);
}
let obj = (name:'周杰伦'，age:22);
//1.call() this指向性
show.call(obj,100,200) //100,200
//this:obj{name:'周杰伦'，age:22} //主动调用，this指向obj
//2.apply()改变this指向性
var list = [1,2,5,3,6,89,45,68];
var result = Math.max.apply(null,list)
console.log(result) //89
//bind()
var show_c = show.bind(obj,1000,3000)
show_c() //复制了show方法，并传了参
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）