ES6知识点记录

0、es6开发环境搭建

建立工程目录：

先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist

src：书写ES6代码的文件夹，写的js程序都放在这里。

dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件。

初始化项目

在安装Babel之前，需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具，进入项目目录，输入下边的命令：

1
npm init -y

全局安装Babel-cli

1
npm install -g babel-cli

本地安装babel-preset-es2015 和 babel-cli

1
npm install --save-dev babel-preset-es2015 babel-cli

根目录新建.babelrc

1
type null>.babelrc //如果创建文件提示请输入文件名，就用这个命令

这个文件我们建立完成后，现在可以在终端输入的转换命令了，这次ES6成功转化为ES5的语法。

1
babel src/index.js -o dist/index.js

1、ES6中，给传递的参数设置默认值的方式为

1
2
3
4
5
6
7
8
9
10
11
function print(text="hello world"){
	console.log(text);   //这种写法可以在参数设置默认值
}



function add(a,b=1){
	return a+b;
}
add(1,2);//2会取代设备的b的默认值1
add(1);//b会启用默认值1

2、let声明的变量只在自己的作用域里面有效即块级作用域

通俗的理解就是let的作用域在一对{}花括号里面，出了花括号就是undefined。(ps:包括if语句的花括号)

1
2
3
4
5
6
7
8
9
10
11
12
13
function test(){
	for(let i=1;i<3;i++){
		console.log(i);//输出结果为1，2
	}
		console.log(i);//报错Reference Error 引用错误i is not defined
}
test();
<!--下面的var的例子-->
var a='hello';
{
	var a="hello world";
}
console.log(a);//hello world ,var定义的为全局变量，在代码块里面也会覆盖前面的赋值

3、使用let 声明变量时不能重复声明，否则会报语法错误

1
2
let a=1;
let a=2; //Syntax Error 语法错误，

4、const 声明的常量的值无法被修改，否则会报错；const也是块级作用域

1
2
3
4
5
6
function test(){
	const PI=3.1415;
	PI=123;
	console.log(PI);
}
test();//TypeError 类型错误，

5、const声明常量时必须赋值，不然会报错

1
2
3
4
5
6
function test(){
	const a;
	a=1;
}
	
test(); //语法错误Uncaught SyntaxError: Missing initializer in const declaration

6、使用const声明一个对象时，数值可以修改，因为对象是引用类型，返回的是的对象存储的内存的指针；而指针没有改变

1
2
3
4
5
6
7
8
9
function test(){
	const k={
		a:1
	}
	k.b=2;
	console.log(k);输出为{a: 1, b: 2}
}
	
test();

7、es6语法新增的赋值写法

1
2
3
4
5
{
	let a,b,reset;
	[a,b]=[1,2];
	console.log(a,b); //输出为1 2
}

8、数组的解构赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
{
	let a,b,c;
	[a,b,...c]=[1,2,3,4,5,6,7];
	console.log(a,b,c);//1 2  [3, 4, 5, 6, 7]
}
{
	let [a,b,c]=[1,2,3];//这种写法需要键值对应
	console.log(a,b,c);//1,2,3


	//给b设置默认值
	let [a,b='3',c]=[1,,3];//逗号不能省略
	console.log(a,b,c);//1,'3',3
}
<!--上面的写法相当于es5的下面的写法-->
"use strict";

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

console.log(a, b, c);


//使用场景，交互值
let a,b;
a=1;
b=2;
[a,b]=[b,a]

//解构赋值使用场景，去除json数据
{
	let jsondata={
		title:"test",
		test:[
			{
				name:"mytest",
				desc:"this is a test"
			}
		]
	}
	let {title:data1,test:[{name:data2}]}=jsondata;
	console.log(data1,data2); //输出为test mytest
}

