16.6 多行字符串

在ES6之前 所有的字符串只能是单行字符串 单引号与双引号定义的都是单行

  • 定义语法
    • ES6定义多行字符串方式 ``
    • 按键位置： 横向数字键1左侧 tab键上侧 esc键下方
  • 插值语法
    • ${}
      注: ${}内是一个JS执行环境，可以放变量，可以放表达式，可以调用方法
  1. var str = `
  2.     <div>
  3.         <div class="box1">${username}
  4.         </div>
  5.         <div class="box1">${password}
  6.         </div>
  7.         <div class="box1">${email}
  8.         </div>
  9.     </div>
  10. `;

16.7 函数中的this

function定义的函数中的this，是可以变化的，遵循的规则是： 谁调用就指向谁， 如果没有明确的调用者，则指向window

  • 会变化的this
  1. function demo() {
  2.     console.log(this);
  3. }
  5. // 自己执行 
  6. demo(); // window
  8. document.onclick = demo; // document
  10. var obj = {
  11.     demo
  12. }
  14. obj.demo(); // obj
  16. setInterval(demo, 1000); // window
  17. setTimeout(demo, 1000); // window

16.7.1 改变函数中this指向的方法

这三个都是函数的方法

  • call
    call可以调用函数 它的作用是执行函数并改变函数中的this指向 如果原函数需要参数 需要往call的参数列表中传递 第一个参数是this 往后的每一个参数是原函数所需参数
  1. function sum(a, b) {
  2.     console.log(this);
  3.     console.log(a, b);
  4. }
  6. sum.call(); // 不传递参数时 this指向window a和b 都是undefined
  7. sum.call(document);//  this指向了document a 和 b都是undefined
  8. sum.call(document.body, 1);// this指向body a时1 b是undefined
  9. sum.call(document.body, 1, 3);// this指向body a时1 b是3
  • apply
    apply可以调用函数 它的作用是执行函数并改变函数中的this指向 如果原函数需要参数 需要往apply的参数列表中传递 第一个参数是this 第二个参数是数组 数组中的每一个成员是原函数所需的参数 按照数组顺序一一对应
  1. function sum(a, b) {
  2.     console.log(this);
  3.     console.log(a, b);
  4. }
  5. sum.apply(); // 不传递参数时 this指向window a和b 都是undefined
  6. sum.apply(document); // this指向了document a 和 b都是undefined
  7. sum.apply(document, [1]); // this指向了document a 是 1 b 是undefined
  8. sum.apply(document, [1, 3]); // this指向了document a 是 1 b 是 3
  • bind
    bind 是ES5中新增的方法 作用是在定义的时候改变this指向(其实是返回了一个新的函数)
  1. function sum(a, b) {
  2.     console.log(this);
  3.     console.log(arguments);
  4. }
  5. // 调用bind方法
  6. var fun = sum.bind(document, 1, 2, 0.4, 0.5, 0.6);
  7. // fun是一个函数 
  8. fun(3, 4, 5, 6, 7);
  9. console.log(sum === fun); // false

16.8 箭头函数

ES6中新增的一种函数定义方式
箭头函数 var name = () => {}

  • demo
  1. var fun = () => {
  2.     console.log("hello 我是一个箭头函数");
  3. }
  4. fun(); // hello 我是一个箭头函数
  5. console.log(typeof fun); // function
  • 箭头函数中的this
    箭头函数中的this 只有在定义箭头函数时能够确定 而且一旦确定再也不会更改
  1. let fun = () => {
  2.     console.log(this);
  3. }
  4. fun(); // window
  5. document.onclick = fun; // 依然是window
  6. let obj = {
  7.     fun
  8. }
  9. obj.fun(); // window
  10. fun.call(document.body); // window
  11. fun.apply(document.documentElement); // window
  12. var fun1 = fun.bind(document);
  13. fun1(); // window

