这是我参与 「第四届青训营」 笔记创作活动的第4天

●简单记录下今天学的内容

○

let

let和 var的作用相似都是用来声明变量的，ES5只有全局作用域和函数作用域，没有块级作用域，而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效,不会使变量提升。

const

const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。严格模式下当我们尝试去改变用const声明的常量时，浏览器就会报错。

class,extends,super

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。
Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。
super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

箭头函数

曾经

function(i){ 
    return i + 1;
} //ES5

现在

(i) => i + 1 //ES6

箭头函数没有 prototype 属性，不能进行 new 实例化，亦不能通过 call、apply 等绑定 this，它的this指向外层，可以进行隐式返回，在定义类的方法时，箭头函数不需要在 constructor 中绑定 this，箭头函数不绑定 arguments，可以使用 ...args 代替; 和以前相比简洁了许多也方便了许多。

模板字符串``

function(){

    var person ={
      name:'小明'
    } ;
    console.log(`Hi,${person.name}`);//是``不是''
  }

与一般字符串相比较没有差别，但是便于字符串的连接使用。同时模板字符串中的注入可以进行函数的调用，数组的选取之类的操作，但是普通字符串不具备。\

但是要注意：模板字符串的空格，换行，缩进都会被保留，输出特殊字符的`\的时候，要使用转义字符\（反斜杠）模板字符串中的内容最终如果是一个值，可以注入${}

解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

扩展运算符

扩展运算符又被称为展开语法
扩展运算符可以将数组或者对象转化为用逗号隔开的参数序列

let arr = ['a','b','c']
console.log(...arr);
用法： \

利用扩展运算符来合并数组
方法一：
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1,...arr2];
console.log(arr3);
方法二：
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(...arr2);
console.log(arr1);
将类数组或可遍历对象转换为真正的数组
var divs = document.getElementsByTagName('div');
let arr = [...divs]
console.log(arr);

Array.from()

Array.from()方法可以将伪数组或可遍历的对象转换为真数组\

var arrayLike = {
		"0": "1" ,
		"1": "2",
		"length": 2
	}
 let newArr = Array.from(arrayLike);
 console.log(newArr);
 let newArr1 = Array.from(arrayLike,ele => ele*3)
 console.log(newArr1);

该方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

find()

find()方法用于找出第一个符合条件的数组成员，如果没有找到返回undefined

findIndex()

findIndex()方法可以用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

flat()

flat()方法能让数据扁平化
数据扁平化：用于将嵌套多层的数组“拉平”，变成一维的数组

includes()

判断某个数组是否包含给定的值，返回布尔值

startsWith() 和 endsWith()

startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串

总结

ES6的新语法包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率，由于之前我是学习的ES5语法，在接下来的学习过程中，我会努力调整习惯适应。

JS ES6新增语法学习一|青训营笔记

○

let