首页 > 其他分享 >【Web】ES6新特性

【Web】ES6新特性

时间:2022-11-02 22:46:20浏览次数:72  
标签:function Web console log ES6 特性 let error data

ECMAScript简介

ECMAScript6.0 ,简称 ES6 。ECMAScript 是一种由 ECMA 国际通过 ECMA-262 标准化的脚本,为 JavaScript 语言的下一代标准, 在 2015 年 6 月正式发布。

类比于 Java ,经典程度堪比 JDK 1.8 版本。
但是两者之间的区别, JDK 是具体实现,而 ES 就相当于 JSR 规范。

JSR,是 Java Specification Requests 的缩写,意思是 Java 规范提案,是指向 JCP(Java Community Process) 提出新增一个标准化技术规范的正式请求。

从层级上看, ECMAScript 是一种规范/接口,JavaScript 是规范的具体实现。

let关键字

  • let不会作用到 {} 外,var 会越域到 {} 外,且 var 声明的变量有域提升的特性。
  • var 可以多次声明同一变量,使用 let 则会报错,只能在作用范围内声明一次。
  • var 定义之前可以使用,let 定义之前不可使用,关联域提升特性。
  • let 的声明之后不允许改变,相当于 const 声明的变量。

解构表达式

解构表达式,是一种可以用来简化变量赋值的新语法。

  • 支持 let arr = [1,2,3]; let [a,b,c] = arr; 语法
    • 该语法的特性,能够更方便地在变量之间进行值传递,属于数组解构表达式
  • 支持对象解析 const { name: abc, age, language } = person; 语法
    • 该语法可以将一个 person 对象其中的 name 属性赋值给 abc 对象,也就是将 name 属性值对应赋值给 abc ,而不是需要一定相同的属性名称。
    • 这个过程类似于一种 JsonProperty 的转换功能,但是不同的是 JsonProperty 注解提供的只是给原对象起一个别名,而不像对象解构表达式是将对象字段赋值给新的语句。

字符串扩展

在 ES6 中,对于字符串新增了一些扩展。主要是新增部分为字符串 API 以及字符串模板、变量值插入。
字符串 API 新增的主要常用的有:str.startsWith("")str.endsWith("")str.includes("") 几个。
字符串模板,主要用来输出一些特定格式的字符串,保留在编辑器中的换行空格等字符。字符串模板的使用方式很简单,只需要将目标模板使用 包起来即可。
变量值插入,类似于 Java 中的 @Value 注解所需要使用的表达式。格式为 ${} 。我们可以在 { } 中使用变量、表达式、函数,均可以输出对应的计算结果。

函数优化

在 ES6 中,新增了一些函数的优化。主要有:

  • 函数默认值
# 原始的默认值的写法
function add1(a, b) {
  b = b | 1
  return a + b
}

# ES6 新增的写法
function add1(a, b = 2) {
  return a + b
}
  • 不定参数
function fun(...values) {
	console.log(values.length);
}
  • 箭头函数
var print = obj => console.log(obj);
# 调用
print("abc");

对象优化

对象函数

Object.keys(obj);
Object.values(obj);
Object.entries(obj);
# assign 函数将其他对象添加到目标对象中
Object.assign(target, obj1, obj2);

对象声明简写

# 对象的属性名和变量名一致,可以直接使用简写声明对象
const obj1 = { age, name };

对象拓展运算符

# 该符号可以将对象的所有属性取出来,可以用于对象的深拷贝、覆盖
let person = { name: "Real", age: 20 }
let someone = { ...person}

数组优化

在 ES6 中,数组新增了 Map 和 Reduce 方法。

  • map 方法:接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组后返回。
arr = arr.map(item=> item*2);
  • reduce 方法:为数组中的每个元素执行回调函数,不包含数组中被删除或者未被赋值初始化的元素。
/**
* 1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
* 2、currentValue (数组中当前被处理的元素)
* 3、index (当前元素在数组中的索引)
* 4、array (调用 reduce 的数组)
*/
arr.reduce(callback,[initialValue])

promise异步编排

<script>
  //1、查出当前用户信息
  //2、按照当前用户的id查出他的课程
  //3、按照当前课程id查出分数
  // $.ajax({
  //     url: "mock/user.json",
  //     success(data) {
  //         console.log("查询用户:", data);
  //         $.ajax({
  //             url: `mock/user_corse_${data.id}.json`,
  //             success(data) {
  //                 console.log("查询到课程:", data);
  //                 $.ajax({
  //                     url: `mock/corse_score_${data.id}.json`,
  //                     success(data) {
  //                         console.log("查询到分数:", data);
  //                     },
  //                     error(error) {
  //                         console.log("出现异常了:" + error);
  //                     }
  //                 });
  //             },
  //             error(error) {
  //                 console.log("出现异常了:" + error);
  //             }
  //         });
  //     },
  //     error(error) {
  //         console.log("出现异常了:" + error);
  //     }
  // });


  //1、Promise可以封装异步操作
  // let p = new Promise((resolve, reject) => { //传入成功解析,失败拒绝
  //     //1、异步操作
  //     $.ajax({
  //         url: "mock/user.json",
  //         success: function (data) {
  //             console.log("查询用户成功:", data)
  //             resolve(data);
  //         },
  //         error: function (err) {
  //             reject(err);
  //         }
  //     });
  // });

  // p.then((obj) => { //成功以后做什么
  //     return new Promise((resolve, reject) => {
  //         $.ajax({
  //             url: `mock/user_corse_${obj.id}.json`,
  //             success: function (data) {
  //                 console.log("查询用户课程成功:", data)
  //                 resolve(data);
  //             },
  //             error: function (err) {
  //                 reject(err)
  //             }
  //         });
  //     })
  // }).then((data) => { //成功以后干什么
  //     console.log("上一步的结果", data)
  //     $.ajax({
  //         url: `mock/corse_score_${data.id}.json`,
  //         success: function (data) {
  //             console.log("查询课程得分成功:", data)
  //         },
  //         error: function (err) {
  //         }
  //     });
  // })

  function get(url, data) { //自己定义一个方法整合一下
    return new Promise((resolve, reject) => {
      $.ajax({
        url: url,
        data: data,
        success: function (data) {
          resolve(data);
        },
        error: function (err) {
          reject(err)
        }
      })
    });
  }

