阅读须知: 以下所有内容均来源于菜鸟教程，详细内容请点击这里查看
let ，const，var
| let | var |
|---|---|
| 变量只能声明一次 | 变量可以声明多次: |
| 只在 let 命令所在的代码块内有效。 | 全局都有效 |
| 不存在变量提升 | 会变量提升 |
const 命令
- const 声明一个只读的常量，一旦声明，常量的值就不能改变意味着，一旦声明必须初始化，否则会报错。
- 使用 const 声明复杂类型对象时要慎重。解释：（ const 声明的简单类型变量等同于常量。而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针）
ES6 解构赋值
let [a, b, c] = [1, 2, 3];
let [a, [[b], c]] = [1, [[2], 3]];
let [a, , b] = [1, 2, 3];//a=1,b=3;
let [a = 1, b] = [];//a=1,b=undefined
let [a, ...b] = [1, 2, 3];//a = 1,b = [2, 3]
let [a, b, c, d, e] = 'hello';
//当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。
let [a = 2] = [undefined]; // a = 2
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };// foo = 'aaa',bar = 'bbb'
let { baz : foo } = { baz : 'ddd' }; foo = 'ddd'
let obj = {p: ['hello', {y: 'world'}] }={p: [x, { y }] };//x='hello',y='world'
let obj = {p: [{y: 'world'}] }={p: [{ y }, x ] };//x = undefined, y = 'world'
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};//a=10,b=20,rest={c:30,d:40}
//解构默认值
let {a = 10, b = 5} = {a: 3};// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};// aa = 3; bb = 5;
Symbol
Symbol 表示独一无二的值，最大的用法是用来定义对象的唯一属性名。
symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。以接受一个字符串作为参数，为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。
基本用法
let s=Symbol("KK");
console.log(sy); // Symbol(KK)
typeof(sy); // "symbol"
// 相同参数 Symbol() 返回的值不相等
let sy1 = Symbol("kk");
sy === sy1; // false
使用场景
Symbol 作为对象的属性名，可以保证属性不重名。
用于定义字符串常量
注意点
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);
for (let i in syObject) { //不能用在 for...in 、 for...of 的循环中，访问不到
console.log(i);
} // 无输出
Object.keys(syObject); // [] Object.keys() 、 Object.getOwnPropertyNames() 访问不到
Object.getOwnPropertySymbols(syObject); // [Symbol(key1)] 能读取到一个对象的 Symbol 属性
Reflect.ownKeys(syObject); // [Symbol(key1)] 能读取到一个对象的 Symbol 属性
Symbol.for() 类似单例模式，首先会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境中供搜索。
let yellow = Symbol("Yellow");
let yellow1 = Symbol.for("Yellow");
yellow === yellow1; // false
let yellow2 = Symbol.for("Yellow");
yellow1 === yellow2; // true
Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。
let yellow1 = Symbol.for("Yellow");
Symbol.keyFor(yellow1); // "Yellow"
Map 与 Set
Map 对象
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
Maps 和 Objects 的区别
| Maps | Objects |
|---|---|
| 键可以是任意值。 | 键只能是字符串或者 Symbols |
| 键值是有序 | 键值无序 |
| 可以从用size 属性获取 | 只能手动计算。 |
Map 中的 key
key 是字符串
var myMap = new Map();
var keyString = "a string";
myMap.set(keyString, "和键'a string'关联的值");
myMap.get(keyString); // "和键'a string'关联的值"
myMap.get("a string"); // "和键'a string'关联的值"
// 因为 keyString === 'a string'
key 是对象
var myMap = new Map();
var keyObj = {},
myMap.set(keyObj, "和键 keyObj 关联的值");
myMap.get(keyObj); // "和键 keyObj 关联的值"
myMap.get({}); // undefined, 因为 keyObj !== {}
Map 的迭代
var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
法一
for (var [key, value] of myMap) {
console.log(key + " = " + value);
}
法二
for (var [key, value] of myMap.entries()) {
console.log(key + " = " + value);
}
法三
for (var key of myMap.keys()) {
console.log(key);
}
法四
for (var value of myMap.values()) {
console.log(value);
}
法五
myMap.forEach(function(value, key) {
console.log(key + " = " + value);
})
Map 对象的操作
Map 与 Array的转换
Map 与 Array的转换
var kvArray = [["key1", "value1"], ["key2", "value2"]];
// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);//new Map()返回一个map对象
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap); // Array.from()返回一个数组，
Map 的克隆（克隆后不相等）
var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);
console.log(original === clone); // 打印 false。 Map 对象构造函数生成实例，迭代出新的对象。
Map 的合并（如果有重复的键值，则后面的会覆盖前面的）
var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
var merged = new Map([...first, ...second]);
Set 对象
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
Set 中的特殊值
NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复。
什么类型都能存储与数组类似但不能有重复
类型转换
Array 转 Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符，将 Set 转 Array
var myArray = [...mySet];
String 转 Set
var mySet = new Set('hello'); // Set(4) {"h", "e", "l", "o"}
// 注：Set 中 toString 方法是不能将 Set 转换成 String
Set 对象作用
数组去重
var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]
//[...a] 就是将 set 转换成 array。以后需要将 set 转换成 array 基本都使用这种方法。
并集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}
var arr=Array.from(union)// [1, 2, 3, 4]
交集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}
var arr=Array.from(intersect)//[2,3]
//Array.filter(function(x))遍历当前数组，当遍历到某个元素时，返回值为 false 就将该元素从数组中剔除。返回符合条件的所有元素
//Set.has(x) 是 set 中的一个方法。即判断当前 set 中是否含有 x，如果有返回 true，没有返回 false。
差集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}
var arr=Array.from(difference)// [1]
ES6 字符串
let string = "apple,banana,orange";
string.includes("banana"); // true 判断是否找到参数字符串
string.startsWith("apple"); // true判断参数字符串是否在原字符串的头部
string.endsWith("apple"); // false判断参数字符串是否在原字符串的尾部。
string.startsWith("banana",6) // true 从字符串索引6开始判断
"Hello,".repeat(2) // "Hello,Hello," 返回新的字符串，表示将字符串重复指定次数返回。
"Hello,".repeat(3.2); // "Hello,Hello,Hello," 参数是小数，向下取整
"Hello,".repeat(-0.5); // "" 如果参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整得到 -0 ，等同于 repeat 零次
"Hello,".repeat(NaN) // "" 参数是 NaN，等同于 repeat 零次
"Hello,".repeat(-1) // RangeError: Invalid count value 不能传入负数
"Hello,".repeat("hh"); // ""
"Hello,".repeat("2"); // "Hello,Hello," 参数是字符串，会将字符串转化为数字
"h".padStart(5,"o") // "ooooh" 从头部（左侧）补全原字符串
"h".padEnd(5,"o"); // "hoooo" 从尾部（右侧）补全原字符串。
"h".padStart(5) // " h" 如果没有指定第二个参数，默认用空格填充。
"hello".padEnd(10,",world!") // "hello,worl" 截去超出位数的补全字符串:
"123".padStart(10,"0") // "0000000123"
模板字符串
字符串中调用函数：
function f(){
return "have fun!";
}
let string2= `Game start,${f()}`;
console.log(string2); // Game start,have fun!
ES6 数值
console.log(0b11 === 3); // true 0b11为二进制写法3，字母不区分大小写
console.log(0o11 === 9); // true 0o11 为八进制写法9，字母不区分大小写
检查一个数值是否为有限
Number.isFinite(1)// true 用于检查一个数值是否为有限的（ finite ），即不是 Infinity
用于检查一个值是否为 NaN 。
Number.isNaN(NaN); // true
Number.isNaN('true'/0); // true
//其余全部为false
字符串转数字
Number.parseInt('12.34'); // 12
Number.parseFloat('123.45') // 123.45
判断给定的参数是否为整数。
Number.isInteger(1.0); // true
用于计算一个数的立方根。
Math.cbrt('1'); // 1 会对非数值进行转换
用于计算所有参数的平方和的平方根。
Math.hypot(3, 4); // 5
返回数字的整数部分。
Math.trunc(12.3); // 12
判断数字的符号（正、负、0）
Math.sign(1); // 1
Math.sign(-1); // -1
用于计算 2 为底的 x 的对数
Math.log2(1); // 0
用于计算以 10 为底的 x 的对数。
Math.log10(1); // 0
ES6 对象
如果是Generator 函数，则要在前面加一个星号
Generator 函数，可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案
const obj = {
* myGenerator() {
yield 'hello world';
}
};
//等同于
const obj = {
myGenerator: function* () {
yield 'hello world';
}
};
对象的拓展运算符
合并两个对象
let age = {age: 15};
let name = {name: "Amy"};
let person = {...age, ...name};
person; //{age: 15, name: "Amy"}
属性覆盖情况
let person = {name: "Amy", age: 15};
let someone = { ...person, name: "Mike", age: 17};
someone; //{name: "Mike", age: 17} ...person代码先运行,固不会覆盖
自定义的属性在拓展运算符后面，则拓展运算符对象内部同名的属性将被覆盖掉。
let person = {name: "Amy", age: 15};
let someone = {name: "Mike", age: 17, ...person};
someone; //{name: "Amy", age: 15} ...person代码后运行,固会覆盖
对象的新方法
用于将源对象的所有可枚举属性复制到目标对象中
assign 的属性拷贝是浅拷贝，不能拷贝多层对象
let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
Object.assign(target,object2,object3);
// 第一个参数是目标对象，后面的参数是源对象，后面有同名属性会覆盖前面的属性
target; // {a: 1, b: 2, c: 3}
//一是+0不等于-0
Object.is(+0,-0); //false 严格比较
+0 === -0 //true 不严格比较
//二是NaN等于本身
Object.is(NaN,NaN); //true
NaN === NaN //false
ES6 数组
数组创建与转换[ Array.of(),Array.from() ,new Set()]
数组创建
将参数中所有值作为元素形成数组。
Array.of(1, 2, 3, 4); // [1, 2, 3, 4] 类似于var arr=[1,2,3,4]
类数组对象与可迭代对象转数组
将类数组对象或可迭代对象转化为数组
Array.from([1, 2]); // [1, 2]
可选，map 函数，用于对每个元素进行处理，放入数组的是处理后的元素
Array.from([1, 2, 3], (n) => n * 2); // [2, 4, 6]
Array.from()只能转含有 length 属性的一个类数组对象，且元素属性名必须是数值和或者可转换为数值的字符
可迭代对象转换为数组
let arr = [1, 2, 3,2];
let set = new Set(arr);//去重后再转换
console.log(Array.from(set)); // [1, 2, 3]
字符串转换为数组
let str = 'abc';
console.log(Array.from(str)); // ["a", "b", "c"] 转换为单个字符
数组扩展方法[ find(),findIndex() ]
- find(fun())
返回符合条件的第一个元素
let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 3 - findIndex(fun())
返回符合条件的第一个元素索引
let arr = Array.of(1, 2, 1, 3);
// 参数1：回调函数
// 参数2(可选)：指定回调函数中的 this 值
console.log(arr.findIndex(item => item == 2)); // 1 - fill(参数1：用来填充的值,参数2：被填充的起始索引,参数3(可选)：被填充的结束索引，默认为数组末尾)
let arr = Array.of(1, 2, 1, 3);
console.log(arr.findIndex(item => item == 2)); // 1 - copyWithin(参数1：被修改的起始索引，参数2：被用来覆盖的数据的起始索引，参数3(可选)：被用来覆盖的数据的结束索引，默认为数组末尾)
将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。
console.log([1, 2, ,4].copyWithin(0, 2, 4)); // [, 4, , 4]将前两个数修改成后两个数,后两个数不变
###数组遍历[ entries() , keys() ,values() ]
entries() //遍历键值对。
for(let [key, value] of ['a', 'b'].entries()){
console.log(key, value);
}
// 0 "a"
// 1 "b
keys()//遍历键名
for(let key of ['a', 'b'].keys()){
console.log(key);
}
// 0
// 1
values()//遍历键值
for(let value of ['a', 'b'].values()){
console.log(value);
}
// "a"
// "b"
数组是否包含指定值。[ includes() ]
includes()//检查数组是否包含指定值。
// 参数1：包含的指定值
[1, 2, 3].includes(1); // true
// 参数2：可选，搜索的起始索引，默认为0
[1, 2, 3].includes(1, 2); // false
// NaN 的包含判断
[1, NaN, 3].includes(NaN); // true
复制数组[ … ]
复制数组
let arr = [1, 2],
arr1 = [...arr];
console.log(arr1); // [1, 2]
合并数组
console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]
ES6 函数
基本用法
function fn(name,age=17){
console.log(name+","+age);
}
fn("Amy",18); // Amy,18
fn("Amy",""); // Amy,
fn("Amy"); // Amy,17
基本用法
function f(...values){
console.log(values.length);
}
f(1,2); //2
f(1,2,3,4); //4
| 适合使用的场景 | 不适合使用的场景 |
|---|---|
| 需要将外部 this 传递到回调函数中 | 定义函数的方法，且该方法中包含 this |
| 无 | 需要动态 this 的时候 |
基本用法(参数 => 函数体)
var f = v => v;
//等价于
var f = function(a){
return a;
}
f(1); //1
当箭头函数没有参数或者有多个参数，要用 () 括起来。
var f = (a,b) => a+b;
f(6,2); //8
当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f = (a,b) => {
let result = a+b;
return result;
}
f(6,2); // 8
当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来
var f = (id,name) => ({id: id, name: name});
f(6,2); // {id: 6, name: 2}
箭头函数注意点：
- 没有 this、super、arguments 和 new.target 绑定
var func = () => {
// 箭头函数里面没有 this 对象，
// 此时的 this 是外层的 this 对象，即 Window
console.log(this)
}
func(55) // Window
var func = () => {
console.log(arguments)
}
func(55); // ReferenceError: arguments is not defined
- 箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。
function fn(){
setTimeout(()=>{
// 定义时，this 绑定的是 fn 中的 this 对象
console.log(this.a);
},0)
}
var a = 20;
// fn 的 this 对象为 {a: 18}
fn.call({a: 18}); // 18
ES6 模块
- ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。
- ES6 的模块化分为导出（export） @与导入（import）两个模块
特点
-
ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。
-
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
-
每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
-
每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。
export 与 import
- 导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。
- 不仅能导出声明还能导出引用（例如函数）
- ｅxport 命令可以出现在模块的任何位置，但必需处于模块顶层。
- import命令会提升到整个模块的头部，首先执行
基本用法
/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass = class myClass {
static a = "yeah!";
}
export { myName, myAge, myfn, myClass } 《== 此处导出变量，函数，类，需要加大括号
/*-----import [xxx.js]-----*/
import { myName, myAge, myfn, myClass } from "./test.js";《=== 此处引入变量，函数，类，需要加大括号
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!
as 的用法
-
export 命令导出的接口名称，须和模块内部的变量有一一对应关系。
-
导入的变量名，须和导出的接口名称相同，即顺序可以不一致。
as 的用法
/*-----export [test.js]-----*/
let myName = "Tom";
export { myName as exportName }
/*-----import [xxx.js]-----*/
import { exportName } from "./test.js";
console.log(exportName);// Tom
使用 as 重新定义导出的接口名称（改名），隐藏模块内部的变量
/*-----export [test1.js]-----*/
let myName = "Tom";
export { myName }
/*-----export [test2.js]-----*/
let myName = "Jerry";
export { myName }
/*-----import [xxx.js]-----*/
import { myName as name1 } from "./test1.js";//不同模块导出接口名称命名重复， 使用 as 重新定义变量名。
import { myName as name2 } from "./test2.js";///不同模块导出接口名称命名重复， 使用 as 重新定义变量名。
console.log(name1);// Tom
console.log(name2);// Jerry
import 命令的特点
单例模式
多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次
import { a } "./xxx.js";
import { a } "./xxx.js";
// 相当于 import { a } "./xxx.js";
import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import 。
import { a } from "./xxx.js";
import { b } from "./xxx.js";
// 相当于 import { a, b } from "./xxx.js";
静态执行特性：import 是静态执行，所以不能使用表达式和变量。
import { "f" + "oo" } from "methods";
// error
let module = "methods";
import { foo } from module;
// error
if (true) {
import { foo } from "method1";
} else {
import { foo } from "method2";
}
// error
export default 命令
- 在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
- export default 中的 default 是对应的导出接口变量。
- 通过 export 方式导出，在导入时要加{ }，export default 则不需要。
- export default 向外暴露的成员，可以使用任意变量来接收
export default 只能导出一个模块
var a = "My name is Tom!";
export default a; // 仅有一个
export default var c = "error";
// error，default 已经是对应的导出变量，不能跟着变量声明语句
import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收
复合使用
- 可以将导出接口改名，包括 default
- 复合使用 export 与 import ，也可以导出全部，当前模块导出的接口会覆盖继承导出的。
export { foo, bar } from "methods";
// 约等于下面两段语句，不过上面导入导出方式该模块没有导入 foo 与 bar
import { foo, bar } from "methods";
export { foo, bar };
接口改名
/* ------- 特点 1 --------*/
// 普通改名
export { foo as bar } from "methods";
// 将 foo 转导成 default
export { foo as default } from "methods";
// 将 default 转导成 foo
export { default as foo } from "methods";
导出全部模块
/* ------- 特点 2 --------*/
export * from "methods";
总结:
| 说明 | export | import | export default |
|---|---|---|---|
| 使用规则 | 导出的函数声明与类声明必须要有名称 | 导入的函数声明与类声明必须要有名称 | 可以使用任意变量来接收。 |
| 是否加{} | 在导出时要加{ } | 在导入时要加{ } | 在导出时不需要加{}， |
| 在一个文件或模块中 | export 可以有多个 | import 可以有多个 | export default 仅有一个。 |
238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
