ES6从入门到入狱-基础篇

最新推荐文章于 2023-07-24 10:18:28 发布

ZhandsomeZ

最新推荐文章于 2023-07-24 10:18:28 发布

阅读量1.7w

点赞数 1

分类专栏： ES6从入门到入狱文章标签： es6

本文链接：https://blog.csdn.net/handsomezhanghui/article/details/105418737

版权

ES6从入门到入狱专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.学习ES6(ECMAScript 2015) 前要搞明白两个问题，什么是ES6，为什么要学习ES6

1. 什么是ES 6： ES6是JavaScript语言的新一代标准， 加入了很多新的功能和语法。
2.  现在React、 Vue项目一般都是用ES6语法来写， 这也是官方推荐
3.为什么要学习ES6， ES6已经在 2015 年 6 月正式发布了。 
它的目标， 是使得 JavaScript 语言可以用来编写复杂的大型应用程序， 成为企业级开发语言

二.ES6新增的内容如下:

1. 声明变量和常量的关键字：let和const

相同点及优点：都具有块级作作用域，不允许重复声明，不存在变量提升
不同点：const初始化时必须赋值,值是不可以修改的(对象除外，对象的属性可以修改)，而let不必

2. 数据解构和赋值

ES 6允许按照一定模式从数组和对象中提取值，

对变量进行赋值，即称为解构。例如：

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

let name = 'lee'
let age = 3

let person = {name, age}
person // Object {name: 'lee', age: 3}

// 反过来也是一样的
let person // Object {name: 'lee', age: 3}
let {name, age} = person
name // 'lee'
age // 3

函数参数解构赋值

function sum([x, y]) {

  return x + y;

}
sum([1, 2]); // 3

对象参数解构赋值

function sum({x, y}) {

  return x + y;

}

sum({1, 2})  // 3

嵌套解构赋值

数组嵌套
let [a, [b], c] = [1, [2], 3];
a // 1
b // 2
c // 3

// 对象嵌套
let {person: {name, age}, foo} = {person: {name: 'lee', age: 3}, foo: 'foo'}
name // 'lee'
age // 3

3. 模板字符串用反引号标识字符串。除了可以当做普通字符串使用外，还可以在字符串中插入变量

// 普通字符串

`Hello React!`;

// 字符串嵌入变量

let text = 'Vue'

let name = `Hello,${text}`;

console.log(name);//Hello,Vue

4. 对象的简写以及属性名添加，方式具体方法如下:

	const name = "Jack";
	const age = 25;
	const sex = "女";
	const studentES6 = {
          name, // 同名的属性可以省略不写
          age,
          sex,
          getName() {
                // 可以省略方法中的 : function
                return this.name;
          },
     };

console.log(studentES6.age); //25
console.log(studentES6.getName()); //Jack
ES5写法
studentES6[class] = 'class-1';
ES6写法
		const studentES6 = {
          name, // 同名的属性可以省略不写
          age,
          sex,
          getName() {
                // 可以省略方法中的 : function
                return this.name;
          },
          [class2]:"class-2"
     };

5. 箭头函数

基本形式：

1) let func = num => num; //只有一个形参可以‘=’后面写形参名

2) let func = () => num;//如果有多个形参，在‘=’后面写‘（）’把形参写在（）里面

3) let sum = (num1, num2) => num1 + num2;//如果只有1条执行语句，
直接在‘=>’后面写执行语句即可，默认会返回执行结果

4) 如果有多条语句必须写{},将代码写在{}里面，重新指定返回值

注意事项：

1.函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，
建议在箭头函数外部再嵌套一层函数以便于控制里面的this

2. 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

3.不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
不可以使用yield命令，因此箭头函数不能用作 Generator 函数（后面有具体介绍）。

6. 扩展运算符

扩展运算符是三个点（…），它将一个数组专为用逗号分隔的参数序列，
类似于rest参数的逆运算。例如：

function sum(a, b, c) {

	    num = a + b + c;

        console.log(num); //6

    }

let numbers = [1, 2, 3]

 sum(...numbers)

扩展运算符通常还可以用于合并数组以及解构赋值使用。例如：

let a = [1, 2]

let b = [3, 4]

[...a, ...b] // [1, 2, 3, 4]

let [x, ...rest] = ['a', 'b', 'c']

rest // ['b', 'c']

注意：解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、

那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。

