ES6新增功能

最新推荐文章于 2025-09-11 22:10:09 发布

转载最新推荐文章于 2025-09-11 22:10:09 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1778998/blog/1524335

文章标签：

#python #javascript #数据结构与算法 #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

1、块作用域-let

（1）在es6之前，js只用全局作用域、函数作用域，现在新添一个块作用域使用 let 和 const创建块作用域，他们声明的变量只存在块内，及在{}中使用let定义一个变量，变量在{}外部无法访问；

 if(true){
	let temp = 123;
}
console.log(temp);
//Uncaught ReferenceError: temp is not defined

相比之下，使用var声明的变量，在整个作用域内有效

 if(true){
	var temp = 123;
}
console.log(temp);
//123

（2）let不存在变量提升，var 会是变量定义提升；

console.log(foo);// 报undefined
var foo = "abc";
console.log(str);//报is not defined;
let str ;

(3)es6规范明确，如果代码块出现let,const声明，那么一旦形成了封闭作用域，在声明之前使用就会报错；

var foo = 100;
if(true){
	foo = "abc";//is not defined
	let foo;
}

2、const创建不可变的变量（常量）

const fruit = 'apple';
const fruit ='orange';
console.log(fruit)//apple

注： const限制的是给恒量分配值的动作，并不是限制恒量里面的值；

fruit.push('apple');
fruit.push('orange');
console.log(fruit);//["apple", "orange"]

fruit=[];
console.log(fruit);//Uncaught TypeError: Assignment to constant variable.

3、解构数组-Array Destructuring

var [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];//foo // 1    bar // 2     baz // 3


function fun(){
	return ['apple','water','icecream'];
}
let [fruit,drink,sweets]=fun();
console.log(fruit,drink,sweets);//apple water icecream

4、解构对象-Object Destructuring

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

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

function fun(){
	return {fruit:'apple',drink:'water',sweets:'icecream'};
}

let {fruit:a1,drink:a2,sweets: a3}=fun();
console.log(a1,a2,a3);//apple water icecream

初始化：

var {x = 3} = {};//x =3;
var {x:y = 3} = {x: 5};//y=5;

函数参数结构：

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

5、模板字符串-Templates String

    let fruit='apple',drink='water';
	let str = '这里有水果'+fruit+'饮料'+drink;
	console.log(str);
	let str2 = `这里有水果${fruit}饮料${drink}`;
	console.log(str2);
	//这里有水果apple饮料water

注：str2 中的反引号是按键 ~ 出的反引号

6、带标签的模板字符串- Tagged Templates String

<script type="text/javascript">
let fruit='apple',drink='water';
// let str = fun'这里有水果'+fruit+'饮料'+drink;
let str = fun`这里有水果${fruit}和饮料${drink}`;
function fun(strings,...values){
	console.log(strings);//["这里有水果", "和饮料↵", "", raw: Array[3]]
	console.log(values);//["apple", "water"]
}
console.log(str);//undefined

注：

在此处fun标签相当一个函数，改函数包含两个参数；
strings:代表中字符串中字符的集合；
values:代表字符串中变量的集合；

7、判断字符中是否包含其他字符串

使用 let 定义一个字符串 str

str.startsWidth('');//判断字符串是否以某个字符串开头；
str.endsWidth('');//判断字符串是否以某个字符串结尾；
str.includes('');//判断字符串是否包含某个字符

8、默认参数-Default Parameter Values

function fun(fruit='apple',drink='water'){
	return `${fruit}和${drink}`;
}
console.log(fun());//apple和water
console.log(fun('orange','tea'));orange和tea

9、展开操作符-Spread

es6新增的操作符 '...'

let str=['apple','water','icecreams'];
console.log(str);//["apple", "water", "icecreams"]
console.log(...str);//apple water icecreams

10、剩余操作符-Rest

function fun(fruit,drink,...other){
	cnsole.log(fruit,drink,other);
}
fun('apple','water','orange','tea','icecreams');
//apple water ["orange", "tea", "icecreams"]

注：fun函数中除了传入两个参数外，还可以传入n个参数，但是其余传入的参数被放在了other的数组中

11、解构参数-Destructured Parameters

function fun(fruit,drink,{fruit1,drink2} = {}){
	console.log(fruit,drink,fruit1,drink2);
}
fun('apple','water',{fruit1:'Orange',drink2:'tea'});
//apple water Orange tea

12、获取函数的名称-name属性

function fun(arguments){}//函数声明
console.log(fun.name);//fun
let fun1=function(arguments){};//匿名函数声明
console.log(fun1.name);//fun1
let fun2=function superFun(arguments){}
console.log(fun2.name);//superFun

13、箭头函数-Arrow Functions

let fun=(fruit,drink)=>{return fruit+"  "+drink};
console.log(fun('apple','tea'));

=>相当于

