ES6的新增的常用特性

一 、javaScript的特性

1.首先javascri是单线程的可以运行在浏览器或服务端的弱类型脚本语言

1.单线程

1.进程:完成一项任务所经历的的过程,一个进程可以包含多个线程

2.线程:线程比进程要小,一个线程只能属于一个进程

2.弱类型

​ 变量的类型由赋值的类型决定

2.JavaScript的发展

1.JavaScript是1995年诞生
2.javaScript于2015发布EcmaScript2015(也称ES6)标准版本
3.跟踪ES最新技术进展的GitHub地址

官方文档:https://github.com/tc39/proposals/blob/master/finished-proposals.md

二、es6的一些常用的新特性

1.新增的const和let,以及const、let和var的三者区别

let、const、var都是声明变量的三种方式,以前只有var的时候容易存在变量使用混乱,比如变量会被重新定义覆盖,变量的提升也是不科学的,const就解决了这些问题。下面说下三者的具体区别在哪了。

1.看变量是否有提升

(1)三者中只有var是存在变量提升的,let和const都没有变量提升

变量提升就是var声明的变量会在js解析时提到代码坐在作用域的顶部提前声明,但是只是声明部分被提升,但是赋值的部分会留在原地,等代码执行到赋值才会被赋值,这也就造成了在同一作用域时,及时使用一个变量的代码块放在var声明的变量前面时也不会报错,只是获取不到变量值,但是变量可以被找到。

console.log(a);//输出结果undefined,可以找到变量a,但是拿不到a的值
var a=5;

console.log(a);//报错;初始化前无法访问,const也是同样
let a=5;

2.看是否有块级作用域

const和let都有自己的块级作用域,只在声明所在的块级作用域内有效。var没有块级作用域。

3.看是否可以可以重新定义

1.var可以重新定义和重新赋值

1.重新定义
var a= 15;
var a =54;//可以重新定义声明
2.重新赋值
var a=15
a=17//可以正常赋值

2.let 声明的变量可以重新赋值 但是不能重新定义

1.重新定义
let a= 15;
let a =54;//报错:a已经被声明
2.重新赋值
let a=15
a=17//可以正常赋值

3.const声明的变量不可以重新定义,也不可以重新赋值,const声明的变量为常量。

1.重新定义
 const a=15;
 const a=16;//报错:a 已经被声明
2.重新赋值
 const a=2
 a=4  //报错:常量不能重新赋值

2.变量的解构赋值

基本用法

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构

1.从数组中解构赋值

(1)从数组中进行解构赋值时是按照结构内位置对应进行一一对应,进行赋值的,也可以说是等号两边的数组括号内的索引对应。并且要赋值的白能量要和数组使用一样的结构[ ]。

  let [a,b,c]=[1,5,6]
  console.log(a,b,c)//a=1,b=5,c=6

(2)当两边解构赋值时无法一一对应时,变量没有对应的时取到的结果为undefined。

 let [a,b,c]=[1,5]
 console.log(a,b,c)//a=1,b=5,c=undefined

(3)当结构的数组内的数据时数组或者对象时,依旧按照一维数组的结构位置对应进行赋值。

let [a,b,c]=[1,[5,6,8],{name:'lisi',age:'18'}]
console.log(a,b,c)
//a=1,b=[5,6,8],c={name:'lisi',age:'18'}

2.从对象中解构赋值

1.对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而**对象的属性没有次序,变量必须与属性同名,才能取到正确的值。**使用和对象一样的结构{ }来放置要赋值的变量。

let {age,name}={name:'zhansan',age:'18'}
console.log(age,name)
//age='18',name='zhansan'

2.当取值的变量在解构的对象中没有的时候,就会解构失败,结果为undefined

let {aa,bb}={name:'zhansan',age:'18'}
console.log(aa,bb)
//aa=undefind,bb=undefind

3.如果自己不想使用对象中的属性名,使用自己定义的变量,可以通过下面这种重新赋值的方式进行解构赋值。

let {name:aa,age:bb}={name:'zhansan',age:'18'}
console.log(aa,bb)
//bb='18',aa='zhansan'

也就是说,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

