Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【JS基础入门】JavaScript基础之值与引用传递、模板字面量、解构赋值、this指向、访问器属性、流程控制等知识点笔记
Blogger Information
Blog 128
fans 9
comment 5
visits 241141
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【JS基础入门】JavaScript基础之值与引用传递、模板字面量、解构赋值、this指向、访问器属性、流程控制等知识点笔记
　一纸荒凉* Armani
Original
1357 people have browsed it

值传递与引用传递

区别很明显，值传递是不会改变实际的参数数值，而引用传递是可以改变参数的实际数值的，还有值传递是基本类型的传递，引用传递是对基本类型进行了封装之后再传递。

  • 值类型（基本类型）：String，Number，Boolean，Null，Undefined。
  • 引用类型：Array、Object、Function、Date等有多个值构成的可变长度的复杂类型。

1、按值传递
值传参针对基本类型，引用传参针对引用类型，传参可以理解为复制变量值。基本类型复制后俩个变量完全独立，之后任何一方改变都不会影响另一方；

  1. let num1 = 5;
  2. let num2 = num1;
  3. console.log(num1,num2); // 5 5
  4. num1 = 6;
  5. console.log(num1,num2); // 6 5

因为是按值传递的，传递完后俩个变量各不相干！

  1. function addTen(num) {
  2.     num += 10;
  3.     return num;
  4. }
  6. var count = 20;
  7. var result = addTen(count);  //按值传递 num = count
  8. alert(count);  // 20, 没变化
  9. alert(result);  // 30

2、引用传递
引用传递适用于引用类型，object，array，function
引用类型复制的是引用（即指针），之后的任何一方改变都会映射到另一方。

  1. // 创建object对象
  2. const obj1 = {
  3.     name: 'zhang',
  4.     email: '123@qqcom',
  5.     cal: '110'
  6. };
  7. const obj2 = obj1;
  8. console.log(obj1,obj2);
  9. // {name: "zhang", email: "123@qqcom", cal: "110"}
  10. // {name: "zhang", email: "123@qqcom", cal: "110"}
  11. // 对象使用点语法访问内部成员
  12. obj1.name = 'shuai';
  13. console.log(obj1,obj2);
  14. // {name: "shuai", email: "123@qqcom", cal: "110"} 
  15. // {name: "shuai", email: "123@qqcom", cal: "110"}
  16. console.log(obj1 === obj2); // true

3、函数传参都是值传递
传参不管是基本类型还是引用类型永远是值传递

  1. function setName(obj) {
  2.     obj.name = "Nicholas";
  3. }
  5. var person = new Object();
  6. setName(person);   // obj = person
  7. alert(person.name);   // "Nicholas" 看起来是按引用传递，但千万不要以为是按引用传递~~~

　当 var person = new Object(); 时，可以用下图表示变量和对象的关系：

　当调用函数 setName(person); 时，下图可以表示全局变量person和局部变量obj的关心：

　以上代码中创建一个对象，并将其保存在变量person中。然后，这个变量被传递到setName(obj)函数中之后就被复制给了obj。在这个函数内部，obj和person引用的是同一个对象。换句话说，即使ECMAScript说这个变量是按值传递的，但obj也会按引用来访问同一个对象。于是，在函数内部为obj添加name属性后，函数外部的person也将有所反应；因为这时的person和obj指向同一个堆内存地址。所以，很多人错误的认为：在局部作用域中修改的对象会在全局对象中反映出来，就说明参数是按引用传递的。

　为了证明对象也是按值传递的，我们再来看看下面这个经过修改的例子：

  1. function setName(obj) {
  2.     obj.name = "Nicholas";
  3.     obj = new Object(); //改变obj的指向，此时obj指向一个新的内存地址，不再和person指向同一个
  4.     obj.name = "Greg";
  5. }
  7. var person = new Object();
  8. setName(person);  //你看看下面，相信我也是按值传递的了吧
  9. alert(person.name);  //"Nicholas"

　当创建obj对象 obj = new Object(); 时，来看看这时person和obj的关系图：

这个例子与前一个唯一的区别，就是setName()函数中添加了两行代码： obj = new Object(); 用来改变obj的指向; obj.name = “Greg”; 用来给新创建的obj添加属性。如果是按引用传递的，那么person就会自动被修改为指向新创建的obj的内存地址，则person的name属性值被修改为”Greg”

