ES6学习文档

最新推荐文章于 2022-08-12 10:22:13 发布
最新推荐文章于 2022-08-12 10:22:13 发布
阅读量199 收藏
点赞数
分类专栏： React教程系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fenglixiong123/article/details/82564408
版权

1.let

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的用法</title>
    <script>
        let log = (text)=>console.log(text);
    </script>
</head>
<body>

<pre>

    ES5:

    array.forEach()
    array.map()
        返回值修改数组内容,重新整理数据结构
    array.filter()
        过滤不合适的元素，如果返回结果为true则留下来
    array.some()
        类似查找，数组中某一个元素符合条件，返回true
    array.every()
        数组里面的元素都要符合条件，才返回true
    array.reduce()
        pre,是第一次的结果
    array.reduceRight()
        从右边开始计算
    array.for...of




</pre>

<script type="application/javascript">

    let arr1 = ['jack','mary','tom','blush','fen'];
    log("forEach普通函数:");
    arr1.forEach(function (val,index,arr1) {
        console.log(index,val,arr1);
    });
    log("forEach箭头函数:");
    arr1.forEach((val,index,arr1)=>{
        console.log(index,val,arr1)
    });
    log("map映射:");
    let news = [
        {title:'new1',read:199,hot:false},
        {title:'new2',read:299,hot:true},
        {title:'new3',read:399,hot:false},
        {title:'new4',read:499,hot:true},
        {title:'new5',read:599,hot:false},
    ];

    let mapNews = news.map((val,index,news)=>{
        console.log(index,val,news[index].read);
        let item = {};
        item.t = val.title+"map";
        item.r = val.read+1;
        item.h = false;
        return item;
    });
    log(mapNews);

    log("filter过滤:");
    let filterNews = news.filter((val,index,news)=>{
        console.log(index,val,news[index].read);
        return val.hot;
    });
    log(filterNews);

    let arr2 = [1,2,3,4,5,6,7,8,9,10];
    let sum = arr2.reduce((pre,cur,index,arr2)=>{
        return pre + cur;
    });
    log("reduce:"+sum);
    log("ES6:");
    for(let val of news){
        console.log(val.title);
    }
    for(let [key,val] of news.entries()){
        console.log(key,val);
    }

</script>

</body>
</html>

2.struct

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解构赋值</title>
</head>
<body>

<div>

<pre>

    解构赋值

    let [a,b,c] = [1,2,3];
        console.log(a,b,c);

     let [a,[b,c]] = [1,[2,3]];
        console.log(a,b,c);

    let json = {
            name:'jack',
            age:28,
            job:'work'
        };

        let {name,age,job} = json;


    let {name:nick,age:num,job:work} = json;

        console.log(nick,num,work);

</pre>

</div>

<script type="application/javascript">

    console.log("解构赋值:");
    {
        let [a,b,c] = [1,2,3];
        console.log(a,b,c);
    }

    console.log("解析结构：")
    {
        let [a,[b,c]] = [1,[2,3]];
        console.log(a,b,c);
    }

    console.log("给变量默认值：");
    {
        let [a,b,c = 'default data'] = [1,2];
        console.log(a,b,c);

        let [d,e,f = 'default data'] = [1,2,undefined];
        console.log(d,e,f);

        let [g,h,i = 'default data'] = [1,2,null];
        console.log(g,h,i);

        let [j,k,l = 'default data'] = [1,2,''];
        console.log(j,k,l);

    }

    console.log("解析Json字符串:");
    {
        let json = {
            name:'jack',
            age:28,
            job:'work'
        };

        let {name,age,job} = json;

        console.log(name,age,job);

        console.log("给解析后的属性取别名：");
        let {name:nick,age:num,job:work} = json;

        console.log(nick,num,work);

    }

    console.log("获取位置信息：");
    {
        function getPos() {
            return {
              left:10,
              top:12
            };
        }

        let {top,left} = getPos();
        console.log(left,top);
    }

    console.log("参数解构：");
    {
        function show1({a,b = '默认值'}) {
            console.log(a,b);
        }
        show1({a:'小明',b:'小花'});

        function show2({a = '默认值a',b = '默认值b'}) {
            console.log(a,b);
        }
        show2({});

        function show3({a,b = '默认值b'}={a:'a'}) {
            console.log(a,b);
        }
        show3();

    }

</script>

</body>
</html>

3.array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的用法</title>
    <script>
        let log = (text)=>console.log(text);
    </script>
</head>
<body>

