ES6新增的知识点的概述

文章目录

什么是ES6历史 汇总一、let二、const三、 解构赋值1.数组解构第一种解构情况第二种解构情况第三种解构情况 2.对象解构 四、 箭头函数五、模板字符串衍生特点 六、剩余参数七、扩展运算符(...)八、对象成员的简写九、构造函数方法Array.from()十、实例方法1.find()2. findIndex()3. includes() 十一、字符串方法1. startsWith()2. endsWith()3. repeat() 十二、set 数据结构set数据结构的遍历

什么是ES6

首先ES大家并不陌生，首次接触的时候应该是在初次接触 JavaScript。 JavaScript主要由ECMAScript，BOM，DOM组成。 这里的 ECMAScript 就是我们接下来要提到的 ES6 的原始版

历史

ES6，全称ECMAScript6.0，是2015年6月发布的javascript脚本语言的标准化规范，也称之为《ECMAScript 2015 标准》（简称 ES2015）

汇总

本篇主要讲解ES6的知识点，内容如下：let和const、解构赋值、字符串操作、函数、数组API、集合、对象拷贝、延展操作符、对象补充、Generator、Proxy、Reflect。

一、let

es6中新增的用于声明变量的关键字

具有块级作用域，let声明的变量只在所处于的块级有效不存在变量提升暂时性死区（个人理解 原因 还是因为没有变量提升）

二、const

用于声明常量 1.具有块级作用域 4. 声明变量时必须赋值 5. 常量赋值后，值不能修改 针对第三点详细理解： const定义引用类型的数据的时候，可以修改数据内部结构，但是不能修改地址

const arr = [3, 4, 5, 6] arr.push(78) // 这样是可以的 console.log(arr) // 这样出现了等号 重新赋值了,就不被允许 arr = [3,4,5,6] //个人理解 : 只要有等于号的出现 就代表赋值, const 不允许赋值出现

三、 解构赋值

从数组中提取值，按照对应位置，对变量赋值，对象也可以解构。

1.数组解构

如果解构的变量小于数组元素,那么只会解析前几个元素 如果解构的变量大于数组元素,那么多余的变量就是 undefined

第一种解构情况

var arr = [2, 4, 5, 6,"zz"] // 把数组里的元素按照顺序赋值给五个变量 // 这种属于解构的变量的个数和数组的元素数量一致的情况 var [a, b, c, d,e] = arr console.log(a, b, c, d,e)

第二种解构情况

var arr = [2, 4, 5, 6,"zz"] // 如果解构的变量小于数组元素,那么只会解析前几个元素 // 这里数组里有五个元素 ,而解构的变量只有四个,所以只会解构2,4,5,6,分别对应a, b, c, d var [a, b, c, d] = arr console.log(a, b, c, d,e)

第三种解构情况

var arr = [2, 4, 5, 6] // 如果解构的变量小于数组元素,那么只会解析前几个元素 // 这里数组里有四个元素 ,而解构的变量有五个,所以会将数组里的元素全部解构, //多余的变量 e 就是 undefined var [a, b, c, d,e] = arr console.log(a, b, c, d,e)

2.对象解构

// 对象是无序的 没有length 属性 var obj = { name: "zhangsan", age: 20, gender: "male", say: function () { console.log(this.age) } } var { age, name, gender } = obj // 等价于 : var age = obj.age || var name = obj.name || var gender = obj.gender // 对象的解构是按照属性名来解构的，也就是说声明的变量要对应对象里的属性名，才能拿到属性值 var { age, name, gender, aaaa, say } = obj // 如果去解构一个对象里不存在的属性，得到 (aaaa)undefined console.log(age, name, gender, aaaa) // say是解构出来的一个全局函数了，可以直接调用了，相当于var say = obj.say say()

四、 箭头函数

上代码,看效果

