ECMAScript 6 基础
简介
最近在复习，学高阶的内容有点吃力，分析了一下，觉得有必要把基础在过一遍，所以刷的基础网课，顺便记录一下笔记。
- JavaScript 三大组成部分
- ECMAScript
- DOM：文档对象模型
- BOM：浏览器对象模型
- ECMAScript 发展历史
- ECMAScript 包含内容：JS 中的数据类型及相关操作，流程控制，运算符及相关运算……
let 和 const
块级作用域：花括号括起来的区域就是一段作用域
if(true){
let a = 1;
console.log(a); // 1
}
console.log(a); // Uncaught ReferenceError: a is not defined
| var（变量） | let（变量） | const（常量） |
|---|---|---|
| var 可以重复声明 | 同一作用域下不能重复声明 | 声明的时候就要赋值，不能重复声明 |
| 全局作用域 和 函数作用域 | 全局作用域 和 块级作用域 | 全局作用域 和 块级作用域 |
| 会进行预解析（变量提升） | 不进行预解析 | 不进行预解析 |
解构赋值
一般来说，可迭代的对象都有解构赋值的写法。
// 对象的解构赋值
let obj = {
a: 1,
b: 2,
c: 3
};
let {a,c} = obj; // 把 obj 中的 a 和 c 解构出来
console.log(a,c);
// 数组的结构
let arr = [1,2,3];
let [a,b,c] = arr;
console.log(a,b,c);
对象解构：变量名 和 属性名 要对应
数组解构：变量名 和 值索引对应
// 交换两个数
let a = 0 ;
let b = 1;
[b,a] = [a,b];
console.log(a,b); // 1 0
展开运算符
// 展开运算符：数组
let arr = [1,2,3,4,5];
let arr2 = ["a",...arr,"b","c"];
// 把 arr 中的数据放入 arr2 中
console.log(arr2); // ["a",1,2,3,4,5,"b","c"]
// 剩余参数
let arr3 = [1,2,3,4,5];
let [a,...b] = arr3;
console.log(a); // 1
console.log(b); // (4) [2, 3, 4, 5]
// 展开运算符：对象
let obj = {
a: 1,
b: 2
};
let obj2 = {
...obj,
c: 3,
d: 4
};
// 对象的展开
console.log(obj2);
// 剩余参数，解构剩余的东西
let {a,...d} = obj2;
console.log(a,d);
Q：如何复制一个对象，并且互相之间没有影响（前提：知道对象之间有传递地址的问题）。
如果想复制一个对象，并且跟原先的对象没有影响可以这样
let obj = {
a: 1,
b: 2,
};
let obj2 = { ...obj };
// 把 obj 里的数据解构出来，并建一个新的对象
obj2.a = 3; // 修改新对象，旧的对象不会变化
console.log("obj :>>", obj);
console.log("obj2 :>>", obj2);
Set 对象
set 是一个独特的数据结构，元素唯一，可以用来去重。
构造函数：用来构建某一类型的对象
用构造函数构造对象的过程叫做：对象的实例化
// 数组去重
let arr = [1,2,3,4,1,3,5,2,"c"];
let data = new Set(arr);
console.log(data);
常用方法整理：
| set 常用方法 | 返回值 | 用途 |
|---|---|---|
set.size | 正整数 | 数值的个数 |
set.clear() | undefined | 清空所有值 |
set.delete(val) | 布尔值 | 删掉某个元素 |
set.add(val) | set 对象本身 | 添加某个数组 |
set.has(val) | 布尔值 | 是否包含某个值 |
Map 对象
常用方法整理：
| map 常用方法 | 返回值 | 用途 |
|---|---|---|
map.size() | 正整数 | 数值的个数 |
map.get() | 值 | 获取某一项值 |
map.set() | map 对象本身 | 添加 |
map.clear() | undefined | 清空所有值 |
map.delete(val) | 布尔值 | 删掉某个元素 |
map.has(val) | 布尔值 | 是否包含某个值 |
函数新增：箭头函数
箭头函数其实就是函数的简写
// 没有参数和两个参数，形参都需要加括号
let fn = () => {};
let fn2 = (val1, val2) => {
val1 + val2;
};
// 一个参数可以省略括号，返回语句有一条，可以不写花括号
let fn1 = val => val * 2;
与原函数的区别：不定参
原函数的不定参有 arguments
箭头函数可以用 ...arg ，也叫 rest 参数，剩余参数。
与原函数的区别：this 的指向
箭头函数本身没有 this ，调用箭头函数，指向的是其声明时，所在的作用域的 this
document.onclick = function(){
let fn = ()=>{
console.log(this); // #document
};
// function fn(){
// console.log(this); // windows
// }
fn();
};
// 箭头 this 指向，箭头函数定义时所在的作用域的this
let fn;
let fn2 = function(){
console.log(this); // body
fn = ()=>{
console.log(this); // body
}
}
fn2 = fn2.bind(document.body)
fn2();
fn();
参数默认值
原来的函数，如果希望有默认值，可以这么写
function fn(a,b) {
a = a || 0; // 这样写有个问题，就是别人传递个 0，就不对了。
b = b || 1;
a = (typeof(a) === 'undefined') ? 0 : a; // 改进的写法
}
有了箭头函数，就可以直接在形参里赋默认值了。
// 箭头函数希望有个默认值
let fn = (nub = 10, nub2 = 9) => {
console.log(nub + nub2);
};
fn();
数组新增方法（常用）
Array.from
把一个类数组转换成真正的数组
转换成数组也可以用展开运算符
[...arr]
返回值：转换之后的新数组
arr.forEach()，注意哪些方法是对象下的方法，那些是构造函数下的方法
let datas = {
0: "a",
1: "b",
2: "c",
length: 3
};
// datas = Array.from(datas);
datas = Array.from(datas,function(item,index){
console.log(item,index,this);
return item.toUpperCase();
},document);
console.log(datas);
Array.of
也是转换成数组
Array.of("1", "2") // (2) ["1", "2"]
Array.isArray
判断是否是数组
let datas = {
0: "a",
1: "b",
2: "c",
length: 3
};
console.log(Array.isArray(datas)); // false
datas = Array.from(datas);
console.log(Array.isArray(datas)); // true
arr.find
查找数组中满足要求的第一个元素的值
let arr = [1,2,5,6];
let val = arr.find((item)=>{
return item >= 5;
});
console.log(val); // 5
arr.findIndex
查找数组中满足要求的第一个元素的索引
let arr = [1,2,5,6];
let index = arr.findIndex((item)=>{
return item >= 5;
});
console.log(index); // 2
arr.flat
数组扁平化，参数添加 depth 深度，
let arr = [
[1,2],
[3,4],
[
[6,7],
[
[8],
[9,10]
]
]
];
console.log(arr.flat(Infinity)); // (9) [1, 2, 3, 4, 6, 7, 8, 9, 10]
arr.flatMap
方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些
arr.fill
Array arr.fill(value[, start[, end]]);
用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引
- 参数：用来填充数组元素的值。
- 可选参数：
- start
起始索引，默认值为0。 - end
终止索引，默认值为 arr.length
- start
作用：操作 node 二进制数据 buffer
arr.includes
Boolean arr.includes(valueToFind[, fromIndex])
判断数组中是否包含一个指定的值
-
参数：valueToFind 需要查找的值
-
可选参数：从 fromIndex 处开始向后查找
-
返回值：true 代表数组中包含 valueToFind， false 代表数组中不包含 fromIndex
字符串新增方法（常用）
str.includes
Boolean str.includes(valueToFind[, fromIndex]) 判断字符串是否包含一个指定的值
详细： 参考数组的 includes
str.endsWith
Boolean str.endsWith(searchString[, length]) 判断当前字符串是否是以另外一个给定的子字符串“结尾”
- 参数
- searchString：要搜索的子字符串。
- 可选参数
- length：作为 str 的长度。默认值为 str.length
- 返回值：如果传入的子字符串在搜索字符串的末尾则返回true；否则将返回 false。
str.startsWith
Boolean str.startsWith(searchString[, position]) 判断当前字符串是否以另外一个给定的子字符串开头
- 参数
- searchString：要搜索的子字符串。
- 可选参数
- position：在 str 中搜索 searchString 的开始位置，默认值为 0，也就是真正的字符串开头处。
- 返回值：如果传入的子字符串在搜索字符串的开始则返回true；否则将返回 false。
str.repeat
String str.repeat(count) 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本
-
参数
- count：介于0和正无穷大之间的整数。表示在新构造的字符串中重复了多少遍原字符串
-
返回值：生成的新字符串
模板字符串
模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。
let name = "LEO";
let age = 40;
let gender = "男";
// 原来的写法
//let str = '姓名：' + name + '，年龄：' + age + '岁，性别：男';
// 模板字符串
let str = `姓名：${name}，
年龄：${age}岁，
性别：${gender}`;
console.log(str);
插值表达式：${}
新增对象方法
简洁表示法
let a = 0;
let b = 1;
let obj = {
a, // 对象属性的简洁表示
b, // b: b
c(){ // 对象中的函数简洁表示
console.log(123);
}
};
console.log(obj);
obj.c();
属性名表达式
let n = "name" ;
let obj = {
[n]: "leo" // 中括号表示
};
console.log(obj); // {name: "leo"}
对象和并
当然可以通过展开运算符来做
let obj = {
a: 1,
b: 2
};
let obj2 = {
c: 3,
d: 4
};
let obj3 = Object.assign({},obj,obj2);
// 合并对象
console.log(obj,obj2,obj3);
Object.is
Boolean Object.is(value1, value2) 判断两个值是否是相同的值。
Object.is() 方法判断两个值是否为同一个值。如果满足以下条件则两个值相等:
- 两个值都是 undefined
- 两个值都是 null
- 两个值都是 true 或者都是 false
- 两个值是由相同个数的字符按照相同的顺序组成的字符串
- 两个值指向同一个对象
- 两个值都是数字并且
- 都是正零 +0
- 都是负零 -0
- 都是 NaN
- 或都是非零而且非 NaN 且为同一个值
console.log(+0 === -0); // true
console.log(Object.is(+0,-0)); // false
Babel
把 ES6 转换成 ES5，处理兼容问题。
- babel 使用
- Babel 是一个 JavaScript 编译器
- 手册地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="babel.min.js"></script>
</head>
<body>
<script type="text/babel">
let name = "LEO";
let age = 40;
let gender = "男";
let str = `姓名：${name}，
年龄：${age}岁，
性别：${gender}`;
console.log(str);
let arr = [1, 2, 3];
let val = arr.find((item) => {
return item > 1;
});
console.log(val);
</script>
</body>
</html>
运行上面的网页，查看编译好的代码。
如果在浏览器里直接引babel 的话，会弹出警告： You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/，以后学到 Node 和 WebPack 打包的时候会理解。
扫一扫
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
