ECMAScript6 ES6 语法

发布时间：2023-08-19 10:30

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的支持
$\"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>Titletitle>
head>
<body>
body>
<script>
    for (let i = 0; i < 5; i++) {
        console.log(i);
    }

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

script>
html>

显示结果 $\"ECMAScript6$

let(声明变量,同var,不能局部外使用(不会越界))

代码:把上面var改为let

<script>
    for (let i = 0; i < 5; i++) {
        console.log(i);
    }

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

script>

显示结果 $\"ECMAScript6$

const声明一个常量
- $\"ECMAScript6$

字符串扩展 includes() startsWith() endsWith()
- includes()
  startsWith()
  endsWith()
  $\"ECMAScript6$
- `` 带有换行可以正常声明,正常打印
  \"\" 带有换行不能正常声明
  $\"ECMAScript6$
结构表达式
- 解构数组 $\"ECMAScript6$
- 解构对象 $\"ECMAScript6$

函数优化

函数NaN问题

代码

<script>
    function fun1(a,b) {
        console.log(a/b);
    }

    fun1(10);
script>

结果 $\"ECMAScript6$

函数参数默认值

代码

<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>

结果 $\"ECMAScript6$

箭头函数

一个参数

代码

<script>
    let fun1=i=>console.log(\"输出i的值:\"+i);
    fun1(100);
script>

输出 $\"ECMAScript6$

多个参数,参数用()括起来

代码

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

输出 $\"ECMAScript6$

代码不止一行,逻辑用{}括起来

代码

<script>
    let fun2=(i,j)=>{
        console.log(\"输出i的值:\"+i);
        console.log(\"输出j的值:\"+j);
    }
    fun2(100,200);
script>

输出 $\"ECMAScript6$

对象的函数属性简写

代码

<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>

输出 $\"ECMAScript6$

箭头函数结合解构表达式

代码

<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>

输出 $\"ECMAScript6$

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>

输出 $\"ECMAScript6$

reduce方法

$\"ECMAScript6$

对象扩展

$\"ECMAScript6$
数组扩展
- find方法 $\"ECMAScript6$
- findIndex方法 $\"ECMAScript6$
- includes方法 $\"ECMAScript6$
111

转载于:https://www.cnblogs.com/taopanfeng/p/11102908.html

ECMAScript6 ES6 语法

ECMAScript6语法 使用Typora打开https://pan.baidu.com/s/1LjcOFOfrAHaUgxU9LzKVzg 提取码: 88fb

粗略总结

IDEA对ECMAScript6的支持

创建工程

创建空工程

创建一个Module

直接在Module中创建一个html文件即可,右击run运行

声明变量 var let const

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

let(声明变量,同var,不能局部外使用(不会越界))

const声明一个常量

字符串扩展 includes() startsWith() endsWith()

结构表达式

解构数组

解构对象

函数优化

函数NaN问题

函数参数默认值

箭头函数

对象的函数属性简写

箭头函数结合解构表达式

map和reduce方法

map方法

reduce方法

对象扩展

数组扩展

find方法

findIndex方法

includes方法

111

相关推荐

ECMAScript6语法使用Typora打开https://pan.baidu.com/s/1LjcOFOfrAHaUgxU9LzKVzg 提取码: 88fb

解构数组 $\"ECMAScript6$

解构对象 $\"ECMAScript6$

find方法 $\"ECMAScript6$

findIndex方法 $\"ECMAScript6$

includes方法 $\"ECMAScript6$