ES6新语法知识

已于 2022-03-12 22:58:45 修改
阅读量1.3k 收藏 1
点赞数
分类专栏： 前端相关技术 文章标签： 前端 ecmascript javascript
于 2022-03-12 22:57:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/onetwo_wuyuecai/article/details/123447160
版权

ES6语法新特性

ECMAScript是js语言的标准，js是该标准的一个实现。就好像JDBC是JAVA连接数据库的标准，MySQL驱动 Oracle驱动等是实现；USB接口是标准，电脑上具体的usb接口是实现。

let var const声明变量的区别

  • let 声明变量有作用域，var 声明变量没有作用域
  • let 只能声明一次变量（声明包括赋值），var 可以声明多次变量，最后的变量生效
  • let 不可以变量提升，没有声明前不可以使用。var 可以变量提升，没有声明前，是undefined。
  • const 声明的变量是常量，且声明时必须赋初始值。只读常量

// var 声明的变量往往会越域
// let 声明的变量有严格局部作用域
{
var a = 1;
let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined
// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
// let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared
// var 会变量提升
// let 不存在变量提升
console.log(x); // undefined
var x = 10;
console.log(y); //ReferenceError: y is not defined
let y = 20;

// 1. 声明之后不允许改变
// 2. 一但声明必须初始化，否则会报错
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.

解构表达式

  • 数组解构（将数组中元素一次赋值给变量，不需要使用下标获取数据）

let arr = [1,2,3];
//以前我们想获取其中的值，只能通过角标。ES6 可以这样：
const [x,y,z] = arr;// x，y，z 将与 arr 中的每个位置对应来取值
// 然后打印
console.log(x,y,z);

  • 对象解构

const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
// 解构表达式获取值，将 person 里面每一个属性和左边对应赋值
const { name, age, language } = person;
// 等价于下面
// const name = person.name;
// const age = person.age;
// const language = person.language;
// 可以分别打印
console.log(name);
console.log(age);
console.log(language);
//扩展：如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名
const { name: nn, age, language } = person;
console.log(nn);
console.log(age);
console.log(language);

字符串扩展

  • ES6 为字符串扩展了几个新的 API：

- `includes()`：返回布尔值，表示是否找到了参数字符串。
- `startsWith()`：返回布尔值，表示参数字符串是否在原字符串的头部。
- `endsWith()`：返回布尔值，表示参数字符串是否在原字符串的尾部。
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

  • 字符串模板（模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式）

// 1、多行字符串
let ss = `
<div>
<span>hello world<span>
</div>
`
console.log(ss)
// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放
入 JavaScript 表达式。
let name = "张三";
let age = 18;
let info = `我是${name}，今年${age}了`;
console.log(info)
// 3、字符串中调用函数
function fun() {
return "这是一个函数"
}
let sss = `O(∩_∩)O 哈哈~，${fun()}`;
console.log(sss); // O(∩_∩)O 哈哈~，这是一个函数

函数优化

  • 函数默认值和不定参数

//在 ES6 以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
function add(a, b) {
// 判断 b 是否为空，为空就给默认值 1
b = b || 1;
return a + b;
}
// 传一个参数
console.log(add(10));
//现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add2(a , b = 1) {
return a + b;
}
// 传一个参数
console.log(add2(10));

不定参数用来表示不确定参数个数，形如，...变量名，由...加上一个具名参数标识符组成。
具名参数只能放在参数列表的最后，并且有且只有一个不定参数
function fun(...values) {
console.log(values.length)
}
fun(1, 2) //2
fun(1, 2, 3, 4) //4

  • 箭头函数（ES6 中定义函数的简写方式）

一个参数时

// var print = function (obj) {
// console.log(obj);
// }
// 可以简写为：
var print = obj => console.log(obj);
// 测试调用
print(100);

多个参数

// 两个参数的情况：
var sum = function (a, b) {
return a + b;
}
// 简写为：
//当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var sum2 = (a, b) => a + b;
//测试调用
console.log(sum2(10, 10));//20
// 代码不止一行，可以用`{}`括起来
var sum3 = (a, b) => {
c = a + b;
return c;
};
//测试调用
console.log(sum3(10, 20));//30

  • 实战：箭头函数结合解构表达式

//需求，声明一个对象，hello 方法需要对象的个别属性
//以前的方式：
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
function hello(person) {
console.log("hello," + person.name)}
//现在的方式
var hello2 = ({ name }) => { console.log("hello," + name) };
//测试 传过去一个对象解构出一个name，然后直接输出name
hello2(person);

对象优化

新增的 AP