var fun=function(fruit,drink){
	return fruit+"  "+drink
}
console.log(fun('apple','tea'));

15、对象表达式

let fruit='apple',drink='tea';
let obj={
	fruit:fruit,
	drink:drink,
	fun=function(){}
}
如上所示，当属性名与属性值的变量名相同时，可以只写一个变量，
let obj={fruit,drink,fun(){}};

16、对象属性名

let obj={};
obj.name='xiaohong';
当对象的属性名带有空格时要写成如下这种形式：
obj['fruit drink']
当对象的属性名为变量是，要写成如下形式：
var str='frui drink';
obj[str]='';

17、把对象的值复制到另一个对象里-Object.assign

let fruit={}
Object.assign(fruit,{drink:'tea'})
console.log(fruit.drink);//tea

**注：**Object.assign方法里面有两个参数，第一个参数是接受者，复制到的对象；第二个参数是复制原，将第二个参数的对象复制到一个参数的对象中

18、设置对象的prototype-ObjectsetPrototypeOf()

在创建对象后可以改变对象的prototype（实例的原型对象）

let fruit={
	getFruit(){return 'apple';}
};
let drink={
	getDrink(){return 'tea';}
};
let sunday=Object.create(fruit);
console.log(sunday.getFruit());//apple
console.log(Object.getPrototypeOf(sunday)===fruit);//true

Object.setPrototypeOf(sunday,drink);
console.log(sunday.getDrink());//apple
console.log(Object.getPrototypeOf(sunday)===drink);//true

**注：**Object.setPrototypeOf()方法有两个参数，第一个是实例名称，第二是实例对象所要指向的原型对象

19、proto

__proto__指向实例对象的原型对象

let fruit={
	getFruit(){return 'apple';}
};
let drink={
	getDrink(){return 'tea';}
};
let sunday = {
	__proto__:fruit
}
console.log(sunday.getFruit());//apple
console.log(Object.getPrototypeOf(sunday));//{getFruit: ƒ}

sunday.__proto__=drink;
console.log(Object.getPrototypeOf(sunday));//{getDrink: ƒ}

20、super

super在函数中调用的是原型中的属性，方法；

let fruit={
	getFruit(){return 'apple';}
};
let drink={
	getDrink(){return 'tea';}
};
let sunday = {
	__proto__:fruit,
	fun(){
		return super.getFruit()+" Orange";
	}
}
console.log(sunday.fun());

21、类-class

class chef{
	constructor(food){this.food = food}
	cook(){console.log(this.food)};
}	
let obj=new chef('apple');
obj.cook();//apple

**注：**class方法中不需要逗号隔开

22、get和set方法

get：得到值

set：设置值

  class chef{
  	constructor(food){this.food = food;this.dish = []}
  	get menu(){return this.dish; }
  	set menu(dish){return this.dish.push(dish)};
  }	
  let obj = new chef();
  console.log(obj.menu="apple");//apple
  console.log(obj.menu="orange");//orange
  console.log(obj.menu);//(2) ["apple", "orange"]

23、静态方法-static

class chef{
	constructor(food){this.food = food;this.dish = []}
	static cook(food){console.log(food)};
}	
chef.cook('orange');//orange

**注：**静态方法可以不用实例化就可以直接调用；

24、继承-extends

class Person{
	constructor(name,age){this.name = name,this.age = age}
	intro(){return `${this.name}有${this.age}岁了`}
}
class chef extends Person{
	constructor(name,age){super(name,age)}
}

let obj = new chef('xiaohong','5');
console.log(obj.intro());//xiaohong有5岁了

25、Set

Set是一组数据的集合

let fruit = new Set('orange','apple',);

.add('') : 添加数据；
.size :返回集合的长度；
.has('') : 验证集合中是否包含某条数据；
.delete('') : 删除指定数据；
.forEach(key=>({}) : 遍历集合中所有数据；
.clear('') : 清空集合；

26、Map

Map是一组名词性数据结构的集合

let food = new Map();
let fruit = {},cook=function(){},sweets='iceCreams';
food.set(fruit,'apple');//添加一个fruit项目
food.set(cook,'fire');//添加一个cook项目
food.set(sweets,'Iice');//添加一个sweets项目
console.log(food.size);//3
console.log(food.get(fruit));//apple
food.delete(cook);
console.log(food.has(cook));//false;
food.forEach((value,key)=>{
	console.log('$(key) = $(value) ');
})
foode.clear();//清空数据

.set('项目名称','项目值')*:添加一个项目,第一个参数项目的名称，第二个参数是项目的值；
.size:得到项目的个数；
.get(项目名称)：得到项目的值；
.delete(项目名称)：删除指定项目；
.has(项目名称)：判断是否有该项目；
.forEach((value,key)=>{}):遍历集合中的数据，value：项目的值，key:项目的名称；

转载于:https://my.oschina.net/u/1778998/blog/1524335