发布于:2019-06-28 15:27
- ECMAScript6语法 使用Typora打开
在线查询ES6语法入门,我也经常看这个
http://es6.ruanyifeng.com/
粗略总结
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 includesIDEA对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
声明变量,有局部外可用缺陷(可越界)
<!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>const
声明一个常量
字符串扩展
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
<script>
let sz = ['1', '20', '-5', '3'];
//map前输出
console.log(sz)
sz = sz.map(index => parseInt(index));
//map后前输出
console.log(sz)
</script>