es2016新增内容

最新推荐文章于 2024-01-05 02:24:22 发布
最新推荐文章于 2024-01-05 02:24:22 发布
阅读量296 收藏
点赞数
分类专栏： 学习笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yozora999/article/details/106178719
版权

ECMAscript模块

在浏览器环境中，JavaScript分为两大部分，一个是ECMAScript，一个是node api：BOM和DOM

在编写代码之前需要构建一下项目，添加一下工具。
首先用到的就是package.json：在node.js中，模块是一个库或者框架，也是一个node.js项目。node.js遵循模块化的架构，当我们创建了一个node.js项目，意味着创建了一个模块，这个模块的描述文件就是package.json
nodemon: 修改代码后自动执行代码

安装nodemon: npm install -g nodemon (-g 代表全局安装，代表所有项目无论有没安装 nodemon，都可以直接在命令行上运行，因此我们不会在项目里的 node_modules 看到 nodemon。)

let与块级作用域

在ES2015之前是没有块级作用域的，写在{ }内的变量在{ }外面也能取到

var会导致变量提升问题，let就不会

模板字符串

${这里可以传入js语句} 支持换行

带标签的模板字符串

const name = 'aaa'
const age = 10
function tage(strings, name, age) {
	//可以在这里进行一些处理
    console.log(strings, name, age) //['name:','age:']  'aaa'  10
}
const result = tags`name:${name}age:${age}`

字符串的扩展方法

const MESSAGE = 'Error: foo is undefined.'
function strFun(message) {
    //判断字符串的开头是否以xx开始
    console.log(message.startsWith('Error')) //true
    //判断字符串是否以xxx结尾
    console.log(message.endsWith('.')) //true
    //判断字符串是否包含xxx
    console.log(message.includes('foo')) //true
}
strFun(MESSAGE);

剩余参数

function func(...args) {
	console.log(args) //[1,2,3]
}
func(1,2,3)

箭头函数和this

普通函数的this指向他的调用者，而箭头函数的this指向调用者的上下文环境，箭头函数本身是没有this指向的。
这里要注意的是，这个函数的执行环境是浏览器环境还是node环境。浏览器环境因为有window对象。

const person = {
    name: 'aaa',
    sayHi: () => {
        console.log(this.name) ;
    },
    sayHiAync: function () {
        setTimeout(function() {
            console.log(this.name) ;
        }, 1000)
    }
}
person.sayHi() //aaa
person.sayHiAync() //undefined

对象字面量增强

const name = 'abc';
let obj = {
    method1() {
        console.log(111)
    },
    [name]: 'myName'
}
console.log(obj.method1()) //111
console.log(obj.abc) //myName

对象扩展方法

Object.assign(): 将多个源对象中的属性复制到一个对象目标中

const assigns = {
    a: 123,
    b: 456
};
const target = {
    a: 456,
    c: 789
}
let result = Object.assign(target, assigns) //参数1是目标对象，参数2是源对象
console.log(result) // {a: 123, b: 456, c: 789}
console.log(result === target) //true 返回的值为目标对象，并没有改变对象的地址

function funs(obj) {
    // obj.name = 'name1'
    // console.log(obj)
    let objs = Object.assign({}, obj) //新的内存地址，不会覆盖obj1
    objs.name = 'name1'
    console.log(objs)
}
const obj1 = {name: 'glob obj'}
funs(obj1)

Proxy

Proxy（代理对象）用于监视对象的操作过程，是以非侵入的方式监听
defineProperty只能监听对象的读写

const person = {
    name: 'name',
    age: 10
}
const personPoxy = new Proxy(person, {
    //监视代理目标属性的访问
    get(target, property) {
        //target为代理目标对象，外部访问的property属性名
        console.log(target, property);
    },
    //监视代理目标设置属性的过程
    set(target, property, value) {
        //target为代理目标对象，外部设置的property属性名, value为设置的属性值
        console.log(target, property, value);
        target[property] = value;
    },
    //监视代理目标删除操作
    deleteProperty(target, property) {
        //target为代理目标对象，property要删除的属性名
        console.log('delet:', property);
        delete target[property]
    }
}) //第一个参数是需要代理的目标对象, 第二个参数是代理的处理对象
console.log(personPoxy.name)
personPoxy.sex = '女';
console.log(person)
delete personPoxy['sex']
console.log(person)