函数参数传递按值类型还是引用类型？

基本类型参数的传递与基本类型的复制一样，传递的是变量值。

  1. function addTen(num) {
  2.    num = num + 10;
  3.    return num;
  4. }
  5. var count = 20;
  6. var result = addTen(count);
  7. console.log(count); // 20
  8. console.log(result); // 30

引用类型参数的传递与引用类型的复制一样，传递的是内存地址。

  1. function setName(obj){
  2.    obj.name = 'xxx';
  3.    obj = {name: 'ppp'}; // obj指向一个新的地址，与person不再指向同一个地址
  4.    console.log(obj.name); // 'ppp'
  5. }
  6. const person = {name : 'oo'};
  7. setName(person);
  8. console.log(person.name); // ‘xxx’

官方解释来一发：

ECMAScript中所有函数的参数都是按值传递的。

也就是说，把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。基本类型的传递如同基本类型的复制一样，而引用类型值的传递，如同引用类型变量的复制一样。

总结

很简单，javascript函数参数都是按值传递（都是栈内数据的拷贝）。 基本类型传的是值本身（因为直接把值存在栈内），引用类型传的是对象在内存里面的地址 （因为复杂对象存在堆内，所以在栈里存对象所在的堆地址）。

模板字面量与标签函数

模板字面量是增强版的字符串，它用反引号标识
模板字面量：将插值表达式嵌入到字符串中

  1. let message = `Hello world!`; 
  3. console.log(message); // "Hello world!"
  4. console.log(typeof message);   //"string"
  5. console.log(message.length);// 12

模板字面量看上去仅仅是普通JS字符串的升级版，但二者之间真正的区别在于模板字面量的变量占位符。变量占位符允许将任何有效的JS表达式嵌入到模板字面量中，并将其结果输出为字符串的一部分
变量占位符由起始的 ${ 与结束的 }来界定，之间允许放入任意的JS 表达式。最简单的变量占位符允许将本地变量直接嵌入到结果字符串中

普通字符串拼接

  1. let name = "Nicholas",
  2. message = "Hello,"+name;
  3. console.log(message); // "Hello, Nicholas"

使用模板字面量

  1. let name = "Nicholas",
  2. message =`Hello, ${name}`;
  3. console.log(message); // "Hello, Nicholas"

占位符 ${name} 会访问本地变量name，并将其值插入到message字符串中。message变量会立即保留该占位符的结果
既然占位符是JS表达式，那么可替换的就不仅仅是简单的变量名。可以轻易嵌入运算符、函数调用等

  1. let count = 10,
  2.     price = 0.25,
  3.     message = `${count} items cost $${(count * price).toFixed(2)}.`;
  5. console.log(message); // "10 items cost $2.50."
  6. function fn() {  
  7.   return "Hello World";
  8. }
  9. console.log(`foo ${fn()} bar`); // foo Hello World bar

利用模板字面量动态生成HTML菜单
注意：利用传统的方式拼接HTML非常麻烦，这里使用模板字面量非常高效，在反引号中可以随意书写HTML代码且有提示和高亮，按照标签结构可随意换行进行显示。

  1.       let list = ["汽车", "电脑", "水果"];
  2.       let str = "";
  3.       list.forEach(function (item) {
  4.         str += "<li>" + item + "</li>";
  5.       });
  6.       console.log(str);
  7.       const ul = document.createElement("ul");
  8.       ul.innerHTML = str;
  9.       document.body.appendChild(ul);
  1. // 创建一个数组存放导航菜单
  2. let menus = ['首页','视频','文章','留言','登录'];
  3. // 利用模板字面量创建html代码
  4. let htmlStr = `
  5. <nav>
  6.     <a href="#">${menus[0]}</a>
  7.     <a href="#">${menus[1]}</a>
  8.     <a href="#">${menus[2]}</a>
  9.     <a href="#">${menus[0]}</a>
  10.     <a href="#">${menus[4]}</a>
  11. </nav>`;
  12. console.log(htmlStr);
  13. // 将HTML代码插入到body之后
  14. document.body.insertAdjacentHTML('beforeEnd',htmlStr);


标签模板(标签函数)

