ES6 各种新语法

最新推荐文章于 2023-12-12 08:36:55 发布
最新推荐文章于 2023-12-12 08:36:55 发布
阅读量340 收藏 2
点赞数 4
分类专栏： 前端 文章标签： es6/es7 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43009710/article/details/105597065
版权

在B站跟着石川blue老师快速学完es6,声音很有磁性，讲的也通俗易懂，真的太喜欢石川老师了。
用blue老师的话绝对妥妥的，脑袋放着做担保

视频地址

看完视频整理要点笔记:

1.ES6怎么来的

  • ECMAScript 和 JavaScript

    • ECMA 是标准，JS 是实现
    • ECMAScript 简称 ECMA 或 ES

  • 历史版本

    • 1996, ES1.0 Netscape 将 JS 提交给 ECMA 组织，ES 正式出现
    • 1999, ES3.0 被广泛支持
    • 2011, ES5.1 成为 ISO 国际标准
    • 2015, ES6.0 正式发布

2.ES6兼容性

  • ES6(ES2015) 支持的环境 IE10+, Chrome, FireFox, 移动端, NodeJS

  • 解决不兼容办法，编译、转换

    • 在线转换
    • 或者提前编译

  • Babel 中文网

    • Babel 入门教程 阮一峰
    • Babel 是一个 JavaScript 编译器
    • 一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
    • 现在就用 ES6 编写程序，而不用担心现有环境是否支持

3.变量 let 和 常量 const

  • var 的问题

    • 可以重复声明，没有报错和警告
    • 无法限制修改
    • 没有块级作用域， { }

  • let 和 const

    • 不能重复声明
    • 都是块级作用域, { } 块内声明的，块外无效
    • let 是变量，可以修改
    • const 是常量，不能修改

  • 块级作用域举例

    • 原来用 var 的方式，结果弹出的都是 3
    • 或者将变量 封装到函数里，限制作用域，但比较麻烦
    • 用 let 最简单，直接 var 改 let，解决作用域问题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload= function () {
            /*
            var aBtn = document.getElementsByTagName('input')
            for (var i=0; i < aBtn.length; i++) {
                aBtn[i].onclick = function () {
                    alert(i)
                }
            }*/
            var aBtn = document.getElementsByTagName('input')
            for (let i = 0; i < aBtn.length; i++) {
                aBtn[i].onclick = function () {
                    alert(i)
                }
            }
            /*
            var aBtn = document.getElementsByTagName('input')
            for (var i = 0; i < aBtn.length; i++) {
                // 封装到函数里，限制作用域
                (function (i) {
                    aBtn[i].onclick = function () {
                        alert(i)
                    }
                })(i)
            }*/
        }
    </script>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
</body>
</html>

4.函数-箭头函数

  • 箭头函数，就是函数的简写
    • 如果只有一个参数，() 可以省
    • 如果只有一个return，{}可以省
// 普通函数
function name() {

}
// 箭头函数，去掉 function， 加上 =>
() => {

}

let show1 = function () {
    console.log('abc')
}

let show2 = () => {
    console.log('abc')
}

show1() // 调用函数
show2()

let show4 = function (a) {
    return a*2
}

let show5 = a => a * 2  //简洁，类似python lambda 函数

console.log(show4(10))
console.log(show5(10))

5.函数-参数

  • 参数扩展／展开 ...args
    • 收集剩余的参数，必须当到最后一个参数位置
    • 展开数组，简写，效果和直接把数组的内容写在这儿一样
  • 默认参数
function show(a, b, ...args) {
    console.log(a)
    console.log(b)
    console.log(args)
}
console.log(show(1, 2, 3, 4, 5))

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3)

function show2(a, b=5, c=8) {
    console.log(a, b, c)
}
show2(88, 12)

6.解构赋值

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

let {x, y, z} = {x: 1, y: 2, z: 3}
console.log(x, y, z)

let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8, 'str']
console.log(json, arr, num, str)
  • 解构赋值
    • 左右两个边结构必须一样
    • 右边必须是个东西
    • 声明和赋值赋值不能分开，必须在一句话里

7.数组

  • 新增4个方法
  • map 映射 一个对一个