//监视数组
const list = []
const proxyList = new Proxy(list, {
    //用于监视数组的写入操作
    set(target, property, value) {
        //property此时对应的是数组的下标
        console.log('set', property, value)
        target[property] = value
        return true //表示写入成功
    }
})
proxyList.push(100)

除此之外还有更多的操作监听。

Reflect

Reflect封装了对对象的底层操作，不能通过new实例化一个方法，只能调用他封装的方法
Reflect成员方法就是proxy处理对象的默认实现
意义在于提供了一套统一操作对象的api（一共13个）

const obj = {
    name: 'zzz',
    age: 10
}
console.log(Reflect.has(obj, 'name'))
console.log(Reflect.deleteProperty(obj, 'age'))
console.log(Reflect.ownKeys(obj))

class类

function Person(name) {
    this.name
}
Person.prototype.say = function() {
    console.log('say')
}

class Person {
    constructor(name) {
        this.name = name
    }

    say() {
        console.log('say'+this.name)
    }

    //静态方法，用于创建Person类型的实例
    static create(name) {
        return new Person(name)
    }
}
// const p = new Person('tom')
// p.create()
const tom = Person.create('tom') //由于静态方法是挂载到类型上面的，所以静态方法的内部的this指向的是当前的类型，而不是一个新的实例对象
tom.say()

静态方法

类型中的方法一般分为实例方法和静态方法
实例方法：需要通过这个类型构造的实例对象去调用
静态方法：直接通过类型本身去调用，实例化对象无法访问，new一个实例化对象不会被继承这个静态方法

参考代码参照上面class模块

继承

class Person {
    constructor(name) {
        this.name = name
    }

    say() {
        console.log('say'+this.name)
    }
}

class Student extends Person {
    constructor(name, number) {
        //super指向父类，调用他等于调用父类的构造函数
        super(name);
        this.number = number;
    }

    hello () {
        //调用父类的方法
        super.say();
        console.log('my number is', this.number)
    }
}
const s = new Student(1414)
s.hello()

Set

Set是一个类型，通过实例可以调用。用于存放不重复的数据
Set最常用的用途是给数组去重

const s = new Set();
//add方法会返回集合对象本身，所以可以链式调用，添加过程中重复的值会被忽略
s.add(1).add(2).add(3).add(1)
s.size//获取数组长度
s.has(100) //false
s.delete(1) //true
s.clear() //清除

const arr = [1,2,1,2,4,5,7,5]
const result1 = new Set(arr)
const result2 = Array.from(new Set(arr))
const result3= [...new Set(arr)]

Map

和对象相似，但对象的键值对的键只能是字符串类型
对象中如果是非字符串类型作为键，会被toString转译。

const obj = {}
obj[true] = 'value'
obj[123] = 'value'
obj[{a: 1}] = 'value'
//被toString转换,object对象作为键的话全部都被转译成了'[object Object]'
console.log(Object.keys(obj)) //[ '123', 'true', '[object Object]' ]

const m = new Map()
const tom = {name: 'tom'}
m.set(tom, 90)
m.get(tom) //90

Symbol

由于大量引入第三方模块，很有可能出现值相同互相覆盖的情况，这个时候引用了Symbol，Symbol表示一个独一无二的值。symbol是一个数据类型。
对象可以用string和symbol作为键。
当对象用作symbol作为键时，则这个属性变成了对象的私有成员，因为是独一无二的，所以无法在外界访问到。

const s = Symbol('abc')//参数是对当前symbol的描述文本，对象可以用string和symbol作为键
console.log(typeof s)// --> symbol
//在全局对象中复用一个相同的symbol值,for方法传入的值必须是字符串，若不是则会自动转成字符串
const s1 = Symbol.for('123')
const s2 = Symbol.for('123')
console.log(s1===s2)//true
const obj = {
	[Symbol.toStringTag]: 'Xobj'
}
console.log(obj.toString()) //[object Xobj]

for…of循环

for循环适合遍历数组
for…in适合遍历键值对
for…of可以遍历任何数据结构，但是object对象不能直接遍历，因为object对象没有迭代器，需要自己手动写一个迭代器才可以进行遍历，能直接遍历的有数组，Set，Map对象