7. ES 6引入rest参数

（形式为…变量名）用于获取函数的多余参数，可以代替arguments对象的使用。rest参数是一个数组，

数组中的元素是多余的参数。注意：rest参数不能再有其他参数，

而且rest参数只能写在形参的最后面。例如：

function languages(lang, ...types) {

        console.log(types); // ['java', 'python']；
}

 languages('js', 'java', 'python');

8. 形参默认值

ES6中提供了一个新的函数默认值的方式，外界传入的参数会依次赋值给函数中的参数

function sum (a = 10, b = 5) {

 return a + b;

}

console.log(sum(1, 2)); // 3

console.log(sum(5)); // 10

console.log(sum()); // 15

console.log(sum(0, 10)); // 10

// 当需要第一个参数使用默认值，而指定第二个参数时，需要显式指定第一个参数值为undefined
// 需要注意，当显式指定参数为null时，是不会使用默认值的，如果有多个参数的话，有默认值的形参要写在最后

9.ES6 关于字符串的扩展方法

１. //includes(),判断是否包含指定的字符串返回布尔值true或者说false

let str1 = ‘aabbcc’;

    let str2 = str1.includes('bb')

    console.log(str2); //true

２. //判断是否以指定字符串开头返回布尔值true或者说false

let str3 = 'abcd';

console.log(str3.startsWith("a"));//true

３. //判断是否以指定字符串结尾返回布尔值true或者说false

let str4 = 'eeddff';

console.log(str4.endsWith('f'));//true;

４. //repeat(count) : 重复指定次数会返回一个字符串

let str5 = 'ab';

console.log(str5.repeat(5));//ababababab

10. ES6数值扩展方法

1.isFinite //判断是否为无限大的数

console.log(Number.isFinite(123)); //true

console.log(Number.isFinite(Infinity)); //false

2. Number.isNAN //判断是是否为NAN

console.log(Number.isNaN(NaN));//true

console.log(Number.isNaN(123)); //false;

3. Number.isInteger(i) : 判断是否是整数

console.log(Number.isInteger(123)); //true

console.log(Number.isInteger(123.0)); //true

console.log(Number.isInteger(12.6)); //false

4.Number.parseInt(str) : 将字符串转换为对应的数值

console.log(Number.parseInt('123abc')); //123

console.log(Number.parseInt('a123')); //NAN

5.Math.trunc(i) : 直接去除小数部分

console.log(Math.trunc(123.111)); //123

11. 数组扩展方法

1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组

let obj4 = {

  0: '888',

  length: 1

};

console.log(Array.from(obj4));//[888]

2. Array.of(v1, v2, v3) : 将一系列值转换成数组

console.log(Array.of(123, true, false, 'string'));// [123, true, false, string]

