ES6基础总结（上）

变量

        在es5中，我们通常使用var声明一个变量，但是var有很多奇葩的特性，这些特性与常规的编程语言都不太相同，在es6中，又提供了与常规语言类似的声明变量的方法。

1）let

        特点：1.变量声明不会被提升，在变量声明之前无法使用该变量

                   2.具有局部作用域，即let声明的变量只能在对应代码块中使用

                   3.不允许重复声明

2）const：let用于声明一个变量，而const用于声明常量

        特点：除了上述三个，const声明的变量在声明的时候就需要赋值，并且只能赋值一次，不能                     修改

解构（Destructuring）

        按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，解构的本质属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。

1）数组结构：等号左边的变量放在中括号内部，匹配右侧数组中的元素

//完全解构

let[a,b,c] = [1,2,3]; //a = 1;b = 2; c = 3;

//不完全解构

let[a,[b],d] = [1,[2,3],4];        //a = 1;b = 2;d = 4;

//集合解构

let[head,...tail] = [1,2,3,4]        //head = 1;tail = [2,3,4]

//默认值(当匹配值等于undefined时，默认值生效)

let [x,y = 'b'] = ['a'];        //x = 'a',y = 'b'

//默认值也可以为函数

 2）对象解构（等号左边的变量放到大括号内部，匹配右侧数组中的元素。对象的属性没有次序，变量必须与属性同名，才能取到正确的值）

let {foo,bar} = {foo:"aaa",bar:"bbb"};        //foo = "aaa" ; bar = :"bbb"

//如果变量名与属性不一致

var{foo:bbb} = {foo:"aaa",bar:"bbb"};        //bbb = "aaa";

//嵌套解构

let obj = {p:['hello',{y:'world'}]};

let {p:[x,{y}]}=obj;        //x='hello';y='world'

 3)字符串解构（等号左边的变量如果放在中括号内进行的类似于数组解构，从字符串中获取指定字符；如果放在大括号内进行的类似于对象解构，从实例属性获方法中解构。）

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };    // foo = "aaa”; bar = "bbb”
const [a, b, c, d, e] = 'hello';            //a=h;b=e;c=l;d=l;e=o
let {length : len, toString } = 'hello';         //len = 5

 4）数值解构（等号左边的变量放在大括号中进行解构，可以获取到数值包装器构造函数原型中指定的方法。）

let {valueOf} = 12;         // Number.prototype.valueOf

5）布尔类型解构（等号左边的变量放在大括号中进行解构，可以获取到布尔包装器构造函数原型中指定的方法。）

let {valueOf} = true;         // Boolean.prototype.valueOf

对象

1）对象简写（可以直接在对象中写入变量和函数作为对象的属性和方法，此时属性名为变量名, 属性值为变量的值）

let username = '张三';

let obj = {
  username,
  // ES5在对象中声明函数的方法
  sayName: function () { 
  },
  //ES6在对象中声明函数的方法
  sayAge () {

  }
}
console.log(obj);

结果：

 2）对象API拓展

ES6中对于Object的拓展主要是静态方法的拓展

Object.is()        //判断两个值是否一样
Object.assign()  

        Obiect.assign(obj1,obj2) //深复制 

        Object.assign(obj1,obj2,obj3)//对象组合
Object.setPrototypeOf()        //为目标对象设置原型
Object.getPrototypeOf()        //获取目标对象的原型
Object.keys()        //返回对象属性名组成的数组
Object.values()        //返回对象属性名组成的数组
Object.entries()        //返回对象键值对组成的数组

下面是这些方法一些实际应用的例子

let obj = {
    name:'zhangsan'
}
let obj2 ={
    name:'lisi',
    age:12
}
let newObj = {};
object.assign(newobj,obj1,obj2);
console.log(newobj);

 结果：

 

let obj1 = {
    name:'zhangsan',
    age:12
}

let obj2 = {
    name:'lisi'
    gender:'boss'
}
//设置obj1的原型
object.setPrototyoeOf(obj1,obj2);
//获取obj1的原型
console.log(obj1._proto);//{ name: 'lisi', gender: 'boss' }
console.log(obj1.constructor.prototype);//[Object: null prototype] {}
console.log(Object.getPrototypeOf(obj1));//{ name: 'lisi', gender: 'male' }

 

let obj1 = {
  1: '张三',
  2: '李四',
  3: '王五'
}

let key = Object.keys(obj1);
let value = Object.values(obj1);
let entry = Object.entries(obj1);
console.log(key);    //[ '1', '2', '3' ]
console.log(value);    //[ '张三', '李四', '王五' ]
console.log(entry);    //[ [ '1', '张三' ], [ '2', '李四' ], [ '3', '王五' ] ]

 拓展运算符

（拓展运算符，放在等号右边，是展开（剥离）的作用放在等号左边，是聚合的作用）

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// 利用拓展运算符，将数组1，2合并到arr中
let arr = [...arr1, ...arr2];
console.log(arr);    //[1,2,3,4,5,6]

let obj1 = {
   name: '张三',
   age: 12
 }
let obj2 = {
   ...obj1,
   gender: 'boss',
   hobby: '篮球'
 }
console.log(obj2);//{ name: '张三', age: 12, gender: 'boss', hobby: '篮球'} 

let arrStr = [...'hello'];
console.log(arrStr);//[ 'h', 'e', 'l', 'l', 'o' ]

数组静态方法

      Array.from()  将其他类型属性转成数组

      Array.of()    创建数组实例，实参就是数组的元素

      Array.prototype.find() 返回满足条件的第一个元素

      Array.prototype.findIndex() 返回满足条件的第一个元素的索引

      Array.prototype.includes()  判断当前数组中是否包含某个元素

      Array.prototype.fill()      填充数组（左右元素填充）

      Array.prototype.keys()      索引的迭代器对象

      Array.prototype.values()    元素的迭代器对象

      Array.prototype.entries()   键值对的迭代器对象

let arr1 = Array.of(3,3,3,3)

console.log(arr1)        //[3,3,3,3]

let arr1 = ['李四', '王五', '老六', '张三'];

 

let result1 = arr1.find(item => {

  return item === '张三'

})

console.log(result1);        //张三

let result2 = arr1.findIndex(item => {

  return item === '张三'

})

console.log(result2);        //3

let result3 = arr1.includes('张三');

console.log(result3);        //true

arr1.fill(1)

console.log(arr1);        //[ 1, 1, 1, 1 ]

let arr1 = ['张三', '李四', '王五', '老六'];

// 返回的是数组的迭代器对象，可用通过.next()访问内部的值
// { value: 0, done: false }
let key = arr1.keys();
let value = arr1.values();
let entry = arr1.entries();
console.log(key);  // [0,1,2,3]
console.log(value);
console.log(entry);

console.log(key.next());
console.log(key.next());
console.log(key.next());
console.log(key.next());
console.log(key.next());
console.log(value.next());
console.log(value.next());
console.log(value.next());
console.log(value.next());
console.log(value.next());

结果：