ES6新特性语法总结

已于 2022-03-28 00:27:17 修改
阅读量1.8k 收藏 5
点赞数
文章标签： javascript es6 ajax jquery
于 2022-03-28 00:24:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43830765/article/details/123734943
版权

1.let,const,var的区别：

（1）var 声明的变量不受作用域的限制，而let声明的变量则有严格的作用域
在代码块中声明两个变量a,b，在代码块外访问

 		 {
            var a=1;
            let b=2;
         }
        console.log(a);
        console.log(b);

结果：var声明的变量可以访问，而let声明的变量会报错
在这里插入图片描述
(2) var可以重复多次声明用一个变量，而let只能声明一次，否则编译报错

		var m=1;
        var m=2;
        let n=1;
        let n=2;

结果：let会编译报错
在这里插入图片描述
（3）var 会变量提升，let不存在变量提升
分别在var 与let声明变量之前访问该变量

		console.log(m);
        var m=1;
        console.log(n);
        let n=2;

结果：var 可以正常访问，let则提示变量未定义
在这里插入图片描述
（4）const声明的变量为只读，不允许修改

  const a=1;
        a=3;

结果：控制台报错
在这里插入图片描述

2.解构表达式

（1）数组解构

    let arr =[1,2,3];
       let a = arr[0];
       let b = arr[1];
       let c = arr[2];
       console.log("原来的写法："+a,b,c);
    /
       let [a1,b1,c1]=arr
       console.log("解构表达式:"+a1,b1,c1);

结果：
在这里插入图片描述
(2) 对象解构

  const person={
         name :"tom",
         age :18,
         hobby:["java","python"]
     } 
     // 原来的写法
    //  const name = person.name;
    //  const age = person.age;
    //  const hobby = person.hobby;
     //解构表达式写法
     const {name,age,hobby}= person
     console.log(name,age,hobby);

结果：
在这里插入图片描述
解构表达式取对象属性时，更改属性变量名：


     const person={
         name :"tom",
         age :18,
         hobby:["java","python"]
     } 
     //解构表达式更改属性变量名写法
     const {name:xingming,age:nianling,hobby:aihao}= person
     console.log(xingming,nianling,aihao);

结果：
在这里插入图片描述

3.字符串扩展功能

（1）字符串扩展api

		const str ="hello.vue";
		// 返回boolean类型，表示是否找找到参数字符串
        console.log(str.includes("e")); 
        console.log(str.includes("hello"));
        console.log(str.includes("nihao"));
        // 返回boolean类型，表示源字符串是否以参数字符串为开头
        console.log(str.startsWith("hello"));
        console.log(str.startsWith("apple"));
        // 返回boolean类型，表示源字符串是否以参数字符串为结束
        console.log(str.endsWith(".vue"));
        console.log(str.endsWith(".java"));

结果：
在这里插入图片描述
（2）字符串模板

		// 原始定义方式
  		const str = "<div> <span> hello </span> </div>";
  		// 模板字符串定义方式(保留了结构)
        const s = `
                    <div>
                        <span>
                            hello
                        </span>
                    </div>
                  `
        console.log(str);
        console.log(s);

结果:
在这里插入图片描述
(3) 字符串中插入变量和表达式

		// 字符串中插入变量
 	    const name = "tom";
        const age =18;
        const info = `我是${name},今年${age}岁`;
        console.log(info);

结果:
在这里插入图片描述

		// 字符串中插入表达式
		const name = "tom";
        const age =18;
        const info = `我是${name+"父亲"},今年${age+24}岁`;
        console.log(info);

结果:
在这里插入图片描述

		// 字符串中引用方法
		const name = "tom";
        const age =18;
        function say(){
            return "tom很优秀";
        }
        const info = `我是${name+"父亲"},
        今年${age+24}岁，我想说：${say()}`;
        console.log(info);

结果:
在这里插入图片描述

4.函数优化

(1) 函数参数可设置默认值

  		function add(a,b){
            // 若b没有传值的话，b的默认值为1
            b=b || 1;
            return a+b;
        }
        // ES6可以在函数定义的时候，给函数设置一个默认值
        // 若b没有传值的话，b的默认值为1
        function add2(a,b=1){
            return a+b;
        }
        console.log(add(10));
        console.log(add2(10));

结果:
在这里插入图片描述
(2) 不定参数

  		function f(...values){
            console.log("参数列表长度："+values.length);
        }
        f(1,2,3);
        f(1,2,3,4,5,6);