var jsonData = {
 id: 42,
 status: "OK",
 data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

9、对象的解构赋值

1
2
3
4
5
6
let {bar,foo}={foo:'123',bar:"jack"};
console.log(bar,foo); //对象的解构赋值只需要键值对应，顺序不影响赋值

let bar;
{bar}={bar:"123"};//这样写会报错，因为先赋值了再解构必然会报错
({bar}={bar:"123"}) ;//正确的写法应该在外面加个圆括号,一个小技巧，单引号比双引号编译快

10、字符串的解构

1
2
let [a,b,c,d,e]='hello';
console.log(a,b,c,d,e); //输出h e l l o

10、扩展运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//扩展运算符就是 ... 三个点，后面加一个自定义的变量
//使用场景，声明一个方法，不确定参数个数的时候
function test(...arg){
	console.log(arg[0]);
	console.log(arg[1]);
	console.log(arg[2]);
	console.log(arg[3]);
};
test(1,2,3);//1,2,3,undefined  


//实例
let arr1=['www','xypecho','com'];
let arr2=arr1;
arr2.push('cn');
console.log(arr1);//输出 ["www", "xypecho", "com", "cn"]，因为这个let arr2=arr1;并没有开辟新的内存空间给arr2，所以arr1和arr2是同一个内存空间

//修正写法应该为
let arr1=['www','xypecho','com'];
let arr2=[...arr1];
arr2.push('cn');
console.log(arr1); //["www", "xypecho", "com"]
console.log(arr2); //["www", "xypecho", "com", "cn"]

11、rest运算符

1
2
3
4
5
6
7
8
9
//rest英文有剩余的意思
//值得注意的是rest参数之后不能再有其他参数（只能是最后一个参数）否则会报错
//函数的length属性不包括rest参数。
function test(first_arg,...arg){
	for(let val of arg){
		console.log(val);
	}
}
test(1,2,3,4,5); //输出为2，3，4，5

12、字符串查找，查看某段字符串里面是否含有某个字符

1
2
3
4
5
let a='非常高兴你能看到这篇文章，我是你的老朋友';
let b='老朋友';
console.log(a.includes(b)); //输出true，b里面的‘老朋友’加上空格的话，即输出false
console.log(a.startsWith(b));//输出false；表示参数字符串是否在源字符串的头部
console.log(a.endssWith(b));//输出false；表示参数字符串是否在源字符串的尾部。

13、字符串的复制

1
2
let a='demo123';
console.log(a.repeat(3)); //repeat()里面的参数代表复制的次数

14、ES6数字操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//创建一个二进制数字，binary
let a=0B010101;
console.log(a); //21
//创建一个八进制数字,octal
let b=0O666;
console.log(b);//438,ps第二个字符是大写的字母O

//判断是否是数字
let a=0B010101;
console.log(Number.isFinite(a)); //true
console.log(Number.isFinite(NaN)); //false
console.log(Number.isFinite('hello'));//false

//判断是否是NaN
console.log(Number.isNaN(NaN)); //true
console.log(Number.isNaN(123));//false

//判断数字是否为整数
console.log(Number.isInteger(123));//true
console.log(Number.isInteger(12.3));//false

//把数字转为整型
let num=123.1;
console.log(Number.parseInt(num)); //123

//把数字转成浮点类型
let num1=123;
console.log(Number.parseFloat(num1));

//数组取整
console.log(Math.trunc(4.1)); //输出4
console.log(Math.trunc(4.9)); //输出4

//判断是正数负数还是0
console.log(Math.sign(4)); //输出1
console.log(Math.sign(-3));//输出-1
console.log(Math.trunc(0));//输出0

15、json转为数组

1
2
3
4
5
6
7
8
9
//原生js并没有什么直接内置好的函数去将json数据转化为数组，es6有方法可以实现
let json={
	'0':'www',
	'1':'xypecho',
	'2':'com',
	length:3
}
console.log(json);//{0: "www", 1: "xypecho", 2: "com", length: 3}
console.log(Array.from(json));// ["www", "xypecho", "com"]

16、数字和字符串转为数组

1
2
console.log(Array.of(1,2,3,4));// [1, 2, 3, 4]
console.log(Array.of('javascript'));//["javascript"]

17、查找数组里面的字符

1
2
3
4
5
6
7
8
9
10
11
12
13
//find()为示例方法,value为需要查找的值，index为索引，arr为源数组
//数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
let arr=[1,2,3,4,5,6];
console.log(arr.find(function(value,index,arr){
		return value>5;
	}));


let arr=[1,2,3,4,5,6];
console.log(arr.findIndex(function(value,index,arr){
		return value>5;
	}));
//查找满足条件的值的索引

18、数组里面值的替换

1
2
3
4
let arr=['www','xyp','com'];
//arr.fill('text',1,2); //第一个参数是用来替换的变量，第二个是开始位置，第三个是结束位置
arr.fill('text'); //不加起始位置则全部替换
console.log(arr);

19、es6的新的数组循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
let arr=['www','xyp','com'];
for(let item of arr){
	console.log(item);//www,xyp,com
}

//要输出下标的话可以这样
let arr=['www','xyp','com'];
for(let item of arr.keys()){
	console.log(item); //0,1,2
}

//如果要下标和值一起输出的话可以这样
let arr=['www','xyp','com'];
for(let item of arr.entries()){
	console.log(item); // [0, "www"]  [1, "xyp"]  [2, "com"]
}


//键值分开输出
let arr=['www','xyp','com'];
for(let [key,val] of arr.entries()){
	console.log(key,val);
	//0 "www"
	//1 "xyp"
	//2 "com"
}

//手动循环输出数组
let arr=['www','xyp','com'];
let list=arr.entries();
console.log(list.next().value);
console.log('----------');
console.log(list.next().value);
console.log('----------');
console.log(list.next().value);
console.log('----------');
//(2) [0, "www"]
//-------
// [1, "xyp"]
//-------
// [2, "com"]
//--------

20、es6箭头函数

箭头函数的特性

  1. 继承外部的作用域，即this的指向 // 例如vue中的箭头函数this指向vue对象
  2. 不能用作构造函数
  3. 没有prototype属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//获取需要传递的参数数量
function add(a,b){
	return a+b;
}
console.log(add.length);//2

//需要注意的是如果参数设置了默认值，则不会计入length
function add(a,b=1){
	return a+b;
}
console.log(add.length); //1


//箭头函数
let add=(a,b)=>a+b;
console.log(add(1,2)); //3

//上面的函数相当于es5的
"use strict";

var add = function add(a, b) {
	return a + b;
};
console.log(add(1, 2));


//函数作用域问题
let a='hello';
function test(a,b=a){
	console.log(a,b); //world world
}
test('world');


let a='hello';
function test(c,b=a){
	console.log(c,b); //world hello
}
test('world');

// this指向问题
var obj = {
	commonFn: function () {
		console.log(this);
	},
	arrowFn: () => {
		console.log(this);
	}
}
obj.commonFn(); // 指向obj对象
obj.arrowFn(); // 指向了obj所在的作用域,window



//没有参数的箭头函数写法
let arrow=()=>'hello world';
console.log(arrow());//hello world

21、对象的函数解构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//这个方法适应于操作后台返回的json数据时
let json={
	name:'jack',
	id:666
}
let test=({name,id})=>{
	console.log(name,id); //jack 666
}
test(json);


//下面是数组的函数解构
let arr=['www','xyp','com'];
let foo=(a,b,c)=>{
	console.log(a,b,c);//www xyp com
}
foo(...arr);

22、查看对象里面是否有该键

1
2
3
4
5
let json={
	name:'jack',
	id:666
};
console.log('name' in json);//true 查看对象里面是否有该键

23、数组遍历的几种方式

1
2
3
4
5
6
7
8
9
10
11
//1、forEach()循环遍历
let arr=['www','xyp','com'];
arr.forEach((val,idx)=>console.log(val,idx)); //www 0   xyp 1  com 2

//2、filter循环
let arr=['www','xyp','com'];
arr.filter(x=>console.log(x));//www,xyp,com

//3、some循环
let arr=['www','xyp','com'];
arr.some(x=>console.log(x));//www,xyp,com

24、key值的构建//目前尚不知道实际使用场景

1
2
3
4
5
let kill='test';
let obj={
	[kill]:'web'
};
console.log(obj); //{test: "web"}

25、ES6判断的数值是否严格相等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Object.is('foo', 'foo');     // true
Object.is(window, window);   // true

Object.is('foo', 'bar');     // false
Object.is([], []);           // false

var test = { a: 1 };
Object.is(test, test);       // true

Object.is(null, null);       // true

// 特例
Object.is(0, -0);            // false
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true

26、es6合并对象的方法

1
2
3
4
5
6
7
//Object.assign方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ）。
//Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。
let target = { a: 1 };  
let source1 = { b: 2 };  
let source2 = { c: 3 };  
console.log(Object.assign(target,source1,source2));//{a: 1, b: 2, c: 3}
console.log(Object.assign(target,source2,source1));//{a: 1, b: 2, c: 3}

27、新增的Set数据解构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
let setArr=new Set();
let arr=['www','xyp','com'];//定义的时候重复的数据也不会被重复加进去，这个特性可以用来给数组去重
arr.forEach((val)=>{
	setArr.add(val); //set增加数据的方式为add(),ps重复的数据不会被加进去，
	})
console.log(setArr);//Set(3) {"www", "xyp", "com"}

//Array.from方法可以将 Set 结构转为数组。
Array.from(setArr);

//查找set里面是否有某个变量
console.log(setArr.has('www')); //has()方法返回true/false

//删除set里面所有数据
setArr.clear();
console.log(setArr); //Set(0) {} 输出空

//删除set里面指定的数据
setArr.delete('www');//delete()里面放参数
console.log(setArr);//输出Set(2) {"xyp", "com"}

//遍历set里面的元素之for..of
for(let a of setArr){
	console.log(a);//www xyp com
}

//遍历set里面的元素之forEach
setArr.forEach((val)=>{
	console.log(val);//www xyp com
	})

//巧用扩展运算符进行遍历
let set1 = new Set(['red', 'green', 'blue']);
let arr1 = [...set1];
console.log(arr1);//["red", "green", "blue"]

//获取set里面元素的数量方法
console.log(setArr.size); //3,size不会计入重复的数据的数量

//扩展运算符和 Set 结构相结合，就可以去除数组的重复成员。
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
console.log(unique);//[3, 5, 2]

更多demo看[阮一峰老师的教程](http://es6.ruanyifeng.com/#docs/set-map)

28、WeakSet数据结构

1
2
3
4
5
6
7
8
9
10
11
12
13
//WeakSet与Set不同的地方在于，WeakSet可以放对象
let weakarr=new WeakSet();
let obj={name:'jack',id:'666'};
weakarr.add(obj);
console.log(weakarr);//value: {name: "jack", id: "666"}

//如果两个不同的变量值相同，赋值给WeakSet，会输出两个相同的值，解决方法，把两个对象合为一个
let weakarr=new WeakSet();
let obj={name:'jack',id:'666'};
let obj1={name:'jack',id:'666'};
weakarr.add(obj);
weakarr.add(obj1);
console.log(weakarr);//value1: {name: "jack", id: "666"};value2: {name: "jack", id: "666"} //会把两个都输出

29、Map数据结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//往Map里面增加数据
let json={
	name:'test',
	user_id:'321',
	password:'123456a'
};
console.log(json);
let maparr=new Map();
maparr.set(json,'jspang',);//set方法为往Map里面加数据；前面是key，后面是value
console.log(maparr);

//查看增加的数据
let json={
	name:'test',
	user_id:'321',
	password:'123456a'
};
let maparr=new Map();
maparr.set(json,'jspang',);//set方法为往Map里面加数据；前面是key，后面是value
console.log(maparr.get(json));//jspang

//删除里面所有数据
maparr.clear();

//删除指定数据
maparr.delete(json);

//查找是否存在某个变量
maparr.has('www');//false

//Map的数量也用.size

30、用Proxy进行预处理

Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
//get方法，读取pro里面属性时会执行
let obj={
	add:function(val){
		return val++;
	},
	name:'this is test'
};
let pro=new Proxy({
	add:function(val){
		return val++;
	},
	name:'this is test'
},{
	get:function(target,key,property){//target：得到的目标值  key：目标的key值，相当于对象的属性
		console.log('我先执行了');
	}
});//声明变量,前面的花括号里面是对象主体，后面的花括号是需要预处理的函数
console.log(pro.name);//我先执行了;打印pro.name是因为pro读取属性时才会执行预处理函数执行


//set方法，改变Proxy属性值时，执行的函数
let obj={
	add:function(val){
		return val++;
	},
	name:'this is test'
};
let pro=new Proxy({
	add:function(val){
		return val++;
	},
	name:'this is test'
},{
	get:function(target,key,property){//target：得到的目标值  key：目标的key值，相当于对象的属性
		console.log('我先执行了');
	},
	set:function(target,key,value,receiver){
		console.log('hello');
	}
});
pro.name='ppp';
console.log(pro.name);


//apply的用户，先mark，以后再看
let target=function(){
	console.log('this is target');
}
let handler={
	apply(target,ctx,args){
		console.log('this is apply');
		return Reflect.apply(...args);
	}
}
let pro=new Proxy(target,handler);
console.log(pro());

31、promise的语法

ES6中的promise的出现给我们很好的解决了回调地狱的问题，在使用ES5的时候，在多层嵌套回调时，写完的代码层次过多，很难进行维护和二次开发，ES6认识到了这点问题，现在promise的使用，完美解决了这个问题。那我们如何理解promise这个单词在ES5中的作用那，你可以想象他是一种承诺，当它成功时执行一些代码，当它失败时执行一些代码。它更符合人类的行为思考习惯，而不在是晦涩难懂的冰冷语言。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// promise的结构，可以在http://happymmall.com下的控制台执行看看

new Promise((resolve, reject) => {
	$.ajax({
		url: 'http://happymmall.com/user/get_user_info.do',
		type: 'post',
		success(res) {
			resolve(res)
		},
		error(err) {
			reject(err)
		}
	})
}).then((res) => {
	console.log('success', res)
}, (err) => {
	console.log('error', err)
})


// promise的链式操作
如果是以前，我们都是在一个ajax的success方法里面写另外一个异步函数。现在我们可以用链式promise来解决回调地狱

const promise1 = new Promise((resolve, reject) => {
	$.ajax({
		url: 'http://happymmall.com/user/get_user_info.do',
		type: 'post',
		success(res) {
			resolve(res)
		},
		error(err) {
			reject(err)
		}
	})
});
const promise2 = new Promise((resolve, reject) => {
	$.ajax({
		url: 'http://happymmall.com/cart/get_cart_product_count.do',
		type: 'post',
		success(res) {
			resolve(res)
		},
		error(err) {
			reject(err)
		}
	})
});
promise1.then(() => {
	console.log('promise1 success');
	return promise2;
}).then(() => {
	console.log('promise2 success');
})

32、es6中的class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
class Coder{ //定义一个程序员类
	name(val){
		//console.log(`my name is ${val}`);
		return val;
	}
}
let forg=new Coder;//实例化类
forg.name('daidai');//my name is daidai


//里面写多个函数时
class Coder{ //定义一个程序员类
	name(val){
		console.log(`my name is ${val}`);
		return val;
	}
	skill(val){
		console.log(':skills'+val);
	}
}
let forg=new Coder;//实例化类
forg.name('daidai');//my name is daidai
forg.skill('coding');


//类的传参
class Coder{ //定义一个程序员类
	name(val){
		console.log(`my name is ${val}`);
		return val;
	}
	skill(val){
		console.log(this.name+':skills'+val);
	}
	constructor(a,b){
		this.a=a;
		this.b=b;
	}
	add(){
		return this.a+this.b;
	}
}
let forg=new Coder(1,4);//a.b在实例化的时候传进去
console.log(forg.add());//5


//类的继承
class Coder{ //定义一个程序员类
	name(val){
		console.log(`my name is ${val}`);
		return val;
	}
	skill(val){
		console.log(this.name+':skills'+val);
	}
	constructor(a,b){
		this.a=a;
		this.b=b;
	}
	add(){
		return this.a+this.b;
	}
}


class htmler extends Coder{
	//htmler类里面继承了coder里面所有的属性和方法
}
let daidai=new htmler;
daidai.name('test');//my name is test

33、模块化编程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//export负责进行模块化，也是模块的输出。
//import引入模块

//test.js
export var a = 'jspang';
//index.js
import {a} from './test.js'; 
console.log(a);

执行
babel-node index.js
//输出jspang


//输出多变量的话可以这样
var a='hello';
var b='world';
export {a,b};


//函数的输出
export function add(a,b){
	return a+b;
}


//将变量语义化输出
var a='hello';
var b='world';
export{
	name as a,
	skill as b
}
//引用可以这样
import {name,skill} from './test.js'

34、正则新特性

es5中正则的写法为

1
2
3
let regex=new RegExp('xyz','i');
let regex2=new RegExp(/xyz/i);
console.log(regex.test('xyz123'),regex2.test('xyz12345')); //true,true

es6新特性

1
2
let regex3=new RegExp(/xyz/ig,'i');//这段的意思是后面的修饰符来替代前面的修饰符
console.log(regex3.flags); //输出i，flags是获取正则表达式修饰符的属性

35、字符串新特性

1
2
3
4
5
6
console.log('1'.padStart(2,'0'));  //输出01，padStart的意思为向前面补白，2代表长度，0代表用0来补
console.log('1'.padEnd(2,'0')); //输出10，向后面补白

console.log(String.raw`hi/naaa`); //输出hi\naaa，这个api的作用是在反斜杠前面再加个反斜杠来转义
console.log(`hi/naaa`);//输出hi
							aaa

36、数组新特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let arr =Array.of('test','i','am','mi',1,2,3);
console.log(arr);  //["test", "i", "am", "mi", 1, 2, 3]，把任意字符转成数组类型



console.log(Array.from([1,2,3],(item) =>{return item *2;}));//可以转化为数组的同时遍历里面数据并修改数据



let arr=['www','xyp','com'];
arr.fill('text',1,2); //第一个参数是用来替换的变量，第二个是开始位置，第三个是结束位置
arr.fill('text'); //不加起始位置则全部替换,输出为['text','text','text']
console.log(arr);



let arr=[1,2,3,4,5];
for(let [key,val] of arr.entries()){
	console.log(key,val);
}//遍历输出数组里面的键值


const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN];
console.log(arr1.includes(NaN));//查看数组里面是否包含某个值，有返回true，没有则返回false

37、函数新特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//函数作用域问题
let a='hello';
function test(a,b=a){
	console.log(a,b);
}
test('world'); //输出为world world


let a='hello';
function test(a,b=a){
	console.log(a,b);
}
test();//输出为undefined undefined


let a='hello';
function test(c,b=a){
	console.log(c,b);
}
test('world');//输出为world hello


//箭头函数
let fun = a =>  a*a;
console.log(fun(2)); //输出4

//如果函数没有参数可以这么写
let test =()=>'hello world';
console.log(test()); //hello world

38、Object新增方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//对象中有方法
let es5_methods={
	hello:function(){
		console.log('hello world');
	}
}//es5的写法
let es6_methods={
	hello(){
		console.log('hello world');
	}
}//es6里面的写法


//判断两个值是否相同
console.log(Object.is('aaa','aaa'));  //Object.is和 === 相同


//对象合并
let arr=[1,2,3];
let brr=['a','b','c'];

let crr=Object.assign({},arr,brr);//花括号叫目标对象，后面的arr、brr是源对象。对象合并是指：将源对象里面的属性添加到目标对象中去，若两者的属性名有冲突，后面的将会覆盖前面的
console.log(crr);


//将对象分成数组
let test ={name:'jack',age:'18'};
for(let [key,val] of Object.entries(test)){
	console.log([key,val]);// ["name", "jack"],["age", "18"]
}

39、symbol数据类型

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

40、set-map数据结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let setArr=new Set();
setArr.add('a'); //set解构往里面新增值用add方法
console.log(setArr.size);//获取set里面的长度用size

//Array.from方法可以将 Set 结构转为数组。
Array.from(setArr);

//set的遍历
let arr=['add','delete','has','clear'];
let setArr=new Set(arr);
for(let key of setArr){
	console.log(key); //输出为'add','delete','has','clear'
}

setArr.forEach((val)=>{
	console.log(val);//输出为'add','delete','has','clear'
})

41、set和array对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let arr=new Array;
let map=new Map();
//增
arr.push({'t':1});
map.set('t',1);
console.log(arr);
console.log(map);
//删
let idx=arr.findIndex(item=>item.t);
arr.splice(idx,1);
map.delete('t');
console.log(arr);
console.log(map);
//改
arr.forEach(item=>item.t?item.t=2:'');
map.set('t',2);
console.log(arr);
console.log(map);
//查
let m=map.has('t');
let a=arr.find(item=>item.t);
console.log(m);
console.log(a);

42、类和对象

基本定义和生成实例

1
2
3
4
5
6
7
8
9
10
class Parent{
	constructor(name='hello world'){
		this.name=name;
	}
}
let child =new Parent();
console.log(child.name);//hello world

let obj=new Parent('ppp');
console.log(obj.name);//ppp

继承

1
2
3
4
5
6
7
8
9
10
11
12
class Parent{
	constructor(name='hello world'){
		this.name=name;
	}
}
class child extends Parent{
	constructor(name='child_name'){
		super(name);//子类要想修改父类值需要调用super方法，方面里面写修改的属性
		this.type='child_type';//子类新增属性
	}
}
console.log(new child());//child {name: "child_name", type: "child_type"}

get和set操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Parent{
	constructor(name='hello world'){
		this.name=name;
	}
	get longName(){
		return `这是get操作${this.name}`;
	}
	set longName(val){
		this.name=val;
	}
}
let test = new Parent();
//console.log(test.longName);//这是get操作hello world
test.longName='呆呆';
console.log(test.longName);//这是get操作'呆呆'

静态方法(只能通过类来调用而不是通过类的实例来调用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//错误示范
class Parent{
	constructor(name='hello world'){
		this.name=name;
	}
	static say(){
		console.log(this.name);
	}
}
let test = new Parent();
test.say(); //报错，test.say is not a function


//正确写法
class Parent{
	constructor(name='hello world'){
		this.name=name;
	}
	static say(){
		console.log(this.name);
	}
}
Parent.say();//输出Parent

静态方法

1
2
3
4
5
6
7
8
class Parent{
	constructor(name='hello world'){
		this.name=name;
	}
}
Parent.sex='boy';
console.log(Parent.sex);//boy

43、模块化编程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//这是a.js里面
let a=123;
let foo =function(){
	console.log('hello');
}
class hello{
	test(){
		alert(123);
	}
}
export default{
	a,
	foo,
	hello
}

//这是b.js
import xxx(此处可以随便起名字) from a.js
console.log(xxx.a);
console.log(xxx.hello());
JS技巧 > ES6
#JS技巧 #ES6
ES6知识点记录
https://xypecho.github.io/2018/01/12/ES6知识点记录/
作者
很青的青蛙
发布于
2018年1月12日
许可协议