-
ECMAScript6语法 使用Typora打开https://pan.baidu.com/s/1LjcOFOfrAHaUgxU9LzKVzg 提取码: 88fb
在线查询ES6语法入门,我也经常看这个 点击进入
-
粗略总结
1.let:声明一个变量,不会越界 const:声明一个常量 2.字符串 includes startsWith endsWith const ss = `` 3.解构表达式 数组:let [x,y,z]=arr 对象: let {name:a, age:b}=person 4.函数 赋默认值:方法参数列表赋默认值 (a, b=1)=>{} 箭头函数:()=>{} 对象中定义函数: 传统 eat:function(){} 箭头 eat:()=>{} 简写 eat(){} 箭头函数结合结构表达式:({name})=>{} 5.map和reduce map(fun):处理一个数组,遍历数组中的每一个元素用fun处理,把处理结果放入新的数组 reduce(fun(a, b)[, 100]):没有初始值(1. a=10 b=20 2. a=30 b=30) 有初始值(1.a=100 b=10 2.a=110 b=20) 6.对象的扩展 keys values entries:二维数组 assign(dest, ...src) 7.数组扩展 find findIndex includes
-
IDEA对ECMAScript6的支持
-
创建工程
-
创建空工程
- File>>>New>>>Project>>>Empty Project>>>Empty Project>>>Next>>>输入Project Name>>>Finish
-
创建一个Module
- File>>>New>>>Module>Static Web>>>Static Web>>>Next>>>输入Module Name>>>Finish
-
直接在Module中创建一个html文件即可,右击run运行
-
-
声明变量 var let const
-
var(声明变量,有局部外可用缺陷(可越界))
- 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <script> for (let i = 0; i < 5; i++) { console.log(i); } console.log("我在循环外"+i); </script> </html>
- 显示结果
- 代码
-
let(声明变量,同var,不能局部外使用(不会越界))
- 代码:把上面var改为let
<script> for (let i = 0; i < 5; i++) { console.log(i); } console.log("我在循环外"+i); </script>
- 显示结果
- 代码:把上面var改为let
-
const声明一个常量
-
-
字符串扩展 includes() startsWith() endsWith()
-
includes()
startsWith()
endsWith() -
`` 带有换行可以正常声明,正常打印
"" 带有换行不能正常声明
-
-
结构表达式
-
解构数组
-
解构对象
-
-
函数优化
-
函数NaN问题
- 代码
<script> function fun1(a,b) { console.log(a/b); } fun1(10); </script>
- 结果
- 代码
-
函数参数默认值
- 代码
<script> function fun1(a, b) { /*如果b为空,就会把1赋值给b*/ /*如果b不为空,b值不变*/ if (!b) { b = 1; } console.log(a / b); } fun1(10); </script> <!--等同于--> <script> function fun1(a, b) { b = b || 1; console.log(a / b); } fun1(10); </script> <!--等同于--> <script> function fun1(a, b = 1) { console.log(a / b); } fun1(10); </script>
- 结果
- 代码
-
箭头函数
- 一个参数
- 代码
<script> let fun1=i=>console.log("输出i的值:"+i); fun1(100); </script>
- 输出
- 代码
- 多个参数,参数用()括起来
- 代码
<script> let fun2=(i,j)=>console.log("输出i的值:"+i); fun2(100,200); </script>
- 输出
- 代码
- 代码不止一行,逻辑用{}括起来
- 代码
<script> let fun2=(i,j)=>{ console.log("输出i的值:"+i); console.log("输出j的值:"+j); } fun2(100,200); </script>
- 输出
- 代码
- 一个参数
-
对象的函数属性简写
- 代码
<script> const person = { name: "daniu", //以前 eat1: function (food) { console.log(this.name + "吃了" + food); }, //箭头函数版 //这里需要用person.name,this.name会获取不到name="daniu" eat2: food => console.log(person.name + "吃了" + food), //简写版 eat3(food) { console.log(this.name + "吃了" + food); } } person.eat1("香蕉"); person.eat2("苹果"); person.eat3("菠萝"); </script>
- 输出
- 代码
-
箭头函数结合解构表达式
- 代码
<script> const person = { name: "daniu", age: 25 } //普通 function fun1(person1) { console.log("fun1 姓名:" + person1.name + ",年龄:" + person1.age); } //箭头函数 const fun2=person2=>console.log("fun2 姓名:" + person2.name + ",年龄:" + person2.age); //箭头函数+解构表达式 const fun3 = ({name, age}) => console.log("fun3 姓名:" + name + ",年龄:" + age); fun1(person); fun2(person); fun3(person); </script>
- 输出
- 代码
-
-
map和reduce方法
-
map方法
- 代码
<script> let sz = ['1', '20', '-5', '3']; //map前输出 console.log(sz) sz = sz.map(index => parseInt(index)); //map后前输出 console.log(sz) </script>
- 输出
- 代码
-
reduce方法
-
-
对象扩展
-
数组扩展
-
find方法
-
findIndex方法
-
includes方法
-
-
111