- // 1.声明提升
- console.log(name);
- var name = "哈哈";
-
- // 2. 变量覆盖,发生变量覆盖可能会导致数据丢失以及各种不可预知的bug
- var demo = "小明";
- var demo = "小红";
- console.log(demo)//小红
-
- // 3. 没有块级作用域,i是定义在循环体之内的,原则上讲只能在循环体内打印
- function fn2(){
- for(var i = 0; i < 5; i++){
- // do something
- }
- console.log(i); //5
- }
- fn2();
let:ES6新增,用于声明变量,有块级作用域 下面换成let就不会存在上述问题:
- // 1. 不会存在声明提前,必须先声明
- console.log(name); //此处会报错
- let name = "哈哈";
-
- // 2. 不会有变量覆盖
- let demo = "小明";
- let demo = "小红";
- console.log(demo)// 此处会报错 告诉你已经定义了此变量
-
- // 3. 有块级作用域
- function fn2(){
- for(let i = 0; i < 5; i++){
- // do something
- }
- console.log(i); // 此处会报错,无法打印
- }
- fn2();
const PI = "3.1415926";
undefined
2.1 对象解构赋值
- let url = { username: "小红", password: "123455" };
- let { username, password } = url;
- console.log(username); //"小红"
- console.log(password); //"123455"
2.2 数组解构赋值
- let [, , third] = ["foo", "bar", "baz"];
- third // "baz"
2.3 函数参数的解构赋值
- function move({ x = 0, y = 0 } = {}) {
- return [x, y];
- }
- console.log(move({ x: 3, y: 8 })); // [3, 8]
- console.log(move({ x: 3 })); // [3, 0]
- console.log(move({})); // [0, 0]
- console.log(move()); // [0, 0]
用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的散列值。
console.log([1, 2, 3]); //[1, 2, 3]
console.log(...[1, 2, 3]); //1 2 3
也是三个点号(形式为...变量名),不过其功能与扩展运算符恰好相反,把逗号隔开的散列组合成一个数组,用于获取函数的多余参数
- function fun(a, b, ...values) {
- console.log(a); //1
- console.log(b); //2
- console.log(values); //[3, 4, 5, 6]
- }
- fun(1, 2, 3, 4, 5, 6);
3.1 普通字符串
- // 普通字符串
- let ttring = "hello"+"小兄弟";
- console.log(ttring);// hello小兄弟
-
- // 如果想要换行\n
- let tring = "hello'\n'小兄弟"
- console.log(tring);// hello
- // 小兄弟
3.2 模板字符串
- let str1 = "穿堂而过的";
- let str2 = "风";
- // 模板字符串
- let newStr = `我是${str1}${str2}`;
- console.log(newStr)// 我是穿堂而过的风
-
- // 字符串中调用方法
- function fn3(){
- return "帅的不行!";
- }
- let string2= `我真是${fn3 ()}`;
- console.log(string2); // 我真是帅的不行!
4.1 箭头函数
a. 基本用法
- let fn = v => v;
- //等价于
- let fnn = function(num){
- return num;
- }
- fnn(100);
- console.log(fnn(100));// 输出100
b. 带参数的写法
- let fn2 = (num1,num2) => {
- let result = num1 + num2;
- return result;
- }
- fn2(3,2);
- console.log(fn2(3,2));// 输出5
c. 箭头函数中的this指向问题
- function fn3(){
- setTimeout(()=>{
- // 定义时,this 绑定的是 fn3 中的 this 对象
- console.log(this.a);
- },0)
- }
- var a = 10;
- // fn3 的 this 对象为 {a: 10},因为它指向全局: window.a
- fn3.call({a: 18}); // 改变this指向,此时 a = 18
5.1 类的定义
- // 匿名类
- let Demo = class {
- constructor(a) {
- this.a = a;
- }
- }
- // 命名类
- let Demo = class Demo {
- constructor(a) {
- this.a = a;
- }
- }
5.2 类的声明
- class Demo {
- constructor(a) {
- this.a = a;
- }
- }
5.3 类的主体
- class Demo{}
- Demo.prototype.a = 2;
- class Demo {
- a = 2;
- constructor () {
- console.log(this.a);
- }
- }
- class Demo{
- constructor(){
- console.log('我是构造器');
- }
- }
- new Demo(); // 我是构造器
5.4 实例化对象
- class Demo {
- constructor(a, b) {
- this.a = a;
- this.b = b;
- console.log('Demo');
- }
- sum() {
- return this.a + this.b;
- }
- }
- let demo1 = new Demo(2, 1);
- let demo2 = new Demo(3, 1);
- // 两者原型链是相等的
- console.log(demo1._proto_ == demo2._proto_); // true
6.1 Maps 和 Objects 的区别
6.2 Map中的key
- // 1. key是字符串
- let myMap = new Map();
- let keyString = "string";
-
- myMap.set(keyString, "和键'string'关联的值");
-
- // keyString === 'string'
- myMap.get(keyString); // "和键'string'关联的值"
- myMap.get("string"); // "和键'string'关联的值"
-
- // 2.key是对象
- let myMap = new Map();
- let keyObj = {},
-
- myMap.set(keyObj, "和键 keyObj 关联的值");
- myMap.get(keyObj); // "和键 keyObj 关联的值"
- myMap.get({}); // undefined, 因为 keyObj !== {}
-
- // 3. key也可以是函数或者NaN
6.3 Map 的迭代
- // 1.使用 forEach
- let myMap = new Map();
- myMap.set(0, "zero");
- myMap.set(1, "one");
-
- // 0 = zero , 1 = one
- myMap.forEach(function(value, key) {
- console.log(key + " = " + value);
- }, myMap)
-
- // 2. 也可以使用 for...of
6.4 Map 与 Array的转换
- letkvArray = [["key1", "value1"], ["key2", "value2"]];
-
- // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
- let myMap = new Map(kvArray);
-
- // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
- let outArray = Array.from(myMap);
6.5 Map和ForEach 的区别
.forEach() 适合于你并不打算改变数据的时候,而只是想用数据做一些事情
- let arr = ['a', 'b', 'c', 'd'];
- arr.forEach((val) => {
- console.log(val); // 依次打印出 a,b,c,d
- });
- let arr = [1, 2, 3, 4, 5];
- let arr2 = arr.map(num => num * 2).filter(num => num > 5);
- console.log(arr2);// arr2 = [6, 8, 10]
可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如 arguments对象、DOM NodeList 对象)、字符串。 for...of 不能遍历普通 Object 对象。 for...in 循环,只能获得对象的键名,不能直接获取属性值。 for...of 循环,允许遍历获得属性值。
用于异步操作,它表示一个尚未完成且预计在未来完成的异步操作。将异步操作以同步操作的流程表示出来,利于阅读和维护。将数据请求和数据处理明确区分开,掌握控制权
async 也是处理异步的,它是对 Promise 的一种扩展,让异步更加方便
async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。当函数执行的时候,一旦遇到 await 就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。