ES6知识大全笔记

ES6新增关键字（let、const）

let

• let关键字就是用来声明变量的,使用let关键字声明的变量具有块级作用域,在一个大括号中使用let关键字声明的变量才具有块级作用域

• let定义的变量不能重名

let a=11;
var a=10;console. log(a); //会报错

• 使用let关键字声明的变量没有变量提升

console.log(a) ;// a is not definedlet 
a =20;

• 使用let关键声明的变量具有暂时性死区特性

var tmp = 123;
if (true) {  
   tmp = 'abc';   
   let tmp;
 }

• let定义的全局变量不会挂载到window上
  window.name这个属性特别特殊它表示的是window的名字
  window.top这个属性更特殊它表示最顶层window对象

var a=10;
console.log(window.a);
let b=11;
console.log(window.b)

• for循环：防止循环变量变成全局变量

<ul>       
   <li>1</li>       
   <li>2</li>        
   <li>3</li>       
    <li>4</li> 
 </ul>    
 <script>      
   var lis = document.querySelectorAll("ul li");        
   for (let i = 0; i < lis.length; i++) {           
   		 lis[i].onclick = function () {                
   		 	console.log(i)            
   		 }       
   }
  </script>

如果循环变量用var去定义那么就是定义了一个全局变量
如果循不变量用let去定义那么就是在每一个 块级作用域中各定义了一个变量i

var lis = document.querySelectorAll("ul li");        
for (var i = 0; i < lis.length; i++) {           
	 lis[i].onclick = function () {                
	 console.log(i); //4       
	  }   
}  

为了解决上面的问题 有以下的方法

方法一 ：用块级关键字let 替换 var

for (let i = 0; i < lis.length; i++) {            
	lis[i].onclick = function () {                
		 console.log(i); //4           
  }        
}

在没有ES6的时候 解决上面问题的办法

方法2：添加属性

for (var i = 0; i < lis.length; i++) {           
	 lis[i].idx = i;           
	 lis[i].onclick = function () {                
	 	 console.log(this.idx);            
	  }       
 }      

方法3：IIFE

 for (var i = 0; i < lis.length; i++) {           
 	 //立即执行函数           
 	  (function (num) {                  
 	  		lis[num].onclick = function () {                    
 	  			console.log(num);              
 	  	 }           
 	 })(i);       
 }

const

• 用来声明常量的。一旦声明，其值就不能改变。
• 遵守块级作用城。不能定义重名的常量、不会挂载到window上。没有声明提升。不能当作循环变量。
• 常量名的命名规范全大写如果有单词用下划线分隔。

let a=10;
a=11; 
a++;
a *= 3;
console.log(a);
const PI = 3.1415;
const ARR = [];
ARR. push(1);

let、 const、 var 区别

• 使用var声明的变量，起作用域为该语句所在的函数内，且存在变量提升现象
• 使用let声明变量，其作用域为该语句所在的代码快内，不存在变量提升
• 使用const声明的是常量，在后面出现的代码中不能再修改该常量的值
  

对象定义的简化

1. 如果对象的属性名和属性值一致，可以简化
2. 可以省略函数的function关键字

let name = '小明'；
let age =1 8；
let obj = {
      name, //属性名跟属性值一致，可简化
     age,
     getName() {   //省略function关键字
        return name；
    }
}
console.log(obj)
console.log(obj.getName())

字符串模板

定义语法： ``; （反引号）
按键位置： 横向数字键1左侧 | tab键上侧 | esc键下方
插值语法： ${ }

var name = "huahua";
var age = 20;

//普通写法
//var message='hello,my name is '+name+',I\'m '+age+' years old';
//alert(message)；

//ES6写法
var message1=`hello,
     		${name},
           	your age is ${age}`;
alert(message1)；

ES6新增方法

字符串方法

startsWith(str, pos): 用于检测字符串是否以指定的字符开头。
参数：
str：匹配的字符串
pos：从第几位开始
如果在字符串的开头找到给定的字符 返回true; 否则，false。
一般的话是用于来判断是否以http://开头或者以file:///开头
区分大小写

let str = '12345abcdefg';
console.log(str.startsWith('123')); //true
console.log(str.startsWith('abc', 5)); //true
console.log(str.startsWith('EF',9)); //false

endsWith(str, pos): 用于检测字符串是否以指定的字符结尾。
参数：
str：匹配的字符串
pos：为匹配最后一个字符的位置（以0为开始），省略则为最后一个字符位置
如果在字符串的开头找到给定的字符 返回true; 否则，false。
可用于判断这个字符串是不是以 .png 、.jpg结尾
区分大小写

let str = '12345abcdefg';
console.log(str.endsWith('g')); //true
console.log(str.endsWith('abc', 8)); //true
console.log(str.endsWith('ABC', 8)); //false

includes( )： 用于检测参数字符串是否在原字符串里面。
区分大小写

let str = '12345abcdefg';
console.log(str.includes('abcd')); //true
console.log(str.includes('ABCD')); //false

repeat()： 返回新字符串，表示将原字符串重复多次

