1. 值传递与引用传递

1.1 值传递

  • 值传递发生在基本数据类型中
  1.         let a = 10;
  2.         let b = a;
  3.         console.log(a, b); //10 10
  4.         a = 5;
  5.         console.log(a, b); //5 10

1.2 引用传递

  • 发生在引用类型，数组，对象
  1.         let s1 = {
  2.             x: 1,
  3.             y: 1
  4.         };
  5.         console.log(s1);
  6.         // {x:1, y:1}
  7.         let s2 = s1;
  8.         console.log(s2);
  9.         // {x:1, y:1}
  10.         console.log(s1 === s2);
  11.         // true
  12.         s1.x = 10;
  13.         console.log(s1);
  14.         // {x:10, y:1}
  15.         console.log(s2);
  16.         // {x:10, y:1}

1.3 传参

  • 函数中，始终是值传递
  • 传入对象，更新对象的属性仍属于值传递，因为对象没有被改变
  1.         //基本类型
  2.         const f1 = x => x = 10;
  3.         let p = 5;
  4.         f1(p);
  5.         console.log(p);
  6.         //对象
  7.         const f2 = (obj) => { obj.age = 22; obj = {}; };
  8.         let o = {
  9.             age: 10,
  10.             id: 0001
  11.         }
  12.         console.log(o);
  13.         // {age:10, id:1}
  14.         f2(o);
  15.         console.log(o);
  16.         // {age:22, id:1}

*

  • 深拷贝：值传递
  • 浅拷贝：引用传递

2. 模板字面量

  • 字符串字面量+变量插值（嵌入到字符串）
  1.         let name = "Tom";
  2.         let greet = `Hello, ${name}`;
  3.         console.log(greet);
  5.         let stu = {
  6.             id: 1112,
  7.             name: "Em",
  8.             age: 25,
  9.             married: false
  10.         }
  11.         let stuInfo = `
  12.         <div>
  13.             <p>ID: ${stu.id}</p>
  14.             <p>姓名：${stu.name}</p>
  15.             <p>年龄：${stu.age}</p>
  16.             <p>已婚：${stu.married}</p>
  17.             </div>
  18.         `;
  19.         console.log(stuInfo);
  20.         document.write(stuInfo);

2.1 标签函数

  • 第一个参数：字符串本身元素组成的数组
  • 第二个及以后：插值/插值组成的数组
  1.         //少量参数
  2.         let sum = (strs, a, b) => {
  3.             console.log(strs);
  4.             console.log(a, b);
  5.         }
  6.         let a = 5;
  7.         let b = 10;
  8.         let c = 20;
  9.         sum`${a}+${b}=`;
  10.         //多个参数
  11.         sum = (strs, ...arr) => {
  12.             console.log(strs);
  13.             console.log(arr);
  14.         }
  15.         sum`${a}+${b}+${c}=`;

3. 解构

3.1 数组解构

  1.         let arr = [1, 2, 3];
  2.         let [a, b] = arr;
  3.         console.log(a, b);
  4.         // 1 2
  5.         let c;
  6.         [a, b, c] = arr;
  7.         console.log(c);
  8.         // 3
  9.         arr = [1, 2, 3, 4, 5, 6, 7];
  10.         [a, b, ...c] = arr;
  11.         console.log(a, b, ...c);
  12.         // 1 2 3 4 5 6 7
  13.         [, , , , , c,] = arr;
  14.         console.log(c);
  15.         // 6
  16.         // let [x, y] = [8, 9];
  17.         x = 80;
  18.         y = 90;
  19.         console.log(x, y);
  20.         // 80 90
  21.         [y, x] = [x, y];
  22.         console.log(x, y)
  23.         // 90 80

3.2 对象解构

  1.         let stu = { name: "Tom", age: 22 };
  2.         ({ name, age } = stu);
  3.         // let { name, age } = stu;
  4.         console.log(name, age)
  5.         // Tom  22

3.3 参数解构

  1.         let sum = ([a, b]) => a + b;
  2.         console.log(sum([60, 60]));
  3.         // 120
  5.         let stu1 = ({ name, age }) => [name, age];
  6.         console.log(stu1({ name: "Em", age: 25 }));
  7.         //["Em", 25]

3.4 对象简化

  • 如果对象的属性与变量作用域相同且同名，可以写作：
  1.         x = 90, y = 80;
  2.         let user = {
  3.             x,
  4.             y
  5.         }
  6.         console.log(user);
  7.         // {x: 90, y: 80}

