ES6 笔记
ES6 笔记
date: 2021-05-21T20:57:31+08:00
一、let 和 var 的区别以及 const
-
let 声明的变量只在所在块中生效;
-
let 声明的变量可以解决 var 与 for 循环结合使用产生的无法取得最新变量值的问题(以往都需要通过闭包来解决这个问题);
-
let 声明的变量不存在变量提升,var 出的变量在脚本开始运行时就存在了,但值是 undefined,但用 let 会显示尚未定义;
-
let 不允许重复声明;
const 声明的变量行为与 let 类似,只是多了两点更强的约束:
1.声明时必须初始化;
2.声明的变量内存地址不可变。
需要注意的是:对于用 const 声明基本类型,值就保存在内存地址之中,意味着变量不可重新赋值;对于用 const 声明的对象,对象内容还是可以更改的,只是不能改变其指向。(冻结对象应该用 Object.freeze())
二、解构赋值
1、数组解构
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c) //1,2,3
2、对象解构
const person = {
name: "qiyue",
age: 23,
language: ["java", "js", "css"],
};
const { name, age, language } = person;
console.log(name, age, language); //qiyue 23 (3) ["java", "js", "css"]
const person = {
name: "qiyue",
age: 23,
language: ["java", "js", "css"],
};
//从person里解析出name的值在赋值给abc
const { name: abc, age, language } = person;
console.log(abc, age, language); //qiyue 23 (3) ["java", "js", "css"]
三、字符串
1、拓展方法:
- includes():返回布尔值,判断是否找到参数字符串。
- startsWith():返回布尔值,判断参数字符串是否在原字符串的头部。
- endsWith():返回布尔值,判断参数字符串是否在原字符串的尾部。
- repeat():返回新的字符串,表示将字符串重复指定次数返回。
- padStart:返回新的字符串,表示用参数字符串从头部(左侧)补全原字符串。
- padEnd:返回新的字符串,表示用参数字符串从尾部(右侧)补全原字符串。
2、模板字符串
普通字符串
let string = `Hello'\n'world`;
console.log(string);
// "Hello'
// 'world"
多行字符串:
let string1 = `Hey,
can you stop angry now?`;
console.log(string1);
// Hey,
// can you stop angry now?
字符串插入变量和表达式。
变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age + 1} years old next year.`;
console.log(info);
// My Name is Mike,I am 28 years old next year.
字符串中调用函数:
function f() {
return "have fun!";
}
let string2 = `Game start,${f()}`;
console.log(string2); // Game start,have fun!
3、标签模板
标签模板,是一个函数的调用,其中调用的参数是模板字符串。
alert`Hello world!`;
// 等价于
alert("Hello world!");
当模板字符串中带有变量,会将模板字符串参数处理成多个参数。
function f(stringArr, ...values) {
let result = "";
for (let i = 0; i < stringArr.length; i++) {
result += stringArr[i];
if (values[i]) {
result += values[i];
}
}
return result;
}
let name = "Mike";
let age = 27;
f`My Name is ${name},I am ${age + 1} years old next year.`;
// "My Name is Mike,I am 28 years old next year."
f`My Name is ${name},I am ${age + 1} years old next year.`;
// 等价于
f(["My Name is", ",I am ", " years old next year."], "Mike", 28);
四、函数
1、函数默认值:直接给参数写上默认值,没传就会自动使用默认值。
function add(a, b = 1) {
return a + b;
}
console.log(add(10)); //11
2、不定参数:不定参数用了表示不确定的参数个数,形如…变量名,由…加上要给具名参数标识符组成。具名参数只能放在参数列表的最后,并且有且只有一个不定参数
function f(...values) {
console.log(values.length);
}
f(1, 2); //2
f(1, 2, 3, 4); //4
3、箭头函数
var f = (v) => v;
//等价于
var f = function (a) {
return a;
};
当箭头函数没有参数或者有多个参数,要用 () 括起来。
var f = (a, b) => a + b;
f(6, 2); //8
var f = () => console.log(123);
f(); //123
当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
注意点:没有 this、super、arguments 和 new.target 绑定。this 对象是外层的 this
4、箭头函数结合解构表达式
//以前
function hello(person) {
console.log("hello" + person.name);
}
hello(person); //helloqiyue
//箭头函数
let hello2 = (params) => console.log("hello" + person.name);
hello2(person); //helloqiyue
//箭头函数加解构表达式
var hello3 = ({ name }) => console.log("hello" + name);
hello3(person); //helloqiyue
5、箭头函数和普通函数的区别
- 箭头函数没有自己的 this,指向的是外层的,且指向永远不变
- 箭头函数的 this 不能被 call、apply、bind 改变
- 箭头函数不能做构造函数
- 箭头函数没有 arguments
五、对象
1、新方法:
- key(obj):获取对象的所有 key 形成的数组
- value(obj):获取对象的所有 value 形成的数组
- entries(obj):获取对象所有的 key 和 value 形成的二维数组
const person = {
name: "qiyue",
age: 23,
language: ["java", "js", "css"],
};
console.log(Object.keys(person)); //["name","age","language"]
console.log(Object.values(person)); // ["qiyue",23,Array(3)]
console.log(Object.entries(person)); //[Array(2),Array(2),Array(2)]
2、Object.assign 方法的第一个参数是目标对象,后面的参数都是源对象;将源对象的属性赋值到目标对象中
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target); //{a: 1, b: 2, c: 3}
3、 声明对象简写
//以前
const name = "sanyue";
const age = 21;
//将属性值name,age分别赋给person1对象的name,age,后面是属性值
const person1 = { name: name, age: age };
console.log(person1); //{name: "sanyue", age: 21}
//es6:属性名和属性值变量名一样,可以省略
const person2 = { name, age };
console.log(person2); //{name: "sanyue", age: 21}
4、对象的函数属性简写
let person3 = {
name: "qiyue",
//以前
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭头函数中this不能使用,用对象.属性
eat2: (food) => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food);
},
};
person3.eat("苹果"); //qiyue在吃苹果
person3.eat2("香蕉"); // qiyue在吃香蕉
person3.eat3("西瓜"); //qiyue在吃西瓜
5、对象的扩展运算符
扩展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象
//拷贝对象(深拷贝)
let p1 = { name: "qiyue", age: 23 };
let obj = { ...p1 };
console.log(obj); //{name: "qiyue", age: 23}
//合并对象
let age1 = { age: 24 };
let name1 = { name: "qiyue" };
let p2 = {};
p2 = { ...age1, ...name1 };
console.log(p2); //{age: 24, name: "qiyue"}
//如果p2中原本有name,age属性会被覆盖
六、Promise
promise 是处理异步操作的对象。promise 在新建后就会立刻执行,但是回调函数(then)要在当前脚本所有同步任务执行完成后才会执行。
以下是一个基本用法示例。
let promise = new Promise((resolve,reject)=>{
// ...
if(/*异步操作成功*/){
resolve(value);
}else{
reject(error);
}
}).then((data)=>{
console.log(data); //success操作返回,即pending=>fulfilled
},(error)=>{
console.log(error); //错误返回(可省略),即pending=>rejected
})
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库