总结：经过各种测试 我们发现无论如何 箭头函数中的this是不会发生变化的

  • 函数的参数默认值
  1. function fun(a = [], b = {}) {
  2.     console.log(a, b);
  3. }
  4. fun(); // 不传递参数 但是因为在定义形参时 通过赋值语法进行了默认值的赋值 所以依然可
  5. fun(0); // 一旦传递了参数 不论传递的是什么 传递了值的参数 将不会再使用默认值
  6. fun("a0", "b1");
  • 函数中没有arguments
  1. let fun = () => {
  2.     console.log(arguments); 
  3. }
  4. fun(); // 报错
  • 箭头函数的简写形式
    • 如果参数只有一个 那么可以省略圆括号
    • 如果函数体中只有一条代码并且还是返回值 则可以省略大括号 和return
  1. var fun = x => x * x * x * x;
  2. var result = fun(5);
  3. console.log(result); // 625

16.9 拓展语法(…)

  • 作用1 作为函数的参数收集器
  1. // ...语法作用之一： 获取参数为数组
  2. let fun = (...a) => {
  3.     console.log(a);
  4. }
  5. fun(); 
  6. fun(1); 
  7. fun(1, 2); 
  8. fun(1, 2, 3);
  • 作用2 解构时使用
  1. var arr = "abcdefg".split("");
  2. console.log(arr); // ["a","b","c","d","e","f","g"]
  3. var [a,b,c, ...d] = arr;
  4. console.log(a, b, c); // a b c
  5. console.log(d); // ["d","e","f","g"]
  • 作用3 传递参数时使用
  1. var arr = "abcdefg".split("");
  2. var [a,b,c, ...d] = arr;
  3. console.log(arr);
  4. console.log(d);
  5. // 将arr数组中最后一项 “g”去掉 并将d数组中 ["d", "e", "f", 
  6. arr.splice(arr.length - 1, 1, ...d);
  7. console.log(arr); // ["a","b","c","d","e","f","d","e","f","g"]

16.10 ES6中新方法

方法的分类

  • 静态方法
    指的是类本身调用的方法叫做静态方法 在类本身 由类调用
  • 普通方法
    指的是类的原型上的方法 在原型上 由实例调用
  1. // 定义类
  2. function Dog() {
  3. }
  5. // 定义普通方法
  6. Dog.prototype.xxx = function() {}
  8. // 定义静态方法
  9. Dog.sayHello = function() {}

16.11 字符串方法

  • startsWith(str, pos) 方法判定字符串是否是以指定的字符串开头(其实是从某个位置开头 默认是从头开始判定)
    • str 被判定的字符串
    • pos 截取的位置(可选,默认为0)
    • 返回值 布尔值 true表示包含 false表示不包含
  1. // startsWith
  2. // 该方法判定字符串是否是以指定的字符串开头(其实是从某个位置开头 默认是从头开始判定)
  3. let str = "今天天气不错";
  4. // 判定str是否是以"今天"开头
  5. let result = str.startsWith("今天");
  6. console.log(result);
  7. // 判定 "天气"是不是从str的下标2开始
  8. let result1 = str.startsWith("天", 1);
  9. console.log(result1);
  • endsWith(str, pos) 该方法判定字符串是否是以指定的字符串结尾(其实是从某个位置结尾 默认是从末尾开始判定)
    • str 被包含的字符串
    • pos 截取的末尾位置(数值依旧是字符串的下标 从头开始截取到该位置 不包含该位置)
    • 返回值 布尔值 true表示包含 false表示不包含
  1.     let str = "今天天气不错";
  2.     // 判定是否是以"错"结尾
  3.     let result = str.endsWith("错");
  4.     console.log(result);
  6.     // 判定字符串的到倒数第二个字是否是以"不"结尾  
  7.     let result1 = str.endsWith("不", 5);
  8.     console.log(result1);
  • includes(str, pos) 该方法判定字符串中是否包含另一个字符串
    • str 被包含的字符串
    • pos 判定的起始位置
    • 返回值 布尔值 true表示包含 false表示不包含
  1.     let str = "今天天气不错";
  2.     // 判定str中是否包含 "气" 这个字
  3.     let result = str.includes("气");
  4.     console.log(result);
  6.     // 判定str中从下标3开始往后 是否包含"气"这个字
  7.     let result1 = str.includes("气", 3);
  8.     console.log(result1);
  • repeat(num) 方法 用于重复字符串
    • num 数字 表示重复次数
    • 返回值 重复之后的字符串
  1.     let str = "今天天气不错";
  2.     let str1 = str.repeat(20);
  3.     console.log(str1);

