ES6基础语法

最新推荐文章于 2024-06-11 18:58:36 发布

早餐有胃口吗

最新推荐文章于 2024-06-11 18:58:36 发布

阅读量506

点赞数

分类专栏： node.js 文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/qq_53261858/article/details/126444843

版权

node.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ES6语法

1.es6概念

编程语言JavaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：

[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。

[类型]– 布尔型、数字、字符串、对象等。

[原型和继承]

内建对象和函数的

[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似[node.js]的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。

ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话

ECMAScript是一门充满活力的语言，并在不断进化中。

未来版本的规范中将持续进行重要的技术改进

2009年发布的改进版本ES5，引入了[Object.create()]、[Object.defineProperty()]、[getters]和[setters]、[严格模式]以及[JSON]对象。

ES6: 是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

小结：

ECMAScript是前端js的语法规范；可以应用在各种js环境中。如：浏览器或者node.js环境。
它有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。

2.let和const与var的区别

传统：变量和常量统一用var定义

es6：变量用let，常量用const

let和const解决了：

变量穿透问题

var定义的变量变成了常量，局部变量变成了常量

常量修改问题

常量是不允许修改的，而用var定义常量，会把常量变成变量而进行修改

3.模板字符串``${变量名}

用反引号使用字符串的拼接。

传统：

var str=“我是”+name；

es6：

var str=(反引号)我是${name}(反引号)

4.箭头函数

规律：

去掉function
在括号（）后面加箭头=>
如果没有逻辑体，只有return返回值，可直接把花括号和return关键字去掉。（如果有逻辑体，则不能省略）
如果只有一个参数，可以把括号去掉。（如果有一个以上的参数，则不可省略括号）

传统方法：

function add(a,b){
    return a+b;
}

//或者
var add = function(a,b){
    return a+b;
}

es6:

var add=(a+b)=>a+b;

5.对象初始化简写

对象为键值对的方式 key:value

规律：

若key与变量名字相同，可只定义一次。

如var person{ name:name, age:age} 可简写为 var person{ name, age}
若value是方法，可将：function省略

如 go:function(){…} 可简写为 go(){…}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>对象简写</title>
</head>
<body>
<script>
    function person(name, age) {
        //return {name:name,age:age};
        // 对象简写
        return { name, age };
    };
    // 调用和执行
    var json = person("小花花美美", 20);
    console.log(json.name, json.age);
    //========================= 实战应用 =========================
    //<button οnclick="login()">登录</button>
    function login() {
        var username = $("#username").val();
        var password = $("#password").val();
        // 发送ajax
        $.ajax({
            type: "post",
            // 对象简写
            data: { username, password },
            // 原始写分
            //data:{username:username,password:password},
            success() {
            }
        });
    }
</script>
</body>
</html>

6.对象解构

es6提供一些获取快捷获取对象属性和行为方式。

var {name,age} = person;

如同

var name = person.name; var age = person.age;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>对象解构</title>
</head>
<body>
    <script>
        // 对象解构 --- es6提供一些获取快捷获取对象属性和行为方式
        var person = {
            name:'zhangsan',
            age:32,
            language:"cn",
            // 函数也有处理
            /* say:function(){
                console.log(this.name+"年龄是：" + this.age);
            }   */
            /* say:()=>{
                console.log(this.name+"年龄是：" + this.age);
            }  */
            say(){
                console.log(this.name+"年龄是：" + this.age);
            } 
        };
        // ===========================传统的做法========================
        var name = person.name;
        var age = person.age;
        person.say();
        // ===========================对象解构做法========================
        //es6的做法 前提：默认情况name,age必须是jsonkey.
        var {name,age} = person;
        console.log(name,age);
        // 可以用冒号取小名
        var {name,age,language:lan} = person;
        console.log(name,age,lan);
    </script>
</body>
</html>

7.传播操作符“…”

与对象解构结合一起使用。对象融合，对象剩余取走

var {currentPage, total, pageSize, …list } = pageInfo;

应用场景：分页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ES6的语法：传播操作符【...】</title>
</head>
<body>
    <script>
        // 1： 定义一个对象
        var person1 = {
            name: '小飞飞',
            age: 16,
        };
        // 2： 对象解构
        var {name,age} = person1;
        // =========================== ... 对象融合=====================
        var person2 = {
            ...person1,
            gender:1,
            tel:13478900
        };
        console.log(person2);
        // =========================== ... 对象取值=====================
        // ... 对象取值
        var person3 = {
            name:"李四",
            gender:1,
            tel:"11111",
            address:'广州'
        };
        // ...person4 把剩下没取走给我。
        var {name,gender,...person4} = person3;
        console.log(name)
        console.log(age)
        console.log(person4)
        // =================场景分析 -----伪代码========================
        // 模拟后台：异步查询返回用户数据 如下：
        function findUsers(){
            $.get("xxxxx",function(res){
                var res = {
                    pages:11,
                    pageSize:10,
                    pageNo:1,
                    firstFlag:true,
                    lastFlag:false,
                    total:123,
                    data:[{},{},{},{}],
                };
                // ==========================对象 ... 取值===============
                var {data:users,...pagesjon} = res;
                //等价于
                /*  var users = res.data;
                   var pagesjon = {
                    res = {
                        pages:11,
                        pageSize:10,
                        pageNo:1,
                        firstFlag:true,
                        lastFlag:false,
                        total:123,
                    }; */
            })
        }
    </script>
</body>
</html>

8.数组map的使用

和Python中的map差不多的意思。

自带循环功能，每次循环有一个对象指向循环到的某个位置的元素，最后返回该对象。

var arr=[1,2,3,4,5]
var newarr = arr.map(function(item){
    return item*2
})
// newarr:2,4,6,8,10

var penson = [
    {id:1,name:"a"},
    {id:2,name:"ab"},
    {id:3,name:"abc"}
]

var newperson=penson.map(function(ele){
    ele.id=ele.id+1  //改变每个对象的id值
    ele.check=true  //每个对象新增一个属性
    return ele      //返回循环对象
})
console.log(newperson)
/*
[
  { id: 2, name: 'a', check: true },
  { id: 3, name: 'ab', check: true },
  { id: 4, name: 'abc', check: true }
]
*/

9.数组reduce的使用

和Python里reduce的一样的概念。

var arr=[1,2,3,4,5]
var newarr=arr.reduce(function(a,b){
    return a+b;
})
console.log(newarr)
/*
1+2+3+4+5=15
*/

早餐有胃口吗

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ES6基础语法

编程语言JavaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。[类型]– 布尔型、数字、字符串、对象等。[原型和继承]内建对象和函数的[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都
复制链接

扫一扫

专栏目录