ECMAScript6 ES6 语法

在线查询ES6语法入门,我也经常看这个
http://es6.ruanyifeng.com/

粗略总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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

声明变量,有局部外可用缺陷(可越界)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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
    1
    2
    3
    4
    5
    6
    7
    8
    <script>
    for (let i = 0; i < 5; i++) {
    console.log(i);
    }

    console.log("我在循环外"+i);

    </script>
    在这里插入图片描述

    const

    声明一个常量

在这里插入图片描述

字符串扩展

includes() startsWith() endsWith()

在这里插入图片描述

  • `` 带有换行可以正常声明,正常打印
  • “” 带有换行不能正常声明
    在这里插入图片描述

    结构表达式

    解构数组

    在这里插入图片描述

    解构对象

    在这里插入图片描述

    函数优化

    函数NaN问题

    1
    2
    3
    4
    5
    6
    7
    <script>
    function fun1(a,b) {
    console.log(a/b);
    }

    fun1(10);
    </script>
    在这里插入图片描述

    函数参数默认值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <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>
    在这里插入图片描述

箭头函数

一个参数

1
2
3
4
<script>
let fun1=i=>console.log("输出i的值:"+i);
fun1(100);
</script>

在这里插入图片描述

多个参数

参数用()括起来

1
2
3
4
<script>
let fun2=(i,j)=>console.log("输出i的值:"+i);
fun2(100,200);
</script>

在这里插入图片描述

代码不止一行

逻辑用{}括起来

1
2
3
4
5
6
7
<script>
let fun2=(i,j)=>{
console.log("输出i的值:"+i);
console.log("输出j的值:"+j);
}
fun2(100,200);
</script>

在这里插入图片描述

对象的函数属性简写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

在这里插入图片描述

箭头函数结合解构表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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

1
2
3
4
5
6
7
8
9
<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方法

在这里插入图片描述