let arr = [12, 5, 8]
let result = arr.map(function (item) {
    return item*2
})
let result2 = arr.map(item=>item*2) // 简写
console.log(result)
console.log(result2)

let score = [18, 86, 88, 24]
let result3 = score.map(item => item >= 60 ? '及格' : '不及格')
console.log(result3)

// 结果
[ 24, 10, 16 ]
[ 24, 10, 16 ]
[ '不及格', '及格', '及格', '不及格' ]
  • reduce 汇总 一堆出来一个
    • 用于比如，算个总数，算个平均
var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
    //tmp 上次结果，item当前数，index次数1开始
    console.log(tmp, item, index)
    return tmp + item
})
console.log(result)

var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
    if (index != arr.length - 1) { // 不是最后一次
        return tmp + item
    } else {
        return (tmp + item)/arr.length
    }
})
console.log(result)  // 平均值
  • filter 过滤器 保留为true的
var arr = [12, 4, 8, 9]
var result = arr.filter(item => (item % 3 === 0) ? true : false)
console.log(result)
var result = arr.filter(item => item % 3 === 0)
console.log(result)

var arr = [
    { title: '苹果', price: 10 },
    { title: '西瓜', price: 20 },
]
var result = arr.filter(json => json.price >= 20)
console.log(result)
  • forEach 循环迭代
var arr = [12, 4, 8, 9]
var result = arr.forEach(item => console.log(item))
var result = arr.forEach((item, index)=>console.log(item, index))

8.字符串

  • 多了两个新方法
    • startsWith
    • endsWith
var url = 'http://qq.com'
console.log(url.startsWith('http'))
console.log(url.endsWith('com'))
// 都是 true
  • 字符串模版
    • 使用反引号，${变量}
    • 可以折行
let a = 12
let str1 = `asdf${a}`
console.log(str1)

let title = '标题'
let content = '内容'
let str = `<div>
<h1>${title}</h1>
<p>${content}</p>
`
console.log(str)
<div>
<h1>标题</h1>
<p>内容</p>

9.面向对象-基础

  • 原来写法
    • 类和构造函数一样
    • 属性和方法分开写的
// 老版本
function User(name, pass) {
    this.name = name
    this.pass = pass
}

User.prototype.showName = function () {
    console.log(this.name)
}
User.prototype.showPass = function () {
    console.log(this.pass)
}

var u1 = new User('able', '1233')
u1.showName()
u1.showPass()
// 老版本继承
function VipUser(name, pass, level) {
    User.call(this, name, pass)
    this.level = level
}
VipUser.prototype = new User()
VipUser.prototype.constructor = VipUser
VipUser.prototype.showLevel = function () {
    console.log(this.level)
}

var v1 = new VipUser('blue', '1234', 3)
v1.showName()
v1.showLevel()
  • 新版面向对象
    • 有了 class 关键字、构造器
    • class 里面直接加方法
    • 继承，super 超类==父类
class User {
    constructor(name, pass) {
        this.name = name
        this.pass = pass
    }

    showName() {
        console.log(this.name)
    }
    showPass() {
        console.log(this.pass)
    }
}

var u1 = new User('able2', '111')
u1.showName()
u1.showPass()

// 新版本继承
class VipUser extends User {
    constructor(name, pass, level) {
        super(name, pass)
        this.level = level
    }
    showLevel(){
        console.log(this.level)
    }
}

v1 = new VipUser('blue', '123', 3)
v1.showLevel()

10.面向对象应用

  • React
    • 用于构建用户界面的 JavaScript 库
    • 组件化，一个组件就是一个 class
    • JSX == bable == browser.js

11.json

  • JSON 格式

    • JavaScript Object Notation 的缩写，是一种用于数据交换的文本格式
    • JSON 是 JS对象 的严格子集
    • JSON 的标准写法
    • 只能用双引号
    • 所有的key都必须用双引号包起来

  • JSON 对象

    • JSON 对象是 JavaScript 的原生对象，用来处理 JSON 格式数据，有两个静态方法
    • JSON.parse(string) ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。
    • JSON.stringify(obj) ：接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。