模板字面量真正的威力来自于标签模板，每个模板标签都可以执行模板字面量上的转换并返回最终的字符串值。标签指的是在模板字面量第一个反引号前方标注的字符串

  1. let tag = (ms)=>alert(ms);
  2. //传统调用方式
  3. tag('Hello world');
  4. //用标签模板来调用它
  5. tag`Hello world`;
  6.       //标签模板：模板字面量前是一个标识符，本质上是一个函数
  7.       //所以，我们可以认为标签模板是函数调用的特殊形式
  8.       //函数名：模板字面量前面的标识符
  9.       //调用参数：标签后面的模板字面量

tag 就是应用到Hello world模板字面量上的模板标签

标签可以是一个函数，调用时传入加工过的模板字面量各部分数据，但必须结合每个部分来创建结果。第一个参数是一个数组，包含Javascript解释过后的字面量字符串，它之后的所有参数都是每一个占位符的解释值

标签函数通常使用不定参数特性来定义占位符，从而简化数据处理的过程

  1. function tag(literals, ...substitutions) {  
  2.   // 返回一个字符串
  3. }

为了进一步理解传递给tag函数的参数，查看以下代码

  1. let count = 10,
  2.     price = 0.25,
  3.     message = passthru`${count} items cost $ ${(count * price).toFixed(2)}.`;

  • 如果有一个名为passthru()的函数，那么作为一个模板字面量标签，它会接受3个参数首先是一个literals数组，包含以下元素
    1、第一个占位符前的空字符串(“”)
    2、第一、二个占位符之间的字符串(“items cost $”)
    3、第二个占位符后的字符串(“.”)

  • 下一个参数是变量count的解释值，传参为10，它也成为了substitutions数组里的第一个元素

  • 最后一个参数是(count*price).toFixed(2)的解释值，传参为2.50，它是substitutions数组里的第二个元素

  1. var a = 5;
  2. var b = 10;
  3. tag`Hello ${ a + b } world ${ a * b }`; 
  4. // 等同于
  5. tag(['Hello ', ' world ', ''], 15, 50);

通过这种模式，我们可以将literals和substitutions两个数组交织在一起重组结果字符串。先取出literals中的首个元素，再取出substitution中的首个元素，然后交替继续取出每一个元素，直到字符串拼接完成。于是可以通过从两个数组中交替取值的方式模拟模板字面量的默认行为

  1. function passthru(literals, ...substitutions) {
  2.   let result = "";    // 仅使用 substitution 的元素数量来进行循环
  3.   for(let i = 0; i < substitutions.length; i++) {
  4.     result +=literals[i];
  5.     result +=substitutions[i];
  6.   }    // 添加最后一个字面量``
  7.   result += literals[literals.length - 1];    
  8.   return result;
  9. }
  10. let count = 10,
  11. price = 0.25,
  12. message = passthru`${count} items cost $${(count * price).toFixed(2)}.`;
  14. console.log(message); // "10 items cost $2.50."

这个示例定义了一个passthru标签，模拟模板字面量的默认行为，展示了一次转换过程。此处的小窍门是使用substitutions.length来为循环计数

下面来举一个简单的栗子，两个数求和

  1. let sum = (strs,...args)=>{
  2.     console.log(strs);
  3.     // console.log(`${s[0]}+${s[1]}=${s[2]}`);
  4.      console.log(`${strs[0]}${args[0]}${strs[1]}${args[1]}${strs[2]}${args[2]}${strs[3]}`);
  5. }
  6. let a=3,b=2;
  7. sum`${a}+${b}=${a+b}`;

这里我们看到了，第一个参数是由所有的字符串字面量组成的数组，后面是插值表达式的值

String.raw方法，往往用来充当模板字面量的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字面量
如果原字符串的斜杠已经转义，那么String.raw不会做任何处理

String.rawHi\n// "Hi\\n"

“标签模板”的一个重要应用，就是过滤HTML字符串，防止用户输入恶意内容

  1. var message = SaferHTML` ${sender} has sent you a message.`;
  3. function SaferHTML(templateData) {  
  4.   var s = templateData[0];  
  5.   for(vari = 1; i<arguments.length; i++) {    
  6.     var arg = String(arguments[i]);    // Escape special characters in the substitution.
  7.       s += arg.replace(/&/g, "&amp")
  8.       .replace(/</g, "&lt") 
  9.       .replace(/>/g, "&gt");    // Don't escape special characters in the template.
  10.       s +=templateData[i];
  11.   }  
  12.   return s;
  13. }