4.对象的解构赋值和数组的一样可以用于嵌套的关系,当对象的属性值也是一个对象的时候。

(1)直接去嵌套的属性值中是无法解构赋值,只能取到第一层的属性名。

 let {name,age}={aa:{name:'zhansan',age:'18'}}
 console.log(name,age)
 //name=undefind,age=undefind

(2)如果想取到子级的属性值必须要带上对象的第一层的属性名。

 let {aa:{name},aa:{age}}={aa:{name:'zhansan',age:'18'}}
  console.log(name,age)
    //name=张三,age=18

5.对象的解构也可以指定默认值。

(1)如果在对象的解构赋值中,对象中没有对应的属性名,也就是结果为undefind时,可以自己在等号左边指定默认值值。

var {x = 3} = {};
//x = 3
var {x, y = 5} = {x: 1};
//x = 1
//y = 5

(2)如果你指定默认值的变量在解构赋值中存在,不是undefind,那么你指定的默认值不会生效,解构赋值优先。

var {x = 3} = {x: 6};
//x =6

3.set和map:即数组和对象的升级版本

1**.Set是一种数据结构,类似于数组,但是它的成员都是唯一的,不能有重复的值,set本身也是一个构造函数,使用要用new’来生成set数据解构。**

(1)因为set数据的值时唯一的。所以可以用来去重。

 let arr=new Set([3, 4, 5, 5, 2, 2, 4, 6, 562, 2])
 console.log(arr)

在这里插入图片描述

被set实例化的数组后的数据都是唯一,解构类似于数组,但是没有length,set的时size来表示数据的个数。但是这样的去重数据解构会变成set数据结构。

(2)上面的方法对数组去重后数组数据解构的数据会变成set数据结构,下面这样去重可以解决这个问题。

var arr=[...new Set([2,5,6,8,9,55,5,6,8])]
  console.log(arr)//输出的arr为数组。

(3).set的常用方法

(1)add:添加唯一值
(2) delete:删除某一个值
(3)clear:删除所有
(4)forEach:遍历set对象

2.ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

(1).map也是一个构造函数,使用的时候也需要new Map来实例化。

 		//m1.set(key,value)设置key的值
 		const obj=new Map()
        obj.set(18,18)
        console.log(obj)
        
        //let m1=new Map() 创建map对象
        const map = new Map([['name', '张三']]);
        console.log(map)

在这里插入图片描述

(2) m1.get(key)获取key对应的值

(3) m1.keys()获取key所组成的对象

(4) m1.values()获取value组成的对象

(5)m1.entries()获取key,values组成的对象

(6)m1.forEach()遍历map对象

4.模块化

ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。

ES6的模块化:ES module
导出: export default {}
导入: import {},aa from ‘暴露的对象’

node里的模块化:commonJS
导出 modules.exports={}
导入 require(‘导入你的模块’)

5.扩展运算符(…)

扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组。

扩展运算符有两个作用,一个时展开操作,另一个是rest操作。

1展开操作

 let arr=[5,5,6,56,6]
 console.log(...arr)
 //输出结果为:5 5 6 56 6

但是一个(…)扩展运算符只能展开一维数组,只能去掉一个[ ].

 let arr=[5,5,[4,5,5],6,56,6]
 console.log(...arr)
 //输出结果为:5 5 (3) [4, 5, 5] 6 56 6

展开的特性也可以用来合并数组

 let arr=[5,6,56,6]
 let arr1=['zhansan','age']
 console.log([...arr,...arr1])
 //输出结果为:[5, 6, 56, 6, "zhansan", "age"]

同样可以拿来展开对象

 	var obj1={
        name:'alice',
        age:20,
        address:'北京'
    }
    var obj2={
        xueli:'本科',
        hobby:'爬山'
    }
 console.log({...obj1,...obj2})
 //输出结果为:{name: "alice", age: 20, address: "北京", xueli: "本科", hobby: "爬山"}

2.reset操作

在参数使用时,会把多的实参添加到数组中,多的实参是数组的每一项

 let arr=[5,6,8,55,66]
    function fn(a,...b){
        console.log(a,b)
    }
    fn('zhansan',...arr)//输出:zhansan (5) [5, 6, 8, 55, 66]