var str = "hello ";
var str1 = str.repeat(8);
console.log(str1); //hello hello hello hello hello hello hello hello 

数组方法

在ES6中新增了3个普通方法2个静态方法
静态方法：构造函数调用的方法叫做静态方法
普通方法：数组调用的方法叫做普通方法

Array.from() 方法：用于将 类数组对象/可遍历的对象/字符串转为真正的数组

function demo() {
       var arr = Array.from(arguments);  // 这是ES6中提供的标准方法
        var arr = [ ].slice.call(arguments);  // 这是我们以前的方法
        return arr.reduce(function(prev, value) {
             return prev + value;
          }, 0); 
 }
demo(1, 2, 3, 4, 5, 6, 7, 8);

Array.of() 方法： 用于定义数组

var arr = Array.of(10);
console.log(arr); //[10]

copyWithin() 数组的内部复制
参数：
target：替换的开始位置
satrt：截取的开始位置（包含）
end：截取的结束位置 (不包含)

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var res = arr.copyWithin(3, 4, 7);
console.log(res);//[1, 2, 3, 5, 6, 7, 7, 8, 9]

对象方法

Object.is() 方法：用来判断两个值是否相等 （类似 ===）

Object.is与 ===判断符只有两个差别

1. Object.is判断NaN等于 NaN 而===判断为false
2. Object.is判断 -0和0 是不相等的 而 === 判断 -0和0 是相等的

console.log(+0 === -0 ? true : false); //true
 console.log( NaN === NaN ? true : false); //false
 console.log( Object.is(+0,-0)); //false
 console.log( Object.is(NaN,NaN)); //true

Object.assign() 方法：用于浅复制
语法：Object.assign(target,obj1,obj2…)
第一个参数是接收属性的对象
第二个参数开始往后都是提供属性的对象，如果参数冲突，以后面的为准

  var target = {
        name:'huahua',
        age:18
    };
    var obj = {
        sex:'女',
        score: 88
    }
    var result = Object.assign(target,obj);
    target.sex = "男";
    console.log(target); // {name: "huahua", age: 18, sex: "男", score: 88} 
    console.log(target == result)//true

解构语法

封装： 指的是将内容包装在一起代码封装 使用函数数据封装 使用数据结构
解构： 指的是解除构造\解除结构

解构数组

 // 定义数组
    var arr = [1, 2, 3, 4, 5];

    人工解除结构
    var a = arr[0];
    var b = arr[1];
    var c = arr[2];
    var d = arr[3];
    var e = arr[4];
  ES6语法解构
  var [a, b, c, d, e] = arr;
  console.log(a,b,c,d);//1 2 3 4

//交换两个变量
   var a = 10;
   var b = 20;
   [a, b] = [b, a];
   console.log(a, b); //20 10

解构对象

ES6语法解构 
// 解构对象
var obj = {
      name: "xiaoming",
      sex: "男",
      hobby: {
          name: "yumaoqiu"
      }
  }
 var {sex,name,hobby} = obj;
  console.log(name,sex, hobby);

rest语法（…）

传递参数

var arr = [1, 2, 22, 33, 44, 42, 32, 22, 556, 65,7];
 //Math.max.apply("", arr)；
var result = Math. max(...arr); 
//等价于  Math.max(1, 2, 22, 33, 44, 42, 32, 22, 556， 65，7)
console.log(result);//556

收集函数参数

function sum(a, b, c, ...args) {
        //a接收第一个参数
        // b接收第二个参数
        //c接收第三个参数
        // args接收剩余参数
        console.log(args);
    }
    sum(1, 2, 3);//[]
    sum(1, 2, 3, 5, 88, 23, 4);// [5, 88, 23, 4]

帮组解构数组

var arr=[1,2,3,4,5,6];
var [a, b, ...arr1] = arr;
console.log(a, b); //1 2
console.log(arr1); //[3, 4, 5, 6]

箭头函数

语法： let fun= () => {}

let fun = () =>{
   console.log(1);
}
fun();

• 箭头函数中没有arguments

let fun = () => {
      console.log(arguments);
 }
 fun(); // arguments is not defined

• 箭头函数中this不变
  箭头函数中的this一旦确定，将再也无法改变。
  箭头函数中的this指向谁，要看它所在的作用域中的this是谁

var obj = {
    fun: function () {
        return () => {
            console.log(this)
        }
    }
}
// let arrow = obj.fun.call(document.body);  // 这两条代码请注释一条 打开一条
let arrow = obj.fun(); // 这两条代码请注释一条 打开一条
arrow();
document.onclick = arrow;
arrow.call(document);
arrow.apply(document);
let arrow1 = arrow.bind(document);
arrow1();

• 箭头函数不可以通i过new运算符进行调用

let arrow=()=>{}
new arrow(); // arrow is not a constructor

• 箭头函数的简写形式
  1.如果参数只有一个 那么可以省略圆括号
  2.如果函数体中只有一条代码并且还是返回值 则可以省略大括号
  和return

let arrow = a =>{
    return a + 1;
}
let result = arrow(10);
console.log(result );
//简写后
let arrow = a => a+1;
let result = arrow(10);
console.log(result );