ES6 给 Object 拓展了许多新的方法，如：
- keys(obj)：获取对象的所有 key 形成的数组
- values(obj)：获取对象的所有 value 形成的数组
- entries(obj)：获取对象的所有 key 和 value 形成的二维数组。格式：`[[k1,v1],[k2,v2],...]`
- assign(dest, ...src) ：将多个 src 对象的值 拷贝到 dest 中。（第一层为深拷贝，第二层为浅
拷贝）
const 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), Arra
y(2)]
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
//Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。
Object.assign(target, source1, source2);
console.log(target)//{a: 1, b: 2, c: 3}

  • 声明对象简写

const age = 23
const name = "张三"// 传统
const person1 = { age: age, name: name }
console.log(person1)
// ES6：属性名和属性值变量名一样，可以省略
const person2 = { age, name }
console.log(person2) //{age: 23, name: "张三"

  • 对象的函数属性简写

let person = {
name: "jack",
// 以前：
eat: function (food) {
console.log(this.name + "在吃" + food);
},
// 箭头函数版：这里拿不到 this,需要使用对象名
eat2: food => console.log(person.name + "在吃" + food),
// 简写版：
eat3(food) {
console.log(this.name + "在吃" + food);
}
}
person.eat("apple")

  • 对象拓展运算符

拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
// 1、拷贝对象（深拷贝）
let person1 = { name: "Amy", age: 15 }
let someone = { ...person1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age = { age: 15 }
let name = { name: "Amy" }
let person2 = { ...age, ...name } //如果两个对象的字段名重复，后面对象字
段值会覆盖前面对象的字段值
console.log(person2) //{age: 15, name: "Amy"}

map 和 reduce（数组中新增的方法）

  • map

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ['1', '20', '-5', '3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr)

  • reduce

语法：
arr.reduce(callback,[initialValue])
reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元
素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调
用 reduce 的数组。
callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）
initialValue （作为第一次调用 callback 的第一个参数。）
示例：
const arr = [1,20,-5,3];
//没有初始值：
console.log(arr.reduce((a,b)=>a+b));//19
console.log(arr.reduce((a,b)=>a*b));//-300//指定初始值：
console.log(arr.reduce((a,b)=>a+b,1));//20
console.log(arr.reduce((a,b)=>a*b,0));//-0

Promise

在 JavaScript 的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致 JavaScript 的所
有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。一旦有一连
串的 ajax 请求 a,b,c,d... 后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层
层嵌套的方式，非常容易造成上下文代码混乱，我们不得不非常小心翼翼处理内层函数与外
层函数的数据，一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧......总之，这
种`层叠上下文`的层层嵌套方式，着实增加了神经的紧张程度。
案例：用户登录，并展示该用户的各科成绩。在页面发送两次请求：
1. 查询用户，查询成功说明可以登录
2. 查询用户成功，查询科目
3. 根据科目的查询结果，获取去成绩
分析：此时后台应该提供三个接口，一个提供用户查询接口，一个提供科目的接口，一个提
供各科成绩的接口，为了渲染方便，最好响应 json 数据。在这里就不编写后台接口了，而
是提供三个 json 文件，直接提供 json 数据，模拟后台接口：
user.json：
{
"id": 1,
"name": "zhangsan",
"password": "123456"
}
user_corse_1.json:
{
"id": 10,
"name": "chinese"
}
corse_score_10.json:
{
"id": 100,
"score": 90
}

原始请求

 $.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);

            }

        });

使用promise

 let p = new Promise((resolve, reject) => {

            $.ajax({

                url: `mock/user.json`,

                success(data) {

                    console.log("请求学生数据成功" + data)

                    resolve(data)

                },

                error(error) {

                    console.log("请求学生数据失败" + error)

                    reject(error)

                }

            })

            // // 执行异步操作

            // if (true) {

            //     resolve(value); // 调用 resolve，代表 Promise 将返回成功的结果

            // } else {

            //     reject(error); // 调用 reject，代表 Promise 会返回失败结果

            // }

        });

        let b = p.then(({

            id

        }) => {

            return new Promise(() => {

                $.ajax({

                    url: `mock/user_course_${id}.json`,

                    success(data) {

                        console.log("请求课程数据成功" + data)

                        resolve(data)

                    },

                    error(error) {

                        console.log("请求课程数据失败" + error)

                        reject(error)

                    }

                })

            })

        })

        b.then(({

            id

        }) => {

            $.ajax({

                url: `mock/user_score_${id}.json`,

                success(data) {

                    console.log("请求分数数据成功" + data)

                    resolve(data)

                },

                error(error) {

                    console.log("请求分数数据失败" + error)

                    reject(error)

                }

            })

        })

封装之后的promise请求

