IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> ES6 新特性 -> 正文阅读

[JavaScript知识库]ES6 新特性

简介

ES6 全称 ECMAScript 6.0 是JavaScript 语言的标准,JavaScript 是对他的实现,几乎每年都会有一个新版本

ECMAScript 是浏览器脚本语言的规范,JavaScript 是他的具体实现

特性

特性一:let 声明变量

特点一

<script>
    // var 声明的变量是全局的
    // let 声明的变量有严格局部作用域
    {
        var a = 1;
        let b = 2;
    }
    console.log(a);
    console.log(b);// 这是控制台会报错 :b is not defined
    // 因为let 声明的变量是局部的,值能在代码块内使用
</script>

在这里插入图片描述

特点二

 <script>
    // var 能声明多次
    // let 只能声明一次
    var a=1;
    var a=2;
    let b=3;// IDE 的编译也不通过(会报红)
    let b=4;
    console.log(a);
    console.log(b); //控制台会报错 :Identifier 'b' has already been declared
</script>

在这里插入图片描述

特点三

<script>
    // var 会变量提升
    // let 不存在变量提升
    console.log(a); // undefined
    var a = 0;
    console.log(b); // Cannot access 'b' before initialization
    let b = 1;
</script>

在这里插入图片描述

特性二 :const 声明变量

<script>
    // const 声明变量后不能改变,一旦声明必须赋值,否则报错
    const a=1;
    a=3;  // 会报错 :Assignment to constant variable.
</script>

在这里插入图片描述

特性三 :解构表达式

数组解构

var 声明的变量一样可以

<script>
    let arr = [1, 2, 3];
    // 通过解构表达式 将 数组中的值分别赋给 a,b,c
    let [a, b, c] = arr;
    console.log(a, b, c)
</script>

在这里插入图片描述

对象解构

<script>
        let person = {
            name:'jack',
            age:24,
            language:['java','javaScript','css']
        }
        // 对象解构
        //let {name,age,language} = person;

        // 不想使用对象中的名称也可以换
        let {name:a,age:b,language:c} = person;
        console.log(a,b,c);
</script>

在这里插入图片描述

特性四 :字符串扩展

扩展的 API

<script>
        let str = "hello.vue";
        // 是否以he开始
        console.log(str.startsWith("he"));// true 
        // 是否以 vue 结尾
        console.log(str.endsWith("vue"));// true 
        // 是否包含 e
        console.log(str.includes("e"));// true 
</script>

字符串模板

//可以放一些标签
<script>
        let a = ` <div>
           <div></div>
         </div>`;
        console.log(a)
</script>
//也可以在模板中动态插入值
<script>
        const person = {
            name: "Jack",
            age: 12,
            language: ['java', 'css', 'js']
        }
        const { name, age, language } = person;

        function say() {
            return "我在学习ES6的新特性呢!!!";
        }

        let info = `我是${name},今年${age+10}岁,我想说 :${say()}`;
        console.log(info);
</script>

特性五 :函数优化

函数的默认值

 <script>
        // 直接给参数传上默认值,没传就会自动使用默认值
        function add(a,b=1) {
            return a+b;
        }
        console.log(add(20));// 结果是21
</script>

不定参数

不定参数用来表示不确定参数的个数,形如 :…变量名,由… 加上一个具名参数标识符组成。具名参数只能放在参

数列表的最后,并且有且只有一个不定参数。

<script>
        function fun(...values) {
            console.log(values.length);
        }
        fun(1,2);  // 2
        fun(1,2,3); // 3
</script>

箭头函数

只有一个参数时

<script>
    // 以前的方式
    // var print = function(obj) {
    //     console.log(obj);
    // }

    // 简化
    // 创建一个 只有一个参数,参数为 obj 的函数,函数中只有一条代码
    var print = obj=>console.log(obj);
    print("hello");
</script>
控制台就会打印 hello 

多个参数时候 :参数用括号括起来

<script>
    // 以前的方式
    // var print = function(a,b) {
    //    return a+b;
    // }

    // 简化,不需要写return 默认是返回
    var print = (a,b)=>a+b;
    console.log( print(1,2));
</script>

多条语句的时候 :语句用花括号括住