结果:
在这里插入图片描述
(3) 箭头函数
箭头函数简化函数定义

 		// ES6之前函数的定义方式
        // 多参函数
        let m = function (a,b){
            console.log(a,b);
        }
        // 单参函数
        let n= function(a){
            console.log(a);
        }
        // ES6箭头函数的定义方式
        let m1 = (a,b) => console.log(a,b);
        let n1= a=>console.log(a);
        // 调用测试
        m("hello","word");
        n("javascript");
        m1("hello","word");
        n1("javascript");

结果:
在这里插入图片描述
箭头函数取对象属性

    const person = {
            name: "tom",
            age: 18,
            hobby: ["java", "python"]
        }
     // 原始方法
    function hello(person) {
        console.log(person.name);
    }
    // 普通箭头函数
    let hello2 = (person) => console.log(person.name);
    // 解构箭头函数
    let hello3 = ({
        name
    }) => console.log(name);
    hello(person);
    hello2(person);
    hello3(person);

结果：注意第三种解构对象的写法，可以直接写属性
在这里插入图片描述

5.对象优化

ES6为对象提供了一些新的API
（1）对象转换成key,value形式

	const person = {
        name: "tom",
        age: 18,
        hobby: ["java", "python"]
    }
    // 获取对象全部key
    console.log(Object.keys(person));
    // 获取对象全部value
    console.log(Object.values(person));
    // 获取对象全部key,value
    console.log(Object.entries(person));

结果:
在这里插入图片描述
(2) 对象属性合并

	const person = {
        name: "tom",
        age: 18,
        hobby: ["java", "python"]
    }

    const info = {
        job: "engineer",
        salary: "18k",
        detail: ["dev", "test"]
    }
    // 合并person对象与info对象的属性
    Object.assign(person, info);
    console.log(person);

结果:
在这里插入图片描述
(3) 声明对象简写

   const name = "jack";
    age = 15;
   // ES6之前声明对象的方式
    const person1 = {
        name: name,
        age: age
    }
    // ES6后属性名与变量名相同时可以简写
    const person2 = {
        name,
        age
    }
    console.log(person1);
    console.log(person2);

结果:
在这里插入图片描述
(4) 对象内箭头函数声明方法注意事项

 const person = {
        name: "tom",
        age: 18,
        hobby: ["java", "python"],
        // 对象中声明方法普通方式
        eat: function(food) {
            console.log(`${this.name}吃${food}`)
        },
        // 对象中用箭头函数声明方法,使用this.属性，无法获取对象属性
        eat2: (food) => console.log(`${this.name}吃${food}`),
        // 对象中用箭头函数声明方法,应该用对象名.属性来获取对象
        eat3: (food) => console.log(`${person.name}吃${food}`)
    }
    person.eat("苹果");
    person.eat2("香蕉");
    person.eat3("香蕉");

结果:
在这里插入图片描述
(5) 对象深拷贝与属性合并

 	const name = {
        name: "jack"
    };
    const age = {
        age: 18
    };
    // 属性合并
    const person = {
            ...name,
            ...age
        }
        // 对象深拷贝
    const person2 = {
            ...person
        }
        // 原对象已经存在name属性的时候,
        // 进行深拷贝后会覆盖原来的属性值
    let person3 = {
        name: "张三"
    }
    person3 = {
        ...name,
        ...age
    }
    console.log(person);
    console.log(person2);
    console.log(person3);

结果:
在这里插入图片描述

6.Map()与reduce()的用法

(1)map()用法，类似于java的lamda表达式处理数组对象

	//将arr数组中的全部元素都乘2，并返回处理后的数组
	const arr = [1, 20, 13, -10, 3];
    const arr2 = arr.map(item => item * 2);
    console.log(arr2);

(2)reduce()用法，为数组每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素
arr.reduce(callback,[initialValue])
callback 上一次调用后返回的值
initialValue 从该初始值开始依次执行回调，如果不设置该初始值，则从数组中的第一个元素开始依次执行回调

    const arr = [1, 20, 13, -10, 3];
    arr.reduce((a, b) => {
            console.log("当前要处理的元素", b);
            console.log("上次回调后的元素", a);
            return a + b;
        })

结果:
在这里插入图片描述
(3)reduce()函数赋初始值

   const arr = [1, 20, 13, -10, 3];
    arr.reduce((a, b) => {
            console.log("当前要处理的元素", b);
            console.log("上次回调后的元素", a);
            return a + b;
        }, 100)

结果:
在这里插入图片描述

7.promise then异步编排

使用异步调用方式来依次获取用户信息，课程信息，分数信息，后两次请求均依赖上次请求的结果。这里用三个json文件来模拟请求过程：
在这里插入图片描述

