精华内容
下载资源
问答
  • ES6新特性-let&const 使用const表示常量(声明之后不允许改变,一旦声明必须初始化,否则会报错) //ES6 常量 不能修改 const b=2; b=3;//Uncaught TypeError: Assignment to constant variable. console...

    ES6

    ES6新特性-let&const

    • 使用const表示常量(声明之后不允许改变,一旦声明必须初始化,否则会报错)

    //ES6 常量 不能修改
    	const b=2;
    	b=3;//Uncaught TypeError: Assignment to constant variable.
    	console.log(b);
    
    • 使用var声明的变量往往会越域,而let声明的变量有严格的局部作用域

    // ES6
            // var声明的变量往往会越域
            // let声明的变量有严格的局部作用域
            {
                var a=1;
                let c=3;
            }
            console.log(a);
            console.log(c);//Uncaught ReferenceError: c is not defined
    
    • let只可以声明一次,var可以声明多次

    //var可以声明多次,let只可以声明一次
            var a=1
            var a=3
            let b=2
            let b=4
            console.log(a)
            console.log(b)//Uncaught SyntaxError: Identifier 'b' has already been declared
    
    • let不会变量提升,变量提升的意思是可以先使用变量,再声明

    // var会变量提升
    // let不会变量提升
            console.log(a)
            var a =1
            console.log(b)
            let b =2
    

    image-20210930190340438

    ES6新特性-解构&字符串

    • 数组的解构:

    //数据的解构
            let arr=[1,2,3];
            let a=arr[0];
            let b=arr[1];
            let c=arr[2];
            console.info(a,b,c);
    
    //ES6:数组的解构表达式
            let[aa,bb,cc]=arr;
            console.info(aa,bb,cc);
    
    • 对象的解构:

    let person={
                name:'徐庶',
                age:11,
                hobbies:['唱歌','跳舞']
            }
            let name=person.name;
            console.info(name)
    
    //ES6:对象的解构表达式
            let{name,age,hobbies}=person;
            console.info(name,age,hobbies);
    

    image-20210930193138819

    • 字符串模板:直接将html放在``中

    let html="<div>"+"<a>你好</a>"+"</div>";
    
    //ES6:字符串模板
    let esHtml=`<div><a>你好</a></div>`;
    console.info(esHtml);
    
    • 字符串扩展:

    //字符串扩展
    let str="hello.vue";
    console.log(str.startsWith("hello"))//true
    console.log(str.endsWith(".vue"))//true
    console.log(str.includes("e"))//true
    console.log(str.includes("hello"))//true
    
    • 字符串插入变量和表达式,变量名可以写在 , {}, ,{}中可以放入js表达式

     let person={
                name:'徐庶',
                age:11,
                hobbies:['唱歌','跳舞']
            }
    
            let{name,age,hobbies}=person;
    
            function fun(){
                return "这是一个函数"
            }
            //ES6:字符串插入变量和表达式,变量名写在${},${}中可以放入js表达式
            console.info(`名字是${name},年龄是${age},爱好是${hobbies},这个函数的返回值是${fun()}`);
    

    ES6新特性-函数优化

    • 函数参数默认值:直接括号内设置默认值

    //1.函数的参数默认值 ES之前
            function add(a){
                if(!a){
                    a=1;
                }
                console.log(a);
            }
            add();
    
    //ES6:函数的参数默认值
            function add(a=1){
                console.info(a);
            }
            add();
    
    • 可变长度参数:在括号内的参数前添加…

    //2.可变长度参数 ES之前
            function add(a){
                console.info(a);
            }
            add([1,2]);
    
    //ES6:可变长度参数
            function add(...a){
                console.log(a);
            }
            add(1,2,3);
    
    
    • 参数解构

    //ES6:参数解构
    let nums={
                a:1,
                b:2
            }
            function add({a,b}){
                console.log(a+b);
            }
            add(nums);
    
    • 箭头函数:单行的时候更简洁,不需要return,多行的时候需要。

    //箭头函数 lambda =>   ES6之前
            function add(a,b){
                 return a+b;
            }
            console.info(add(1,2));
    
    //ES6:箭头函数
            let add=(a,b)=>{
                let c=a+b
                console.log(c);
            }
            add(2,2);
    

    ES6新特征-对象优化

    • 对象的内置函数

      • keys()显示对象的属性
      • values()显示属性的值
      • entries()显示对象的属性和值
      • 对象合并函数assign()
        • 说明:第一个参数是需要合并的对象 其他参数会合并到第一个参数上面(如果有相同的后来者居上)
    // 1.对象的内置函数
         let person = {
                name: "jack",
                age: 21,
                language: ['java', 'js', 'css']
            }
    
            console.log(Object.keys(person));//["name", "age", "language"]
            console.log(Object.values(person));//["jack", 21, Array(3)]
            console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
    
    
             // 对象合并
             const target = { a: 1 };
            const source1 = { b: 2 };
            const source2 = { a:4,c: 3 };
    
            // 参数说明 第一个参数是需要合并的对象   其他参数会合并到第一个参数上面
            // 如果有重复的属性, 会以后面的进行覆盖
            Object.assign(target, source1, source2);
    
            console.log(target);//{a:4,b:2,c:3}
    
    • 声明对象简写

      • 对象属性的简写:属性名和引用的变量名是相同的就可以省略赋值

        let name="徐庶";
        let age=11;
        
        // ES6之前
        let person={
             name:name,
             age:age
        }
        
        // ES6: 对象声明属性的简写 :  如果属性名和引用的变量名是相同的就可以省略赋值,它会自动调用相同名字的变量
        let person={
            name,
            age
        } 
        console.info(person)
        
      • 对象中函数的简写:使用箭头函数声明,如果要调用本对象的属性this会失效,需要使用对象.属性的方式

        // ES: 对象中函数的简写方式
        let person={
            name:"徐庶",
        // ES6之前
            eat: function(food){
                console.info(this.name+"吃了:"+food)
            },
        // ES6:通过箭头函数声明,   如果要调用本对象的属性this指向window, 需要使用对象.属性
            eat2: (food) => console.info(person.name+"吃了:"+food),
        //第三种方式,不写冒号
            eat3(food){
                console.info(this.name+"吃了:"+food)
            }
        }
        person.eat("米饭");
        person.eat2("海鲜");
        person.eat3("水果");
        
      • 对象扩展运算符:拷贝与合并(…)

        //对象的扩展运算符
            //1.拷贝对象(深拷贝)
            let person={name:"xushu",age:18,wife:{name:"杨迪"}};
            let person2={...person};
            console.info(person2);
        
            //2.合并对象
            const target = { a: 1 };
            const source1 = { b: 2 };
            const source2 = { c: 3 };
            let newObject={...target,... source1,...source2};
            console.info(newObject);
        

    ES6新特性-promise异步编排

    • 使用ES之前的ajax请求方式:

      //使用函数简化,但是还是嵌套的方式
      function myAjax(url, callback){
              $.ajax({
                  url: url, 
                  success: function (result) {
                      callback(result);
                  }
              });
          }
      myAjax("http://localhost:8811/user/existUsername",function(result){
              if(result.data){
                  				   myAjax("http://localhost:8811/user/existPhone",function(result){
                      
                  })
              }
          })
      
      //传统的ajax请求方式
          用户名是否存在   
          $.ajax({
              url: "http://localhost:8811/user/existUsername",
              success: function (result) {
                  if (result.data) {
                      alert('用户名不存在!')
                      // 手机是否存在
                      $.ajax({
                          url: "http://localhost:8811/user/existPhone",
                          success: function (result) {
                              if (result.data) {
                                  alert('手机不存在!')
                                  // 注册用户
                                  $.ajax({
                                  url:"http://localhost:8811/user/registryUser",
                                      success: function (result) {
                                          if (result.data) {
                                              alert(result.message)
                                          }
                                      },
                                      error: function (err) {
                                          alert("异常" + err)
                                      }
                                  })
                              } else {
                                  // 手机号已存在
                                  alert(result.message)
                              }
                          },
                          error: function (err) {
                              alert("异常" + err)
                          }
                      })
                  } else {
                      // 用户名已存在
                      alert(result.message)
                  }
              },
              error: function (err) {
                  alert("异常" + err)
              }
          })
      
      
    • promise异步编排:

      • 当执行到resolve函数时,会调用.then()判断result
      • 当执行到reject函数时,会调用.catch()判断err
      new Promise((resolve, reject) => {
                  // 1. 请求用户名是否存在
                  $.ajax({
                      url: "http://localhost:8811/user/existUsername",
                      success: function (result) {
                          resolve(result);
                      },
                      error: function (err) {
                          reject(err);
                      }
                  })
              })
              // 2.手机是否存在
              .then(result => {
                  return new Promise((resolve, reject) => {
                      if (result.data) {
                          alert('用户名不存在!')
                          $.ajax({
                              url: "http://localhost:8811/user/existPhone",
                              success: function (result) {
                                  resolve(result);
                              },
                              error: function (err) {
                                  reject(err);
                              }
                          })
                      } else {
                          alert(result.message)
                      }
                  })
      
              })
              .then(result => {
                  return new Promise((resolve, reject) => {
                      if (result.data) {
                          alert('手机不存在!')
                          // 注册用户
                          $.ajax({
                              url: "http://localhost:8811/user/registryUser",
                              success: function (result) {
                                  resolve(result);
                              },
                              error: function (err) {
                                  alert("异常" + err)
                              }
                          })
                      } else {
                          // 手机号已存在
                          alert(result.message)
                      }
                  });
              })
              .then(result => {
                  if (result.data) {
                      alert(result.message)
                  }
              })
              .catch(err => {
                  alert('服务器异常')
              });
      
      //设置函数,简化请求
      
          function myAjax(url) {
              return new Promise((resolve, reject) => {
                  // 1. 请求用户名是否存在
                  $.ajax({
                      url,
                      success(result) {
                          resolve(result);
                      },
                      error(err) {
                          reject(err);
                      }
                  })
              })
          }
      
          // 验证用户名不存在
          myAjax("http://localhost:8811/user/existUsername")
              .then(result => {
                  if (result.data) {
                      alert('用户名不存在!');
                      return myAjax("http://localhost:8811/user/existPhone")
                  } else {
                      alert(result.message)
                  }
              })
              // 验证手机号是否存在
              .then(result => {
                  if (result.data) {
                      alert('手机号不存在!');
                      return myAjax("http://localhost:8811/user/registryUser")
                  } else {
                      alert(result.message)
                  }
              })
              // 注册成功
              .then(result => {
                  if (result.data) {
                      alert(result.message)
                  }
              })
              .catch(err => {
                  alert('服务器异常')
              });
      

    ES6新特性-模块化

    • 什么是模块化

      • 模块化就是把代码进行拆分,方便重复利用。类似于java中的导包:要使用一个包,必须先导包。然而JS中并没有包的概念,取而代之的是模块。
      • 在ES6中每一个模块既是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的
      • 模块功能
        1. export命令用于规定模块的对外接口,如果你希望外部可以读取模块当中的内容,就必须使用export来对其进行暴露(输出)。其中export不仅仅只能导出对象,一切JS变量都可以导出
        2. import命令永固导入模块
    • import语法:

      1. import 组件名 from ‘js文件路径’
      2. 组件名={需要导入的组件}需要多个时,用逗号隔开。当需要用的组件很多时,可直接写成*,就不要{},但是还需要使用as取别名
      3. 非默认组件一定要用大括号,默认组件不能写在大括号里面
      <script type="module">
      // import 语法
      // import 组件名 from js文件路径
      // 组件名 : {需要导入的组件}  多个用逗号分隔,  用过组件有很多可以写成* ,就不需要{} ,但是还需要使用as取别名
      // 非默认组件一定要用大括号    ,默认组件不能写在大括号里面
      import * as person form './js/user.js'
      import xxx,{girl} from './js/user.js'
      
      console.info("---"+Object.keys(xxx));
      console.info("----"+girl);
      
      </script>
      
    • 导出语法:

      • 对应三种import语法
        1. 直接写在组件上面(变量、对象、函数…)(export let User
        2. 写在底部(批量导出)(export {User,girl}
        3. 导出默认组件(export default)
    export default {
        username:'徐庶',
        age:'18',
        print() {
            console.info(`姓名${this.username},年龄:${this.age}`)
        }
    }
    
    let girl ={
        realName:'迪丽热巴', 
        cup:'E'
    }
     
    export {girl}
    // 需要导入 要先 导出 
    // 导出 3:
    //  1. 直接写在组件上面(变量、对象、函数....)
    //export let User
    
    //  2. 写在底部(批量导出)
    // export {User,girl}
    
    // 3. 导出默认组件
    
    
    展开全文
  • 比较常用的 变量定义:let Const 解构赋值 扩展运算符 Symbol 数据类型 Set 和 Map 数据结构 Promise Class 箭头函数 Proxy 拦截 imoprt 模块导入 新增了一些数组的方法 新增了一些对象的方法 # 文章的内容/灵感...

    比较常用的有

    • 变量定义:let Const
    • 解构赋值
    • 扩展运算符
    • Symbol 数据类型
    • Set 和 Map 数据结构
    • Promise
    • Class
    • 箭头函数
    • Proxy 拦截
    • imoprt 模块导入
    • 新增了一些数组的方法
    • 新增了一些对象的方法

    #

    文章的内容/灵感都从下方内容中借鉴

    展开全文
  • ES6新特性详解

    2021-04-05 17:32:10
    let:块级作用域,不能跨快访问,可以先声明不初始化,无变量提升 const:声明常量,必须要声明的时候初始化,定义之后值不可改,块级作用域,对于数组和对象的元素修改,不算做对常量的修改,不会报错(因为地址...

    1、var、let、const

    var:变量提升,可以先申声明不初始化,可以跨快访问,不能跨函数作用域;

    let:有块级作用域,不能跨快访问,可以先声明不初始化,无变量提升

    const:声明常量,必须要声明的时候初始化,定义之后值不可改,块级作用域,对于数组和对象的元素修改,不算做对常量的修改,不会报错(因为地址未修改)。

    2、变量的解构赋值

    es6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这就是解构赋值

    // 关于数组解构
    const arr=['11','22','33'];
    let [yi,er,san]=arr;
    console.log(yi);//11
    console.log(er);//22
    console.log(san);//33
    // 对象的解构
    const fan={
        name1:'yiyi',
        age:18,
        hobby:function(){
            console.log('singing')
        }
    }
    let {name1,age,hobby}=fan;
    console.log(name1);//yiyi
    console.log(age);//18
    console.log(hobby);//[Function: hobby]
    hobby();//singing
    

    3、声明字符串的方式(``反引号)

    1.可用作声明,2.内容中可以直接出现换行符;3.变量拼接

    // 变量声明
    let str=`hahahah`;
    console.log(str, typeof str);//hahahah string
    // 出现换行
    let str1=`<ul>
              <li>嘻嘻</li>  
              <li>哈哈</li>  
              <li>呵呵</li>  
            </ul>`
    
    // 变量拼接
    let hobby='code';
    let question=`你的爱好是什么?${hobby}`
    console.log(question);
    

    4、对象的简化写法

    允许在大括号里面直接写入变量和函数,作为对象的属性和方法。

    let name='tony';
    let hobby=function(){
        console.log('reading');
    }
    const things={
        name,
        hobby,
        other(){//把:function省了
            console.log('singing')
        }
    }
    console.log(things);
    

    5、箭头函数

    1.this是静态的,始终指向函数声明时所在作用域下的this的值,call和apply也无法改变他的指向;

    function getName() {
       console.log(this.name);
    }
    var getName2 = () => {
       console.log(this.name);
    }
    window.name = '哈哈哈';
    const name1 = { name: '嘻嘻' };
    
    getName();//哈哈哈
    getName2();//哈哈哈
    
    getName.call(name1);//嘻嘻
    getName2.call(name1);//哈哈哈
    

    2.不能作为构造函数实例化对象,不能使用new来调用

    3.不能使用arguments变量;

    4.箭头函数的简写:①省略小括号,当形参有且只有一个的时候;②省略花括号,当代码体只有一条语句的时候,且return必须省略,语句执行结果就是函数的返回值。

    总结:箭头函数适合与this无关的回调,定时器,数组的方法回调;不适合与this有关的回调,事件回调,对象的方法

    6、函数参数的默认值设置

    1.形参初始值,具有默认值的参数,一般位置要靠后(潜规则)

    2.与解构赋值结合

    7、rest参数

    引入rest参数,用于获取函数的实参,用来代替arguments。rest参数必须要放到参数的最后,否则会报错。

    // rest参数
    function data(...args){
        console.log(args)
    }
    data('11','22','33');
    

    8、扩展运算符

    能将数组转换成逗号分隔的参数序列。

    const arr=['11','22','33'];
    function names(){
        console.log(arguments);
    }
    names(...arr);
    //[Arguments] { '0': '11', '1': '22', '2': '33' }
    

    **使用:**1.数组的合并,[...arr1,...arr2]

    2.数组的克隆(浅拷贝);let a=[1,2,3];let b=[...a]

    3.将伪数组转为真正的数组

    9、symbol

    基本数据类型,表示独一无二的值。

    特点:

    1.symbol的值是唯一的,用来解决命名冲突的问题

    2.symbol的值不能与其他数据进行运算;

    3.symbol定义的对象属性不能使用for…in循环遍历,但是可以使用Reflect.ownKeys来获取对象的所有键名。

    // 创建symbol
    let s=Symbol();
    let s2=Symbol('haha');
    // 通过Symbol.for创建
    let s3=Symbol.for('xixi');
    
    // symbol创建对象属性
    let game={
        name:'card',
        [Symbol('first')]:function(){
            console.log('haha');
        },
        [Symbol('second')]:function(){
            console.log('xixi');
        }
    }
    console.log(game)
    

    10、迭代器

    迭代器是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口(这个接口就是对象的属性),就可以完成遍历操作。

    1.es6创造了一种新的遍历命令for…of循环,Iterator接口主要提供for…of消费

    2.原生具备iterator接口的数据(可用for of遍历):Array,arguments,Set,Map,string,typedArray,NodeList

    3.工作原理:①创建一个指针对象,指向当前数据结构的起始位置,②第一次调用对象的next方法,指针自动指向数据结构的第一个成员;③接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员。

    // 迭代器自定义遍历对象
    const class1={
        name:'一班',
        stus:[
            '11',
            '22',
            '33',
            '44'
        ],
        [Symbol.iterator](){
            // 索引变量
            let index=0;
            return {
                next:()=>{
                    if(index<this.stus.length){
                        const result={value:this.stus[index],done:false};
                        // 下标自增
                        index++;
                        // 返回结果
                        return result;
                    }else{
                        return {value:undefined,done:true};
                    }
                }
            }
        }
    }
    for(item of class1){
        console.log(item);
    }
    

    11、生成器函数

    生成器函数是一个特殊的函数,用于异步编程,纯回调函数

    yield:函数代码的分隔符

    next方法可以传入实参

    //生成器函数声明与调用
    function * gen(){
        console.log('hello');
        yield '哈哈哈1'
        console.log('world');
        yield '哈哈哈2';
    }
    let iterator =gen();
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    
    // 输出
    // hello
    // { value: '哈哈哈1', done: false }
    // world
    // { value: '哈哈哈2', done: false }
    // { value: undefined, done: true }
    

    12、promise

    是es6引入的异步编程的新解决方案,语法上promise是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果。可以通过链式调用解决回调地狱。

    // 实例化promise对象
    const p=new Promise(function(resolved,rejected){
        setTimeout(() => {
            // let data='成功';
            // resolved(data);
    
            let error='失败';
            rejected(error);
        }, 1000);
    });
    // 调用promise对象的then方法
    p.then((value)=>{
        console.log(value);
    },(error)=>{
        console.log(error);
    })
    
    //promise封装ajax请求
    const p=new Promise((resolve,reject)=> {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://api.apiopen.top/getJoke');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log(xhr.response);
                } else {
                    console.error(xhr.status)
                }
             }
         }
    })
    p.then((value)=>{
        console.log(value);
    },(err)=>{
        console.log(err)
    })
    

    13、Set

    新的数据结构Set(集合)。类似于数组,但是成员的值都是唯一的,集合实现了iterator接口,可以使用扩展运算符和for…of进行遍历。集合的属性和方法:

    1)size:返回集合的元素个数;

    2)add:增加一个新元素,返回当前集合;

    3)delete:删除元素,返回Boolen值;

    4)has:检测集合中是否包含某个元素,返回Boolen值

    5)clear:清空数组里的内容

    14、map

    map类似于对象,也是键值对的集合。但是’键’的范围不限于字符串,各种类型的值都可以当做键。map也实现了iterator接口,可以使用扩展运算符和for…of进行遍历。map的属性和方法:

    1)size:返回map的元素个数;

    2)set增加一个新元素,返回当前map;

    3)get:返回键名对象的键值;

    4)has:检测map中是否包含某个元素,返回Boolen值

    5)clear:清空集合,返回underfined

    15、class

    通过class可以定义类,让对象原型的写法更加清晰、更像面向对象编程的语法。

    1)class声明类

    2)constructor定义构造函数初始化;

    3)extends继承父类;

    4)super调用父级构造方法

    5)static定义静态方法和属性

    6)父类方法可以重写

    es6中类的继承:

    class Phone{
        // 构造方法
        constructor(brand,price){
            this.brand=brand;
            this.price=price;
        }
        // 父类的成员属性
        call(){
            console.log('打电话')
        }
    }
    
    class SmartPhone extends Phone{
        // 构造方法
        constructor(brand,price,color,size){
            // 子类继承父类的方法
            super(brand,price);//相当于Phone.call(this,brand,price)
            this.color=color;
            this.size=size;
        }
        phone(){
            console.log('拍照');
        }
        playGame(){
            console.log('玩游戏');
        }
    }
    const mi=new SmartPhone('米',1999,'white','5.5inch');
    console.log(mi);
    mi.call();
    mi.phone();
    mi.playGame();
    

    16、对象方法扩展

    1.Object.is 判断两个值是否完全相等 console.log(Object.is(23,23))

    2.Object.assign 对象的合并

    const f1={
        name:'11',
        sex:'female',
        other:'haha'
    }
    const f2={
        name:'22',
        sex:'male',
        hobby:'singing'
    }
    console.log(Object.assign(f1,f2));
    

    3.Object.setPrototypeOf 给实例对象的构造函数设置原型对象 Object.getPrototypeof

    17、模块化

    模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来

    好处:1.防止命名冲突;2.代码复用;3.高维护性

    模块功能主要由两个命令构成:export(用于规定模块的对外接口)和import(用于输入其他模块提供的功能)。

    // html代码
    <script type="module">
    	import * as test from './test.js';//通用的导入方式
    	import {name,teach} from './test.js'//解构赋值形式
    	import test from './test.js';//简便形式,针对默认暴露
    	console.log(test)
    </script>
    // js文件代码
    //分别暴露
    export let name='11';
    export function teach(){
        console.log('haaahahahaha');
    }
    //或者:统一暴露
    export {name,teach}
    //或者:默认暴露
    export default{
    //在这里写入要暴露的信息
    }
    

    在这里插入图片描述

    展开全文
  • 几种ES6新特性

    2021-10-22 14:04:30
    //如果将解构出来的数据取走,再使用传播操作符的话,就会将剩下的数据传给对象 var message1 = { name: "Tom", car: "Porsche-911", link: "https://www.baidu.com", func: function () { console.log("这...

    1.箭头函数

    function sum1(num1, num2) {

        return num1 + num2;

    }

    console.log(sum1(1, 2));

    var sum2 = function (num1, num2) {

        return num1 + num2;

    }

    console.log(sum2(3, 4));

    var sum3 = (num1, num2) => {

        return num1 + num2;

    }

    console.log(sum3(5, 6));

    var sum4 = (num1, num2) => num1 + num2;

    console.log(sum4(7, 8));

    var arr = [1, 2, 3, 4, 5, 6];

    var newarr1 = arr.map(function (obj) {

        return obj * 2;

    });

    console.log(newarr1);

    var newarr2 = arr.map((obj) => obj * 2);

    console.log(newarr2);

    var newarr3 = arr.map(obj => obj * 2);

    console.log(newarr3);

    //1.去掉function;

    //2.括号后面加箭头;

    //3.如果逻辑代码仅有return,那么return也可以省去;

    //4.如果参数只有一个,括号也可以去掉。

    2.模板字符串

    var message ={

        name:"Tom",

        address:"China",

    }

    var print1 = "ES5--我是"+message.name+",来自于"+message.address+"";

    var print2 = `ES6--我是${message.name},来自于${message.address}`;

    console.log(print1);

    console.log(print2);

    3.传播操作符

    //对象传播操作符...

    //如果将解构出来的数据取走,再使用传播操作符的话,就会将剩下的数据传给新对象

    var message1 = {

        name: "Tom",

        car: "Porsche-911",

        link: "https://www.baidu.com",

        func: function () {

            console.log("这是一个函数1");

        }

    };

    var {name, car,...message2} = message1;

    console.log(name,car);

    console.log(message2);

    4.对象简写及对象解构

    //传统定义对象:

    var message1 = {

        name1: "Tom",

        car1: "Porsche-911",

        link1: "https://www.baidu.com",

        func1: function () {

            console.log("这是一个函数1");

        }

    };

    console.log(message1);

    //ES6定义对象:

    var name2 = "Tom";

    var car2 = "Porsche-911";

    var link2 = "https://www.baidu.com";

    var message2 = {

        name2,

        car2,

        link2,

        func2() {

            console.log("这是一个函数2");

        }

    }

    console.log(message2);

    //除了可以用.的方式获取对象元素,还可以将.换成[]

    console.log(message2.name2);

    message2.func2();

    console.log(message2["name2"]);

    message2["func2"]();

    //传统方式

    var name2 = message2.name2;

    var car2 = message2.car2;

    //对象解构

    var {name2, car2, func2} = message2;//如果不写这句话,直接无法打印name2,car2,而必须使用message.name2。

    console.log(name2, car2);

    func2();

    5.Map和Set

    //Map

    var map = new Map([['Tom', 111], ['Jerry', 222]]);

    var name = map.get('Tom');//输出为111,使用Map可以通过key获得value

    console.log(name);

    map.set('Jack', 666);//输出为Map(3) { Tom → 111, Jerry → 222, "Jack" → 666 },使用set方法可以实现添加数据

    console.log(map);

    //Set

    var arr = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5];

    var set = new Set(arr);

    console.log(set);//输出为Set(5) [ 1, 2, 3, 4, 5 ],使用Set可以实现数组去重

    6.map和reduce

    //map方法的使用

    var arr = [1, 2, 3, 4, 5, 6];

    var newarr = arr.map(obj => obj * 2);

    console.log(newarr);

    var data = [{name: "zhang_gm", age: 18}];

    var newdata = data.map(obj => {

        obj.age = obj.age + 1;

        return obj;

    });

    console.log(newdata);

    //reduce方法的使用

    //a=1,b=2;

    //a=3,b=3;

    //a=6,b=4;

    //a=10,b=5;

    //a=15,b=6;

    //a=21,b=7;

    //a=28,b=8;

    //a=36,b=9;

    //a=45,b=10;

    //遍历完成,返回a+b=55

    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    var newarr = arr.reduce((a, b) => a + b);

    console.log(newarr);

    展开全文
  • ES6新特性快速观看

    2021-05-28 17:46:35
    快速了解并学习es6新特性
  • ES6新特性汇总

    2021-06-02 09:21:20
    1. let 和 const let 声明的变量,作用范围是let声明变量所在的代码块 const 声明的变量,是常量,值不能修改否则报错 2. 字符串扩展方法 str01.inclueds(str02) 字符串str01中是否包含字符串...es6支持多行字符串 使用的
  • ES6新特性

    2021-02-05 16:13:22
    ES6主要的新特性如下所示: let关键字 let 关键字用来声明变量,使用 let 声明的变量几个特点: 不允许重复声明 块级作用域 不存在变量提升 不影响作用域链 const关键字 const 关键字用来声明常量,const 声明...
  • ES6新特性简介

    2021-01-11 10:16:24
    ES6介绍 ES6(全称ECMAScript 6)是于2015年6月正式发布的javascript语言的标准,也叫ECMAScript 2015(ES2015)。它的目标是使得Javascript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。注意:ES6不兼容IE...
  • ES6新特性简要说明

    2021-08-03 09:21:46
    ES6新特性 本文只做了简要说明,详细请查看下面这篇文章 原文链接 1.let和const命令 var 定义的变量时候会成为全局变量(显然变量i的作用域范围太大了) let所声明的变量,只在let所在的代码块内有效。 const声明的...
  • ES6 新增特性有那些?

    2021-06-03 00:28:31
    ES6新增了许多新特性,不是因为面试经常会问才需要会它,个人认为里面的许多方法特别简单 下面是我整理的一些比较常用的新增特性 一、新增数据类型 Symbol 猿话:Symbol-ES6神奇的数据类型​zhuanlan.zhihu....
  • es6新特性总结

    2021-08-17 19:44:48
    一.es6是什么? ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。 二.es6有什么用? ES6 的出现主要是为了解决 ES5 的先天不足,比如...三.es6有哪些特性? 1.let 与 const let:用
  • ES6新特性总结

    2021-05-26 21:27:32
    //"zhuangzhuang",25 在react中会经常用到 const { cur } = this.state 模板字符串 键盘Tab上的键 `` ES6 引入的声明字符串的方式 , 对比 ‘’, “” 的优点: 1、内容可直接换行,不用再使用 ‘+’ 拼接 2、可以...
  • JS高级—ES6新特性

    2021-02-09 20:56:04
    文章目录ES6新特性概述ES2015概述变量声明let和块级作用域const(主用)数组解构对象解构模板字符串简介标签函数字符串扩展参数默认值剩余操作符展开操作符箭头函数简介this对象字面量Object.assign方法Object.is...
  • ES6 新特性

    2021-11-23 18:07:35
    文章目录函数的扩展参数的默认值 函数的扩展 参数的默认值 // ES5 写法 function log(x, y) { if (typeof y === 'undefined') { ...// ES6 写法 function log(x, y = 100) { console.log(x, y); } log(10); // 10 1
  • ES6新特性-模板字符串

    2021-08-19 14:09:53
    ES6新特性的学习模板字符串的理解 模板字符串的理解 模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。 由反引号...
  • Es6新特性

    千次阅读 2021-01-02 18:54:51
    Es6新特性 模板字符串 传统字符串用法 const str = ‘hello world this is a string’ 模板字符串 const str = hello world this is a \string`console.log(str)//hello world this is astring` const str = hello ...
  • ES6新特性-Map

    2021-08-13 14:32:06
    ES6新特性-Map、WeakMap、Set、WeakSet Map是一种的集合类型,是一种键值对存储机制。 Map 一、基本API const m = new Map; const m1 = new Map([ ['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3']...
  • es6的新增特性有哪些? 去掉function,没有参数或者多个参数时需要加括号(),多个参数时使用逗号分隔,一个参数时括号可以省略。 隐士返回,如 下面的代码可以去掉return,代码移到一行,减少代码量。 解决了this的...
  • ES6新特性-图解

    2021-03-08 17:44:59
  • JavaScript ES6新特性介绍 ES6是一次重大的革新,比起过去的版本,改动比较大。ECMAScript 2015(ES2015),第 6 版,也被称作是 ECMAScript 6(ES6),添加了类和模块的语法,箭头函数,迭代器和生成器和生成器...
  • ES6新特性的学习一.模块化的概念二.导入(import)三.导出(export)四.默认导出(export default) 一.模块化的概念 模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令...
  • ES6新特性简单介绍

    2021-02-23 16:16:54
    } Result: 0, 1, 2, size 10、Promises ES6 对 Promise 了原生的支持,一个 Promise 是一个等待被异步执行的对象,当它执行完成后,其状态会变成 resolved 或者rejected。 var p = new Promise(function(resolve,...
  • ES6 新特性知识点总结

    千次阅读 2021-09-22 12:56:18
    变量提升特性增加了程序运行时的不可预测性 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码 let及const 1、let: ES6中新增的用于声明变量的关键字。let声明的变量只在所处于的块级有效 是ES6新增的...
  • 参数对象他自己额外的特性(例如callee 属性) 总结 当三个点(…)在等号左边,或者放在形参上,为 rest 运算符. 当三个在等号右边,或者放在实参上,是 spread运算符. 或者说: 放在被赋值一方是rest 运算符;放在赋值...
  • es6新特性

    2021-03-06 11:06:47
    详细类见https://es6.ruanyifeng.com/《ECMAScript 6 入门教程》 1、let声明变量 2、const声明常量(只读变量) 3、解构赋值 //1、数组解构 // 传统 let a = 1, b = 2, c = 3 console.log(a, b, c) // ES6 let [x, y...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,284
精华内容 28,913
关键字:

es6新特性有哪些