var json = {a: 12, b: 5}
var str = 'hi,' + JSON.stringify(json)
var url = 'http://www.xx.com/' + encodeURIComponent(JSON.stringify(json))
console.log(str)
console.log(url)

var str = '{"a": 12, "b": 4, "c": "abc"}'
var json = JSON.parse(str)
console.log(json)
hi,{"a":12,"b":5}
http://www.xx.com/%7B%22a%22%3A12%2C%22b%22%3A5%7D
{ a: 12, b: 4, c: 'abc' }

  • 对象（object）

    • 是 JavaScript 语言的核心概念，也是最重要的数据类型
    • 对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合
    • 对象的所有键名都是字符串, 所以加不加引号都可以
    • 如果键名是数值，会被自动转为字符串
    • 对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型
    • 如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用
    • in 运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值
    • for…in循环用来遍历一个对象的全部属性

  • 对象 简写

    • key-value 一样时可以简写
    • 里面函数可以简写, 去掉
var a = 12, b = 5
console.log({a:a, b:b})
console.log({a, b})
console.log({a, b, c:"c"})
console.log({ a, b, show(){ console.log('a') }})
{ a: 12, b: 5 }
{ a: 12, b: 5 }
{ a: 12, b: 5, c: 'c' }
{ a: 12, b: 5, show: [Function: show] }

12.Promise

  • 异步和同步

    • 异步，操作之间没有关系，同时执行多个操作， 代码复杂
    • 同步，同时只能做一件事，代码简单

  • Promise 对象

    • 用同步的方式来书写异步代码
    • Promise 让异步操作写起来，像在写同步操作的流程，不必一层层地嵌套回调函数
    • 改善了可读性，对于多层嵌套的回调函数很方便
    • 充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口

  • Promise 也是一个构造函数

    • 接受一个回调函数f1作为参数，f1里面是异步操作的代码
    • 返回的p1就是一个 Promise 实例
    • 所有异步任务都返回一个 Promise 实例
    • Promise 实例有一个then方法，用来指定下一步的回调函数
function f1(resolve, reject) {
  // 异步代码...
}
var p1 = new Promise(f1);
p1.then(f2); // f1的异步操作执行完成，就会执行f2。
  • Promise 使得异步流程可以写成同步流程
// 传统写法
step1(function (value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        // ...
      });
    });
  });
});

// Promise 的写法
(new Promise(step1))
  .then(step2)
  .then(step3)
  .then(step4);
  • Promise.all(promiseArray)方法
    • 将多个Promise对象实例包装，生成并返回一个新的Promise实例
    • promise数组中所有的promise实例都变为resolve的时候，该方法才会返回
    • 并将所有结果传递results数组中
    • promise数组中任何一个promise为reject的话，则整个Promise.all调用会立即终止，并返回一个reject的新的promise对象
var p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    console.log(results);  // [1, 2, 3]
});
  • Promise.race([p1, p2, p3])
    • Promse.race就是赛跑的意思
    • 哪个结果获得的快，就返回那个结果
    • 不管结果本身是成功状态还是失败状态

13.generator-认识生成器函数

  • generator 生成器函数
    • 普通函数，一路到底
    • generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权
    • yield 有 放弃、退让、退位的意思
    • 需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步
    • generator函数前面加一个 * 两边可以有空格，或靠近函数或function
    • 背后实际生成多个小函数，实现走走停停
function show() {
    console.log('a')
    console.log('b')
}
show() // 普通函数