<pre>

    ES5:

    array.forEach()
    array.map()
        返回值修改数组内容,重新整理数据结构
    array.filter()
        过滤不合适的元素，如果返回结果为true则留下来
    array.some()
        类似查找，数组中某一个元素符合条件，返回true
    array.every()
        数组里面的元素都要符合条件，才返回true
    array.reduce()
        pre,是第一次的结果
    array.reduceRight()
        从右边开始计算
    array.for...of




</pre>

<script type="application/javascript">

    let arr1 = ['jack','mary','tom','blush','fen'];
    log("forEach普通函数:");
    arr1.forEach(function (val,index,arr1) {
        console.log(index,val,arr1);
    });
    log("forEach箭头函数:");
    arr1.forEach((val,index,arr1)=>{
        console.log(index,val,arr1)
    });
    log("map映射:");
    let news = [
        {title:'new1',read:199,hot:false},
        {title:'new2',read:299,hot:true},
        {title:'new3',read:399,hot:false},
        {title:'new4',read:499,hot:true},
        {title:'new5',read:599,hot:false},
    ];

    let mapNews = news.map((val,index,news)=>{
        console.log(index,val,news[index].read);
        let item = {};
        item.t = val.title+"map";
        item.r = val.read+1;
        item.h = false;
        return item;
    });
    log(mapNews);

    log("filter过滤:");
    let filterNews = news.filter((val,index,news)=>{
        console.log(index,val,news[index].read);
        return val.hot;
    });
    log(filterNews);

    let arr2 = [1,2,3,4,5,6,7,8,9,10];
    let sum = arr2.reduce((pre,cur,index,arr2)=>{
        return pre + cur;
    });
    log("reduce:"+sum);
    log("ES6:");
    for(let val of news){
        console.log(val.title);
    }
    for(let [key,val] of news.entries()){
        console.log(key,val);
    }

</script>

</body>
</html>

4.string

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>String字符串</title>
    <script>
        function log(text) {
            console.log(text);
        }
    </script>
</head>
<body>

<pre>

    字符串模板

    可以随意换行

    let name = "Jack";
    let age = 22;
    let hobby = "football";

    let text = `Hi,大家好，我叫${name},年龄：${age},我爱好：${age}`;
    log(text);

    字符串查找
        includes(str)

    字符串匹配
        startWith()
        endsWith()

    字符串重复
        repeat(count)

</pre>

<ul id="news">

</ul>


<script type="application/javascript">

    let name = "Jack";
    let age = 22;
    let hobby = "football";

    let text = "Hi,大家好，我叫"+name+",年龄："+age+",我爱好："+hobby;
    log(text);

    log("字符串模板输出：");
    {
        let text = `Hi,大家好，我叫${name},年龄：${age},我爱好：${age}`;
        log(text);
    }

    let data = [
        {
            title:"上海金秋多雨1",
            read:199
        },
        {
            title:"上海金秋多雨2",
            read:299
        },
        {
            title:"上海金秋多雨3",
            read:399
        },
        {
            title:"上海金秋多雨4",
            read:499
        }
    ];
    window.onload = function () {
        let news = document.querySelector('#news');
        for(let i = 0;i<data.length;i++){
            let oLi = document.createElement('li');
            oLi.innerHTML = `<span>${data[i].title}</span>
                                <span>阅读人数：${data[i].read}</span>
                                <a href="#">详情</a>`;
            news.appendChild(oLi);
        }
    }

    let str = "Hi,I am apple,How are you,Are you ok?";
    log(str);
    log("字符串查找[you]："+str.includes('you'));

    let patten = 'apple you like';
    log("字符串匹配：");
    log(patten.startsWith('apple'));
    log(patten.endsWith('like'));

    log(patten.repeat(99))

</script>

</body>
</html>

5.func

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6函数</title>
    <script>
        function log(text) {
            console.log(text);
        }
    </script>
</head>
<body>

<pre>

    函数改变

    1.带默认值

    2.解构赋值

    3.函数参数默认是已经定义的，并不能再次使用let，const重新函数体内定义


</pre>

