2022-05-16 ES6新增内容的知识点补充(零碎)

*之前文章归纳详见

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. 字符串拼接

传统字符串:双引号" “和单引号’ ',以加号”+“作为字符串拼接
ES6字符串:反引号` `,以”${}"拼接起字符串

反引号创建的字符串能保留更多信息

        var oldStr = "hello\
        world";
        var newStr = `hello
        world`;
        console.log(oldStr);//需要"\"连接否则报错,其且没有位置信息
        //输出: hello     world
        console.log(newStr);//保留了位置信息
        /*输出:
        hello
              world
              */

反引号拼接的字符串有更高的灵活性

        function user({
            name,
            age,
            sex
        }) {
            // return ("我是" + name + ",今年" + age + "岁,我是" + sex + "生");
            return (`我是${name},今年${age}岁,我是${sex}生`);
        }
        console.log(user({
            age: 18,
            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);
}