function *show2() {
    console.log('1')
    yield
    console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最后了，没有结果

14.generator-yield是啥

  • yield

    • 既可传参，又可以返回
    • 第一个next()传参无效，只用来启动

  • 如果函数前漏掉 *

    • 就是普通函数
    • 如果有yield会报错， ReferenceError: yield is not defined
    • yield 只能在Generator函数内部使用
function * show() {
    console.log('1')
    var a = yield
    console.log('2')
    console.log(a)
}
// yield 传参
var gen = show()
gen.next() // 1
gen.next() // 2 和 undefined 因为没有传参，yield没有返回值
var gen = show()
gen.next(10) // 1 第一次执行到yield，但没有执行赋值
gen.next(20) // 2 和 20

function* show2() {
    console.log('1')
    yield 10
    console.log('2')
}
// yield 返回
var gen = show2()
var res1 = gen.next()
console.log(res1) // { value: 10, done: false }
var res2 = gen.next()
console.log(res2)
// { value: undefined, done: true } 最后的value需要return返回

15.generator-实例

  • Promise 适合一次读一组
  • generator 适合逻辑性的
// 带逻辑-generator
runner(function * () {
    let userData = yield $.ajax({url: 'getUserData'})

    if (userData.type == 'VIP') {
        let items = yield $.ajax({url: 'getVIPItems'})
    } else {
        let items = yield $.ajax({url: 'getItems'})
    }
})

// yield 实例，用同步方式写异步
server.use(function * () {
    let data = yield db.query(`select * from user_table`)
    this.body = data
})

16.ES7 预览

  • 数组
    • arr.includes() 数组是否包含某个东西
    • 数组的 arr.keys(), arr,entries()
    • for … in 遍历数组 下标 key
    • for … of 遍历数组 值 value, 不能用于json
let arr = ['a', 'b', 'c']
console.log(arr.includes(1))

for (let i in arr) {
    console.log(i) // 循环的时下标 key
}

for (let i of arr) {
    console.log(i) // 循环的是值 value
}
for (let i of arr.keys()) {
    console.log('>'+i)
}
for (let [key, value] of arr.entries()) {
    console.log('>' + key + value)
}

let json = { a: 12, b: 5, c: 7 }
for (let i in json) {
    console.log(i)
}
  • 字符串
    • padStart()/padEnd() 指定宽度，不够就补空格或指定字符
console.log('=' + 'abcd'.padStart(6, '0') + '=')
console.log('=' + 'abcd'.padEnd(6, '0') + '=')
=00abcd=
=abcd00=

  • 容忍度

    • [1, 2, 3,] 老版数组最后不能有逗号，新的可以有
    • 函数参数最后多的逗号也可以

  • async await

    • 和 generator yield 类似
    • generator 不可以写成箭头函数， async 可以
async function show() {
    console.log(1)
    await
    console.log(2)
}

我是乐乐呀，感谢您的阅读。如果您觉得不错，那就点个赞吧，您的支持是我最大的动力。谢谢😜

乐乐呀168
关注
专栏目录
ES6 入门基础语法总结
04-05
ES6 引入了许多新的语法特性和功能，以提高开发效率和代码可读性。本文总结了 ES6 的基础语法，包括 let 与 const、箭头函数、Promise、数据类型、类、解构赋值等。 1. let 和 const 在 ES6 中，引入了 let 和 ...
ES6的新语法（语法糖）
jt15881622410的博客
11-30 1811
ES6引入了许多新的语法用过很多了，但是总没有区分开，哪些是es6新加的，最近面试有问到，所以这里整理一下，算是比较全的，这里只涉及到了语法相关的。
ES6有哪些新语法？
金木AI
05-10 477
这些新的语言特性和改进提供了更简单、更直观的语法和更好的可读性，同时也增加了代码的可维护性和可复用性。对于 JavaScript 开发者来说，掌握 ES6 的新语法是非常重要的，可以提高代码的质量和效率。13、async/await 异步编程语法糖。1、let 和 const 声明变量的方式。14、rest 和 spread 操作符。10、Map 和 Set 数据结构。12、generator 函数。11、Symbol 数据类型。7、Promise 对象。
ES6的常见新增语法
weixin_58448088的博客
01-24 5409
详解ES6常见新增语法：立即执行函数、箭头函数、this指向、改变this指向的三种方法：call(),apply(),bind()、合并展开运算符、解构赋值、map数据类型、set数据类型
ES6 新增功能点整理
bihansheng2010的博客
05-13 949
1、webpcak 打包工具 入口 (entry) 输出 (output) loader 插件 (plugins) 2、gulp 自动化构建工具 const gulp = require('gulp'); // default 表示一个任务名，为默认执行任务 gulp.task('default', function() { // 放置默认的任务代码 }) 3、新的关键字 let 、const let 作用域在当前代码块 （var 是全局） const 定义只读变量，值不能变化...
js ES6新语法
最新发布
zhujiale159的博客
12-12 554
JavaScript常用的ES6语法和特性介绍
ES6基本语法及新增语法
08-20
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
ES6语法规范.docx
08-14
ES6语法规范 ES6（ECMAScript 6）是一种新的JavaScript语法规范，相比于之前的ES5，ES6带来了许多新的特性和改进。下面将对ES6中的let命令、const命令、解构赋值、Symbol、Set等知识点进行详细的介绍。 一、let...
ES6核心语法整理笔记
05-16
主要总结了ES6的一些核心语法，整理成一个思维导图，能帮助快速复习回顾
ES6新增语法笔记，方便学习
03-25
最新ES6语法整理笔记，内涵各个部分小示例，方便理解和使用，记录了整个ES6新增语法部分，以及与之前版本的比较！
【ES6】新增语法
weixin_49487698的博客
05-12 1808
一、定义变量 var–> let：定义变量 ​ const：定义常量 note： var的预解析：在声明var之前输出，是undefined，而在声明let、const之前输出，直接报错 var不局限于某一个块，可声明多次，let、const只能在相对应的块中使用，只可声明一次 二、箭头函数 ：对原来函数表达式的简写（省略function） note：1、当箭头函数只有一个形参时，可以不写（） ​ 2、当箭头函数只有一句话时，可以不写{}，并且返回值是 { } 里面的内容 ​ 3、普通函数
ES6 整体新语法列表
chen_wei_yx的博客
09-06 274
新语法
ES6新增常用语法总结
qq_44606245的博客
08-02 369
一、新的变量声明方式 先说说之前我们用的var吧，只要声明一个变量，它就会被挂到window上面，很不安全也不方便。 const 声明时必须初始化,值不能被改变（类似于常量），常用来声明一个值不会被改变的量。当值为基础数据类型时，那么值就是它本身，不可被改变；如果值为引用数据类型时（对象、数组），值就指的是它的引用，只要引用不变即可，仍可改变引用指向的对象里的值。 let 声明的变量可以重新赋值,但是不能在同一作用域内重新声明,常用来声明一个汇编改变的变量。 区别：const不可变，let可变，如果声明
Js中es6中的基本语法使用
谢先生的日记
04-21 827
最近在开发项目，发现一个问题ajax从后端获取的JSON数据如何填充到表格中，虽然知道遍历的方式，但是效率太差，后面发现有一个语法糖可以使用，可以变得容易许多： 后台传回来的JSON数据，把数据填充到表格但是： success: function (res) { $("#contentTable tr:gt(0)").remove(); //删除之前的tbody的所有数据 va...
ES6的新增语法
LiuYQing的博客
09-25 812
letES6中新增的用于声明变量的关键字 特点： 1.let声明的变量只在所处于的块级有效 if(true){ leta=10; } console.log(a)//aisnotdefined 2.在业务逻辑比较复杂时，能够防止内层变量覆盖外层变量 3.拥有块级作用域的变量还有一个好处防止循环变量变成全局变量 4.不存在...
ES6新语法
guanhy594230的博客
10-28 189
ES6新语法 箭头操作符 书写函数变得简单,解决了函数中this指向的问题 class类的引入,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法 function Point(x, y) { this.x = x; this.y = y;} Point.prototype.toString = function () { return '(' + this....
ES6新增语法
weixin_45950790的博客
04-18 1001
ES6的语法规范 一、定义变量的关键词 1、let <1> 特点： （1）定义的变量名称不能重复 （2）定义的变量会像forEach()循环类似会建立独立的相互之间不影响的 （3）定义在{}和循环中的变量 只能在{}和循环中使用 <2> 使用： （1）定义基本数据类型 （2）在循环中使用 定义循环变量 2、const <1> 特点： （1）定义的变量名称不能重复...
探索ES6：JavaScript语法革新入门指南
1. 语法变化：ES6引入了诸如箭头函数、let和const关键字、模板字符串、解构赋值、默认参数值、剩余参数等新语法特性，使得代码更加简洁和易读。 2. 类型系统：虽然JavaScript一直以动态类型著名，ES6引入了静态类型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

乐乐呀168

整理资料不易，谢谢支持

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

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

打赏作者

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

抵扣说明：

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

余额充值