上面代码中，sender变量往往是用户提供的，经过SaferHTML函数处理，里面的特殊字符都会被转义

  1. var sender = '<script>alert("abc")</script>'; // 恶意代码
  2. var message = SaferHTML`<p>${sender} has sent you a message.</p>`;
  4. console.log(message);//<p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

解构赋值

 我们经常定义许多对象和数组，然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新特性：解构。解构是一种打破数据结构，将其拆分为更小部分的过程。
解构赋值是对赋值运算符的扩展。

ES6之前数组的解构

  1. let arr = [1, 2, 3];
  2. let a = arr[0];
  3. let b = arr[1];
  4. let c = arr[2];
  1. 数组解构（Array）
    等号左边的是解构出来的数据与右侧数组相对应

基本数组解构

  1. let [a, b, c] = [1, 2, 3];
  2. // a = 1
  3. // b = 2
  4. // c = 3

可嵌套数组解构

  1. let [a, [[b], c]] = [1, [[2], 3]];
  2. // a = 1
  3. // b = 2
  4. // c = 3

可忽略

  1. let [, , b] = [1, 2, 3];
  2. // b = 3
  3. let [a, b] = [1, 2, 3];
  4. // a = 1
  5. // b = 2

不完全解构
let [a = 1, b] = []; // a = 1, b = undefined

rest剩余运算符

  1. let [a, ...b] = [1, 2, 3,4];
  2. //a = 1
  3. //b = [2, 3,4]

解构字符串

  1. let [a, b, c, d, e] = 'hello';
  2. // a = 'h'
  3. // b = 'e'
  4. // c = 'l'
  5. // d = 'l'
  6. // e = 'o'

举个栗子：两个数交换

普通交换操作，借助第三个变量t

  1. let a = 5;
  2. let b = 20;
  3. let t;
  4. console.log("a=%d,b=%d",a,b);  // a=5,b=20
  5. t = a;
  6. a = b;
  7. b = t;
  8. console.log("a=%d,b=%d",a,b); // a=20,b=5

利用数组解构赋值进行交换

  1. let a = 5;
  2. let b = 20;
  3. console.log("a=%d,b=%d",a,b);  // a=5,b=20
  4. [a,b] = [b,a];
  5. console.log("a=%d,b=%d",a,b); // a=20,b=5

之前获取对象中的数据

  1. let item = {id: 10, name: "手机",price: 1899};
  2. let id = item.id;
  3. let name = item.name;
  4. let price = item.price;
  1. 对象解构（Object）
    对象字面量的语法形式是在一个赋值操作符左边放置一个对象字面量
  1. let node = {
  2.   type: "Identifier",
  3.   name: "foo"
  4. };
  5. let { type, name } = node;
  6. console.log(type); // "Identifier"
  7. console.log(name); // "foo"

在这段代码中，node.type的值被存储在名为type的变量中；node.name的值被存储在名为name的变量中

  1. ({ type="Literal", name='zhang' } = {type: "Identifier",name: "foo"});
  2. console.log(type); // "Identifier"
  3. console.log(name); // "foo"

[注意] 一定要用一对小括号包裹解构赋值语句，JS引擎将一对开放的花括号视为一个代码块。语法规定，代码块语句不允许出现在赋值语句左侧，添加小括号后可以将块语句转化为一个表达式，从而实现整个解构赋值过程

  1. 参数解构（Function）
    解构可以用在函数参数的传递过程中，这种使用方式更特别。当定义一个接受大量可选参数的JS函数时，通常会创建一个可选对象，将额外的参数定义为这个对象的属性

传统方式获取参数

  1.       let setUser = function (id, userInfo) {
  2.         //要求第二个参数必须是一个对象
  3.         userInfo = userInfo || {};
  4.         let name = userInfo.name;
  5.         let email = userInfo.email;
  6.         let status = userInfo.status;
  7.         return { id, name, email, status };
  8.       };
  9.       let user = new setUser(1);
  10.       user = new setUser(1, {
  11.         name: "admin",
  12.         email: "admin@qq.com",
  13.         status: true,
  14.       });
  15.       console.dir(user);

