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声明的是常量，在后面出现的代码中不能再修改该常量的值

对象定义的简化

如果对象的属性名和属性值一致，可以简化可以省略函数的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与 ===判断符只有两个差别

Object.is判断NaN等于 NaN 而===判断为falseObject.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 );