<script>
        // 以前的方式
        // var print = function(a,b) {
        //    c=a+b;
        //    return a+c;
        // }

        // 简化
       var print = (a,b)=>{
            c=a+b;
            return a+c;
       }
        console.log( print(1,2));
</script>

特性六

新增 API

keys(obj) : 获取对象所有的 key 
values(obj) : 获取对象所有的 value
entries(obj) : 获取对象所有的 key 和 value 形成的二维数组
<script>
    const person = {
        name : "jack",
        age : 13,
        language : ['java','css','javascript']
    }
    console.log(Object.keys(person)); //所有的键
    console.log(Object.values(person)); //所有的值
    console.log(Object.entries(person)); //所有的键和值形成的二维数组
</script>

在这里插入图片描述

合并对象

assign 复制

<script>
        const target = {a:1};
        const source1 = {b:2};
        const source2 = {c:3};
        // 将三个合并
        // object.assign 方法的第一个参数是目标对象,后两个参数都是源对象
        Object.assign(target,source1,source2);
        console.log(target)
</script>

在这里插入图片描述

对象扩展运算符

<script>
        let a = {a:1};
        let b = {b:2};
        let c = {c:3,...a,...b};
        console.log(c);
</script>

在这里插入图片描述

声明对象的简写方式

<script>
        const name = 'jack';
        const age = 12;
        //以前声明对象方式
        const person = {name:name,age:age};
        // 当键和值的名称一致时,可以简写为 :
        const person1 = {name,age};
        console.log(person);
        console.log(person1);
</script>

在这里插入图片描述

对象的函数属性简写

<script>
        const person = {
            name : 'jack',
            // 以前的写法
            eat : function(food){
                console.log(this.name+"在吃"+food);
            },
            // 箭头函数,不能使用 this 去调用对象属性,必须使用 person 对象调用属性
            eat1 : food => console.log(person.name+"在吃"+food),
            // 简写
            eat2(food){
                console.log(this.name+"在吃"+food);
            }
        }
        person.eat("苹果");
        person.eat1("香蕉");
        person.eat2("葡萄");
</script>

在这里插入图片描述

map 和 reduce 方法

map

map方法:接收一个函数,将原数组中的所有元素用这个函数处理后放入新的数组中

<script>
    let arr = ['1','2','3'];
    arr = arr.map(item => item*2);
    console.log(arr);
</script>

在这里插入图片描述

reduce

reduce 方法 :为数组中的每个元素执行回调函数,不包括数组中被删除或从未被赋值的元素。

<script>
    let arr = [1,2,3];
    // 没有初始值
    let result = arr.reduce((a,b)=>{
        console.log("上次调用回调返回的值: ",a)
        console.log("正在处理的值 : "+b)
        return a+b;
    });
    // 有初始值
    // let result = arr.reduce((a,b)=>{
    //     console.log("上次调用回调返回的值: ",a)
    //     console.log("正在处理的值 : "+b)
    //     return a+b;
    // },100);
    /**
         * 参数 :共四个
         * 1、previousValue :上次调用回调返回的值,或者是提供的初始值
         * 2、currentValue :数组中正在处理的元素
         * 3、index :当前元素的下标索引
         * 4、array :调用 reduce 的回调
         */
	console.log(result);
</script>

在这里插入图片描述

模块化

模块化 就是把代码进行拆分,方便反复使用。类似于 java 中的 导包 :要使用一个包,就得先导包 ;

模块功能主要是由两个命令构成 : export 和 import

export :命令用于规定模块的对外接口

import :命令用于导入其他模块提供的功能

export

export 不仅仅可以导出对象,一切 js 变量都可以导出,比如 :基本类型变量、函数、数组、对象

定义一个 hello.js 文件,里面有个对象,并导出

const utils = {
    sum(a,b){
        return a+b;
    }
}
// 使用 export 导出对象
export {utils};

定义一个 user.js 文件,并将变量导出

const name = 'jack';
const age = 21;
export {name,age};

导出也可以简写为 :

export let name = 'jack';

import

创建一个 main.js 文件去导入这些文件。

import {utils} from "./user.js";
import {name,age} from "./hello.js";

console.log(utils.sum(1,2))
console.log(name);
console.log(age);

由于我们这个是 ES6 的语法,所以我们目前不能测试。。。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-09-24 20:47:38  更:2022-09-24 20:52:54 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 9:42:44-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码