es6语法整理

1,let和const

   let和const都是定义一个变量,var也是定义一个变量,他们的区别在于:

     1,let和const是块级作用域,而var的作用域是整个封闭函数,是全域的。

     2,变量提升:不论通过var声明的变量处于当前作用于的第几行,都会提升到作用域的最顶部。

           而let声明的变量不会在顶部初始化,凡是在let声明之前使用该变量都会报错。

     3,let和const不允许在相同作用域内重复声明。

     4,const声明的常量不可改变,并且const声明的时候必须需要初始化,比如:const  a;这样的时候就会报错,当 const a =2;             这样的才是正确的,const声明的常量不可改变,但是const声明的对象可以通过过修改对象属性等方法来改变。

           这是为什么呢?

           其实const保证的并不是变量的值不动,而是变量指向的内存地址不得改动,所以可以通过修改对象属性来进行改变。

2,箭头函数

function greet (name) {
    return 'Hello, '+ name;
}
// 6
const greet = (name) => {
    return 'Hello, '+ name;
}
// 由于函数内容只有一句,可以去掉{},并且省略return关键字
const greet = (name) => console.log('Hello, '+ name);
// 进一步简化,由于参数也只有一个,参数的括号也可以省略。参数多于一个时必须用括号包裹
const greet = name => console.log('Hello, '+ name);
*所以当看到一句的函数如果不理解,可以一步一步的反推,还原成你熟悉的代码*

// 回调 5
const names = ['Tom','Jerry','Dog'];
names.map(function(name){
    console.log(name);
});
// 6
names.map(name=> console.log(name));
// 当需要直接返回一个对象怎么办?直接写{}发现是错的。这是需要把要返回的对象用()包裹。这个用法比较生僻,不好找。
const test = (a,b) => ({a,b});
test(1,2); // {a:1, b:2}

   上面是抄别人的,哈哈

    箭头函数的this指向是自己父级的this,而普通函数this对象是运行时基于函数的执行环境绑定的,在全局函数中,this指向的是window,当函数被作为某个对象的方法调用时,this就等于那个对象

3,Object.assign()

   Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

    

  Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。

    注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

    如果只有一个参数,Object.assign会直接返回该参数,如果该参数不是对象,则会先转成对象,然后返回。

4,Array.find()和Array.findIndex()函数的用法

    find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined

    findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。

    

[1, 2, 3, 4].find((value, index, arr) => { })

    查找函数有三个参数。

    value:每一次迭代查找的数组元素。

    index:每一次迭代查找的数组元素索引。

    arr:被查找的数组。

5,扩展运算符  三点(...)

 扩展运算符将一个数组转为用逗号分隔的参数序列

  console.log(...[a, b, c])             // a b c

 1,使用扩展运算符展开数组代替apply方法,将数组转为函数的参数

 //ES5 取数组最大值

console.log(Math.max.apply(this, [654, 233, 727]));

  //ES6 扩展运算符

console.log(Math.max(...[654, 233, 727])) 

//相当于

console.log(Math.max(654, 233, 727))

2,使用push将一个数组添加到另一个数组的尾部

// ES5 写法
 

var arr1 = [1, 2, 3]; 

var arr2 = [4, 5, 6];

Array.prototype.push.apply(arr1, arr2); 

//push方法的参数不能是数组,通过apply方法使用push方法

// ES6 写法

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

arr1.push(...arr2);

这里可以说一个apply方法:

Function.apply(obj,args)方法能接收两个参数:

obj:这个对象将代替Function类里this对象

args:这个是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数。

6,class类的全方位理解(这个单独写一篇文章)

7,解构赋值

/通常情况下
var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

//解构赋值
let [first, second, third] = someArray; //比上面简洁多了吧

//还有下面例子
let [,,third] = [1,2,3];
console.log(third); //3

let [first,...last] = [1,2,3];
console.log(last); //[2,3]

//对象解构
let {name,age} = {name: "lisi", age: "20"};
console.log(name); //lisi
console.log(age); //20

//注意
let {ept1} = {};
console.log(ept1); //undefined
let {ept2} = {undefined};
console.log(ept2); //undefined
let {ept3} = {null};
console.log(ept3); //null

8,模板字符串

  ES6中提供了用反引号`来创建字符串,里面可包含${…}等

`This is a pretty little template string.`

`In ES5 this is
 not legal.`

let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

  ${}   可以配合反单引号完成拼接字符串的功能

9,for…of && for…in

  for…of 遍历(数组)

let arr = [1,2,3];
for (let itr of arr) {
  console.log(itr); //1 2 3
}

  for…in 遍历对象中的属性

let arr = [1,2,3];
arr.aa = 'bb';
for (let itr in arr) {
  console.log(itr); //0 1 2 aa
}

10,ES6中Promise、Generator及async(也会单独写一篇,感兴趣可以关注下)

   自己百度搜索稍微总结一下,新手上路,多多包涵,哈哈

 

你可能感兴趣的:(es6语法整理)