const arr = [100, 200, 300, 400]
for(const item of arr) {
    // console.log(item) //数组中的每个值
    if(item > 200) {
        // break; 可以用break跳出for...of循环
    }
}
const m = new Map()
m.set('a',10)
m.set('b',20)
for(const [key, value] of m) {
    //map对象遍历每个是键值对的数组
    console.log(key, value)
}

可迭代接口Iterator

const set = new Set(['foo', 'bar', 'baz'])
const iterator = set[Symbol.iterator]() //执行set对象自带的iterator方法,成为迭代器
console.log(iterator.next()) //迭代器的next方法{ value: 'foo', done: false }
console.log(iterator.next()) //迭代器的next方法
console.log(iterator.next()) //迭代器的next方法

只有有symbol.ierator方法的数据结构才可以被迭代,进行for…of遍历

实现可迭代接口

即有Symbol.iterator方法。
迭代器的应用：对外统一迭代接口，让外部不需要再去遍历特定的对象

const obj = {
    //可迭代接口iterable
    [Symbol.iterator]: function () {
        return {
            //迭代器iterator
            next: function() {
                //迭代结果iterationResult
                return {
                    value: 'zc',
                    done: true
                }
            }
        }
    }
}

//举例
const obj = {
    store: ['aaa', 'bbb', 'ccc'],
    //可迭代接口iterable
    [Symbol.iterator]: function () {
        let this_ = this
        let index = 0
        return {
            //迭代器iterator
            next: function() {
                //迭代结果iterationResult
                const result = {
                    value: this_.store[index],
                    done: this_.store.length >= index ? false : true
                }
                index ++ 
                return result
            }
        }
    }
}
for(const item of obj) {
    console.log(item)
}   
//对外统一迭代接口，让外部不需要再去遍历特定的对象
const todos = {
    life: ['吃饭', '睡觉', '打豆豆'],
    learn: ['语文', '数学', '外语'],
    works: ['喝茶'],

    [Symbol.iterator]: function() {
        const all = [...this.life, ...this.learn, ...this.works]
        let index = 0
        return {
            next: function () {
                return {
                    value: all[index],
                    done: index++ >= all.length
                }
            }
        }
    }
}
for(const item of todos) {
    console.log(item)
}

Generator生成器

Generator生成器：避免异步编程中，回调嵌套过深，提供更好的异步解决办法

yield后面的值将作为next()的结果返回

function * foo() {
    console.log(1111)
    yield 100;
    console.log(222)
    yield 200;
    console.log(333)
    yield 300;
}
const generator = foo()
console.log(generator.next()) //111 { value: 100, done: false }
console.log(generator.next()) //222 { value: 200, done: false }
console.log(generator.next()) //333 { value: 300, done: false }
console.log(generator.next()) // { value: undefined, done: true }

Generator生成器的应用

1.可用作发号器

function * createIDMaker () {
    let id = 1
    while (true) {
        yield id++
    }
}
const idMaker = createIDMaker()
console.log(idMaker.next().value)

2.使用generator函数生成iterator迭代器

const todos = {
    life: ['吃饭', '睡觉', '打豆豆'],
    learn: ['语文', '数学', '外语'],
    works: ['喝茶'],

    [Symbol.iterator]: function * () {
        const all = [...this.life, ...this.learn, ...this.works]
        for(const item of all) {
            yield item
        }
    }
}
for(const item of todos) {
    console.log(item)
}

ECMAScript2016

数组的indexof()方法查找返回元素的下标，但如果是查找NaN类型，则查找不到。
1.ES6新增了一个includes方法，返回值为布尔类型，可以查找NaN类型。
2.新增指数运算符，如2的十次方写作: 2**10

ECMAScript2017

Object.values(obj) 返回值的数组
Object.entries(obj) 对象键值对组成一个个数组之后，返回全部的键值对数组
Object.getOwnPropertyDescriptors(obj) 获取对象中的所有描述
string.padEnd(),string.padStart()

const obj = {
    foo: 'value1',
    bar: 'value2'
}
console.log(Object.values(obj)) //[ 'value1', 'value2' ]
console.log(Object.entries(obj)) //[ [ 'foo', 'value1' ], [ 'bar', 'value2' ] ]
for( const [key, value] of Object.entries(obj)) {
    console.log(key, value)
}
//这里由于与Map对象的返回值相同，所以可以转化为Map对象
console.log(new Map(Object.entries(obj)))



