ES6新特性

ES6新特性

  • 前言
  • let const
  • symbol
  • 解构赋值
  • Map和Set
  • 数组新增方法
  • 对象相关
    • 简写对象声明
    • 扩展操作符
  • 模板字面量
  • 迭代器方法

前言

本文主要讲解ES6到底有哪些新特性,那么好,本文正式开始。

let const

首先,新增了let const关键字,这两个关键字是为了避免开发使用var怪异变量,在开发中,官方建议的使用顺序为const>let>var,var怪异变量是指它有变量提升,多次定义变量不赋值,全局var变量在window属性中还可以看到等缺点,什么叫变量提升,就是我们可以先打印出来这个变量而后定义,这些问题是let和const所没有的,那同时letconst块作用域,而var函数作用域,比如:

function deme(){
	if(true){
		let a=1;
		var b=2
	}
	console.log(b);//2
	console.log(a);//a没定义
}
deme()

而上述代码中可以看到,作为函数作用域的var变量,在退出if语句后仍然可以被定义,而let变量就不可以。

symbol

它是ES6新增的基本数据类型,那同时意味着它不能进行new,同时当它被创建的那一刻起,它的值就被锁定了,我的理解就是一个标志,一个内存标志,那么这块内存空间和值被Symbol类型锁定了,其他任何变量无法创建出这个值了。

sym=Symbol()
console.log(sym);//Symbol()

解构赋值

它可以多个变量同时按序对数组或者对象的值进行获取,对象的值需要用和属性名相同的变量名来获取,又称解构赋值
比如:

			let arr=[1,2,3]
			let obj={name:'a',age:1,sex:'man'}
			let [a,b,c]=arr
			let {name,age,sex}=obj
			console.log(a,b,c,name,age,sex);//1 2 3 a 1 man

Map和Set

Map和Set是两个ES6新增的集合对象,Map是键值对而Set是单个值的集合存储。它们都可以使用迭代器模式。因为它们都是有序的。Map可以用Size属性来获取它的长度。

//初始化`Map`需要一个二维数组(请看 Map 数据结构),或者直接初始化一个空`Map` 
let map = new Map();

//添加key和value值
map.set('da','女')

//是否存在key,存在返回true,反之为false
map.has('da') //true

//根据key获取value
map.get('da') //女

//删除 key为Amy的value
map.delete('da')
map.get('da') //undefined  删除成功

map常用方法:

  • set:添加
  • get:获取
  • delete:删除
  • has:条件查询其是否存在

数组新增方法

具体方法用法点击这里,我的另一篇文章

  • ES6新增了filter、map、find、for of、includes等方法。
  • filter:过滤,筛选数组中有用的部分,返回一个新数组。
  • map:遍历,遍历数组且有返回值
  • find:查找第一个元素并且返回索引值。
  • for of:遍历数组,去除了ES5中for in的缺点,而遍历出来的是具体的属性值。
  • reduce:累加器,可以判断数组内元素累加是什么,且可以自定义。

对象相关

简写对象声明

let name='1'
let person='2'
let person={name,person}

ES5时,必须得是name:name才可以生效,而ES6中,可以简写成name。

扩展操作符

let obj1={a:'1'}
let obj2={b:'2'}
let obj3={...obj1}
let obj4={...obj1,...obj2}

可以用于对象的赋值和对象的合并,通过{...对象名}实现,同时也可以对数组进行浅拷贝,具体方法就是[...数组名]

模板字面量

语法格式:反引号

let num=1
console.log(`${num}`)//1

这个模板字面量的价值是在于它能够结合创建出一个HTML页面,并且它可以使用回车来进行字段的设置。并且它可以识别HTML标签。

<div id="a"></div>
<script>
	let num='student'
	a.innerHTML=`我们都是
${num}`
</script>

迭代器方法

迭代器相关的三个方法都是用于数组的遍历
keys,values,entries。
区别是在于:keys打印的是数组的索引、values打印的是数组的值、entries打印的是数组的键值对。

你可能感兴趣的:(JavaScript,es6,javascript,前端)