ES6知识点复习

Lyn2693282567

已于 2022-07-20 11:07:35 修改

阅读量222

点赞数

文章标签： es6 javascript 前端

于 2022-07-20 10:50:09 首次发布

本文链接：https://blog.csdn.net/Lyn2693282567/article/details/125887702

版权

es6---------------------------------------------

变量的声明：
var -----es5

let -----es6

let:
1、作用域只限于当前代码块{}
2、let声明的变量作用域不会被提升
3、暂时性死区
4、相同作用域下不能定义相同变量
5、for循环下父子作用域

const:用来声明一个只读的常量

1、声明必须赋值
2、只在当前代码块有效
3、作用域不会被提升
4、不能重复声明

const 定义的常量是一个引用数据类型时，引用数据里面的值发生变化，是可以的，但是地址不能变化。基本数据类型不能更改。***
如：
const obj = {
id: 5,
name: 'zs',
age: 18
};

obj.age++; //不报错，obj存的是地址，地址一直没有变化。地址空间中存储的数据发生变化是可以的。
console.log(obj.age);

函数的扩展-----------------

1、函数参数默认值

function fn(a, b = "hello") {
console.log(a, b);
}

2、rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了

function fn1(a, ...b) {
console.log(a);
// console.log(arguments)
console.log(b); //剩余的参数都放在了b中，b是数组。
}

3、箭头函数（参数，参数） => { 函数体 }

a、有且仅有一个参数的时候可以省略()
参数=>{ }

b、当函数体只有一句代码且没有返回值时可以省略{ }，有返回值时就算只有一句话也不能省略{ }

C、箭头函数不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

D、函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

E、箭头函数根本没有自己的this，所有指向了外部this，因此不能作为构造函数

F、对象中的方法不能使用箭头函数。

G、箭头函数不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

4、解构赋值（针对数组和对象）

ES6中允许按照一定的模式从数组和对象提取值对变量进行赋值，这种称为解构：

① 对象解构

{ name : ” 张三 ” , age : 18 , father : { name : ” 张二 ” } }

let obj = { name : ” 张三 ” , age : 18, father : { name : ” 张二” } };

//对于多维对象的解构：

let { name , age ，father : { name : fatherName } } = obj; //多维对象的解构注意写法

console.log( name , age , fatherName ) ;

② 数组解构

③ 字符串解构

字符串的扩展---------------------------------------------------

includes()：返回布尔值，表示是否找到了参数字符串，支持传入第二个参数表示开始位置
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部，支持传入第二个参数表示开始位置
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部，支持传入第二个参数表示开始位置
repeat()：方法返回一个新字符串，表示将原字符串重复n次
padStart(5,’a’)：用于头部补全，第二个参数省略默认使用空格补全长度
padEnd()：用于尾部补全
trimStart()和trimEnd() ：它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格
match() 匹配正则
matchAll()：方法返回一个正则表达式在当前字符串的所有匹配
replace() 匹配正则
replaceAll() 匹配正则
split() 将字符串分割为字符串数组
substr() 截取字符串

数组扩展----------------------

扩展运算符：...
功能：

① //把 arr的拷贝给res。（只拷贝了一层）
let res = [...arr];

let obj2 = {...obj1};

② //合并数组。（ concat（））
let newArr = [...arr, ...m];

③ //往数组尾部添加另一个数组的所有元素。

m = [2, 4, 7, 9];
m.push(...[100, 200, 300]);

④ //把字符串转换为数组。
let strs = [..."hello"];

数组的方法：-------------------
Array.from() //把伪数组变成真数组。

let lis = document.querySelectorAll("ul li");
lis = Array.from(lis);

Array.of() //把一组数据组合成一个新的数组。

Array.isArray() 是否是数组

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

fill() 填充数据

find()：方法，用于找出第一个符合条件的数组成员

findIndex() 寻找下标

every() : 所有的元素都通过条件，结果为boolean

some() : 元素中只要有一个满足条件，就为true

flat() 用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

对象扩展：----------------------

写法：

① 属性名和属性值所在变量一致可以只写一个

② 方法的简写：
方法名() { }

对象的方法：---------------------

① //浅拷贝：

let newObj = obj; //只要改变两个对象的任意一个属性的值，另一个都会被改。

② //拷贝一层：

Object.assign(目标,数据源); //只拷贝了一层。
let newObj2 = {...obj};