<script type="application/javascript">

    log("带默认值的：");
    function f1(a='Hello',b='Jack   ') {
        console.log(a+","+b);
    }
    f1();
    f1('Hi');
    f1(false,"Mark");
    f1(undefined,'Tony');

    log("解构赋值：");
    function f2({a='999a',b='999b'}={}) {
        console.log(a+","+b);
    }
    f2();
    f2({});
    f2({a:1,b:2});

    log("延展操作数：");
    function f3(...a) {
        log(a.sort());
    }
    f3();
    f3(5,2,1,4,3);
    f3(...[5,2,1,4,3]);

    function f4(a,b,...c) {
        console.log(a,b);
        console.log(c[0],c[1],c[2]);
    }
    f4(1,2,3,4,5);

    log("数组的复制：");
    let arr1 = ['a','b','c','d','e'];
    let arr2 = [...arr1];
    console.log(arr1,arr2);

    log("箭头函数：");
    let f5 = () => {
        log("begin-->");
        console.log(3);
        console.log(4);
        log("end-->");
    };
    f5();
    let f6 = (x,y)=>x+y;
    log(f6(2,3));

    let json = {
        id:1,
        name:'jack',
        show:function () {
            console.log("json函数 Id = "+this.id);
            setTimeout(() => {
                console.log("延迟2秒后打印：Name = "+this.name);
            },2000);
        }
    };

    json.show();
    
    function f7() {
        this.name = 'f7';
    }
    log(new f7().name);


</script>

</body>
</html>

6.gene

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Generator</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<pre>

    Symbol()
        返回值是一个唯一值，可以做key用
    generator生成器函数
        解决异步
        for...of...
        let [a,b,c] = gen();
        ...
        console.log(...gen());
        console.log(Arrays.from(gen()));

    gen.next(参数).value = yield后面计算的结果，其中参数为本次yield返回值


</pre>

<script>

    let sym = Symbol('aaa');
    console.log(sym);

    function * show() {
        console.log("生成器函数....");
        yield 'welcome';
        yield 'to';
        yield 'home';
        return 'jack';
    }

    let g1 = show();
    let g2 = show();

    console.log('手动调用');
    console.log(g1.next());
    console.log(g1.next());
    console.log(g1.next());
    console.log(g1.next());

    console.log('循环调用');
    for (let val of g2){
        console.log(val);
    }

    console.log('解构赋值');
    let [a,b,c] = show();
    console.log(a,b,c);

    console.log(...show());

    //https://api.github.com/users/tomtt
    
    function* getUserInfo() {

        let userName = yield 'tomtt';
        yield axios.get(`https://api.github.com/users/${userName}`);


    }

    console.log('模拟请求');
    let gg = getUserInfo();
    let username = gg.next().value;
    console.log(username);
    // console.log(gg.next());
    gg.next(username).value.then(res=>{
        console.log(res.data);
    })
    

</script>

</body>
</html>

7.asyn

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Async</title>
</head>
<body>

<pre>

    await只能放在async函数里面

</pre>

<script>

    console.log("Promise写法");

    function * gen() {
        yield readFile('data/a.txt');
        yield readFile('data/b.txt');
        yield readFile('data/c.txt');
    }

    let g1 = gen();

    g1.next().value.then(res=>{
        console.log(res);
        return g1.next().value;
    }).then(res=>{
        console.log(res);
        return g1.next().value;
    }).then(res=>{
        console.log(res);
    })

    console.log("async");
    
    async function fff() {
        let data1 = await readFile('data/a.txt');
        console.log(data1);
        let data2 = await readFile('data/b.txt');
        console.log(data2);
        let data3 = await readFile('data/c.txt');
        console.log(data3);
    }

</script>

</body>
</html>

8.set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Set</title>
</head>
<body>

<pre>

    Set存储数组
        let arr = new Set(['','','',''])
    WeakSet存储json
        let arr = new WeakSet();
    Map

</pre>

<script>

    let setArr = new Set(['a','b','c','a']);
    setArr.add('e');
    setArr.delete('a');
    console.log(setArr);

    let map = new Map();
    map.set(1,'jack1');
    map.set(2,'jack2');
    map.set(3,'jack3');
    console.log(map);

</script>

</body>
</html>

 