3. find(function(value, index, arr){return true}) : 找出第一个满足条件的值并返回

 let arr = [2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(arr.find(function (item, key, value) {

  return item > 1

}));

//打印结果为1

4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件的并返回元素下标

let arr = [2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(arr.findIndex(function (item, key, value) {

  return item > 1

}));

12. ES6对象的扩展方法

１. Object.is判断两个值是否完全相等 (底层原理是转换成字字符串进行对比)

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

２. Object.assign(target, source1, source2…)

将源对象的属性复制到目标对象上

let obj = {};

let obj1 = {

  a: 'a',

  b: 'b',

};

let obj2 = {

  c: "c",

  d: 'd',

};

Object.assign(obj, obj1, obj2);

console.log(obj);

３. 直接操作 proto 属性

let obj3 = {};

let obj4 = {

  money: 5000000,

};

obj3.__proto__ = obj4;

console.log(obj4); //{}

console.log(obj4.money); //5000000

13. ES6 Set

set是ES6中新增的结构，和数组类似，唯一不同在于该类型不会有重复的数据，
一般常用来对数据进行去重操作

1、创建set集合并添加元素

let set = new Set();

console.log(typeof set)    //object

set.add('a');    //add()方法添加元素

set.add('b');

set.add('c');

console.log(set);    //{a,b,c}

２. Set的size属性可以获取set的长度

３. Set不能添加重复元素

set.add('a');    //重复,所以添加失败,这个地方并不保存

console.log(set.size);    // 3

console.log(set);    //{a,b,c}

// 数字5和字符5是不相等的，则可以添加进去

set.add(5)

set.add('5')

console.log(set.size)    //5

console.log(set);    {a,b,c,5,'5'}

４. 数组和Set可以相互转换，而Set不能添加重复元素，可以利用这一点实现数组去重。数组转化为set，只需要在创建set时将数组作为参数传递即可；把set转化为数组可以使用扩展运算符 …

//数组转换为Set数据类型并去重

let arrSet = [1,4,2,3,2,4,5];

let set = new Set(arrSet);

console.log(set);    //{1,4,2,3,5}

//Set数据类型转换为数组

let arr = [...set];

console.log(arr);    //[1,4,2,3,5]

另外一种数组去重 通过使用Array.from()方法 + new Set()

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

let result1 = Array.from(new Set(arr1));

console.log(result1);//[1,2,3,4,5,6];

５. Set的has()可以判断一个值是否在set中返回一个布尔值

let arrSet = new Set([2,3,4])

console.log(arrSet.has(5)) //false

console.log(arrSet.has(2)) //true

６. 移除Set元素，delete(需要删除的值)；clear() 清空所有的值

let set = new Set([1,3,6]);

set.delete(3);

console.log(set);    //{1，6}

set.clear();

console.log(set);    //{}

７. Set的遍历

Set可以使用forEach遍历，forEach遍历时回调函数有三个参数

function(value,key,ownerSet) {

              函数体

}

参数1: 遍历到的元素的值

参数2: 对set集合来说,参数二的值与参数一相同

参数3: Set集合自身

let iSet = new Set([1,2,4,6,8])

    iSet.forEach(function(value){

    console.log(value);    //1 2 4 6 8

})

for...of也可以遍历set

let iSet = new Set([1,2,4,6,8])

for (val of iSet) {

    console.log(val);    //1 2 4 6 8

}

８. set是通过Object.is()来判断两个元素是否相等的 **但是判断+0和-0的时候是用 === 号判断的

set.add(+0)

set.add(-0)   // ===判断相等,添加不进去

console.log(set.size)//1

set.add(NaN)

set.add(NaN)  //Object.is()判断相等,添加不进去

console.log(set.size)//2

set.add([])

set.add([]) //两个空数组不相等(存放在堆中的数据虽然字面量相等但是并不指向同一片内存空间),
所以可以添加

console.log(set.size)//4

set.add({})

set.add({}) // 空对象也不重复,也可以添加

console.log(set.size)

14. ES6新增的数据结构:Map

Map 是 ES6 中新增的数据结构，Map 类似于对象，
但普通对象的 key 必须是字符串或者数字，而 Map 的 key 可以是任何数据类型…

Map 的用法和普通对象基本一致，先看一下它能用非字符串或者数字作为 key 的特性。

const map = new Map();

const obj = {p: 'Hello World'};

map.set(obj, 'OK')

map.get(obj) // "OK"

map.has(obj) // true

map.delete(obj) // true

map.has(obj) // false

需要使用new Map()初始化一个实例，下面代码中set get has delete顾名即可思义（下文也会演示）。其中，map.set(obj, ‘OK’)就是用对象作为的 key （不光可以是对象，任何数据类型都可以），并且后面通过map.get(obj)正确获取了。

Map 实例的属性和方法如下：

size：获取成员的数量

set：设置成员 key 和 value

get：获取成员属性值

has：判断成员是否存在

delete：删除成员

clear：清空所有

const map = new Map();

map.set('aaa', 100);

map.set('bbb', 200);

map.size // 2

map.get('aaa') // 100

map.has('aaa') // true

map.delete('aaa')

map.has('bbb') // true

map.clear()

可以遍历map实例的方法如下：

Map 实例的遍历方法有：

keys()：返回键名的遍历器。

values()：返回键值的遍历器。

entries()：返回所有成员的遍历器。

forEach()：遍历 Map 的所有成员。

const map = new Map();

map.set('aaa', 100);

map.set('bbb', 200);

ZhandsomeZ

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
ES6从入门到入狱-基础篇

一.学习ES6(ECMAScript 2015) 前要搞明白两个问题，什么是ES6，为什么要学习ES61. 什么是ES 6： ES6是JavaScript语言的新一代标准，加入了很多新的功能和语法。2. 现在React、 Vue项目一般都是用ES6语法来写，这也是官方推荐3.为什么要学习ES6， ES6已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScri...
复制链接

扫一扫