nodejs学习--02

最新推荐文章于 2023-05-20 11:15:09 发布

骑着小黑马

最新推荐文章于 2023-05-20 11:15:09 发布

阅读量204

点赞数

分类专栏： web前端 JavaScript

本文链接：https://blog.csdn.net/weixin_43661315/article/details/90213460

版权

web前端同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

JavaScript

34 篇文章 0 订阅

订阅专栏

ECMAScript 6 介绍

ECMAScript 6 又叫 ES2015，简称 ES6
ES6 是继 ES4、ES5 之后的 JS 语言规范
ES6 中增加了一些新的特性
ES6 的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言
2015年6月发布
ES6 是新的 JS 的代码规范，提供了一些新特性，使我们可以开发大型应用
ES6 弥补了 JS 语言本身的缺陷，增加了新语法，扩展了内置对象

ECMAScript 6 新增语法

let 和 const
解构赋值
函数
字符串扩展
数组扩展
新的定义对象的方式

let 和 const

let
- let 定义变量，变量不可以再次定义，但可以改变其值
- 具有块级作用域
- 没有变量提升，必须先定义再使用
- let声明的变量不会压到window对象中，是独立的

// 1. let 定义变量，变量不可以再次定义，但可以改变其值
let name = 'zhangsan';
name = 'lisi';
console.log(name); // lisi
let name = 'wangwu'; // 再次定义，报错：Identifier 'name' has already been declared
// 2. 具有块级作用域，块就是大括号
{
    let age = 18;
    console.log(age); // 18
}
console.log(age); // 报错，此作用域中没有age的定义

for (let i = 0; i < 10; i++) {
    // i 只能在此范围内使用，因为有块级作用域
}
console.log(i);  // 报错，此作用域中没有age的定义
// 3. 没有变量提升，必须先定义再使用
console.log(gender); // 报错，此时还没有定义gender
let gender = '男'; 
// 4. let声明的变量不会压到window对象中，是独立的
let hobby = '吃饭';
console.log(window.hobby); // undefined

const
- 使用const关键字定义常量
- 常量是不可变的，一旦定义，则不能修改其值
- 初始化常量时，必须给初始值
- 具有块级作用域
- 没有变量提升，必须先定义再使用
- 常量也是独立的，定义后不会压入到window对象中

// 1. 使用const关键字定义常量，常量名一般大写
const PI = 3.1415926;
// 2. 常量是不可变的，一旦定义，则不能修改其值
const PI = 3.1415926；
PI = 3.14; // 报错，常用一旦被初始化，则不能被修改
// 3. 初始化常量时，必须给初始值
const PI; // 报错，Missing initializer in const declaration

关键字	变量提升	块级作用域	初始值	更改值	通过window调用
let	×	√	-	Yes	No
const	×	√	Yes	No	No
var	√	×	-	Yes	Yes

解构赋值

ES 6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
数组的解构
方便获取数组中的某些项

// 情况1，变量和值一一对应
let arr = [5, 9, 10];
let [a, b, c] = arr;
console.log(a, b, c); // 输出 5 9 10
// 情况2，变量多，值少
let arr = [5, 9, 10];
let [a, b, c, d] = arr;
console.log(a, b, c, d); // 输出 5 9 10 undefined
// 情况3，变量少，值多
let arr = [5, 9, 10, 8, 3, 2];
let [a, b] = arr;
console.log(a, b); // 5, 9
// 情况4，按需取值
let arr = [5, 9, 10, 8, 3, 2];
let [, , a, , b] = arr; // 不需要用变量接收的值，用空位占位
console.log(a, b); // 10, 3 
// 情况5，剩余值
let arr = [5, 9, 10, 8, 3, 2];
let [a, b, ...c] = arr; // ...c 接收剩余的其他值，得到的c是一个数组
console.log(a, b, c); 
// 结果：
// a = 5, 
// b = 9, 
// c = [10, 8, 3, 2]
// 情况6，复杂的情况，只要符合模式，即可解构
let arr = ['zhangsan', 18, ['175cm', '65kg']];
let [, , [a, b]] = arr;
console.log(a, b); // 175cm 65kg

对象的解构
方便解析对象中的某些属性的值

 // 情况1，默认要求变量名和属性名一样
let { foo, bar } = {foo: 'aaa', bar: 'bbb'};
console.log(foo, bar); // aaa, bbb