const p1 = {
    firstName: 'value1',
    lastName: 'value2',
    get fullName () {
        return this.firstName + this.lastName
    }
}
// const p2 = Object.assign({}, p1);
// p2.firstName = 'aaa'
// //set方法无法复制
// console.log(p2)

const description = Object.getOwnPropertyDescriptors(p1)
console.log(description)
const p2 = Object.assign({}, description)
console.log(p2)

const books = {
    html: 5,
    css: 16,
    javascript: 120
}
for(const [key, value] of Object.entries(books)) {
//第一个是总体字符长度，第二个参数是填充内容
    console.log(`${key.padEnd(16, '-')}|${value.toString().padStart(3, '0')}`)
}
//html------------|005
//css-------------|016
//javascript------|120

这一模块遇见的问题：

  1. package.json和package-lock.json问题
    这个其实是Npm5之后,npm install 都会有一个package-lock.json文件，原来package.json文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，每次npm install都是拉取的该大版本下的最新的版本。package-lock.json功能，为的是让开发者知道只要你保存了源文件，到一个新的机器上、或者新的下载源，只要按照这个package-lock.json所标示的具体版本下载依赖库包，就能确保所有库包与你上次安装的完全一样。
  2. 闭包
    闭包函数：声明在一个函数中的函数，叫做闭包函数。
    闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。
