当前位置：网站首页>【ES6快速入门】

【ES6快速入门】

2022-04-23 05:59:00 【一鸭一鸭唷】

一、ECMAScript 6.0 简介

ECMAScript 6.0 (以下简称ES6, ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是 European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言)一种脚本语 言的标准,已经在2015年6月正式发布了,并且从ECMAScript6开始,开始采用年号来做版本。即ECMAScript 2015,就是ECMAScript6它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语 言。每年一个新版本。

在这里插入图片描述
关键点：

  • ECMAScript是每年更新的
  • 初始的ECMAScript版本是从1按照数字递增的：ES1,ES2,ES3,ES4,ES5
  • 新的版本(从2015年开始)根据发布的年份命名：ES2015,ES2016,ES2017
  • ECMAScript是个标准。Javascript是这个标准最流行普遍的实现。其他实现包括：SpiderMonkey,V8和 ActionScript

二、ES6新特性-let&const

我们以后会经常使用let来声明一个变量，还有一个const常量（声明之后不允许改变，一旦声明必须初始化， 否则报错）

    <script>
        // var a=1;
        // console.info(a);

        // ES6 常量 不能修改
        // const b=2;
        // b=3; //let.html:15 Uncaught TypeError: Assignment to constant variable.
        // console.info(b);

        // ES6
        //var声明的变量往往会越域
		//let声明的变量有严格的局部作用域
        // {
    
        // var a=1;
        // let c=3;
        // }
        // console.info(a); 
        // console.info(c); //let.html:26 Uncaught ReferenceError: c is not defined

        //var可以声明多次,let只可以声明一次
        // var a=1
        // var a=3
        // let b=2
        // let b=4
        // console.log(a)
        // console.log(b)
        

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

三、ES6新特性-解构&字符串

    <!--script>
        // 数组的解构
        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)

    </!--script-->

    <script>
        let person={
    
            name:'小明',
            age:11,
            hobbies:['唱歌','跳舞']
        }

        // let name=person.name;
        // console.info(name);

        // ES6 : 对象的解构表达式
        let{
    name,age,hobbies}=person;
        console.info(name,age,hobbies);

    </script>

    <!--script>
      
        let html="<div>"+
                    "<a>你好</a>"+
                 "</div>";
          // es6:字符串模板
        let esHtml=`<div> <a>你好</a> </div>`;
        console.info(esHtml);



    </!--script-->

    <!--script>
        //字符串扩展
			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
    </!--script-->

    <script>
        let person={
    
            name:'小明',
            age:11,
            hobbies:['唱歌','跳舞']
        }

        
        let{
    name,age,hobbies}=person;


        function fun(){
    
        return "这是一个函数"
        }
        
        // es6:字符串插入变量和表达式.变量名写在${},${}中可以放入js表达式
        console.info(`名字是：${
      name}年龄：${
      age},爱好${
      hobbies},函数的返回值是：${
      fun()} `);

    </script>

四、函数优化

    <script>
        // 1. 函数的参数默认值 ES6之前：
        // function add(a){
    
        // if(!a){
    
        // a=1;
        // }
        // console.info(a);
        // }
        // add();

        // ES6: 函数的参数默认值
        // function add(a=1){ 
        // console.info(a);
        // }
        // add(2);


        // 2. 可变长度参数 ES6之前：
        // function add(a){
    
        // console.info(a);
        // }

        // add([1,2]);

        // ES6:可变长度参数
        // function add(...a){
    
        // console.info(a);
        // }

        // add(1,2,3);

        // ES6: 参数解构
        // let nums={
    
        // a:1,
        // b:2
        // }

        // function add({a,b}){
    
        // console.info(a+b);
        // }
        
        // add(nums);


        // 箭头函数 lambda => ES6之前
        // function add(a,b){
    
        // return a+b;
        // }

        // console.info(add(1,2))

         // ES6: 箭头函数
         let add=(a,b) => {
    
            let c= a+b

            console.info(c)
        };
        add(2,2)
    </script>