解构参数进行简化

  1.       setUser = function (id, { name, email, status }) {
  2.         return { id, name, email, status };
  3.       };
  4.       user = new setUser(1, {
  5.         name: "wang",
  6.         email: "wang@qq.com",
  7.         status: true,
  8.       });
  9.       console.dir(user);
  10.       //user = setUser(3);会报错
  11.       //在解构中禁止使用undefined,null来初始化
  12.       //let { x, y } = null;
  13.       //let { x, y } = undefined;
  14.       setUser = function (id, { name, email, status } = {}) {
  15.         return { id, name, email, status };
  16.       };
  17.       console.log(setUser(3));

对象字面量的简化

  1. let user = {
  2.     userName : "zhang",
  3.     userEmail : "zhang@qq.com",
  4.     getInfo: function(){
  5.         return `姓名：${this.userName}，邮箱：${this.userEmail}`;
  6.     }
  7. };
  8. user.getInfo();
  9. let {userName,userEmail} = user;
  10. console.log(userName,userEmail);
  12. // 进行简化
  13. user = {
  14.     userName,
  15.     userEmail,
  16.     getInfo: function(){
  17.         return `姓名：${this.userName}，邮箱：${this.userEmail}`;
  18.     }
  19. };

在 JavaScript 中，使用底下的方式创建对象字面量应该是屡见不鲜了：

  1. let x,y;
  2. let o = {
  3.     x: x,
  4.     y: y
  5. }

在ES6中现在可以直接写：

  1. let x,y;
  2. let o = {x,y};

变量名称会成为特性名称，而变量值会成为特性值。当特性实际参考函数时，在过去会这么写：

  1. var o = {
  2.     doSome : function() {
  3.         //...
  4.     },
  5.     doOther : function(param) {
  6.         // ...
  7.     }
  8. };

ES6 可以简单地写为：

  1. let o = {
  2.     doSome() {
  3.         //...
  4.     },
  5.     doOther(param) {
  6.         // ...
  7.     }
  8. };

了解this的指向

不管函数或者方法是如何声明的,要看这个函数或者方法最终是谁调用的
谁最终调用这个函数或方法,那么这个函数或方法中的this就是谁.

  1. 作为普通函数中的this (window)
    1. var userName = 'zhang';
    2. function welcome(){
    3.  console.log(this.userName);
    4.  console.log(this);
    5. }
    6. welcome();
    7. window.welcome();
    全局函数相当于给window对象添加了一个方法,所以调用welcome()和window.welcome()本质是一样的,所以welcome函数最终是window对象在调用,所以welcome函数内部的this就指向了window对象.运行结果如下：

  1. 作为对象的方法中的this（本身）
    1. var name = 'zhang';
    2. var obj = {
    3.  name : 'shuai',
    4.  sayHi: function(){
    5.      console.log(this)
    6.  }
    7. }
    8. obj.sayHi()
    sayHi方法是由obj对象点出来调用的,所以sayHi方法中的this指向obj对象.所以输出的是obj对象中的name的值, 结果如下：

  1. 构造函数中的this

    直接调用构造函数(window)

  1.  function Student(name,age){
  2.    this.name = name;
  3.    this.age = age;
  4.  }
  5.  var s1 = Student('zhang',20);
  6.  console.log(s1);
  7.  console.log(window.name);

调用Student函数的时候没有用new关键字,那么这就意味着Student函数是window点出来调用的,所以Student函数中的this就是window.然后函数内部没有写return关键字那默认返回值是undefined

使用new调用构造函数(对象)

  1.   function Student(name,age){
  2.    this.name = name;
  3.    this.age = age;
  4.  }
  5.  var s1 = new Student('zhang',20);
  6.  console.log(s1);


大家都知道new关键字会创建一个对象,并且会把构造函数中的this指向这个对象,并且还会把这个对象自动返回, s1就是那个new关键字创建并返回的对象

为构造函数手动return后的情况

  1.   function Student(name,age){
  2.    this.name = name;
  3.    this.age = age;
  4.    console.log(this);
  5.    return {name:'shuai',age:18};
  6.  }
  7.  var s1 = new Student('zhang',20);
  8.  console.log(s1);

