十分钟速览ES6核心特性

React胖虎
111 阅读5分钟

ECMAScript简介

ECMAScript是JavaScript的子集，其仅仅包含了JavaScript中的数据类型及相关操作、流程控制、运算符及相关计算

graph LR
A(JavaScript) --> B(ECMAScript)
A(JavaScript) --> C(DOM)
A(JavaScript) --> D(BOM)

ES6核心特性

let与const

  • let与var的差异
    • let声明的变量限制在一个块级作用域中，块级作用域 {}
    • var声明的变量为全局作用域和函数作用域
    • let不可以重复声明且不会被预解析
{
    var age = 16;
    let name = "旺财";
}
console.log(age);// 16
console.log(name);// name is not defined
  • const常量
    • 常量不可重新赋值，遇 {} 形成块级作用域
    • 声明的同时必须进行初始化
    • 不可重复声明且不会预解析
{
    const MAX_LENGTH = 200;
    MAX_LENGTH = 300;// ERROR
}

解构赋值

  • 对象的解构
let obj = {
    a:1,
    b:2,
    c:3
}
let {a,b,c} = obj;
console.log(a,b,c);// 1,2,3
  • 数组的解构
let arr = ["杭州","洛阳","上海"];
let [a,b,c] = arr;
console.log(a,b,c);// "杭州","洛阳","上海"

let a = 0;
let b = 1;
let arr = [a,b];
[b,a] = arr;
console.log(a,b);// 1,0
  • 字符串的解构
let str = "ABC";
let [a,b] = str;
console.log(a,b);// A,B

展开运算符

  • 对象展开
let obj = {
    name:"旺财",
    age:18
};
let obj2 = {
    ...obj,
    address:"杭州"
};
console.log(obj2);// {name:"旺财",age:18,address:"杭州"}
let {a,...d} = obj2;
console.log(a,d);// a:"旺财",d:{age:18,address:"杭州"}
  • 数组展开
let arr = [1,2,3,4,5];
let arr2 = ["a",...arr,"b","c"];
console.log(arr2);// ["a",1,2,3,4,5,"b","c"]
let arr3 = [1,2,3,4,5];
let [a,...b] = arr3;
console.log(a,b);// 1,[2,3,4,5]

Set对象

Set为集合，自带去重作用

let arr = [1,2,3,4,5,2,3,5];
let data = new Set(arr);
console.log(data);// [1,2,3,4,5]
console.log([...data]);
  • Set的属性与方法
    • size 返回Set数据的长度
    • Set.add() 添加子项，返回Set数据本身
    • Set.delete() 删除指定子项，返回Boolean
    • Set.has() 判断是否包含某个子项，返回Boolean
    • Set.clear() 清空Set数据

Map对象

Map为映射，以数组形式存储键值对

let data = new Map([
    ["小明",10],
    ["小刚",16],
    ["小黄",18]
]);
data.set("小伟",20);
data.delete("小明");
console.log(data.get("小黄"));
console..log(data);
  • Map的属性与方法
    • size 返回Map数据的长度
    • Map.add() 添加子项，返回Map数据本身
    • Map.delete() 删除指定子项，返回Boolean
    • Map.has() 判断是否包含某个子项，返回Boolean

函数新增扩展

  • 箭头函数
let fn = () => {
    console.log("箭头函数");
}
fn();
// 表现形式
(param) => 返回值
(param1,param2) => 返回值
() => {
    ...执行语句;
    return;
}
  • 箭头函数不定参
let fn = (a,...args) => {
    console.log(arguments);// error
    console.log(a,args);// 1,[2,3,4,5]
};
fn(1,2,3,4,5);
  • 箭头函数中的this
// 箭头函数中无this，其默认指向定义箭头函数所在的作用域
document.onclick = function(){
    let fn = () => {
        console.log(this);// document对象
    };
    fn();
}
  • 默认参数值

定义函数时，可以指定参数的初始值