五、ES6新特性-对象优化

<!--script>
     // 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:1,b:2,c:3}
</！script-->

<!--script>
let name="徐庶";
let age=11;

// ES6之前
// let person={
    
// name:name,
// age:age
// }

// ES6: 对象声明属性的简写 ： 如果属性名和引用的变量名是相同的就可以省略赋值，它会自动调用相同名字的变量
let person={
    
    name,
    age
} 
console.info(person)

</！script-->

<script>
    // 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("水果");


</script>

<!-- <>
// 4. 对象扩展运行符

// 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)
</> -->

六、map，reduce

1.map

  • map()方法：map，映射，即原数组映射成一个新的数组；
  • map方法接受一个新参数，这个参数就是将原数组变成新数组的映射关系。

2.reduce

reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数： 初始值(或者上一次回调函数的返回值)，当前元素值，当前索引，调用reduce 的数组。 callback ( 执行数组中每个值的函数，包含四个参数)

  • previousValue ( 上一次调用回调返回的值，或者是提供的初始值(initialalue) )
  • currentValue (数组中当前被处理的元素)
  • index (当前元素在数组中的索引)
  • array (调用reduce 的数组) initialValue (作为第 一次调用callback 的第一个参数。 )
<!--script>
    let arr=[1,20,-3,5];

    // map: 可以对数组中的值进行处理，返回一个新的数组
    //callbackfn:value: 当前循环的值, index 当前索引 , array 当前数组
    let newArr= arr.map( item => item*2 );

    console.info(newArr);

</!--script-->

<script> 
    let arr=[1,20,-3,5];

    // callbackfn: 
        // previousValue 上一个处理的值
        // currentValue 当前值
        // currentIndex 当前索引
    // number: 首次处理的默认值
   let value=  arr.reduce((preValue,curValue)=>{
    
        console.info(`上一个处理的值${
      preValue},当前值${
      curValue}`);
        return preValue+curValue;
    },10)

    console.info(value);

七、promise异步编排

在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网 络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。一旦有一连串的ajax请求 a,b,d…，后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层层嵌套的方式，非常容易造 成上下文代码混乱，我们不得不非常小心翼翼处理内层函数与外层函数的数据，一旦内层函数使用了上 层函数的变量，这种混乱程度就会加剧…总之，这种层叠上下文的层层嵌套方式，着实增加了神经的紧张 程度。

案例：用户登录，并展示该用户的各科成绩。在页面发送两次请求:

  1. 查询用户，查询成功说明可以登录
  2. 查询用户成功，查询科目
  3. 根据科目的查询结果，获取去成绩
    分析：此时后台应该提供三个接口，一个提供用户查询接口，一个提供科目的接口，一个提供各科成绩的接 口，为了渲染方便，最好响应json数据。在这里就不编写后台接口了，而是提供三个json文件，直接提供json 数据，模拟后台接口：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
    <title>Document</title>
</head>

<body>

</body>

<script> // ES6之前 // function myAjax(url, callback){
       // $.ajax({
       // url: url,  // success: function (result) {
       // callback(result); // } // }); // } // 用户名是否存在  // $.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) // } // }) // ES6：promise 异步编排 // 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('服务器异常') }); </script>

</html>

八、模块化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title>
</head>
<body>
    
</body> 
<script type="module"> // import 语法 // import 组件名 from js文件路径 // 组件名 : {需要导入的组件} 多个用逗号分隔， 用过组件有很多可以写成* ，就不需要{} ,但是还需要使用as取别名 // 非默认组件一定要用大括号 ，默认组件不能写在大括号里面 import xxx,{
      girl} from './js/user.js' console.info("---"+Object.keys(xxx)); console.info("----"+girl); </script>

</html>

版权声明
本文为[一鸭一鸭唷]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_44707283/article/details/120160786

边栏推荐

猜你喜欢

随机推荐