ES6的基本语法

ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
</head>

<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>

<script>
let btns = document.getElementsByTagName('button');

//方式1(错误方法):var全局变量,没有块级作用域
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被点击了');
})
}

//方式2:使用闭包
for (var i = 0; i < btns.length; i++) {
(function (i) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被点击了');
})
})(i)
}

// 方式3. 使用ES6中的let
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function(){
console.log('第' + i + '个按钮被点击了');
}
}

//详解:
function(i) { //i = 0,点击第一次
btns[i].addEventListener('click', function(){
console.log('第' + i + '个按钮被点击了');
})
}
function(i) {
//i = 1,点击第二次。
// ①:由于使用的是var,前面i = 0/的函数里i又会被重新赋值成i = 1,故点击五次后,不论点击哪个按钮,都是打印的第5个按钮被点击
// ②:闭包方式,此循环的函数调用完后,会寻找i,然后由于是闭包形式,此i就相当于局部变量使用,其他循环下的i不相互影响
// ③:let方式:局部变量,有作用域范围
btns[i].addEventListener('click', function(){
console.log('第' + i + '个按钮被点击了');
})
}
</script>

</html>

const使用和注意

在使用ES6开发中我们优先使用const,只当有需要改变一个标识符时才使用let

  1. const的注意一:一旦给const修饰的标识符被赋值后,不能修改
    • const a = 20;
    • a = 12;
  2. const的注意二:
    • const name; //错误,必须赋值。
  3. const的注意三:常量的含义是指向的对象的指针引用不能被修改,但是内部属性可以被修改
    • const obj = {
      id: 10,
      name: ‘why’,
      weight: 88
      }
    • obj.id = 12;
    • obj.name = ‘Lemon’;
    • obj.weight = 90;

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
<script>
//1.属性的增强写法
const name = 'lemon';
const age = 18;
const height = 1.88;

//ES5的写法
const obj1 = {
name: name,
age: age,
height: height
}

//ES6的写法
const obj2 = {
name,
age,
height
}

//2.方法的简写:
//ES6之前
let obj1 = {
test: function () {
console.log("");
}
}

//ES6的写法
let obj2 = {
test() {
console.log("")
}
}
</script>

进阶链接

filter()

作用:用于把Array的某些元素过滤掉,然后返回剩下的元素。

原理:filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。

在一个Array中,删掉偶数,只保留奇数,

1
2
3
4
let arr = [1, 2, 4, 5, 6, 9, 10, 15];
let r = arr.filter(function (x) {
return x % 2 !== 0;
});

输出:r: [1, 5, 9, 15]

把一个Array中的空字符串删掉

1
2
3
4
var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注意:IE9以下的版本没有trim()方法
});

输出:r: [‘A’, ‘B’, ‘C’]

filter()接收的回调函数,其实可以有多个参数,分布表示元素的位置和数组本身

1
2
3
4
5
6
7
var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
console.log(element); // 依次打印'A', 'B', 'C'
console.log(index); // 依次打印0, 1, 2
console.log(self); // self就是变量arr
return true;
});

去除Array的重复元素

1
2
3
4
5
var r, arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];

r = arr.filter(function (element, index, self) {
return self.indexOf(element) === index;
});

indexOf总是返回第一个元素的位置,如果前面有重复的元素,那么返回值就会为false,则被过滤

参考文档:https://blog.csdn.net/weixin_41646716/article/details/83270137

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
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
// map()方法:map,映射,即原数组映射成一个新的数组;
// map方法接受一个新参数,这个参数就是将原数组变成新数组的映射关系。
const arr1 = [1, 2, 3, 4, 5];
myfun_1(arr1); //[1,4,9,16,25]

function myfun_1(arr) {
const array = [];
arr.map((item) => {
array.push(item * item);
});
console.log(array);
}

// 通过map方法得到某一个对象数组中特定属性的值
const obj = [
{ name: "小明", age: 16, sex: "男" },
{ name: "小红", age: 17, sex: "女" },
{ name: "小白", age: 18, sex: "女" },
];
function getter(obj) {
obj.map((item) => {
console.log(item.age);
});
}

getter(obj); // 16 17 18
// ![](https://blog.csdn.net/weixin_40736319/article/details/89301034)

console.log("===========");

var data = [1, 2, 3, 4];
// var arrayOfSquares = data.map(function (data) {
// return data * data
// });

var arrayOfSquares = data.map((data) => data * data);
arrayOfSquares.forEach(console.log);
// callback需要有return值,如果没有,就遍历四次都全是undefined:
console.log("===========");

var users = [
{ name: "张含韵", email: "zhang@email.com" },
{ name: "江一燕", email: "jiang@email.com" },
{ name: "李小璐", email: "li@email.com" },
];

var emails = users.map(function (user) {
return user.email;
});

// 不然就是一个数组:zhang@email.com, jiang@email.com, li@email.com
console.log(emails.join(", "));

console.log("===========");
// function(value, index, array)
var emailsZhang = users
// 获得邮件
.map(function (user, index) {
return user.email + index;
})
// 筛选出zhang开头的邮件
.filter(function (email) {
// 正则表达式写法:①包含在斜杠之间;②调用RegExp对象的构造函数
let re = new RegExp("^zhang");
return re.test(email);
// return /^zhang/.test(email);
});

console.log(emailsZhang.join(", ")); // zhang@email.com

参考文档

查询本周对应的日期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const dateOfToday = Date.now()
// 因为创建的daysOfThisWeek数组,索引为6就对应的星期天,故减一
// Date().getDay() 获取当天对应的星期
// date.getDate() 返回月份的某一天
// date.getFullYear() 返回一个年份
const dayOfToday = (new Date().getDay() + 7 - 1) % 7
const daysOfThisWeek = Array.from(new Array(7))
.map((_, i) => {
// date.getMonth():0=一月, 1=二月
const date = new Date(dateOfToday + (i - dayOfToday) * 1000 * 60 * 60 * 24)
return date.getFullYear() +
'-' +
String(date.getMonth() + 1).padStart(2, '0') +
'-' +
String(date.getDate()).padStart(2, '0')
})

不满足条件的就填充为 0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
console.log(Array.from(new Array(7)))
// 定义数组长度为7,符合企业的、值不等于0的,否则就value赋值为0
const daysOfThisWeek = Array.from(new Array(7))
.map((_, i) => {
if(data[i].CATEGORIES === '企业' && data[i].SUM !== 0) {
return {
name: (i + 1) + '月',
value: data[i].SUM
}
}
return {
name: (i + 1) + '月',
value: 0
}
})

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信