yozora999
关注
专栏目录
es8新增
代码青春
03-18 290
Object.entries()和Object.values() 字符串填充：padStart和padEnd Object.entries()返回一个二维数组 Object.entries({ one: 1, two: 2 }) //[['one', 1], ['two', 2]] Object.entries([1, 2]) //[['0', 1...
ElasticSearch（系列1）---入门ES（ES的数据新增）
欢迎来到我的博客
08-31 1030
映射是定义文档的过程，文档包含哪些字段，这些字段是否保存，是否索引，是否分词等只有配置清楚，Elasticsearch才会帮我们进行索引库的创建请求方式依然是PUTPUT /索引库名/_mapping/类型名称"字段名": {"type": "类型","analyzer": "分词器"类型名称：就是前面将的type的概念，类似于数据库中的不同表字段名：任意填写 ，可以指定许多属性，例如：type：类型，可以是text、long、short、date、integer、object等。
ES2019新增功能
li_bing_的专栏
01-06 382
翻译：李冰 原文：http://www.zsoltnagy.eu/whats-new-in-es2019/ ES2019或ES10是JavaScript的2019版本。在2015年进行重大更新之后，JavaScript每年都在发展。开发人员可以获得一小组有用的功能，这些功能可以帮助我们在创新与稳定性之间取得平衡。 您也可以在此博客中了解JavaScript的发展，因为第一篇文章发布于201...
ES2016（ES7）新特性
述安的博客
01-25 402
新增数组的方法〔includes〕 新增运算符〔**〕
ES新增方法
bubbleJessica的博客
01-08 462
ES新增方法
Spring Boot elasticsearch7.6.2基础操作：创建索引、新增数据、查询数据
04-29
在本文中，我们将深入探讨如何使用Spring Boot与Elasticsearch 7.6.2进行基本操作，包括创建索引、添加数据以及查询数据。Elasticsearch是一个强大的分布式搜索引擎，而Spring Boot是Java开发中的轻量级框架，两者...
elasticsearch新增索引、添加数据、批量添加
weixin_42772168的博客
02-26 2757
文章目录前言一、新增索引二、添加文档三、批量导入四、删除文档五、删除索引总结 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、新增索引 代码如下（示例）： public CreateIndexResponse indexCreation(String indexName, String mapping, Integer replicas, Integer shards) throws IOException, IndexException { //1.使用client获取操作
基于Spring Batch向Elasticsearch批量导入数据示例
08-27
基于Spring Batch向Elasticsearch批量导入数据示例 本文介绍了基于Spring Batch向Elasticsearch批量导入数据示例，旨在解决大规模数据从数据库导入Elasticsearch时的效率问题。Spring Batch框架使用ItemReader分页...
elasticsearch elasticsearch-6.2.2 elasticsearch-6.2.2.zip 下载
04-23
根据提供的文件信息，我们可以推断出本篇文章将围绕Elasticsearch 6.2.2版本进行详细介绍，包括其下载方式、主要功能特性以及在实际应用中的常见用途。 ### Elasticsearch简介 Elasticsearch是一款基于Lucene的...
ElasticSearch 6.x 连接集群方式及Java API代码 新增ElasticSearch二次开发工作
06-30
【项目资源】：包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源，毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。...
探索 ES2016 与 ES2017
11-15
探索 ES2016 与 ES2017 探索 ES2016 与 ES2017 探索 ES2016 与 ES2017
ES6新增属性
weixin_49281361的博客
04-08 685
let（没有变量提升） 1.块级作用域：保证变量一定在自己的范围里可以使用 2.暂时性死区：当内部变量和外部变量重名时，内部变量屏蔽外部变量 3.let修饰的变量，使用必须在定义在后 3.不能重复定义变量 const (和let很相似 ，区别在只读) 1.const只能读，不能改（声明后不能修改） 2.定义的时候只能初始化 this （函数体内的关键字，根据不同类型函数，作用不同） 1.与事件连接，代表触发事件的元素 2.与普通函数连用，代表调用函数的对象本身 bind(改变匿名函数的this指向)
ES5新增方法
贝贝的博客
07-27 297
目录 数组方法 字符串方法 对象方法 数组方法     ^ 迭代遍历方法: forEach(),map(),filter(),some(),every() 那么这几种方法有什么区别呢？ forEach() 遍历数组 // 语法 array.forEach(function(currentValue,index,arr)) /* * currentValue 每一个数组元素 * index
ES2016（ES7）
lio-zero 的博客
03-08 127
这几天整理的一下过往的文章和笔记，备份到了 Github 上，地址???? blog。 如果我的内容帮助到了您，欢迎点个 Star ???????????? 鼓励鼓励 :) ~~ ???? ES2016 包含了两个新的功能： 幂运算符(** 和 **=) 数组方法 Array.prototype.includes Array.prototype.includes() includes() 确定给定元素是否包含在指定数组...
ES2016(ES7)新特性
weixin_42437900的博客
02-27 843
ES2016添加了两个小的特性来说明标准化过程： 1.数组 includes()方法，用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。 var pets = ['cat', 'dog', 'bat']; console.log(pets.includes('cat')); // true 2.a ** b 指数运算符，它与 Ma...
ES2016指南
cuk0051的博客
08-31 219
Array.prototype.includes() Array.prototype.includes() Exponentiation Operator 求幂运算符 ES2016, officially known as ECMAScript 2016, was finalized in June 2016. ES2016(正式称为ECMAScript 2016)于2016年6月完成。 C...
项目实战：ES的增加数据和查询数据
Java领域
09-08 5526
Elasticsearch (ES) 是一个分布式搜索和分析引擎，它具有强大的实时数据处理能力。以下是关于ES增加和删除业务场景的总结，旨在提升您对ES的理解。ES的增加业务场景数据索引和搜索ES的主要用途之一是将数据索引到Elasticsearch集群中，并使用其强大的搜索功能来查询和检索数据。以下是一些使用ES进行数据索引和搜索的业务场景：电子商务网站：将商品信息索引并快速搜索，实现商品的全文搜索、过滤和排序。
Es2016新特性
wangyuchen666的博客
12-06 436
1.块级作用域 a.全局作用域 b.函数作用域 c.块级作用域（let声明变量） for (var i = 0; i < 3; i++) { for (var i = 0; i < 3; i++) { console.log(i) } console.log('内层结束 i = ' + i) } for (var i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) { console.log(i) .
重学JavaScript高级（八）：ES6-ES12新增特性学习
weixin_55041125的博客
01-05 1326
在先前的文章 重学JavaScript高级（三）：深入JavaScript运行原理中提到过，只不过是ES5的执行描述。因此WeakSet就是弱引用类型，其指向的对象，有可能会被GC回收。在ES6中，有些执行描述进行了改变，ES6中引入了解构的用法。，那么他们之间有什么区别。
elasticsearch 新增转义
最新发布
07-02
Elasticsearch 提供了一种机制来转义特殊字符，这是为了在查询字符串中安全地处理文本，特别是在处理用户输入或者不完全信任的数据源时。在 Elasticsearch 中，你可以使用两种主要的转义字符： 1. 反斜杠（\）：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值