let {a, c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, undefined
// 情况2，可以通过:为变量改名
let {a, b:c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, world
// 情况3，变量名和属性名一致即可获取到值，不一定要一一对应
let {b} = {a: 'hello', b: 'world'};
console.log(b); // world
// 此时，没有定义变量a，所以使用a会报错
// 情况4，剩余值
let obj = {name:'zs', age:20, gender:'男'};
let {name, ...a} = obj;
console.log(name, a);
// 结果：
// name = zs
// a = {age: 20, gender: "男"};
// 情况5，复杂的情况，只有符合模式，即可解构
let obj = {
    name: 'zhangsan',
    age: 22,
    dog: {
        name: '毛毛',
        age: 3
    }
};
let {dog: {name, age}} = obj;
console.log(name, age); // 毛毛 3

箭头函数
ES6 中允许使用箭头定义函数 (=> goes to)，目的是简化函数的定义并且里面的this也比较特殊。

箭头函数的基本定义

// 非箭头函数
let fn = function (x) {
    return x * 2;
}
// 箭头函数，等同于上面的函数
let fn = (x) => {
    return x * 2;
}

箭头函数的特点
- 形参只有一个，可以省略小括号

let fn = (x) => {
    return x * 2;
}
// 等同于
let fn = x => {
    return x * 2;
}

函数体只有一句话，可以省略大括号，并且表示返回函数体的内容

let fn = (x, y) => {
    return x + y;
}
// 等同于
let fn = (x, y) => x + y;

箭头函数内部没有 arguments

let fn = () => {
    console.log(arguments); // 报错，arguments is not defined
};
fn(1, 2);

箭头函数内部的 this 指向外部作用域中的 this ，或者可以认为箭头函数没有自己的 this

var name = 'lisi'; // 测试时，这里必须用var，因为用let声明的变量不能使用window调用
let obj = {
    name: 'zhangsan',
    fn : () => {
        console.log(this); // window对象
        console.log(this.name); // lisi
    }
};
obj.fn();

箭头函数不能作为构造函数

let Person = () => {
	
};
let obj = new Person(); // 报错，Person is not a constructor
// 换个角度理解，箭头函数中都没有自己的this，怎么处理成员，所以不能当构造函数

参数的默认值
ES6 之前函数不能设置参数的默认值

// ES5 中给参数设置默认值的变通做法
function fn(x, y) {
    y = y || 'world';
    console.log(x, y);
}
fn(1)
// ES6 中给函数设置默认值
function fn(x, y = 'world') {
    console.log(x, y);
}
fn(2)
fn(2,3)

rest 参数
rest 参数：剩余参数，以 … 修饰最后一个参数，把多余的参数都放到一个数组中。可以替代 arguments 的使用

// 参数很多，不确定多少个，可以使用剩余参数
function fn(...values) {
    console.log(values); // [6, 1, 100, 9, 10]
}
// 调用
console.log(fn(6, 1, 100, 9, 10));
function fn(a, b, ...values) {
    console.log(a); // 6
    console.log(b); // 1
    console.log(values); // [100, 9, 10]
}
// 调用
console.log(fn(6, 1, 100, 9, 10));

注意：rest 参数只能是最后一个参数

Array 的扩展

扩展运算符

// 合并两个数组
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4]

// 把数组展开作为参数，可以替代 apply
// 求数组的最大值
let arr = [6, 99, 10, 1];
let max = Math.max(...arr); // 等同于 Math.max(6, 99, 10, 1);

Array.from()

把伪数组转换成数组
伪数组必须有length属性，没有length将得到一个空数组
转换后的数组长度，是根据伪数组的length决定的

let fakeArr = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

let arr = Array.from(fakeArr);
console.log(arr); // ['a', 'b', 'c']

// 转数组的对象必须有length值，因为得到的数组的成员个数是length指定的个数
// 上例中，如果length为2，则得到的数组为 ['a', 'b']

数组实例的 find() 和 findIndex()
- find和findIndex方法，会遍历传递进来的数组
- 回调函数有三个参数，分别表示数组的值、索引及整个数组
- 回调函数中return的是一个条件，find和findIndex方法的返回值就是满足这个条件的第一个元素或索引
- find 找到数组中第一个满足条件的成员并返回该成员，如果找不到返回undefined。
- findIndex 找到数组中第一个满足条件的成员并返回该成员的索引，如果找不到返回 -1。

// 语法结构
let arr = [1, 2, 4, 0, -4, 3, -2, 9];
arr.find(function (item, index, self) {
    console.log(item); // 数组中的每个值
    console.log(index); // 数组中的每个索引/下标
    console.log(self); // 当前的数组
});
// 用法：找数组中第一个小于0的数字
let arr = [1, 2, 4, 0, -4, 3, -2, 9];
let result = arr.find(function (item) {
    return item < 0; //遍历过程中，根据这个条件去查找
});
console.log(result); // -4

findIndex 的使用和 find 类似，只不过它查找的不是值，而是下标

数组实例的 includes()

判断数组是否包含某个值，返回 true / false
参数1，必须，表示查找的内容
参数2，可选，表示开始查找的位置，0表示开头的位置

let arr = [1, 4, 3, 9];
console.log(arr.includes(4)); // true
console.log(arr.includes(4, 2)); // false， 从2的位置开始查，所以没有找到4
console.log(arr.includes(5)); // false

String的扩展

模板字符串
- 模板字符串解决了字符串拼接不便的问题
- 模板字符串使用反引号 ` 括起来内容
- 模板字符串中的内容可以换行
- 变量在模板字符串中使用 ${name} 来表示，不用加 + 符号

let name = 'zs';
let age = 18;
// 拼接多个变量，在模板字符串中使用占位的方式，更易懂
let str = `我是${name}，今年${age}`;

// 内容过多可以直接换行
let obj = {name: 'zhangsan', age: 20};
let arr = ['175cm', '70kg'];
let html = `
	<div>
		<ul>
			<li>${obj.name}</li>
			<li>${obj.age}</li>
			<li>${arr[0]}</li>
			<li>${arr[1]}</li>
		</ul>
	</div>
`;

includes(), startsWith(), endsWith()
- includes(str, [position]) 返回布尔值，表示是否找到了参数字符串
- startsWith(str, [position]) 返回布尔值，表示参数字符串是否在原字符串的头部或指定位置
- endsWith(str, [position]) 返回布尔值，表示参数字符串是否在原字符串的尾部或指定位置。

console.log('hello world'.includes('e', 2)); // false 从位置2开始查找e，没有找到
console.log('hello world'.includes('e')); // true

console.log('hello world'.startsWith('h')); // 未指定位置，看开头是否是h，返回true
console.log('hello world'.startsWith('l', 2)); // 指定位置的字符是l，返回true

console.log('hello world'.endsWith('d')); // 未指定位置，结尾是d，返回true
console.log('hello world'.endsWith('r', 9)); // 指定位置的字符是r，返回true

Number的扩展
ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

Number.parseInt()
Number.parseFloat()

Set
Set 是 ES6 中新增的内置对象，类似于数组，但是成员的值都是唯一的，没有重复的值(可以实现数组去重)。

// Set 可以通过一个数组初始化
let set = new Set([1, 2, 1, 5, 1, 6]);
console.log(set); //Set(4) {1, 2, 5, 6}
// 数组去重
let arr = [...set]; // 方式一
console.log(Array.from(set)); // from是将伪数组变为数组;方式二
console.log(arr); // [1, 2, 5, 6]

Set 的成员
- size：属性，获取 set 中成员的个数，相当于数组中的 length
- add(value)：添加某个值，返回 Set 结构本身。
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
- has(value)：返回一个布尔值，表示该值是否为Set的成员。
- clear()：清除所有成员，没有返回值。

定义对象的简洁方式

let name = 'zhangsan', age = 20, gender = '女';
let obj = {
    name: name, // 原来的写法
    age, // 对象属性和变量名相同，可以省略后面的 “:age”，下面的gender同理
    gender,
    fn1: () => {  // 常规的箭头函数写法
        console.log(123);
    },
    fn2 () { // 可以省略 “:” 和 “=>”
        console.log(456);
    }
};
console.log(obj.age); // 20
obj.fn2(); // 456

骑着小黑马

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
nodejs学习--02

ECMAScript 6 介绍ECMAScript 6 又叫 ES2015，简称 ES6ES6 是继 ES4、ES5 之后的 JS 语言规范ES6 中增加了一些新的特性ES6 的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言2015年6月发布ES6 是新的 JS 的代码规范，提供了一些新特性，使我们可以开发大型应用ES6 弥补了 JS 语...
复制链接

扫一扫