get("mock/user.json")
  .then((data) => {
    console.log("用户查询成功~~~:", data)
    return get(`mock/user_corse_${data.id}.json`);
  })
  .then((data) => {
    console.log("课程查询成功~~~:", data)
    return get(`mock/corse_score_${data.id}.json`);
  })
  .then((data)=>{
    console.log("课程成绩查询成功~~~:", data)
  })
  .catch((err)=>{ //失败的话catch
    console.log("出现异常",err)
  });

</script>

模块化

模块化就是把代码进行拆分,方便重复利用。类似于 Java 中的 import 导包;要使用一个包,必须先导入进来。而 JS 中没有包的概念,对应的是模块。
模块功能主要由两个命令构成:export 和 import

  • export 命令用于规定模块的对外接口
  • import 命令用于导入其他模块提供的功能

export 不仅可以导出对象,还可以导出变量、函数、数组等等一切 JS 中的变量。

  • user.js
var name = "jack"
var age = 21
function add(a,b){
  return a + b;
}
// 导出变量和函数
export {name,age,add}
  • hello.js
// export const util = {
//     sum(a, b) {
//         return a + b;
//     }
// }

// 导出后可以重命名
export default {
  sum(a, b) {
    return a + b;
  }
}
// export {util}

//`export`不仅可以导出对象,一切JS变量都可以导出。比如:基本类型变量、函数、数组、对象。
  • main.js
import abc from "./hello.js"
import {name,add} from "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);

本文由博客一文多发平台 OpenWrite 发布!

标签:function,Web,console,log,ES6,特性,let,error,data
From: https://www.cnblogs.com/real-blog/p/16852824.html

相关文章

  • ctf web1信息搜集与爆破
    一般做题顺序(危害递增):读取写入执行常见状态码:200:成功301、302:跳转404:找不到资源403:禁止访问500:服务器错误502:错误网关,无效网关...信息泄露:http信息泄露(......
  • WebSocket
      一、是什么WebSocket,是一种网络传输协议,位于OSI模型的应用层。可在单个TCP连接上进行全双工通信,能更好的节省服务器资源和带宽并达到实时通迅客户端和服务器只需......
  • JavaWeb三大组件之Servlet学习
    JavaWeb三大组件之Servlet学习平时直接用springmvc较多,都没怎么接触底层的Servlet,导致对一些基本的知识点了解都不够,所以今天专门的抽出时间来学习一下带着问题出发,看下可以......
  • JavaWeb三大组件之Filter学习详解
    JavaWeb三大组件之Filter学习详解Filter基本上可以说存在所有的JavaWeb项目中,比如最基本的一个请求参数的编码​​CharacterEncodingFilter​​,大家一般都会配置下,那么filte......
  • 从web2的用户名密码登录到web3的钱包签名认证
    Web2都有哪些常用的认证场景 早期我们使用网页类Web2应用时,大多采用账号+密码的认证方式访问。为了方便很多网站设置的都是相同的密码(这很不安全)。随着移动应用的......
  • web基础和HTTP协议
    web基础与HTTP协议一、DNS解析二、域名概述2.1定义2.2域名注册空间结构三、HTTP/HTTPS3.1网页的基本概念3.2HTML四、Web服务4.1Web概述4.2Web1.0与Web2.04.3静......
  • Web项目统一导出方案
    *前言我们在做web项目时,业务需求做的最多的就是查询,既然有查询,难免就有导出。如果给每个查询界面都写一个导出未免有点不够优雅,代码会变得很臃肿冗余,虽然可以把一些公共的......
  • Layabox2.4+webpack4.x打包编译、热更新
    在laya项目目录下新建package.json点击查看代码{"scripts":{"bundle:dev":"webpack--configwebpack.config.debug.js--watch","serve":......
  • JavaWeb期中考试-2021年版(一)
    终于轮到了我自己的期中考试,总体来说本次的期中考试并不难,和19年的期中考试可以说是一模一样,以下要提醒的是,程序在我的电脑上是没什么问题,但是有些配置原因可能在别的设备......
  • JavaWeb之Servlet1
    Servlet方法初始化方法,在Servlet被创建时执行,只执行一次voidinit(ServletConfigconfig)提供服务方法,每次Servlet被访问,都会调用该方法voidservice(ServletRequestr......