4 bind() call() apply() 函数

  • 默认的this关键字指向window
  • 在对象中作为属性的函数里，this指向的是当前的对象
  • 这三个函数用来改变this关键字的指向
  1.         let stu = {
  2.             name: "Em",
  3.             age: 30
  4.         }
  6.         let name = "hehe";
  8.         let obj = {
  9.             name: "Tom",
  10.             age: 22,
  11.             foo: function () {
  12.                 console.log("Name: " + this.name);
  13.                 console.log("Age: " + this.age);
  14.             }
  15.         }
  16.         console.log(this.name);
  17.         obj.foo();
  19.         obj.foo.bind(stu)();
  20.         obj.foo.call(stu);
  21.         obj.foo.apply(stu);

  • 若函数有参数需传入：
  1.         obj = {
  2.             name: "Tom",
  3.             age: 22,
  4.             foo: function (i, s) {
  5.                 console.log("Name: " + this.name);
  6.                 console.log("Age: " + this.age);
  7.                 console.log("Interest: " + i);
  8.                 console.log("Sport: " + s);
  9.             }
  10.         }
  11.         obj.foo.bind(stu, "Xbox", "Tennis")();
  12.         obj.foo.apply(stu, ["PS4", "Badminton"]);
  13.         obj.foo.call(stu, "Switch", "Basketball");

5. 访问器属性 Getter Setter

  • 方法以属性的方式使用
  • 简化语法
  1.         let item = {
  2.             name: "unknown",
  3.             price: 0,
  4.             amount: 0,
  5.             set setName(name) {
  6.                 this.name = name;
  7.             },
  8.             set setPrice(price) {
  9.                 this.price = price;
  10.             },
  11.             get addItem() {
  12.                 this.amount++;
  13.             },
  14.             get getName() {
  15.                 return this.name;
  16.             },
  17.             get getPrice() {
  18.                 return this.price;
  19.             },
  20.             get getAmount() {
  21.                 return this.amount;
  22.             }
  23.         }
  25.         item.addItem;
  26.         console.log(item.getAmount);
  27.         item.setName = "iPad";
  28.         console.log(item.getName);
  29.         item.setPrice = "199";
  30.         console.log(item.getPrice);
  31.         //1
  32.         //iPad
  33.         //199

6. 流程控制

6.1 if 语句

  • 语法
    1.     if(true) return a = 1;
    2.        else return a = 2;
  • 当只有执行语句只有一行时，{}括号可以省略，多行时不可以
  1.         let a = 1;
  2.         if (a > 60)
  3.             console.log(true);
  4.         else
  5.             console.log(false);
  6.             // false
  • 多个分支时
  1.         let foo = (speed) => {
  2.             if (speed < 60 && speed >= 0) {
  3.                 console.log("too slow");
  4.             } else if (speed >= 60 && speed <= 100) {
  5.                 console.log("just right");
  6.             } else if (speed > 100 && speed < 200) {
  7.                 console.log("too fast");
  8.             } else {
  9.                 console.log("???");
  10.             }
  11.         }
  12.         let currentSpeed = 80;
  13.         foo(currentSpeed);
  14.         currentSpeed = 30;
  15.         foo(currentSpeed);
  16.         currentSpeed = 150;
  17.         foo(currentSpeed);
  18.         currentSpeed = -1;
  19.         foo(currentSpeed);

6.2 switch 语句

  • 语法
    1.   switch(true) {
    2.       case a:
    3.       ...;
    4.       break;
    5.       case b:
    6.       ...;
    7.       break;
    8.       default:
    9.       ...;
    10.       break;
    11.   }

*case 也可以是表达式表示多个值，如：

case a>0&&a<10:
console.log(true);

但多用于单个值的判断

  1.         let animal = "cat";
  2.         switch (animal) {
  3.             case "cat":
  4.                 console.log("猫");
  5.                 break;
  6.             case "dog":
  7.                 console.log("狗");
  8.                 break;
  9.             default:
  10.                 break;
  11.         }
  12.         //猫

6.3 三元运算符

  • 用于简化双分支
  1.         currentSpeed = 2000;
  2.         animal = "cat";
  3.         console.log(currentSpeed <= 200 ? "OK" : "Boom");
  4.         //Boom
  5.         console.log(animal === "cat" ? true : false);
  6.         //true

更多相关文章

  1. 【JS基础入门】JavaScript中创建对象的7种创建模式
  2. 关于new 的一点想法
  3. 第118天：Python 之对象的比较与拷贝
  4. 第115天：Python 到底是值传递还是引用传递
  5. 拯救单身狗：这个对象生成器帮你看看未来对象长啥样
  6. 入门面向对象，第一个实例！
  7. 数组，对象，传参解构; 访问器属性的get,set操作
  8. 字典和json的区别是什么?Python学习
  9. 7 个 JavaScript 新特性

随机推荐

  1. Android 使用iperf测试wifi吞吐量
  2. 二、 Android中gravity与layout_gravity
  3. Linux下Android(安卓)ADB驱动安装详解
  4. JNI 入门
  5. 8. android Tab 选项卡控件
  6. Android Service AIDL 远程调用服务 【简
  7. Android Debug certificate expired
  8. android实现服务器图片本地缓存
  9. Android EditText 光标控制，颜色修改，显示
  10. 利用 Android Keystore 系统 加密存储和