③ //深拷贝：

let newObj3 = JSON.parse((JSON.stringify(obj))); //有一定的缺陷

④ （递归函数）或者自己写的深拷贝方法：

Object.keys(ob) --->返回一个数组，包含键名
Object.values(obj) ---> 返回一个数组，包含键值

obj. hasOwnProperty("属性名") 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。

Object.defineProperty() 自定义属性
Object.defineProperties() 一次可以定义多个自定义属性

---数据结构set（集合）----------------------------------------------------------------------

数据结构set（集合）

Set 对象允许你【存储任何类型的唯一值，无论是原始值或者是对象引用】。

定义set:

let datas=new Set();

属性： size: 指的长度

方法：

add(value)：添加某个值，返回 Set 结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值
keys()、返回所有键名
valus()、返回所有键值
entries()、返回所有键值对
forEach() 遍历

//创建传数组进去,并且会自动去重

nums = new Set([1, 3, 5, 6, 9, 7, 9]);

//set转为数组：

// let arr = [...nums];
let arr = Array.from(nums);

//string转set

var mySet = new Set('hello'); // Set(4) {"h", "e", "l", "o"}
转成string
let strs = [...mySet].join("");

---Map 对象-------------------------------------------
Map 对象
Map 【对象保存键值对】。任何值(对象或者原始值) 都可以作为一个键或一个值。

1、类似于对象，都是一种【键值对的集合】（Hash 结构）
2、【对象的键只能是字符串】，【Map的键可以是任意数据类型】***
属性：
size ：含有几个值

方法：
set(key, value) 设置键值对
get(key) 获取键名
has(key) 检索键名
delete(key) 删除键
clear() 清除
keys()、
valus()、
entries()、
forEach（）

for....of 可以用来遍历：数组，map，set,string,arguments

-Symbol------------------------------
Symbol
ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来【定义对象的唯一属性名】。

ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。

let uname = Symbol("uname");

let obj = {
uname: 'ls'
};

obj[uname] = "zs456";

obj[Symbol()] = "hhhh";

let name = Symbol("name");

let obj2 = {
[name]: "zs",
[Symbol("id")]: 1
}

console.log(obj2);
console.log(obj2[name]);

for...in 循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）

Object.getOwnPropertySymbols(obj) 返回一个数组，包含对象自身的所有 Symbol 属性的键名。***

-class：-------------------------------------------
class：

class 类名{
// 构造函数（名字必须是constructor）每次new的时候会自动执行该方法
constructor(n ,a) {
this.name = n;// this 在类中代表具体的实例化对象
this.age = a;
this._mima = '123456';
}
//写在构造函数外面的方法是绑定在prototype原型上的
方法名(){

}

//getter,setter : pwd 当访问不存在的pwd属性,会自动的去调用getter.修改它自动调：setter

get pwd() { //访问自动调
console.log("哈哈哈哈");
}

set pwd(val) { //修改时自动调
this._pwd = val;
}

// 静态方法。跟实例对象无关。

static 方法名(){

}
}

静态方法：类名.方法（）

其他方法：对象.方法（）；

------------class继承:------------------------------

继承使用extends 关键字

class A extends B{ A继承B

}

class Person {
constructor(name, sex) {
// console.log('6666');
this.name = name;
this.sex = sex;
}
run() {
console.log("跑起来");
}
getMoney() {
console.log("5000");
}
}

class Student extends Person {
constructor(name, sex, age, score) {
// 子类构造中必须使用super函数调用父类构造函数
// super函数只能用于构造函数中
// 必须先调用父类构造函数，才可以使用this
super(name, sex);
this.age = age;
this.score = score;
}
study(course) {
console.log(this.name + "在学习" + course);
}

//重写父类方法。
getMoney() {
// super.getMoney(); 调用父类的方法。
console.log("10000");
}

}

---------------------------------------
模块化开发：一个js文件就是一个模块。

export 导出

import 导入

js中：
分别导出：
export let a = 5;
let b = 6;

export let stu = {
id: 1,
name: "zs",
getInfo() {
console.log("111");
}
}

export const fn = function () {
console.log("2222");
}

一次性导出：
let m = 5;
let obj = {
x: 1, y: 2
}

let fn = function () {
console.log("1111");
}
//一次性导出
export {
m, obj, fn
}

默认导出：

let s = 5;
let n = [3, 23, 6, 7];