let fn = (a=1,b=2) => {
    console.log(a+b);// 3
}
fn();

新增数组扩展

  • Array.from() 对一个伪数组或可迭代对象创建一个新的，浅拷贝的数组实例
  • Array.isArray() 用于判定一个传入值是否是Array
  • Array.of() 用于创建一个具有可变数量参数的新数组实例
Array.of(7);// [7]
Array.of(1,2,3);// [1,2,3]

Array(7);// [ , , , , , , ]
Array(1,2,3);// [1,2,3]
  • Array.prototype.find() 返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined
let arr = [5,10,15,20,25];
let result = arr.find((item) => item >10);
console.log(result);// 15
  • Array.prototype.findIndex() 返回数组中满足提供的测试函数的第一个元素的索引，否则返回-1
let arr = [5,10,15,20,25];
let result = arr.findIndex((item) => item >10);
console.log(result);// 2
  • 数组扁平化
    • Array.prototype.flat() 将按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
let arr1 = [1,2,3,[4,5]];
console.log(arr1.flat());// [1,2,3,4,5]

let arr2 = [1,2,3,[[[4,5]]]];
console.log(arr2.flat(2));// [1,2,3,[4,5]]
  • Array.prototype.flatMap() 首先食用映射函数映射每一个元素，然后将结果压缩成为一个新数组。其与map连着深度为1的flat效果几乎等同
let arr1 = [
    [1,2],
    [3,4],
    [5,6]
];
let arr2 = arr1.flatMap(item => {
    return item.filter(item => item >= 2);
});
console.log(arr2);// [2,4,6]
  • Array.prototype.includes() 用来判断一个数组中是否包含一个指定的值，返回值类型为boolean
let arr = [1,2,3,4,5];
console.log(arr.includes(3,-2));// false
  • Array.prototype.fill() 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。但不包含终止索引
let arr = ["a","b","c","d","e"];
arr.fill("f",1,3);
console.log(arr);// ["a","f","f","d","e"]

新增字符串扩展

  • String.prototype.startsWith() 判断当前字符串是否以另外一个给定的字符串开头，返回值为boolean
  • String.prototype.endsWith() 判断当前字符串是否以另外一个给定的字符串结尾，返回值为boolean
let str = "123456789";
console.log(str.startsWith("56",4));// true
console.log(str.endsWith("89"));// true
  • String.prototype.repeat() 返回一个新的字符串，该字符串包含被连接在一起的指定数量的字符串的副本
let str = "你好";
console.log(str.repeat(3));// "你好你好你好"
  • 模板字符串

模板字符串可以在字符串中插入变量和表达式(如函数返回值)，并且字符串可进行换行

let name = "旺财";
let age = 18;
let address = "杭州";
let str = `
    姓名:${name},
    年龄:${age},
    地址:${address}
`

新增对象的扩展

  • 对象属性简洁表示法
// ES5表示
let name = "旺财";
let age = 18;
let obj1 = {
    name:name,
    age:age,
    jump:function(){
        console.log("跳跳跳");
    }
}
// ES6表示
let name = "旺财";
let age = 18;
let obj2 = {
    name,
    age,
    jump(){
        console.log("跳跳跳");
    }
}
  • Object.assign() 将所有可枚举和自有属性从一个或多个源对象复制到目标对象，并返回修改后的对象
let obj1 = {
    a:1,
    b:2
};
let obj2 = {
    c:3,
    d:4,
    e:5
};
Object.assign(obj1,obj2);
console.log(obj1);// {a:1,b:2,c:3,d:4,e:5}
  • Object.is() 判断两个值是否为同一个值
let obj1 = {name:"wc"};
let obj2 = {name:"wc"};
console.log(Object.is(obj1,obj2));// false
  • 属性名表达式
let n = "name";
let obj = {
    [n]:"旺财",
    age:18
};
console.log(obj);// {name:"旺财",age:18}
avatar
文章
阅读
粉丝