ES6新增的知识点的概述

最新推荐文章于 2022-11-24 00:45:00 发布

zz2834198667

最新推荐文章于 2022-11-24 00:45:00 发布

阅读量389

点赞数 1

文章标签： js ES6

本文链接：https://blog.csdn.net/zz2834198667/article/details/107134223

版权

什么是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