function get(url, data) {

            return new Promise(() => {

                $.ajax({

                    url: url,

                    data: data,

                    // type:GET,

                    success(data) {

                        console.log("请求分数数据成功" + data)

                        resolve(data)

                    },

                    error(error) {

                        console.log("请求分数数据失败" + error)

                        reject(error)

                    }

                })

            })

        }

        get("mock/user.json").then((data) => {

            console.log("查询用户成功" + data)

            return get(`mock/user_course_${data.id}.json`);

        }).then((data) => {

            console.log("查询课程成功" + data)

            return get(`mock/user_score_${data.id}.json`);

        }).then((data) => {

            console.log("查询分数成功" + data)

        }).catch(() => {

            console.log("查询分数成功")

        })

模块化

将代码进行拆分，方便重复利用。类似于Java中的包的概念，想用某个包则需要导入，想要让其他人用则需要导出。js中的包的概念就是模块。

模块功能主要由两个命令构成：`export`和`import`。

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

导出的两种方式

直接导出，引用时可以随便起名

export default {

    sum(a,b){

        return "你好模块化"

    }

}

导出固定属性、方法，导入时的名称必须保持一致

const util = {

    "name":zhangsan,

    "age":23

}

export{util}

导入

import {util} from "./hell";

import test from "./main"

wuyuecai
关注
专栏目录
es6新语法
qq_43260366的博客
06-06 1042
ES2015(2015年发布的， javascript的第六个版本) 以及后续版本就是统称为ES6；解构赋值语法是一种 Javascript 表达式。通过**解构赋值，**可以将 属性/值 从 对象/数组 中取出，赋值给其他变量； es6-解构赋值 语法 ：let [变量1，变量2，…变量3] = 数组举例说明 利用数组解构赋值交换两个变量的值 非解构-借助第三个变量进行交换 解构 [2]对象 es5-非解构赋值 es6-解构赋值 语法1：
ES6的语法及基础知识
最新发布
wzy199982的博客
09-26 5098
ES6的语法及基础知识、什么是ES6、变量声明、数组和对象的解构、箭头函数、ES6新增的字符串方法、数组新增方法
ES6新语法
tj297202234的专栏
03-30 449
1.变量/赋值 var： 可以重复定义，不能限制修改，没有块级作用域 var a = 1; var a = 2; if (3 < 5) { var a = 12; } console.log(a); let：不能重复定义、变量 const：不能重复定义、常量 解构赋值：左右两边必须一样；右边必须是个合法对象；必须定义和赋值同步完成 2.函数 箭头函数：如果有且仅有一个参数，()可以省，如...
使用 babel.min.js让es6的语法全部编译成es5的
10-05
通过使用 Babel 和其编译库 babel.min.js，开发者可以在项目中放心地采用 ES6 及以上版本的 JavaScript 语法，Babel 将负责将这些新特性转换为广泛兼容的 ES5 代码，确保代码在各种浏览器上都能正确执行。...
ES6语法（知识点汇总二）
carolynkim的博客
08-06 233
一、ES6 1、字符串模板 快速拼接字符串 老方法： es6： 字符串模板 `` 反引号 在模板中变量 ${变量} 2、数据解构 创建一个对象和数组 结构注意点： 3.1 保证左右结构相同 3.2 交换变量时候，定义后要加 ； 3、 ...
ES6新语法之数组新增方法：map，filter，reduce，some和every的用法
weixin_45819386的博客
04-17 4397
随着ES6的到来，我们JavaScript语法中新增了许多的数组方法，今天就来分享一篇关于数组新增方法的知识 1.map（）方法： （1）作用：map（）方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值； map() 不会对空数组进行检测；并且不会改变原始数组。 （2）通过map（）方法 对数组元素进行处理 <script> // 创建一个成绩数组 let grades=[45,67,98,100]; // 我们可以通过map 给每个字符数组+"分" let Gr
Es6新语法
深度
12-18 674
目录 1.变量声明 1.1let 声明的变量是局部变量,只在范围内有效 1.2 const 修饰的变量不能自增 2. 解构表达式 2.1 数组 2.1.1 取出数组的前两位并赋值给两个变量 2.1.2 取出数组的后两位 2.1.3 拷贝一个数组 2.2 对象 2.2.1 把对象中的...
ES6的新语法
weixin_45808386的博客
04-18 810
ES6的一些新语法 ES6语法新增的变量的定义 let 定义变量 let 定义的变量，不会进行预解析 let 不能重复定义变量名称,一个变量名称只能定义一次 定义的变量,如果是定义在 { } 中,只能在 { } 中被执行被调用 let 在不同 { } 中,是不同作用域中定义let 变量 此时,变量的名称与 其他 { } 中的变量名称,或者{ }之外的变量名称,是可以重...
ES6语法大全：新特性和实战指南
ES6语法学习参考资料提供了深入理解和掌握JavaScript ES6新特性的宝贵资源。ES6是JavaScript的第六个主要版本，旨在增强其功能，使其能够适应复杂的企业级应用程序开发。以下是一些关键知识点： 1. **语法概览**： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值