因为new关键字会自动帮我们返回他创建的对象,所以一般在构造函数中是不用写return返回值的, 那万一构造函数中就是写了return返回值会怎么样呢?

这个时候就要看return关键字后面返回的值是什么类型的,如果返回的是数值类型/字符串类型/布尔类型/null/undefined,那么会忽略这个返回值. 如果返回的值不是这些类型的,比如是一个数组或者一个对象,那么这个返回值会覆盖原来new关键字自动返回的那个对象. 所以上面代码运行的结果如下:

但是构造函数中的this还是new关键字创建的那个对象, 只是这个对象返回的时候被return关键字返回的新对象给覆盖了,所以s1接受不到而已.

  1. 修改函数中this的默认指向
    默认情况下，函数中this的指向。实际上JavaScript提供了一套机制，允许我们对函数中的this指向进行修改，可以让函数中的this指向我们想要让他指向的对象。
  1. var userName = 'zhang';
  2. function welcome(){
  3.     console.log(this.userName);
  4.     console.log(this);
  5. }
  6. welcome();

上述代码中welcome函数中this指向window对象, 输出的是window, 但是我们现在想让welcome函数中的this指向obj对象,那应该怎么做呢? 

  1. let obj = {
  2.   name: 'zhang',
  3.   age: 18
  4. };
  5. function welcome(){
  6.   console.log(this);
  7. };
  8. welcome.call(obj);

这个时候，要实现这个效果，要想让welcome函数中的this指向obj, 就要使用函数上下文调用模式,比如call、 apply、 bind。

bind() call() apply()方法用法总结

  1. bind()方法
    （创建）返回一个新函数，并且是函数内部this为传入的第一个参数。
    语法：fun.bind(thisArg)
  1. var name = 'ddd'
  2. var a = {
  3.     name:'luoshushu',
  4.     fn:function(){
  5.         console.log(this.name) 
  6.     }
  7. }
  8. var obj = {
  9.     name:'李四'
  10. }
  11. a.fn()  //luoshushu。 this指向a对象
  12. a.fn.bind(window)() //ddd。this指向window
  13. a.fn.bind(obj)()  //李四。this指向obj

默认指向按钮button的，bind()改变了他的this指向

  1. document.querySelector('button').addEventListener('click', function() {
  2.                 console.log(this);
  3.             }.bind({
  4.                 name: "张珊",
  5.                 age: 18
  6.             }));
  1. call()方法
    call方法调用一个函数，其具有一个指定的this值和分别地提供的参数（参数列表）
    语法：fun.call(thisArg,arg1,age2,...)
    参数
    thisArg ：在fun函数运行时指定的this值。

注意：

  • 不传，或者传null、undefined，函数中的this指向window对象
  • 传递另一个函数的函数名，函数中this指向这个函数的引用。
  • 传递字符串、数值和布尔类型等基础类型，函数中的this指向其对应的包装对象，如：srting number boolean
  • 传递一个对象，函数中的this指向对象。
  • arg1,age2,…： 指定的参数列表。
  1. function a(){
  2.     console.log(this)  //输出函数a中的this对象
  3. }
  4. function b(){} //定义函数
  6. var obj = {name:'luoshushu'};  //定义对象
  8. a.call() // Window
  9. a.call(null) // Window
  10. a.call(undefined) // Window
  11. a.call(1) // Number
  12. a.call(' ') // String
  13. a.call(true) // Boolean
  14. a.call(b)  // function b(){}
  15. a.call(obj) // Object。{name: "luoshushu"}
  1. //借用数组方法。（forEach）
  2. function sum(){
  3.     var result = 0;  
  4.   // 将数组中的forEach应用到arguments上  
  5.   Array.prototype.forEach.call(arguments,function(value){
  6.         console.log(value) // 遍历出2，5，7，8，2，6
  7.         result += value
  8.     })
  9.     console.log(result) //30
  10. }
  11. sum(2,5,7,8,2,6)
  1. //对象转换成数组
  2. function sum2(){
  3.  //slice返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
  4.     var args = Array.prototype.slice.call(arguments,0)
  5.       console.log(Array.isArray(args))  //true
  6.       console.log(args) //[23, 234, 6, 5]
  8. }
  9. sum2(23,234,6,5)
  1. //获取数组中的最大值和最小值
  2. var arr = [2,34,66,7,15,-123]
  3. var maxArr = Math.max.apply(null,arr) //66
  4. var maxArr1 = Math.max.call(null,2,34,66,7,15,-123) //66
  1. apply()方法
    apply方法调用一个函数，其具有一个指定的this值，参数为数组或者类数组的对象。
    ps：apply和call的作用类似，只是apply接收的参数为数组，call为若干个参数列表。
    语法：fun.apply(thisArg,[argsArray])
  1. function a(x,y,z){
  2.     console.log(x,y,z)
  3. }
  4. a.apply(null,[1,2,3]) // 1 2 3

