2022-05-16 ES6新增内容的知识点补充

*之前文章归纳详见

文章目录 1.字符串方法includes:查找字符串是否包含某段字符串startsWith:查找字符串是否(从某位置)以某段字符串开头endsWith:查找字符串是否(从某位置)以某段字符串结尾 2. 字符串拼接3.箭头函数函数体只有一句话时,可以省略{}4.箭头函数的this指向宿主对象验证 5.JSON对象和字符串的相互转化JSON对象=>字符串字符串=>JSON对象 6.对象方法的ES6新写法7.for..of可以用来遍历数组和字符串,不能遍历对象

1.字符串方法

*三个单词都有s,都不能忽略

includes:查找字符串是否包含某段字符串 startsWith:查找字符串是否(从某位置)以某段字符串开头 endsWith:查找字符串是否(从某位置)以某段字符串结尾

var str = 'I have a dream';
console.log(str.includes('dream', 3)); //从下标3元素开始查找字符串
console.log(str.startsWith('have', 2)); //从下标2元素作为开始,查找字符串
console.log(str.endsWith('a', 4)); //从下标4元素作为结尾,查找字符串

2. 字符串拼接

var name='张三',sex='男';
var say='我叫${name},我是一个${sex}生'
//??

3.箭头函数函数体只有一句话时,可以省略{}

var fn2 = () => console.log("hello~fn2");
var fn3 = (name, age) => "我叫" + name + ",今年" + age;
fn2();//此时直接return结果
console.log(fn3("张三", 18));

4.箭头函数的this指向宿主对象 验证

  // 普通函数的this指向window
  var fn1 = function() {
      console.log("fn1", this); //Window
  };
  fn1();
  // 箭头函数的this指向宿主对象
  var fn2 = () => console.log("fn2", this); //Window
  fn2();
  // 对象方法中的this指向对象本身
  var obj = {
      name: "张三",
      say() {
          console.log("obj.say", this); //obj
          // 方法中的常规函数
          function fn3() {
              console.log("fn3", this); //WIndow
          }
          fn3();
          // 方法中的箭头函数
          let fn4 = () => console.log("fn4", this); //obj
          fn4();
      }
  };
  obj.say();
  obj.say.fn3;
  /*总结:
  (常规)函数中的this永远指向window=>类似车钥匙借人单车永远仍然是原主人的
  箭头函数中的this指向宿主对象=>类似钞票换兜就换了所有者*/

5.JSON对象和字符串的相互转化 JSON对象=>字符串

JSON.stringify(jsonObj)

字符串=>JSON对象

JSON.parse(str)

示例:

var jsonObj = {
    "name": "张三",//key也要用""包起来
    "age": 18
}
console.log(typeof(jsonObj)); //object
// JSON对象转化为字符串
var str = JSON.stringify(jsonObj); 
//stringify:字面理解就是"把..字符串化"
console.log(typeof(str)); //string
//字符串转化为JSON对象
console.log(JSON.parse(str));//object
//parse vt. 从语法上描述或分析词句:就是把字符串包含的JSON信息再用JSON对象的结构描述出来

6.对象方法的ES6新写法

ES6以前:fn: function() {}

ES6:fn(){}

var objold = {
    say: function() {//原有写法
        console.log("你好");
    }
};
var objnew = {
    say() {//新写法
        console.log("hello");
    }
}
objold.say();
objnew.say();

7.for…of可以用来遍历数组和字符串,不能遍历对象

var users = ["张三", "李四", "王五"];
for (var i of users) {
    console.log(i);
}