花生糖葫芦侠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端es6文档大全，你想要的这都有
weixin_43008434的博客
05-26 2549
《ES6》 ES6新特性： let const关键字 解构赋值 箭头操作符 参数默认值 iterator接口 promise，generator，async等异步操作 类的支持 1.Let 特点： 块级作用域（let声明的变量只在它所在的代码块有效） 不存在变量提升 暂时性死区 不允许重复声明 2.const 基本用法： const声明一个只读的常量。一旦声明，常量的值就不能改变。 对于const来说，只声明不赋值，就会报错。 const的作用域与let命令相同：只在声明所在的块级作用域内有效。
ES6 学习文档
12-25
ES6，ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6
es6学习文档.docx
04-16
esxuexizil
[最完整的前端学习手册]——ES6语法
weixin_48683052的博客
08-12 3815
5、有this关键字的不能被解构，会出现指向丢失（当解构的对象方法内部有this关键字参与，该方法不能进行解构，如果强行进行解构，在赋值后，调用时，会导致内部的this指向window）。可以按照数组，对象的形式进行解构赋值操作；​ rest参数，形式为“...变量名”，用于获取函数的多余参数，可以用rest参数取代arguments对象的使用。let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。1. var定义的变量，**没有块的概念，可以跨块访问**, 不能跨函数访问。......
第一节,ECMAScript的介绍
daily886的博客
12-16 891
ECMAScript 6简介  官网: http://es6.ruanyifeng.com/#docs/intro ECMAScript和JavaScript的关系 ES6与ECMAScript 2015的关系 语法提案的批准流程 ECMAScript的历史 部署进度 Babel转码器 Traceur转码器 ECMAScript 6.0（以下简称ES6）是JavaScr
ES6学习文档（更新至第7节）
weixin_34015860的博客
06-09 104
参考文章： es6.ruanyifeng.com/ 前言和ES6简介 ES6是JavaScript的统一规范。 node.js 是能让js代码配置服务器的技术，一般配置在3000端口。npm是管理js包的工具，其脚本命令npm script可以用来运行测试等功能。 Let和Const命令 let var可以在声明前被调用，输出undefined，这种现象称为变量提升。 在代码块中，let声...
es6学习文档，自己的学习日记
03-15
es6学习文档，自己的学习日记
前端es6学习文档，需要的同学可以自取
04-19
ES6 let和const命令 let命令 基本用法 ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 { let a = 10; var b = 1; } a // ReferenceError: a is not ...
ES6 学习笔记 完整版PDF
03-20
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
阮一峰es6教程文档源码
03-16
阮一峰es6教程文档源码 阮一峰es6教程文档源码 阮一峰es6教程文档源码 阮一峰es6教程文档源码 阮一峰es6教程文档源码
ES6开发文档.docx
04-27
ES6的综合知识点加代码
es6详细文档
03-29
书籍中对es6做了详细的说明，示例代码可以拷贝下来在本地运行，完全高清，对学习javaScript的同志很有帮助
ES6介绍文档
04-24
ES6的特性、对象、方法使用，快速掌握ES6的开发方式。
阮一峰es6文档
热门推荐
xiehanwei的博客
09-30 1万+
阮一峰老师写的超全的es6文档 http://es6.ruanyifeng.com/#docs/let
es6-特性整理
Turbo的博客
07-30 5788
es6-特性 这是一个 ES2015(ES6) 的Cheatsheet，其中包括提示、小技巧、最佳实践和一些代码片段，来帮助小白来学习，我也是从github 上“拿来的”，所以要想学好前端，勤逛github. 目录结构 var 与 let / const 声明 代码执行块替换立即执行函数 箭头函数 字符串 解构 模块 参数 类 Symbols Maps WeakMaps Promises
ES6 学习笔记(整理一遍阮一峰大神得入门文档，纯自己理解使用)
weixin_30651273的博客
11-11 126
1.let命令 1）let和var的区别：let声明的变量只有所在的代码块有效。 2）没有变量的提升，一定要声明后使用。使用let命令声明变量之前，该变量都是不可用的。形成“暂时性死区”。 3）typeof 不再是一个百分之百安全的操作。 2.块级作用域 1）es5和es6比较：es5 只有全局作用域和函数作用域，没有块级作用域。 2）let实际上为javascript新增了块级作用域...
ES6学习手册（3）
czzyw的博客
05-11 100
ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法 name, change, // name: name, // change: change // improve: function() { // console.log('来吧') // }, improve() {
ES6学习——一文搞懂ES6
qq_42696432的博客
12-02 8680
学习完JavaScript和vue后快速学习ES6新特性及其语法，es6是JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ES6学习
weixin_51008360的博客
05-26 452
ES6 https://es6.ruanyifeng.com/ ES 全称 EcmaScript , 是脚本语言的规范 而平时经常编写的 JavaScript，是 EcmaScript 的一种实现 ，所以 ES 新特性就是 JavaScript 新特性 let 声明变量 let 局部变量 var 全局变量 let : 块级作用域 不存在变量提升 变量不能重复声明 const 声明常量 变量名一般大小 数组声明 // 数组结构 const arr = [1,2,3,4,5]; let [a,b,c,
cesium-popup-es6 文档
最新发布
07-18
### 回答1： cesium-popup-es6是一个基于ES6语法编写的Cesium.js的弹窗...总之，cesium-popup-es6 文档是一份详尽而全面的文档，对于开发者学习和使用cesium-popup-es6库非常有帮助，可以提高开发效率并简化开发过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花生糖葫芦侠

创作不易，请多多支持！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值