ES6 及后续常用语法
按编辑器、HTML、CSS、JavaScript 和 ES6 五章整理前端学习笔记与代码示例。
阅读设置
1. let命令
var关键字:函数级的作用域
let关键字:
1.let是块级作用域(花括号的作用域)
2.let 在初始化前处于暂时性死区,应先声明再使用
3.let是不能重复声明
2. const(常量)命令
1.const不允许重新赋值
2.必须声明的时候直接初始化值
3.const块级作用域
4.const 在初始化前处于暂时性死区
5.const不可重复声明
3. 对象解构赋值
将对象内的方法属性简化出来(对象的属性没有次序,变量必须与属性同名,许多需要.出来的方法都可以)
var user = {
name:"zhangsan",
age:19
}
//传统方法
console.log(user.name);//zhangsan
//利用解构赋值的方式简化
const {name,age} = user;
console.log(name);//zhangsan
//简化console.log
const {log} = console;
log(name);//zhangsan
//简化Math
const { abs, ceil, floor, random } = Math;
log(random());//随机数
4. 字符串的扩展
1.字符串遍历器接口:for...of循环遍历
for (let i of "hello"){
console.log(i);
}
2.模板字符串:用反引号(``)标识,可以当作普通字符串使用,也可以定义多行字符串,或者嵌入变量
let url = "www.baidu.com";
let h1 = "<a href+`"+ url +"`>百度</a>"
let h2 = `<a href="${url}">百度</a>`
3.新增方法
1.includes():返回布尔值,表示是否找到了参数字符串
2.startsWith():返回布尔值,表示参数字符串是否在原字符串的头部
3.endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部
注意:三个方法都支持第二个参数表示开始搜索的位置
var allStr = "hello";
var str = "llo";
//allStr是否包含str
console.log(allStr.includes(str));//true
4.repeat():返回一个新的字符串,表示将原字符串重复n次
var x = "x";
//想要得到三个xxx
console.log(x.repeat(3));//xxx
5.padStart(),padEnd():字符串补全长度,字符串不够指定长度,会在头部或者尾部补全
var h = "hello";
console.log(h.padStart(10,"ab"));//ababahello
console.log(h.padEnd(10,"ab"));//helloababa
6.trimStart(),trimEnd():分别消除头部和尾部的空白,返回字符串,不会修改原字符串
7.at():接受一个整数作为参数,返回参数指定位置的字符
5. 数组的扩展
补充练习:用 Array.from() 转换可迭代值,用展开语法复制数组,理解这些操作通常为浅拷贝。
const letters = Array.from("abc");
const copy = [...letters];
console.log(copy.includes("a"));
复习时需要核对的细节
- Flex 的 justify-content 对应主轴,align-items 对应交叉轴,方向随 flex-direction 改变。
- 相对定位基于自身原位置;绝对定位依据包含块,不能直接理解成总相对父元素。
- Array.isArray(value) 判断数组,push 的返回值是新长度;Date.now 返回毫秒时间戳。
- let/const 存在暂时性死区;const 限制重新绑定,不冻结对象内容。
- DOM 查询可能返回 null,事件和定时器要按生命周期清理。