// 原始ajax异步请求写法
    // 模拟一个异步查询的流程：
    // 1. 获取当前用户信息
    // 2. 根据用户信息查询课程信息
    // 3. 根据课程信息查询课程分数
    $.ajax({
            url: `./student_${10}.json`,
            success(data) {
                console.log("查询文件", data);
                $.ajax({
                    url: `./course_${data.id}.json`,
                    success(data) {
                        console.log("查询文件", data);
                        $.ajax({
                            url: `./score_${data.id}.json`,
                            success(data) {
                                console.log("查询文件", data);
                            },
                            error() {}
                        })
                    },
                    error() {}
                })
            },
            error() {}
        })

结果:
在这里插入图片描述

使用promise then异步编排:

// 使用promise,then进行异步编排操作,优化了嵌套写法，代码更直观，类似于java的责任链模式
    // 将每次异步请求后回调的结果封装成一个promise对象来管理
    // 其中resolve参数为执行成功后的回调函数，reject为执行失败后的回调函数
    // 使用then()函数，来编排异步调用的顺序
    let p1 = new Promise((resolve, reject) => {
        $.ajax({
            url: `./student_${10}.json`,
            success(data) {
                console.log("查询文件", data);
                resolve(data);
            },
            error(err) {
                reject(err);
            }
        })
    })

    let p2 = p1.then((data) => {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: `./course_${data.id}.json`,
                success(data) {
                    console.log("查询文件", data);
                    resolve(data);
                },
                error(err) {
                    reject(err);
                }
            })
        })
    })

    let p3 = p2.then((data) => {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: `./score_${data.id}.json`,
                success(data) {
                    console.log("查询文件", data);
                    resolve(data);
                },
                error(err) {
                    reject(err);
                }
            })
        })
    })

结果:
在这里插入图片描述

8.模块化使用

模块化就是将代码拆分，方便功能上的复用，类似于java中的import导包。
js中没有导包的概念，它的处理方式是模块化。
导出几个方法和对象:
在这里插入图片描述
add.js：

// 直接导出方法
export const add = (a, b) => retun(a + b)

hello.js

// 默认导出一个匿名对象，可在导入该模块的时候，随意命名该对象
export default {
    msg: "hello"
}

export const substrat = (a, b) => {
    return a - b;
}

person.js

// 导出对象和一些变量
const name = "tom";
const age = 16;
const person = {
        name,
        age
    }
    // 导出多个
export { name, age, person }

在main.js中导入模块，来使用:

// 导入方法
import { add } from "./add.js";
// 多模块导入
import { name, age, person } from "./person.js";
// 匿名对象导入,可以随意命名
import { abc } from "./hello.js";