6.箭头函数

格式:(参数1,参数2,…参数n)=>{ //代码块 }

普通函数和箭头函数区别

1.this指向不同:箭头函数没有自己的this,它的this指父级函数所在的this
2.箭头函数不能实例化:new ()=>{ } 报错
3.箭头函数没有arguments

7.模板字符串

js定义字符串的形式有3种:单引号(’ '),双引号(" "),反引号(

只有模板字符串可以使用变量

 let a=18
 let b=`我今年${a}`
  console.log(b)//我今年18

8.数组和字符串新增的api方法:

字符串:
(1) str.includes(‘’) 检测字符是否有某个字符串,如果有返回true,否则false
(2) str.startsWith(‘’) 检测字符是否在字符串开始,如果是返回true,否则false
(3)str.endsWith(‘’)检测字符是否在字符串结尾,如果是返回true,否则false

数组:
(1) Array.from:可以将类对象转换成真正的数组

 何为类数组:也称伪数组,看着像数组,但不具备数组的api方法,但伪数组有length属性,可以像真实数组那样通过下标来访问
 
真实数组  = Array.from(伪数组)

(2) Array.of()方法用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

(3) 数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined

 let arr=[5,65,55,22]
 console.log(arr.find(function(ele){return ele>40}))
 //65 find()只会返回第一个符合条件的数组成员,一旦找到符合的就不会再执行后面的判断

(4) 数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

let arr=[5,65,55,22]
console.log(arr.findIndex(function(ele){return ele<10}))
//0 返回的是符合条件的数组成员的索引

(5) flat:数组扁平化

数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

如果flat()没有参数只会拉平一层

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

热门文章

暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

GMX 命令分类列表

建模和计算操作命令&#xff1a; 1.1 . 创建拓扑与坐标文件 gmx editconf - 编辑模拟盒子以及写入子组(subgroups) gmx protonate - 结构质子化 gmx x2top - 根据坐标生成原始拓扑文件 gmx solvate - 体系溶剂化 gmx insert-molecules - 将分子插入已有空位 gmx genconf - 增加…
暂无图片
编程学习 ·

一文高效回顾研究生课程《数值分析》重点

数值分析这门课的本质就是用离散的已知点去估计整体&#xff0c;就是由黑盒子产生的结果去估计这个黑盒子。在数学里这个黑盒子就是一个函数嘛&#xff0c;这门课会介绍许多方法去利用离散点最大化地逼近这个函数&#xff0c;甚至它的导数、积分&#xff0c;甚至微分方程的解。…
暂无图片
编程学习 ·

在职阿里5年,一个28岁女软测工程师的心声

简单的先说一下&#xff0c;坐标杭州&#xff0c;14届本科毕业&#xff0c;算上年前在阿里巴巴的面试&#xff0c;一共有面试了有6家公司&#xff08;因为不想请假&#xff0c;因此只是每个晚上去其他公司面试&#xff0c;所以面试的公司比较少&#xff09; ​ 编辑切换为居中…
暂无图片
编程学习 ·

字符串左旋c语言

目录 题目&#xff1a; 解题思路&#xff1a; 第一步&#xff1a; 第二步&#xff1a; 第三步&#xff1a; 总代码&#xff1a; 题目&#xff1a; 实现一个函数&#xff0c;可以左旋字符串中的k个字符。 例如&#xff1a; ABCD左旋一个字符得到BCDA ABCD左旋两个字符…
暂无图片
编程学习 ·

设计模式--观察者模式笔记

模式的定义与特点 观察者&#xff08;Observer&#xff09;模式的定义&#xff1a;指多个对象间存在一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式&#xf…
暂无图片
编程学习 ·

睡觉突然身体动不了,什么是睡眠痽痪症

很多朋友可能有这样的体验&#xff0c;睡觉过程中突然意识清醒&#xff0c;身体却动弹不了。这时候感觉非常恐怖&#xff0c;希望旁边有一个人推自己一下。阳光以前也经常会碰到这样的情况&#xff0c;一年有一百多次&#xff0c;那时候很害怕晚上到来&#xff0c;睡觉了就会出…
暂无图片
编程学习 ·

深入理解C++智能指针——浅析MSVC源码

文章目录unique_ptrshared_ptr 与 weak_ptrstd::bad_weak_ptr 异常std::enable_shared_from_thisunique_ptr unique_ptr 是一个只移型别&#xff08;move-only type&#xff0c;只移型别还有std::mutex等&#xff09;。 结合一下工厂模式&#xff0c;看看其基本用法&#xff…
暂无图片
编程学习 ·

@TableField(exist = false)

TableField(exist false) //申明此字段不在数据库存在&#xff0c;但代码中需要用到它&#xff0c;通知Mybatis-plus在做写库操作是忽略它。,.
暂无图片
编程学习 ·

Java Web day15

第十二章文件上传和下载 一、如何实现文件上传 要实现Web开发中的文件上传功能&#xff0c;通常需要完成两步操作&#xff1a;一.是在Web页面中添加上传输入项&#xff1b;二是在Servlet中读取上传文件的数据&#xff0c;并保存到本地硬盘中。 需要使用一个Apache组织提供一个…
暂无图片
编程学习 ·

【51nod 2478】【单调栈】【前缀和】小b接水

小b接水题目解题思路Code51nod 2478 小b接水 题目 输入样例 12 0 1 0 2 1 0 1 3 2 1 2 1输出样例 6解题思路 可以发现最后能拦住水的都是向两边递减高度&#xff08;&#xff1f;&#xff09; 不管两个高积木之间的的积木是怎样乱七八糟的高度&#xff0c;最后能用来装水的…
暂无图片
编程学习 ·

花了大半天写了一个UVC扩展单元调试工具

基于DIRECTSHOW 实现的&#xff0c;用的是MFC VS2019. 详见&#xff1a;http://www.usbzh.com/article/detail-761.html 获取方法 加QQ群:952873936&#xff0c;然后在群文件\USB调试工具&测试软件\UVCXU-V1.0(UVC扩展单元调试工具-USB中文网官方版).exe USB中文网 USB中文…
暂无图片
编程学习 ·

贪心(一):区间问题、Huffman树

区间问题 例题一&#xff1a;区间选点 给定 N 个闭区间 [ai,bi]请你在数轴上选择尽量少的点&#xff0c;使得每个区间内至少包含一个选出的点。 输出选择的点的最小数量。 位于区间端点上的点也算作区间内。 输入格式 第一行包含整数 N&#xff0c;表示区间数。 接下来 …
暂无图片
编程学习 ·

C语言练习实例——费氏数列

目录 题目 解法 输出结果 题目 Fibonacci为1200年代的欧洲数学家&#xff0c;在他的着作中曾经提到&#xff1a;「若有一只免子每个月生一只小免子&#xff0c;一个月后小免子也开始生产。起初只有一只免子&#xff0c;一个月后就有两只免子&#xff0c;二个月后有三只免子…
暂无图片
编程学习 ·

Android开发(2): Android 资源

个人笔记整理 Android 资源 Android中的资源&#xff0c;一般分为两类&#xff1a; 系统内置资源&#xff1a;Android SDK中所提供的已经定义好的资源&#xff0c;用户可以直接拿来使用。 用户自定义资源&#xff1a;用户自己定义或引入的&#xff0c;只适用于当前应用的资源…
暂无图片
编程学习 ·

零基础如何在短时间内拿到算法offer

​算法工程师是利用算法处理事物的职业 算法&#xff08;Algorithm&#xff09;是一系列解决问题的清晰指令&#xff0c;也就是说&#xff0c;能够对一定规范的输入&#xff0c;在有限时间内获得所要求的输出。 如果一个算法有缺陷&#xff0c;或不适合于某个问题&#xff0c;执…
暂无图片
编程学习 ·

人工智能:知识图谱实战总结

人工智能python&#xff0c;NLP&#xff0c;知识图谱&#xff0c;机器学习&#xff0c;深度学习人工智能&#xff1a;知识图谱实战前言一、实体建模工具Protegepython&#xff0c;NLP&#xff0c;知识图谱&#xff0c;机器学习&#xff0c;深度学习 人工智能&#xff1a;知识图…
暂无图片
编程学习 ·

【无标题】

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…