16.12 数组方法

  • Array.of(a, b, c, d, …) 定义数组
    • 每一个参数都是数组的成员
    • 返回值 数组
  1.     var arr1 = Array.of(10); // Array.of消除了new Array时 只有一个参数 会因为类型的不同而产生的歧义
  • Array.from(likeArray) 用于将类数组对象转为真正的数组
    • likeArray 类数组对象
  1.     // 获取类数组对象
  2.     var lis = document.getElementsByTagName("li");
  3.     console.log(lis);
  4.     // 以前我们可以这么转换
  5.     var arr = [].slice.call(lis);
  6.     console.log(arr);
  7.     // 现在可以通过Array.from
  8.     var arr1 = Array.from(lis);
  9.     console.log(arr1);
  • find(handler) 用于以条件查询数组中的成员
    • handler 函数 有三个参数
      • 成员
      • 成员下标
      • 数组本身
      • 返回值 返回布尔值 如果为真 则停止循环并返回对应的成员
    • 返回值 当参数函数返回真时 返回对应成员 如果没有任何一个返回真 则返回 undefined
  1.     var arr = ["浦东", "奉贤", "宝山", "青浦", "闵行", "徐汇"];
  2.     var baoshan = arr.find(function(value, index, arr) {
  3.         // console.log(value, index, arr);
  4.         return value.includes("山");
  5.     });
  6.     console.log(baoshan);
  • findIndex(handler) 用于以条件查询数组中的成员对应的下标
    • handler(value, index, arr) 函数 有三个参数
      • value 成员
      • index 成员下标
      • arr 数组本身
      • 返回值 返回布尔值 如果为真 则停止循环并返回对应的成员
    • 返回值 当参数函数返回真时 返回对应成员下标 如果没有任何一个返回真 则返回 -1
  • copyWithin(pos, start, end) 用于数组的内部复制 从start开始复制到end结束(不包含) 再将复制的内容从pos开始一一往后替换
    • pos 替换的位置下标
    • start 复制的开始位置下标(包含)
    • end 复制的结束位置下标(不包含)
    • 返回值 原数组 注：该方法会改变原数组
  1.     var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  2.     arr.copyWithin(1, 4, 7);
  3.     console.log(arr); // [1, 5, 6, 7, 5, 6, 7, 8, 9]

16.13 对象方法

  • Object.is(one, two) 用于比较两者是否全等
    • one 比较的一方
    • two 比较的另一方
  1.     // 这里主要说明它与 === 的不同
  2.     console.log(NaN === NaN);  // false 
  3.     console.log(Object.is(NaN, NaN)); // true
  5.     console.log(0 === -0); // true
  6.     console.log(Object.is(0, -0)); // false
  • Object.assign(target, …more) 用于复制对象的属性给目标对象
    • target 被赋予属性的目标对象
    • …more 表示剩余参数 每一个都是对象 这些对象的属性都会赋予给target
  1.     var obj = {
  3.     }
  4.     var obj1 = {
  5.         color: "Red",
  6.         age: 33,
  7.         girlFriend: {
  8.             name: "小花"
  9.         }
  10.     }
  12.     var obj2 = {
  13.         account: "sdifhsidhf"
  14.     }
  16.     // 将obj1和obj2的所有属性和方法复制一份给obj
  17.     Object.assign(obj, obj1, obj2);
  18.     // 复制之后再输出 就已经具备了很多属性和方法
  19.     console.log(obj);
  21.     console.log(obj1.girlFriend === obj.girlFriend) // 地址相同   
  22.     // 修改obj的属性内容
  23.     obj.girlFriend.age = 13;
  24.     console.log(obj1.girlFriend) // 影响到obj1的属性了