这篇文章主要讲解了“es6比es5新增了哪些内容”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“es6比es5新增了哪些内容”吧! 新增内容:1、let、const关键字,用于声明变量,支持块级作用域,拥有暂时性死区;2、解构赋值,是针对数组或者对象进行模式匹配,然后对其中的变量进行赋值的意思;3、展开运算符,可用于将集合和数组中的元素扩展为单个单独的元素;4、Set对象,一种新的数据结构,类似于数组,但是成员的值都是唯一的,没有重复的值;5、构造函数的方法Array.from()、Array.of()。let和const支持块级作用域,拥有暂时性死区(必须先声明,再使用,不支持变量提升);const是常量,声明时必须赋值,当赋值为基本类型时,不能改变它的值;当赋值为引用类型时,不能改变它的引用,但是可以对引用类型进行操作,如数组的push、对象的属性增删改es6允许按照一定的模式,从数组或对象中提取值,给变量进行赋值,称为解构赋值。解构赋值在代码书写上简单易懂,语义清晰明了,方便对复杂对象中数据字段的获取。对象的解构赋值:
letobj={ a:1, b:2 }; let{a,b,c}=obj;//大括号中的变量名必须和obj的属性名一致 console.log(a,b,c); //输出: //a:1 //b:2 //c:undefined
数组的解构赋值:(字符串一样)
letarr=['a','b','c']; let[e,f]=arr; //中括号中的变量按数组中元素的顺序被赋值 console.log(e,f); //输出: //e:'a' //f:'b' //快速交换两个变量值 leta=1,b=2; [a,b]=[b,a];
由三个点 ( …) 表示,JavaScript 扩展运算符是在 ES6 中引入的。它可用于将集合和数组中的元素扩展为单个单独的元素。扩展运算符可用于创建和克隆数组和对象、将数组作为函数参数传递、从数组中删除重复项等等。扩展运算符只能用于可迭代对象。它必须在可迭代对象之前使用,没有任何分隔。例如:
console.log(...arr);
数组:
letarr1=[1,2,3,4]; letarr2=['a','b',...arr1,'c']; console.log(arr2); //输出: //['a','b',1,2,3,4,'c']
对象:
letobj1={ a:1, b:2 }; letobj2={ ...obj1, c:3, d:4 }; console.log(obj2); //输出: //{a:1,b:2,c:3,d:4}
剩余参数处理:数组:
letarr=[1,2,3,4,5]; let[a,b,...c]=arr; //将arr后面所有的剩余参数放入c中 console.log(a,b,c); //输出: //a:1 //b:2 //c:[3,4,5]
对象:
letobj={ a:1, b:2, c:3, d:4 }; let{a,b,...c}=obj; console.log(a,b,c); //输出: //a:1 //b:2 //c:{c:3,d:4} //对象的复制(不是传地址) letobj2={...obj};
Set是ES6提供的一种新的数据结构,类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。Set 中的元素只会出现一次,即 Set 中的元素是唯一的。另外,NaN 和 undefined 都可以被存储在 Set 中,NaN 之间被视为相同的值(尽管 NaN !== NaN)。Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。数组去重:
letarr=[2,1,2,1,3,4,4,5]; lets=newSet(arr); arr=[...s]; //arr:[2,1,3,4,5]
Set方法:
lets=newSet([1,1,2,3,'a']); //得到Set元素个数: s.size; //清空集合 s.clear(); //删除集合中的某个值,返回操作是否成功 s.delete('a'); //查看集合是否包含某个值 s.has('a'); /免费云主机、域名/添加一项,返回集合本身的引用 s.add('b');
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。Map 特征:Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。
letarr=[ ['a',1], ['b',2], ['c',3] ]; letm=newMap(arr); //m:{'a'=>1,'b'=>2,'c'=>3}
Map方法:
//清空Map m.clear(); //删除某一项,返回操作是否成功 m.delete(key); //获取某一项的值,返回对应的val m.get(key); //是否包含某一项 m.has(key); //添加一项,返回Map本身的引用 m.set(key,val);
箭头函数:没有this
和arguments
参数默认值把一个类数组转换成真正的数组:Array.from(arrLike [, mapFunc, mapThis]);
参数:另一种方法:let arr = [...arrLike];
arrLike:
类数组mapFunc:
对类数组每一项的操作函数mapThis:
替换mapFunc
的this
指向将参数列表转换为数组:Array.of(...items);
检测一个对象是否是一个数组:Array.isArray(obj);
arr.find(callback [, thisArg])
:查找数组中满足条件的第一个元素的值arr.findIndex(callback [, thisArg])
:查找数组中满足条件的第一个元素的索引数组扁平化:arr.flat([depth])
参数:depth:指定要提取嵌套数组的结构深度,默认为1,当depth = infinity时,无论数组多少层,都提取为一维数组。arr.flatMap(callback[, thisArg])
参数:callback:对原数组的每个元素进行操作,返回新数组的元素;该函数值支持深度为1的扁平化数组元素填充:arr.fill(value[, start[, end]]);
用一个固定的值填充一个数组中从起始索引到终止索引内到全部元素。不包括终止索引;不会改变数组长度参数:value:用来填充数组元素的值;start:起始索引,默认值为0;end:终止索引,默认值为 arr.length ;arr.includes(valueToFind[, fromIndex])
:判断数组中是否包含一个指定的值参数:valueToFind:需要查找的值fromIndex:从 fromIndex 处开始向后查找str.startsWith(searchString[, position])
:判断当前字符串是否以另一个给定的子字符串开头参数:searchString:要搜索的字符串position:在 str 中搜索 searchString 的开始位置,默认为0,也就是真正的字符串开头处str.endsWith(searchString[, position])
:判断当前字符串是否以另一个给定的子字符串结束参数:searchString:要搜索的字符串position:在str中反向搜索的开始位置,默认为 str.lengthstr.repeat(times)
:返回重复str字符串times次的字符串反引号:“,可以换行插值表达式:${}简洁表示法:
属性名表达式:
Object.assign(obj1, obj2, ...)
:将第二个参数即之后的参数对象合并到第一个参数对象中Object.is(value1, value2)
:判断两个值是否相等(强类型)和===
的区别:
将es6语法编译为es5语法感谢各位的阅读,以上就是“es6比es5新增了哪些内容”的内容了,经过本文的学习后,相信大家对es6比es5新增了哪些内容这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是云技术,小编将为大家推送更多相关知识点的文章,欢迎关注!
这篇文章主要介绍了vue动态怎么绑定的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue动态怎么绑定文章都会有所收获,下面我们一起来看看吧。 理解数据驱动视图的概念Vue.js是一种数据驱动视图的框架,这意味着我们需要定义结构化的…