//普通的函数 var test = function (x) { return x + 4 } console.log(test(4)) // 箭头函数 不需要 function 关键字来创建函数，省略 return 关键字 // 此处如果你的函数有且只有一个参数,可以省略掉括号 var test2 = x => { return x + 4 } console.log(test2(4)) // 此处如果你的函数有且只有一个表达式的时候,可以省略掉 {} var test3 = x => x + 4 console.log(test3(4))

箭头函数的详细用法以及一些特点(敲黑板: 箭头函数没有自己的 this )

const obj = { name: "zhangsan", say: function () { const _this = this // 声明一个新的变量存储当前的 this ,不要改变,为后面使用 setTimeout(function () { // console.log(this.name) 这句里的 this 指向的是匿名函数, //没有明确指向,就是指向 window.name = '' 空字符串 console.log(_this.name) }, 1000) } } obj.say() // 输出的结果为 zhangsan const obj1 = { name: "zhangsan", say: function () { // 此处将定时器内部的普通函数改为箭头函数, // 箭头函数没有自己的 this 所以,下面的 this 在找自己对应的对象时, //会透过 箭头函数继续向上去找,直到找到下一个函数 setTimeout(() => { console.log(this.name) }, 1000) } } obj1.say() zhangsan 总结: // 1. 如果希望 this 指向当前对象,那么就用普通函数 // 2. 如果希望 this 指向外层对象,就用箭头函数(用其没有自己的 this 特性实现) // 3. 如果内外层都要, 用普通函数, this 指向内层 // 在外层声明一个变量把外层的 this 存下来,比如 const _this = this // 然后,用的时候, 就直接 调用 _this 这个变量

五、模板字符串

衍生

模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。

特点

模板字符串中可以解析变量模板字符串中可以换行(不影响输出结果,不会报错)模板字符串里面可以写表达式 (有确切的结果,而不是过程)模板字符串可以进行函数调用，会被解析成函数的返回值 var num = 10 // 正常写法 console.log("我要打" + num + "个") // 字符串模板可以把表达式放在 ${}(固定结构) 里面，它就可以解析 console.log(`我要打${num}个`) // 普通写法换行效果 // var str = "<p>我要打<b>10 // </b>个</p>" 这样直接换行会报错(除非用加号拼接) // document.write(str) // 模板字符串写法 var str = `<p> 我要打 <b>${num}</b>个 </p>` // 随便换行,不会报错,也不用加号拼接, document.write(str) // ${}里面可以写表达式 (有确切的结果,而不是过程) var str1 = `我要打${num > 5 ? "很多" : "很少"}个` console.log(str1) // ${}里面可以函数调用，会被解析成函数的返回值 function fn() { return 30 } var str2 = `我要打${fn()}个` console.log(str2) // 30 // 如果字符串本身就有一个`，那么要写成\` var str3 = `hello \` world` console.log(str3)

六、剩余参数

我们知道JS函数内部有个arguments对象，可以拿到全部实参。现在ES6给我们带来了一个新的对象，可以拿到除开始参数外的参数，即剩余参数 这个新的对象和arguments不一样，它是程序员自定义的一个普通标识符，只是需要在前面加上三个点：…

let arr1 = ['zs', 'ls', 'ww'] let [a, ...b] = arr1 console.log(a) //zs console.log(b) //ls, ww // 剩余参数后面如果跟了其他参数,则会报错 function func(a, ...rest, b) { // SyntaxError parameter after rest parameter } //使用剩余参数后，函数的length属性会发生一些变化 function func(a, b, ...rest) { } func.length // 2 //即length不包含rest，为2。

arguments和剩余参数的区别 arguments是一个伪数组（Array-like） 剩余参数是一个真正数组（Array），具有Array.prototype上的所有方法

七、扩展运算符(…)

上代码,看效果

function fn(a, b, c) { console.log(a + b + c) } var arr = [2, 3, 4] // fn(arr[0],arr[1],arr[2]) fn(...arr) // ... 运算符可以把数组展开 console.log(...arr) var arr1 = arr // 这种写法赋值的是引用(完全相同的数组) // var arr2 = [...arr,25] 可以在后面新增元素 var arr2 = [...arr] //这种写法arr1和arr是两个 值 相同的数组(引用即地址不同) console.log(arr2) var obj = { name: "流沙卫庄", age: '20' } // obj1具有obj的所有属性，并且还新增了一个gender，他们是两个不同的对象 var obj1 = { ...obj, gender: '男性' } console.log(obj1) console.log(obj) // 用于合并数组 //方法一 let arr1 = [1,2,3] let arr2 = [4,5,6] let arr3 = [...arr1, ...arr2] //方法二 arr1.push(...arr2) //将伪数组转换为真正的数组 var divs = document.querySelectorAll('div') console.log(divs) //伪数组 var arr = [...divs] console.log(arr) //真正的数组 arr.push('a') //可以使用数组方法

八、对象成员的简写

let name ='zs' ; let age = 18 ; let sex ='男' ; // ES5：对象成员简写 let obj = { name:name, age:age, sex:sex introduce:function(){ console.log("My name is:"+ name); } }; console.log(obj); // ES6：对象成员简写 let oo = { name, age, sexx:sex, // 别名赋值 introduce:function(){ console.log("My name is:",name); } };

九、构造函数方法Array.from()

// 用法一 //伪数组 let arrayLike = { '0':'zs', '1':'ls', '2':'ww', length: 3 } var arr = array.from(arrayLike) console.log(arr) //['zs', 'ls', 'ww'] //用法二 //可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。 let arrayLike = { '0': 1, '1': 2 } let arr = array.from(arrayLike, item => item*2) console.log(arr) //[2,4]

十、实例方法

1.find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

let arr = [{id:1, name:'zs'},{id:2, name:'ls'}] /*let target = arr.find( item => item.id == 2) console.log(target)*/ //上下写法等价 /*var retFind = arr.find(function(item){ return item.id === 2; }) console.log(retFind )*/

2. findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let arr = [1,5,10,22,35] let target = arr.findIndex( item => item>20 ) console.log(target) //3

3. includes()

表示某个数组是否包含给定的值，返回布尔值。

let arr1 = [1,2,3] let arr2 = [4,5,6] let target = arr1.includes(3) console.log(target) //true

十一、字符串方法

1. startsWith()

表示参数字符串是否在原字符串的头部，返回布尔值

let str = 'hello lfl 2020' let a = str.startsWith('hello') console.log(a) //true

2. endsWith()

表示参数字符串是否在原字符串的尾部，返回布尔值

let b = str.endsWith('2020') console.log(b) //true

3. repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串。

console.log('x'.repeat(5)) //'xxxxx'

十二、set 数据结构

新增数据类型 Set ：同数组存放数据，但不存放重复元素； 上代码,看效果

// Set函数可以接受一个数组作为参数，用来初始化。 const s = new Set([1,2,3,4,5]) console.log(s.size) //5 const s = new Set([1,1,1,2,2,2]) console.log(s.size) //2 // 利用set数据结构做数组去重 const s = new Set([1,1,1,2,2,2]) let arr = [...s] console.log(arr) //[1,2] const s = new Set() // add(value)：添加某个值,返回Set结构本身 s.add(1).add(2).add(3) // console.log(s) // {1, 2, 3} //delete(value)：删除某个值，返回一个布尔值，表示删除是否成功 s.delete(2) // console.log(s) // {1, 3} //has(value)：返回一个布尔值，表示该值是否为Set的成员 var ha = s.has(3) //console.log(ha) // true //clear()：清除所有成员，没有返回值 s.clear() //console.log(s) // {}

set数据结构的遍历

Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

const s = new Set([1,2,3,4,5]) s.forEach( value => { console.log(value)} ) // 1 2 3 4 5