前端基础

前端技术栈

1.ES6

1.1 let和const

• var 声明的变量往往会越域，let 声明的变量有严格局部作用域
• var 可以声明多次，let 只能声明一次
• var 会变量提升，let 不存在变量提升
• const声明之后不允许改变，一但声明必须初始化，否则会报错

<script>
        {
            var a = 1;
            let b = 2;
        }
        console.log(a);  // 1
        console.log(b);  // ReferenceError: b is not defined

        var m = 1
        var m = 2
        let n = 3
        let n = 4
        console.log(m)  // 2
        console.log(n)  // Identifier 'n' has already been declared


        console.log(x);  // undefined
        var x = 10;
         console.log(y);   //ReferenceError: y is not defined
        let y = 20;

        const a = 1;
        a = 3; //Uncaught TypeError: Assignment to constant variable.
</script>

1.2 解构表达式

<script>

  //数组解构,之前（将1赋给a，2赋给b，3赋给c）
  let arr = [1,2,3];
  let a = arr[0];
  let b = arr[1];
  let c = arr[2];

  //数组解构,之后
  let [a,b,c] = arr;
  console.log(a,b,c)

  //对象解构，之前（获取对象属性值）
  const person = {
      name: "jack",
      age: 21,
      language: ['java', 'js', 'css']
  }
  const name = person.name;
  const age = person.age;
  const language = person.language;


  //对象解构，之后（person对象中的name属性重命名为abc）
  const { name: abc, age, language } = person;
  console.log(abc, age, language)

  //字符串扩展（es6新加的api）
  let str = "hello.vue";
  console.log(str.startsWith("hello"));//true
  console.log(str.endsWith(".vue"));//true
  console.log(str.includes("e"));//true
  console.log(str.includes("hello"));//true


  //字符串模板 使用`符号包含多行字符串。
  let ss = `<div>
                <span>hello world<span>
            </div>`;
  console.log(ss);

  //字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

  function fun() {
      return "这是一个函数"
  }

  let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
  console.log(info);

</script>

1.3 函数优化

<script>
  //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
  function add(a, b) {
      // 判断b是否为空，为空就给默认值1
      b = b || 1;
      return a + b;
  }
  // 传一个参数
  console.log(add(10));


  //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
  function add2(a, b = 1) {
      return a + b;
  }
  console.log(add2(20));


  //2）、不定参数
  function fun(...values) {
      console.log(values.length)
  }
  fun(1, 2)      //2
  fun(1, 2, 3, 4)  //4

  //3）、箭头函数
  //以前声明一个方法
  // var print = function (obj) {
  //     console.log(obj);
  // }
  var print = obj => console.log(obj);
  print("hello");

  var sum = function (a, b) {
      c = a + b;
      return a + c;
  }

  var sum2 = (a, b) => a + b;
  console.log(sum2(11, 12));

  var sum3 = (a, b) => {
      c = a + b;
      return a + c;
  }
  console.log(sum3(10, 20))


  const person = {
      name: "jack",
      age: 21,
      language: ['java', 'js', 'css']
  }

  function hello(person) {
            console.log("hello," + person.name)
        }

  //箭头函数+解构
  var hello2 = ({name}) => console.log("hello," +name);
  hello2(person);

</script>