（一）从零学习VUE -ES6简单解析

ES6

• ES6
  参考地址：https://sagittarius-rev.gitbooks.io/understanding-ecmascript-6-zh-ver/content/
  下边所有示例都出自于 上边的文档 ，搬出来呢结果 只是为了让我自己加深印象。如果觉的我写的不够详细 ，大神直接看文档

• 块级绑定

  • var 声明与 变量提升

    • 使用 var 关键字声明的变量，无论其实际声明位置在何处，都会被视为声明于所在函数的顶部（如果声明不在任意函数内，则视为在全局作用域的顶部）。这就是所谓的变量提升（ hoisting ）

    function getValue(condition) {
    
        if (condition) {
            var value = "blue";
    
            // 其他代码
    
            return value;
        } else {
    
            // value 在此处可访问，值为 undefined
    
            return null;
        }
    
        // value 在此处可访问，值为 undefined
    }
    

    如果你不太熟悉 JS ，或许会认为仅当 condition 的值为 true 时，变量 value 才会被创建。但实际上， value 无论如何都会被创建。 JS 引擎会默默地将 getValue 函数调整为如下形式：

    function getValue(condition) {
    
        var value;
    
        if (condition) {
            value = "blue";
    
            // 其他代码
    
            return value;
        } else {
    
            return null;
        }
    }
    

    value 变量的声明被提升到了函数顶部，而初始化操作则保留在原处。这意味着在 else 分支内 value 变量也是可访问的，在此处它的值并未被初始化，因此是 undefined 。
    JS 的初学者经常需要花点时间才能习惯变量提升，而若不理解这种特有行为，就可能导致程序 bug 。正因如此， ES6 引入了块级作用域，让变量的生命周期更加可控。

  • 块级声明
    块级声明字面理解就是在指定块的作用域起效，外边无法访问。关键字let

    • let 声明语法与 var 语法一值。 可以直接用let 替换 var 进行变量声明，但let声明的变量不会提升到顶部。只在当前块中起效

  if(bool)
  {
  	// value 只在大括号里边起效
  	let value=true
  }
  

    	- 注意 ：不能在同一个作用域里 重复声明 一样的变量
    	
  
    	```
    	if(bool)
    	{
    		let value=true
    		//语法错误
    		let value=true
    	}
    	```
    - ES6 里边引入了常量
    	- const 它们的值在被设置完成后就不允许再被更改
    		-  注意 
    			- 1  必须初始化
    			- 2  它跟let一样都是块级声明
    			- 3  不能在同一作用域里边重复声明同一个值
    			- 4  不能给常量重复赋值
    			```
    			const maxItems = 5;
    			maxItems = 6;      // 抛出错误
    			
    			```
    			- 5  const 声明会阻止对于变量绑定与变量自身值的修改，这意味着它并不会阻止对变量成员的修改
    			```
    			const person = {
    				 name: "Nicholas"
    			}
    					
    			// 工作正常
    			person.name = "Greg";
    					
    			// 抛出错误
    			person = {
    					    name: "Greg"
    					    }
    		```
  

• ES6 字符串

  • 识别子字符串的方法
    • 1.indexof ：array.indexOf(item,start) 参数解析：item 必须 可以查找元素 Start 可选整数参数，规定在字符串开始检索的位置。他的合法取值是0 到 stringIObiect.lengt-1,如果省略该参数，则将从字符串的首字符开始检索。
    • 2 includes() 方法，若给定文本存在于字符串中，会返回 true ，否则返回 false 。
    • 3 startsWith() 方法，若给定文本出现在字符串起始处，返回 true ，否则返回 false
    • 4 endsWith() 方法，若给定文本出现在字符串结尾处，返回 true ，否则返回 false 。
    • 简介：
      每个方法都接受两个参数：需要搜索的文本，以及可选的搜索起始位置索引。当提供了第二个参数时， includes() 与 startsWith() 方法会从该索引位置开始尝试匹配；而 endsWith() 方法则会将该位置减去需搜索文本的长度，在计算出的位置尝试匹配。若未提供第二个参数， includes() 与 startsWith() 方法会从字符串起始处开始查找，而 endsWith() 方法的查找则在尾部进行。第二个参数实际上缩小了搜索的范围。以下是使用这些方法的演示：

  // 未使用第二个参数
  var msg = "Hello world!";
  
  console.log(str.indexOf("Hello")) //true 如果要检索的字符串值没有出现，则该方法返回 -1。
  console.log(str.indexOf("World")) //false
  console.log(str.indexOf("world")) //true
  
  console.log(msg.startsWith("Hello"));       // true
  console.log(msg.endsWith("!"));             // true
  console.log(msg.includes("o"));             // true
  
  console.log(msg.startsWith("o"));           // false
  console.log(msg.endsWith("world!"));        // true
  console.log(msg.includes("x"));             // false
  
  console.log(msg.startsWith("o", 4));        // true
  console.log(msg.endsWith("o", 8));          // true
  console.log(msg.includes("o", 8));          // false
  

  • repeat() 方法
    • 它接受一个参数作为字符串的重复次数，返回一个将初始字符串重复指定次数的新字符串。

console.log(“x”.repeat(3)); // “xxx”
console.log(“hello”.repeat(2)); // “hellohello”
console.log(“abc”.repeat(4)); // “abcabcabcabc”
- 此函数应用场景 此方法比相同目的的其余方法更加方便，在操纵文本时特别有用，尤其是在需要创建缩进的代码格式化工具中
// indent 使用了一定数量的空格
var indent = " ".repeat(4),
indentLevel = 0;

	// 每当需要增加缩进
	var newIndent = indent.repeat(++indentLevel);
	//第一次调用 repeat() 创建了一个包含四个空格的字符串，
	//而 indentLevel 变量会持续追踪缩进的级别。此后，仅通
	//过增加 indentLevel 的值来调用 repeat() 方法，便可以改变空格数量
	```