let sum = add(1, 2);
console.log(sum);
console.log(person)
console.log(name);
console.log(age);
console.log(abc);
王钧石的技术博客
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
ES6 入门基础语法总结
04-05
es6 基础语法总结。包括let与const 、 箭头函数 、 Promise 、数据类型、类、解构赋值等等。
ES6新特性七：数组的扩充详解
08-30
主要介绍了ES6新特性之数组的扩充,结合实例形式分析了ES6数组操作的常见方法与相关使用技巧,需要的朋友可以参考下
ES6新特性
01-27
Tags:javascript [TOC]使用var带来的麻烦:  运行getClothing(false)后输出的是undefined,这是因为执行function函数之前,所有变量都会被提升, 提升到函数作用域顶部.let与const声明的变量解决了这种问题,因为他们是块级作用域,
ES6中新增的一些有用的语法
ch246018的博客
04-19 293
ES6是JavaScript中非常重要的一个版本，对于JavaScript的功能有极大的丰富。让JavaScript从一个弱类型的语言上升到了半强类型语言。 ES6中新增了两个对变量的定义 let const ， let和const不会进行预解析。{ }里定义的变量在括号外不能调用(指的是if，switch，for，which,for…in，forEach,function)。同一个作用域内定义的...
js es6（邢增）
qq_45827064的博客
05-13 131
块级作用域 let const 解析赋值 箭头函数 剩余参数 数组方法 模板字符串 字符串方法a set数据结构 块级作用域 现会议一下？ 函数作用域 全局作用域 性的 块级作用域{} 被{}抱起来的作用域 有监狱作用 我是我 别人不是我 别人进不来 有我的地方的其他变量自动解析成我的同胞特性（不会访问函数作用域外面的变量） 没有上下文提权 就向一个性的空间（您经不来，我也出不去，我的同胞也出不去 ） let声明语句 具备块级作用域的特性 是一个let声明语句 <script t.
ES6语法新特性
dyk
07-29 1004
ES6语法新特性为什么要学习 ES6let 关键字不允许重复声明块儿级作用域（局部变量）：不存在变量提升：不影响作用域链：let案例：点击div更改颜色应用场景const 关键字声明必须赋初始值：不允许重复声明：值不允许修改：块儿级作用域（局部变量）：应用场景：变量和对象的解构赋值应用场景：模板字符串应用场景：简化对象和函数写法 为什么要学习 ES6 ES6 的版本变动内容最多，具有里程碑意义； ES6 加入许多新的语法特性，编程实现更简单、高效； ES6 是前端发展趋势，就业必备技能； let 关键字
ES6 语法新特性
Dj19983160703的博客
04-03 267
1 symbol数据类型 //新数据类型。 生成一个独一无二的值 var str = Symbol(); var str2 = Symbol(); console.log(str == str2); //false var str3 = Symbol(2); var str4 = Symbol(2); console.log(str3 == st...
es6新语法及特性
热门推荐
weixin_62650212的博客
03-19 1万+
在现代前端开发中，JavaScript 已经成为了必不可少的一部分，而 ES6（ECMAScript 2015）则为 JavaScript 带来了一系列的新语法和特性，使得 JavaScript 更加现代化、高效和易用。作为开发者，掌握 ES6 是必不可少的，因为它可以提高我们的开发效率，减少代码冗余，并提高代码的可读性和可维护性。在本篇博文中，我们将介绍 ES6 中一些重要的新语法和特性，帮助读者更好地掌握这一新的 JavaScript 版本。
ES6新语法特性
qq_44757642的博客
05-17 286
1、ES的全称ECMAScript,它是由ECMA国际标准组织制定的一项脚本语言的标准化规范。规定脚本语言如何实现。 ES6有两层含义 - 特指ECMAScript2015 - 泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES2018，ES2019...但可统称为ES6。 ES6与javascript的关系：ECMAScript是一种语言标准，Javascript实现了这个标准（还有JScript和ActionScript也实现这个标准）。 2、为什...
ES6新特性一： let和const命令详解
08-30
主要介绍了ES6新特性中的let和const命令,结合实例形式分析了let和const命令的功能、使用方法与相关注意事项,需要的朋友可以参考下
三ES6新特性.pdf
07-13
三ES6新特性.pdf
ES6新增常用特性及详解
ChinaW_804的博客
11-10 684
ECMAScript 6(ES6) 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。 JavaScript发展的时间轴： 1、1995：JavaScript诞生，它的初始名叫LiveScript。 2、1997：ECMAScript标准确立。 3、1999：ES3出现，与此同时IE5风靡一时。 4、2000–2005： XMLHttpRequest又名AJAX。 5、
总结常见的ES6新语法特性
weixin_30276935的博客
05-11 301
前言 ES6是即将到来的新版本JavaScript语言的标准，他给我们带来了更“甜”的语法糖（一种语法，使得语言更容易理解和更具有可读性，也让我们编写代码更加简单快捷），如箭头函数（=>）、class等等。用一句话来说就是： ES6给我们提供了许多的新语法和代码特性来提高javascript的体验 不过遗憾的是，现在还没有浏览器能够很好的支持es6语法，点这里查看浏览器支持情况...
ES6新特性(超详细)
xiaoliao96530的博客
03-18 9004
ES6是每个前端工作人员绕不开的知识点，因此需要好好学习，本文内容是我购买莫振杰的《从0到1ES6快速上手》所做的笔记，内容已经获得作者的同意，另外推荐新手一个学习网站，绿叶学习网 - 给你初恋般的感觉，站长写的很好，适合新手从0到1，加油，一起成为优秀的前端开发者！！ （由于还没看完整本书，该内容会持续更新）
（JS six）ES6新特性以及运用
weixin_53412458的博客
12-26 625
ES6
ES6新特性语法
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
07-29 295
ES6新特性语法。
es6语法入门整理
Yangliwei的博客
12-14 517
hello-es6 ES6 各种新语法 入门了解 hello-es6 1.ES6怎么来的 2.ES6兼容性 3.变量 let 和 常量 const 4.函数-箭头函数 5.函数-参数 6.解构赋值 7.数组 8.字符串 9.面向对象-基础 10.面向对象应用 11.json 12.Promise 13.generator-认识生成器函数 14.generator-yield是啥 15.gen...
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 132
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
JavaScripts6语法
08-23
JavaScript的ES6语法是指ECMAScript 2015标准引入的新语法特性。ES6引入了许多新的语法和功能，以帮助开发者更高效地编写JavaScript代码。 其中一些ES6语法特性包括： 1. 箭头函数: 使用箭头（=>）来定义函数，简化...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王钧石的技术博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值