专栏首页无道编程【学习笔记】ES6新的语法

【学习笔记】ES6新的语法

ES6

最新2019 (es10)


方便 -> 工程性

需要了解的:

  • 变量
  • 作用域
  • 函数
  • 自带对象
  • 异步处理
    • Promise
    • async/await

变量

以前

var申明

现在

let 变量

const常量

块级作用域

for() {} {} function () {}

看以下代码:

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>

    <script>
        let btns = document.getElementsByTagName('button');

        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                alert(i);
            }
        }
    </script>
</body>

都会弹出5 只需将var 改成let 就会弹出0 1 2 3 4

解构赋值

{a:12,b:32}

[12,34,56]

注意两点:

  • 左右两边一样
  • 右边得是一个东西(对象、数组....)
<script>

    let json = { a: 12, b: 43, c: 34 };
    let { a, b, c } = json;
    // 右边是a,b,c左边也得是a,b,c
    // 位置不一样,但会找到对应的值
    console.log(a, b, c);
    // 12 43 34


    let [aa, bb, cc] = data;

    console.log(aa, bb, cc)
</script>

函数

箭头函数

(args) => {


}

好处:this指向问题解决了

剩余参数

function gg(a, c, ...arr) {
        console.log(a);
        console.log(c);
        console.log(arr);
    }

    gg(1, 2, 3, 4, 5, 56, 6, 7);

剩余参数必须是最后一个参数

let a = [12, 3, 4, 5, 5];
let b = [23, 4, 5, 6, 342, 3, 3];

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

// [ 12, 3, 4, 5, 5, 23, 4, 5, 6, 342, 3, 3 ]

数组相关Array

map

映射:n -> n

let a = [12, 3, 4, 5, 6, 7, 8, 9, 10];
let res = a.map((item) => item * 2);
console.log(res);

// [ 24, 6, 8, 10, 12, 14, 16, 18, 20 ]

reduce

数组内的元素遍历后依次减少

在函数内部进行想要的操作。

let arr = [12, 3, 4, 5];
let bres = arr.reduce((tmp, item, index) => {
    return tmp+item;
    // console.log(tmp);
    // console.log(item);
    // console.log(index);
});

console.log(bres);

求平均数

let arr = [12, 3, 4, 5];
let n = arr.reduce((tmp, item, index) => {
    if (index < arr.length - 1) {
        return tmp + item;
    }
    return (tmp + item) / arr.length;
});

// 6

forEach

循环一遍 类似for()

filter

//filter
let arr = [12, 3, 4, 5];
let brr = arr.filter((item) => item % 2 === 0);
console.log(brr);

// [ 12, 4 ]

字符串String

字符串模板

let arr = [12, 3, 4, 5];
arr.forEach((item, index) => {
    console.log(`这是第${index + 1}个变量:${item}`);
});

// 这是第1个变量:12
// ....

startsWith

let url = "https://www.misiyu.cn";
if (url.startsWith('https:') || url.startsWith('https:')) {
    console.log('是URL');
}
// 是URL

endsWith

同startsWith,不过是判断尾部

异步处理

同步:多个操作必须一个一个的操作。

异步:多个操作可以是同时进行。

Promise

统一异步处理,

let resolve = function () {
    console.log('resolve');
};

let reject = function () {
    console.log('reject');
};

let does = function () {
    console.log('does');
    return false;
};

let p = new Promise(does).then(resolve).catch(reject);

上面这个例子稍微有点问题,用异步网络请求可以演示清楚

Promise.all()

等所有异步完成之后会执行then,有错误在执行catch

async/await

在函数前面声明

async function f() {
    let a = 32;
    let b = 23;
}

f().then(r => console.log('fasdf'));

如果函数内部有异步操作(如数据访问)九需要在此前加await

async function f() {
    let a = 32;
    let b = 23;
    let data = await $.get({url: 'https://www.misiyu.cn'});
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue中实现文件上传

    为工具网 https://tool.misiyu.cn/qrcode 增加二维码上传识别功能。

    无道
  • 原生js判断操作系统和浏览器版本

    在诸如博客、论坛等系统的评论中,我们可以看见不少的网站都有显示发表评论的人的操作系统版本和浏览器版本。

    无道
  • 轻松搭建WordPress博客系统【图文】

    WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管...

    无道
  • ES6

    在cmd命令窗口初始化项目-y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。

    楠楠
  • JavaScript学习笔记009-Json对象0解构赋值0扩展运算符

    Mr. 柳上原
  • 12个必备的JavaScript装逼技巧

    原文: 12 Amazing JavaScript Shorthand Techniques

    Fundebug
  • ES6语法基础之let用法

    简单讲解一些ES6语法基础!了解一些es6新特性!当然下一步需要学习的vue框架也是基于es6的,因此很有必要学习下es6语法,接下来几次简单讲解es6语法!

    十月梦想
  • 小结ES6基本知识点(二)

    ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门。

    前端林子
  • ES6——数组

    一个类数组对象必须含有 length 属性,且元素属性名必须是数值或者可转换为数值的字符。

    羊羽shine
  • SpringBoot-13-插曲之Node文件重命名+自动生成json对象

    张风捷特烈

扫码关注云+社区

领取腾讯云代金券