es6—变量、常量、解构、对象、数组的使用

一、变量

es5中使用var来声明一个变量,var的特性与常规的编程语言都不太相同，因此，es6中，提供了与常规语言类似的声明变量的方法。

let与var不同之处在于：

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

例如：

 console.log(a);

 let a=1;

结果会出错，let声明不能提升

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

例如：

{

    let a=1;

}

console.log(a);

被一个大括号包起来的块是一个作用域，并且是局部作用域，声明的变量只能在该作用域内使用。因此，这块会报a没有被定义的错误。

3. 不允许重复声明。

例如：

let b = 1;

let b = {}

重复声明一个变量也会出错。

二、常量

es6中的变量使用let来声明，常量使用const来声明，const除了有与let相同的特性外，还有一条特性是：

const声明的变量在声明的时候就需要赋值，并且只能赋值一次，不能修改。

例如：

const a=1;
a++;
console.log(a);

三、解构

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

es6的集中常用解构：

1.数组解构（使用中括号）：

（1）完全解构：等号两边的模式相同，左边的变量就会被赋予对应的值

let [a,b,c]=[1,2,3];
console.log(a,b,c);

输出结果为：1 2 3

let [a,b,c] = [1,[2,3],4];
console.log(a,b,c);

输出结果为：1 [2,3] 4

（2）不完全解构：等号左边的模式只匹配一部分的等号右边的数组，且能解构成功。

 let [a,b]= [1,2,3,4];
 console.log(a,b);

输出：1 2

let [a,[b],c] = [1,[2,3],4];
 console.log(a,b,c);

输出结果：1 2 4

（3）集合解构：使用…扩展运算符，可以接收多余数据，返回数组。

let [a,...b]=[1,2,3,4];
console.log(a,b);

输出结果：1 [2,3,4]

 （4）默认值为数字时，（当匹配值严格等于undefined时，默认值生效）

let [a, b = 2] = [1, 3];
console.log(a, b);

输出结果：1 3

当let [a,b=2]=[1]

console.log(a,b);

输出结果为1 2    //因为左边的a会匹配到右边的1，b没有匹配的内容，就会返回undefined,这时默认值生效，所以b=2

（5）默认值为函数

function myFun(){
    console.log('123');
}
let [a=myFun()]=[];
console.log(a);

输出结果为undefined    //因为这里的myFun函数没有返回值

 默认值为函数，且函数有返回值

function myFun(){
    console.log('123');
    return 10;
}
let [a=myFun()]=[];
console.log(a);

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

变量名和属性名一致时，

可写为：let { foo, bar } = { foo: “aaa”, bar: “bbb” };// foo = "aaa”; bar = "bbb”

可简写为：let { foo, bar } = { foo: “aaa”, bar: “bbb” };// foo = "aaa”; bar = "bbb”

变量名和属性名不一致时，

必须写成：var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; //baz = "aaa”

嵌套解构：

let obj={p:['hello',{y:'world'}]};
let{p:[a,{y:b}]}=obj;
console.log(a+b);

输出结果为：helloworld

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

等号左边的变量放在中括号内（类似于数组解构）

const [a, b, c] = 'hello'; 
console.log(a, b, c);//h e l

 等号左边的变量放在大括号内（类似于对象解构）

let { length, toString } = 'hello';
console.log(length, toString);//5 [Function: toString]

四、对象

1.对象简写：ES6中规定可以直接在对象中写入变量和函数作为对象的属性和方法，此时属性名为变量名, 属性值为变量的值。

例如：

let username='张三';
let obj={
    username,//是username:username的简写
    sayName:function(){
        // ES5在对象中声明函数的方法
    },
    sayAge(){
         // ES6在对象中声明函数的方法
    }
}

 2.对象的静态方法

（1）Object.is(value1,value2):是比较两个值是否一样。该方法不会强制转换类型。

“==”表示在进行比较的时候会先进行类型转换，然后比较是否相等

“===”表示先比较类型，只要类型不相同 那么一定不相等

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

（2） Object.assign()：深克隆,放一个参数就是克隆，放两个参数是进行拼接

let obj={
    name:'张三'
}
let obj1={
    name:'李四',
    age:12
}
let newObj={};
// 克隆
Object.assign(newObj,obj);//将obj里面的内容克隆到newObj这个空对象里面
// 拼接
Object.assign(newObj,obj,obj1);//此处将obj和obj1的内容进行拼接克隆到newObj里面，这个输出为name:李四，age:12,对于相同的属性后面的会覆盖前面的

 （3）Object.setPrototypeOf(obj,prototype)：设置对象的原型对象，如果第二个参数不是一个对象或者是null那么函数不做任何事情。

 

 let obj1 = {
    name: 'zhangsan',
    age: 12
  }
  let obj2 = {
    name: 'lisi',
    gender: 'male'
  }
  // 设置obj1的原型
  Object.setPrototypeOf(obj1, obj2);
  // 获取obj1的原型
  console.log(obj1.__proto__);
  console.log(obj1.constructor.prototype);
  console.log(Object.getPrototypeOf(obj1));

 （4）Object.keys(obj) 返回对象本身的可枚举的所有属性的array不包含原型链。

即返回的是所有属性组成的一个数组。

Object.values(obj)获取对象的所有属性的值，返回对象的本身可枚举属性值的array，即返回所有属性值组成的一个数组

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）。

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

五、数组

1. 拓展符：使用三个点'...'表示。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

   （1）利用拓展运算符将数组合并

let arr1=[1,2,3];
let arr2=[4,5,6];
let arr=[...arr1,...arr2];
console.log(arr);

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

let obj1={
    name:'zhangsan',
    age:12
}
let obj2={
    ...obj1,
    gender:male,
    hobby:'篮球',
}
console.log(obj2);

 （3）字符串转为数组

let newArr=[...'hello'];
console.log(newArr);

 2.数组的静态方法（Array.of()）

let arr=new Array(3);//表示的是arr数组的长度为3，这种方法当只有一个参数，表示的是长度。

console.log(arr);//会输出3个空项

let arr3 = new Array('3');//表示只有一项内容，并且为3
console.log(arr3);

let arr1=Array.of(3);//传的是为3的元素
let arr2=Array.of(3,3,3,3);//传的是每项的内容
console.log(arr1);
console.log(arr2);

 

 3.数组实例方法

（1）find方法返回满足条件的第一个元素

let arr1=['李四','王五','老六','张三'];
//find方法返回满足条件的第一个元素
let result = arr1.find(item => {
  return item === '张三'
})
console.log(result);

（2）findIndex()返回满足条件的第一个元素的索引

let result = arr1.findIndex(item => {
  return item === '张三'
})
console.log(result);

（3） includes() 方法用于判断字符串是否包含指定的子字符串。

let result = arr1.includes('张三');
console.log(result);//true

（4）fill()填充数组,将数组内部所有元素都用实参填充

arr1.fill(1)
console.log(arr1);

(5)keys(),values(),entries()方法的使用

let arr1 = ['张三', '李四', '王五', '老六'];
let key = arr1.keys();
let value = arr1.values();
let entry = arr1.entries();
console.log(key); 
console.log(value);
console.log(entry);
返回的是数组的迭代器对象，可用通过.next()访问内部的值:{ value: 0, done: false }
console.log(key.next());
console.log(key.next());
console.log(key.next());
console.log(key.next());
console.log(key.next());

当done为false表示后面还有元素，当为ture表示没有后续值。这里的数组中有四个元素，当有第五个.next()进行访问则显示为{ value: undefined, done: true }