ES6新特性及其用法

news/2024/7/11 1:33:00 标签: javascript, es6, 前端
   Es6是什么:

     ES6是ECMAScript 6的缩写简称,是javascript的核心语法,它是ECMAScript的第6个版本.2015 年 6 月,ECMAScript 6 正式通过,成为国际标准

  1.说出至少5个ES6的新特性,并简述它们的作用。(简答题)

1、 let关键字,用于声明只在块级作用域起作用的变量。
2、 const关键字,用于声明一个常量。
3、 结构赋值,一种新的变量赋值方式。常用于交换变量值,提取函数返回值,设置默认值。
4、 Symbol数据类型,定义一个独一无二的值。
5、 Proxy代理,用于编写处理函数,来拦截目标对象的操作。
6、 for…of遍历,可遍历具有iterator 接口的数据结构。
7、 Set结构,存储不重复的成员值的集合。
8、 Map结构,键名可以是任何类型的键值对集合。
9、 Promise对象,更合理、规范地处理异步操作。
10、Class类定义类和更简便地实现类的继承。

**解构赋值:**
  1. 可以同时给多个变量赋值
  2. 不使用第三个变量的前提下也能交换两个变量的值
  3. 函数可以使用解构赋值的方式返回值同时可以给多个变量赋值
  4. 函数传参 function aa({name=“王五”,age}){} aa({age:“18”,name:“张三”}) 可以不用考虑顺序问题了
**模板字符串**
`` 可以换行定义,可以解析变量,空格回车会输出出来,变量通过{}解析,函数通过{函数名()}调用

symbol

Es6新增的数据类型
特点:
  1. 唯一的 不需要new 一般定义属性 和常量
  2. 不能使用for in
  3. 使用[]存储
  4. 取值的时候也要用[] 相同参数 Symbol() 返回的值不相等

class

  1. 使用class 定义的类 没有变量提升
  2. 使用extends 关键字继承
  3. 子类必须在constructor方法中调用super(name,age)方法用来新建父类的this对象
  4. 构造方法 constructor(){ this.name = name}

注意:

  1. 在类中声明方法的时候,千万不要给该方法加上function关键字
  2. 方法之间不要用逗号分隔,否则会报错
    案例:
    下面展示一些 内联代码片
javascript">   class aa{
          constructor(name,age){
                this.name = name
                this.age = age
                console.log(name) 
            }``
            run(){
                alert('1111')
            }
        }
}
        class bb extends aa{
            constructor(name,age){
                //super 这个函数来重新定义父类里面构造函数的执行(注意要在构造函数内使用)
                super(name,age)
            }
        }
深拷贝和浅拷贝
  1. 数组和对象直接等号赋值的通常是浅拷贝 一个发生变化,另外一个也会跟着变,他只是指向另外一个地址
  2. 深拷贝 把里面的内容一个一个的复制出来,开一个新内存放进去,内存地址不一样,互不影响

新增数组方法:

下面的arr是自己定义的数组名
var arr=[]
  1. 1.indexOf: 检测数组或字符串中是否包含某个值,如果包含返回第一次查找到那个值所对应的下标,如果查不到返回-1
  2. 遍历数组(forEach)
javascript">   arr.forEach(function(value,index,arr){
               参数1 数组里面对应的每个值
               参数2 数组里面的索引
               参数3 原数组
              })
  1. find(回调函数) 根据查找指定值,符合条件的,会返回出来这个值,返回第一值之后就会停止查找
javascript">var arr = new Array(1,2,34,454,555,'aaa');
           console.log(arr)
           console.log(arr.find(function(item){
               return item > 34
               }
               )
  1. filter(回调函数)会把所有符合条件的值放到一个新数组中返回出来
javascript">  console.log(arr.filter(item=> item>34))
  1. map(回调函数) 映射 把数组里面的每一个元素按照你传入回调函数里面的代码都执行一遍
javascript">var arr = new Array(1,2,34,454,555,'aaa');
          var newArr = arr.map(item=>item*2)
          console.log(arr)
          console.log(newArr)
  1. some(回调函数)有一个满足条件的就会返回true,都不满足会返回false,如果第一个就满足,有短路效果,就会停止循环不会在继续搜索
javascript">  var arr= [10,11,12,13]
          var a = arr.some(aa=>aa>12)
          var a = arr.some(aa=>aa>14)
          console.log(a)
  1. every(回调函数) 必须每一个元素都符合条件才会返回true,同样有短路效果
javascript">   var a = arr.every(aa=>aa>10)  //false

http://www.niftyadmin.cn/n/855203.html

相关文章

源码包安装LAMP+DNS+Discuz6.0 (第二篇)

四、安装php-<?xml:namespace prefix st1 ns "urn:schemas-microsoft-com:office:smarttags" />5.2.3# tar -jvxf php-5.2.3.tar.gz2# mkdir -p /usr/local/php# cd php-5.2.3# ./configure --prefix/usr/local/php (注意此命令要写在一行中) …

一篇文章教你学会vuex

vueX是什么 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享.什么情况下我应该使用 Vuex&#xff1f; Vuex 可以帮助我们管理共享状态&#xff0c;并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果您不打算开发大型单页应用&#…

面试题 var let const的区别

var声明变量存在变量提升&#xff0c;let和const不存在变量提升 什么是变量提升:变量提升就是变量和函数的声明会跑到代码的最前面&#xff0c;但是实际 上变量和函数声明的位置并不会动&#xff0c;只是在编译过程中放入了内存之中. let、const在{}定义的是块级作用域,var定义…

vue cli 引入安装bootstrap插件

安装cli详细步骤请看之前文章呦 安装bootstrap必装插件 安装bootstrap必须要先安装jQuery 安装jQuery的方法在npm窗口中输入指令: npm install jquery --save-dev 安装完成以后开始安装bootstrap 指令:npm install bootstrap -D 可选插件 bootstarp依赖插件(看需求是否…

ESX4 虚拟 ESX4

一般人都用VMware Workstation / Server来虚拟ESX,但性能一般&#xff0c;现在&#xff0c;可以尝试用ESX4 虚拟 ESX4 :第一步&#xff0c;设置装在物理主机上的ESX - vSwitch, 将Promiscuous Mode改为Accept第二步&#xff0c;新建一个自定义VM&#xff0c;配置如下&#xff1…

WinCE6.0 R3下载助手

WinCE6.0的R3已经发布了&#xff0c;为了方便大家下载&#xff0c;简单做了一个下载助手&#xff0c;能自动生成R3所有安装文件的下载链接&#xff0c;使用迅雷下载全部链接就免去了通过Setup.exe在线安装的苦楚。 需要的同学请到这里下载&#xff0c;http://files.cnblogs.com…

js轮播图(点击图片切换 定时器效果)

轮播效果:点击上一页,下一页切换图片,设置定时器每过两秒进行自动切换 不说别的直接上代码 <!DOCTYPE html> <html> <head><title></title><meta charset"utf-8"><style type"text/css">div.show{width:600px…

菜鸟学exchange之一:exchange邮件系统的简单安装和部署

实验背景&#xff1a;西安凌云高科技是一家拥有300名员工的高新技术企业&#xff0c;总部在位于西安。在上海和北京分别有分公司。西安凌云高科技有限公司的邮件系统对公司的成功非常重要&#xff0c;销售工资依赖于消费者的快速和可靠的联系&#xff0c;其他的部门同样也非常依…