ES6 Study Notes
在线文档: http://es6.ruanyifeng.com/#README
离线下载: https://github.com/ruanyf/es6tutorial/
- 首先,分享一个不错的文档,虽然有文档(离线文档需要放到服务器环境下运行,可以用 webstorm 打开在浏览器中不能是
file:///协议),但是,再详细的文档也不能帮你写一行代码,所以还得写简书记下来..当然,我只是简单的记一下大概的新特性,如果想要详细了解,请查看文档了解学习 ^_^
变量 Variable
- let 与var最大的区别就是, 声明的变量不会让作用域提升, 同一个代码块中不能重复声明
- const 声明常量,在
es6和其他语言常量的效果一致,一旦定义就不能修改,注意,如果常量的值是对象,可以修改对象的属性的值,如果基本数据类型,一旦修改便会报错
解构赋值 Destructuring
- 数组的结构赋值
let [a, b, c] = [1, 2, 3];
console.log(a); // 1
- 对象的结构赋值
let { name, age } = { name: 'test', age: 10} ;
console.log(name); // test
console.log(age); // 10
- 混合的结构赋值
let { name, age, hobby:[x, y]} = { name: 'test', age: 10, hobby:['css', 'javascript']};
console.log(x); // css
console.log(y); // javascript
字符串扩展 String
- includes()：返回布尔值，表示是否找到了参数字符串
- startsWith(): 返回布尔值，表示参数字符串是否在原字符串的头部
- endsWith(): 返回布尔值，表示参数字符串是否在原字符串的尾部
- repeat(): 方法返回一个新字符串，表示将原字符串重复指定次数
- padStart():用于头部补全
- padEnd():用于尾部补全
- matchAll():方法返回一个正则表达式在当前字符串的所有匹配
- 模板字符串: 可以使用多行字符串,可以解析变量,还可以无视单双引号...
数值扩展 Number
-
isFinite(): 返回布尔值, 判断是否是一个数值,字符串('1')数字会返回
false -
isNaN(): 返回布尔值, 判断是否是
NaN -
isInteger(): 返回布尔值, 判断是否是一个 整数
20:true 21.0:false - Math.trunc():用于去除一个数的小数部分，返回整数部分
函数扩展 Function
- 函数默认值: 了解过
php的,可以都知道,这确实是一个非常好用的语法
// 简单使用
function defaultArgs(a, b='args') {
console.log(a, b);
}
defaultArgs('hello'); // hello args
defaultArgs('hello', 'world'); // hello world
// 结合 解构赋值 来使用
function ajax({ method, url, prams, dataType }) {
console.log(method);
}
- 休止符 ...
function getSum(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
getSum(1, 2, 3, 4); // 10
-
箭头函数 (注意
this关键字的指向问题)
- 只有一个参数是可以省略
()
// before es6
$('#ele').click(function(i){
alert(1)
});
// es6
$('#ele').click( i => {
alert(1);
});
- 只有一条
return语句时, 可以省略{}
// before es6
let fn1 = function (a, b) {
return a + b;
}
// es6
let fn2 = (a, b) => a + b;
- 只有一个参数,且只有一条
return语句时候() {}都可以省略
// before es6
let fn1 = function (a) {
return parseInt(a);
}
// es6
let fn2 = a => parseInt(a);
-
this关键字的指向问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arrow function this</title>
</head>
<body>
<input type="text" id="input">
<script>
let input = document.getElementById('input');
// input.onfocus = function fn1() {
// console.log(this); // <input type="text" id="input">
// }
input.onfocus = () => {
console.log(this); // window, 自己家没有就往上一层找
}
</script>
</body>
</html>
数组扩展 Array
- 扩展运算符
console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
[...document.querySelectorAll('div')]; // [<div>, <div>, <div>]
function func(x, y, z) {
return x+y+z;
}
let args = [0, 1, 2];
func(...args);
- Array.from() 将 伪数组和 类似数组的对象 转换为对象
- Array.of() 将一组值转换为数组 Array.of(1, 3, 5)
- find()
let arr = [1, 5, 10, 15];
result = arr.find((value, index, arr) => value > 8);
console.log(result); // 10:查找符合条件的第一个值, 没有返回 undefined
- findIndex()
let arr = [1, 5, 10, 15];
result = arr.findIndex(function(value, index, arr) => value > 8);
console.log(result); // 2:查找符合条件的第一个值的下标, 没有返回 -1
- fill 方法使用给定值，填充一个数组
let arr = new Array(3).fill(1);
console.log(arr); // [1, 1, 1]
- keys() values() entries()
let arr = ['tom', 'jack', 'alex', 'jason'];
console.log(arr.keys());
console.log(arr.values());
console.log(arr.entries());
- includes() 返回一个布尔值, 判断某个数组中是否包含某个值
let arr = ['tom', 'jack', 'alex', 'jason'];
let result = arr.includes('tom');
console.log(result); // true
let result2 = arr.includes('mark');
console.log(result2); // false
对象的扩展 Object
- 属性的简洁表示方法
let name = "alex";
let age = 18;
let height = 172;
let obj = {name, age, height}; // 等同于: let obj = {name:name, age:age, height:height};
-
object_keys() 该方法返回一个数组, 获取对象的所有
可以遍历的 属性
const user = {
name: 'alex',
age : 18,
height: 172
};
// console.log(Object.keys(user));
for (let i of Object.keys(user)) {
console.log(i);
}
-
object_values() 该方法返回一个数组, 获取对象的所有
可以遍历的 属性的值
let obj = {
name : "alex",
age : 18,
height : 172
};
// objectValues = Object.values(obj);
Object.values(obj).forEach(item => {
console.log(item);
});
除此之外,ES6还有很多的新语法
- Symbol
- Set
- Map
- Proxy
- Reflect
- Promise
- Generator
- async await
- Class
- Module
以上这些, 有兴趣, 请自行看文档学习吧~~ ^_^