apply、call、bind三者区别：

  1. var obj = {
  2.     a: 99
  3. }
  4. var  foo = {
  5.     getX : function(){
  6.           return this.a
  7.     }    
  8. }
  9. foo.getX.bind(obj)() // 99
  10. foo.getX.call(obj)   // 99
  11. foo.getX.apply(obj)  // 99

相同点：

  • apply、call、bind 三者都是用来改变函数this对象的指向。
  • apply、call、bind 三者第一个参数都是this要指向的对象，也就是指定的上下文。
  • apply、call、bind 三者都可以利用后续参数传参。

不同点：

  • bind是返回对应的函数，便于稍后调用。
  • apply、call 则是立即调用。
  • bind的参数是在稍后调用时候传入的
  • call的参数是逗号分割一个个传入
  • apply的参数是以数组形式传入的

访问器属性

访问器属性不包含数据值。它包含一对getter和setter函数。当读取访问器属性时，会调用getter函数并返回有效值；当写入访问器属性时，会调用setter函数并传入新值，setter函数负责处理数据。

  1. // 对象成员：属性，方法
  2. // 属性：类似于变量
  3. // 方法：类似于函数
  4. const product = {
  5.   data: [
  6.     { id: 1,name: '电脑',num: 5,price: 199},
  7.     { id: 2,name: '电视机',num: 88,price: 2399},
  8.     { id: 3,name: '洗衣机',num: 20,price: 599}
  9.   ],
  10.   // 计算总金额方法
  11.   // ES6的方法的简化，将冒号和function关键字删除 getAmounts: function()
  12.   getAmounts(){
  13.     return this.data.reduce((t,c)=>(t += c.price*c.num),0);
  14.   },
  16.   // 访问器属性：将一个方法伪装/包装成一个属性
  17.   // get 读取  set 写操作
  18.   get total(){
  19.     return this.data.reduce((t,c)=>(t += c.price*c.num),0);
  20.   },
  21.   // 修改洗衣机的价格
  22.   set setPrice(price){
  23.     this.data[2].price = price;
  24.     console.log(this.data);
  25.   }
  27. };
  28. // console.log(`总金额：${product.getAmounts()}元`) // 总金额：224087元
  30. // 不想用方法，想以属性的方式来获取总金额
  31. console.log(`总金额：${product.total}元`);
  32. // 访问器属性
  33. product.setPrice = 99999;

一.访问器属性定义：
访问器属性由get和set方法定义。
（1）.读取属性的时候调用get方法。
（2）.设置属性的时候调用set方法。

  1. let web={
  2.     _webName:Hello World!,
  3.     get webName(){
  4.         return this._webName;
  5.     },
  6.     set webName(webName){
  7.         this._webName=webName;
  8.     }
  9. }

访问器属性的两个方法都是可选的，省略get，那么无法读取该属性，省略set，那么此属性只读。

上面是在字面量中定义访问器属性，当然也可以利用Object.defineProperty方法定义。

  1. let web={
  2.   _webName: "zhang"
  3. }
  4. Object.defineProperty(web, 'webName', {
  5.   get: function() {
  6.     return this._webName;
  7.   },
  8.   set: function(webName) {
  9.     this._webName=webName;
  10.   }
  11. });

二.访问器属性优先级：
访问器属性的优先级高于同名的普通属性

  1. let user = {
  2.   data: {name},
  3.   get name(){
  4.     return this.data.name;
  5.   },
  6.   set name(v){
  7.     this.data.name = v;
  8.   }
  9. };
  10. // 调用的set方法
  11. user.name = 'zhang';
  12. // 调用的get方法
  13. console.log(user.name);

流程控制语句

