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

以上这些, 有兴趣, 请自行看文档学习吧~~ ^_^