es6语法新特性

Posted 2020-10-15 追星逐月一随心

es6新特性

let与const 关键字

ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。以下详细分析一下let和const
与es5相比，es6申明变量增加了let,constt关键字，
一、let申明的变量有以下几个特征

1. 没有变量提升，在es5中通过var和function关键字申明的变量会有变量提升的现象，但是es6中不同的是let申明的变量，凡是在申明之前使用变量，均会报错，称之为暂时性死区
2. 不允许重复申明，let不允许在相同作用域内，重复声明同一个变量。
3. 引入块级作用域，ES5 只有全局作用域和函数作用域，es6中引入了块级作用域的概念，ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。区域之外无法使用
4. 块级作用域与函数声明。
   1）允许在块级作用域内声明函数。
   2）函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
   3）同时，函数声明还会提升到所在的块级作用域的头部
   二、const
   const声明一个只读的常量。一旦声明，常量的值就不能改变

字符串模板

ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。

var name = ‘zfpx‘,age = 8;
let desc = `${name} is ${age} year old!`;
console.log(desc);

解构赋值

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

1. 数组解构赋值中,变量的值取决于后面的数组的位置,因为它是有序的

//let [a,b,c] = [10,20,30];//10 20 30;
//let [a,[b,c]] = [10,[20],30];//10 20 undefined
//let [a,b = 10] =[20,];//20 10
let [a,b , x] = [, , 3];
console.log(a,b,x);undefined undefined 3
解构赋值中变量可以设置默认值,不传,空项,undefined都会让默认值起作用

1. 对象的结构赋值
   对象它是无序的,变量名要跟属性名相等，变量和属性是相匹配的,是一样的,1.先看是否相匹配,2.若匹配则把对应的属性值赋给变量,若不匹配则undefined

let {a,b} = {a:10,b:20}

//适合于变量名和属性名 不相同的情况
//let {a:c,b:d} = {a:10,b:20};
//c,d代表变量 a,b表示匹配的属性
//console.log(c,d);
// let {aa:c} = {a:10};
//console.log(c);undefined

//复合的解构赋值
//let obj = {a:10,b:[2,{"aa":20}]};
//let {a,b,b:[x,{aa}]} = obj;
//console.log(a,b,aa);

//对对象设置属性和值,一些简写的写法 ,把变量或方法作为对象的属性和方法
//let foo = "boo";
//把foo变量作为对象的属性名,"boo"值作为对象的属性值
//let o = {foo};//{foo:"boo"}

1. 字符串的解构赋值

let [a,b,c] = "hel";
console.log(a,b,c);

类的支持

ES6中添加了对类的支持，引入了class关键字

class Father {  //通过class定义一个类
    constructor(x,y){//constructor写构造函数里的内容,私有的属性
       this.x = x;
       this.y = y;
    }
    a(){//原型上的内容
        console.log(this.x);
    }
}
var f = new Father(10,20);
f.a();

//Son类要继承与Father
class Son extends Father{//extends是es6这边实现继承的关键
    constructor(x,y,z){
        super(x,y);//super代码父类的构造函数,但是运行时,会把父类构造函数里的this改成子类的this,最终返回一个子类的实例
        //console.log(this.x);
        this.z = z;
    }
    b(){
        console.log("b");
    }
}
var s = new Son(10,20,30);
//console.log(s.x);
//s.a();
console.log(Son.prototype.__proto__ == Father.prototype);
//Son.prototype = Object.create(Father.prototype);

箭头函数

1.箭头函数里没有this,this是指定义阶段作用域里的this,外层的this
2.不能用arguments
3.call,apply,bind都抛弃
4.不能当成构造函数,用new去运行

若有多个参数用()括起来 若有多条语句用{}括起来,注意返回结果是个对象,用()把{}包起来

let fn = (x,y)=>{
   console.log(x+y);
   return x+y;
}

let fn = (x,y)=>({x,y});//{x:x,y:y}

参数默认值，不定参数，拓展参数

1.形参可以设置默认值

function fn(x,y=5){
   console.log(y);
}
fn(10)

1. 2.通过数组解构赋值或者对象解构赋值来传参

//数组
function fn([x=8,y=8]){
   console.log(x+y);
}
fn([10,5]);
fn([]);

//对象
function fn({x,y=10}){
    console.log(x+y);
}
fn({x:6,y:7});
fn();//报错
fn({y:7});

1. 形参的问题

let x = 10;
function fn(x,y=x){
   console.log(y);//undefined
}

function fn(x,y=x){//形参是私有变量,不能重复声明
   let x = 10;  ///报错Uncaught SyntaxError: Identifier ‘x‘ has already been declared`
   console.log(y);
}

let x = 10;
function fn(y=x){
   console.log(y);//10
}
fn();

rest参数

function fn(...arr){//参数序列,是一个数组 箭头函数里获取参数的集合只能通过rest不能用arguments
   console.log(arr);//[1, 2, 4]
}
fn(1,2,4);

模块

在ES6标准中，javascript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS和AMD模式。
将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用

新API

字符串方法

• includes() 这个字符串中是否包含这个字符串(一个或多个字符)
• startsWith() 在查找范围内,是否以这个字符串开头
• endsWith() 在查找范围内,是否以这个字符串结尾
• 这三个方法都可以设置第二个参数(n),表示查找的位置 includes和startsWith表示从索引n开始查找
• endsWith() 在索引n之前查找
• repeat() 返回一个新的字符串 将某个字符串重复n次

数组的方法

• ... 作为函数的参数，可以把它当做一个数组，

let max = [10,20,5,7,13,26];
es5
console.log(Math.max.apply(null, max));
console.log(Math.max(...max));//可以替代apply方法

扩展运算符，合并数组

let a1 = [1,2];
let b1 = [3,4];
let ary = [...a1,...b1];
console.log(ary);//[1, 2, 3, 4]
let ary1 =[10,20,...a1];
console.log(ary1);//(4) [10, 20, 1, 2]

• Array.from 把类数组(arguments或元素集合)转换成数组
• Array.of 把一组数转换成数组
• copyWithin(target,start,end) 把数组的某些项复制到数组中(会覆盖数组中原来项)
  target 从目标位置替换
  start 从这个位置开始读取
  end 从这个位置结束读取 超出长度或者没写,都表示读取到最后
• find 返回匹配的这一项
• findIndex 返回匹配这一项的索引
• fill按照指定值来填充数组,第二个参数和第三个参数 起始填空位置和结束填充位置

/ var res = Array(3).fill(7);//[7,7,7]
let ary = [5,"a",7,3,4];
let res = ary.fill(10,1,3);
console.log(res);//[5, 10, 10, 3, 4]

• for....of.... 遍历数组或类数组
  对象的方法

Object.assign(target,source1,source2)//第一个参数是目标对象,第二个参数开始是源对象

var oTarget = {c:3};
var obj1 = {a:1};
var obj2 = {b:2};
console.log(Object.assign(oTarget, obj1, obj2));//{c: 3, a: 1, b: 2}合并对象
let obj = {...oTarget,...obj1,...obj2};//对象扩展运算符的用法
console.log(obj);//{c: 3, a: 1, b: 2}
console.log(Object.assign(oTarget)==oTarget);//true

注意若只有一个参数,返回的是原对象

var a=Object.assign(obj1);
console.log(a);{a: 1}

Object.assign({}, oTarget);//克隆对象,克隆出来的是一个新对象
console.log(Object.assign({}, oTarget) == oTarget) //false