通过一些特殊结构可以让js代码加载时，要么跳过一部分不加载，要么循环加载一部分代码，它包含条件分支语句和循环语句。

  1. 条件分支语句

    单分支if语句

  1.   if (/* condition */) {
  2.      // code
  3.  } else {
  4.    // code
  5.  }

判断成绩是否及格

  1. let score = 59;
  2. if(score>=60){
  3.   console.log("及格");
  4. }

多分支if语句

  1.  if (/* condition1 */) {
  2.    // code
  3.  } else if (/* condition2 */) {
  4.    // code
  5.  } else {
  6.    // code
  7.  }

判断成绩是否及格

  1. let score = 59;
  2. if(score>=60){
  3.   console.log("及格");
  4. }else {
  5.   console.log("不及格")
  6. }

三元表达式
语法：布尔表达式 ? 真时的值 : 假时的值

  1. var a;
  2.  // 如果a不为空或undefined，那么就取a本身的值，否则赋予1作为默认值。
  3.  a = a ? a : 1;

判断成绩是否及格

  1. let score = 59;
  2. console.log(score>=60?"及格":"不及格");

switch语句

  1.  switch (statement) {
  2.    case value1:
  3.      // code
  4.      break;
  5.    case value2:
  6.      // code
  7.      break;
  8.    ...
  9.    default:
  10.      // code
  11.  }

默认会根据statement的结果，与case后的value进行匹配，满足匹配条件则执行里面的代码，否则跳过该case；break用来打断后续的匹配；default可以不写。

  1. let score = 59;
  2. switch (true){
  3.   case score>=60 && score<80:
  4.     console.log("合格");
  5.     break;
  6.   case score>=80 && score<=100:
  7.     console.log("学霸");
  8.     break;
  9.   case score>100 || score<0:
  10.     console.log("非法数据");
  11.     break;
  12.   default:
  13.     console.log("补考");
  14.     break;
  15. }
  17. let status = "success";
  18. switch(status.toLowerCase()){
  19.   case "success":
  20.     console.log("请求成功！");
  21.     break;
  22.   case "error":
  23.     console.log("请求失败！");
  24.     break;
  25.   default:
  26.     console.log("非法请求！")
  27. }
  1. 循环语句

for循环

  1.  /*
  2.  for (index_init; condition; step) {
  3.    // code
  4.  }
  5.  */
  6.  ​
  7.  for(let i = 0; i < 10; i++) {
  8.    console.log(i);
  9.  }

do while循环

  1. do {
  2.    // code
  3.  } while(condition);

while循环

  1.  while(condition) {
  2.    // code
  3.  }

break语句
用来打断当前的循环，跳出该层循环

continue语句
用来中断执行后续该次循环的语句，通俗的说就是跳过continue后面的语句，马上开始下一次循环。

使用for+if对集合进行穷举和匹配

  1. for (let i = 0; i < 1000; i++) {
  2.   if (i % 3 === 2) {
  3.     console.log(i);
  4.   }
  5. }

穷举0~999之间满足i%3=2的所有情况

累加1~10的和

  1. let total = 0;
  2. for (let i = 1; i <= 10; i++) {
  3.   total += i;
  4. }
  5. console.log(total);

作业：

  1. 实例演示数组，对象，传参解构; 
  1. // 数组解构
  2. [a, ...b] = [1, 2, 3,4];
  3. // 对象解构
  4. ({name,age}={name:"zhang",age:18})
  5. // 传参解构
  6. setUser = function (id, { name, email, status }) {
  7.         return { id, name, email, status };
  8.       };
  9. let user =  setUser(10, {
  10.   name: "zhang",
  11.   email: "zhang@qq.com",
  12.   status: true,
  13. });
  1. 实例演示访问器属性的get,set操作
  1. let user = {
  2.   data:[{name:"张三",age: 18,gender:"男"},
  3.         {name:"李四",age: 15,gender:"男"},
  4.         {name:"王五",age: 23,gender:"女"},
  5.         {name:"赵六",age: 26,gender:"男"}],
  6.   get info(){
  7.     console.log(this.data);
  8.   },
  9.   set userAdd(v){
  10.     this.data.push(v);
  11.     console.log(this.data);
  12.   }
  13. }
  14. user.info;
  15. user.userAdd = {name:"七七",age: 16,gender:"女"};
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post