JS ES各版本特性开发者社区

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

JS ES各版本特性

// 整个脚本都开启严格模式的语法
"use strict";
var v = "Hi!  I'm a strict mode script!";

// 声明一个“JSON格式”的String 
var jsonStr = '{"a":"1","b":2,"c":"13"}';
// JSON.parse把String转成Object了
var jsonObj = JSON.parse(jsonStr);
console.log(jsonStr);
console.log(jsonObj);
console.log(JSON.stringify(jsonObj));
// 转换JSON时转换类型
var jsonObj2 = JSON.parse(jsonStr, function (key, value) {
    if (typeof value == 'string') {
        return parseInt(value);
    } else {
        return value;
console.log(jsonObj2);
// JSON.stringify 可以用来对Json对象进行简单过滤
var jsonStr2 = JSON.stringify(jsonObj, function (key, value) {
    if (value == 13) {
        return undefined; //使用undefined，则键值对就不会包含在最终的JSON中
    } else {
        return value;
console.log("这里就少了值为13的键值");
console.log(jsonStr2);
// JSON.stringify还可以用来做Json格式化
var jsonStr3 = JSON.stringify(jsonObj, null, 4);
console.log(jsonStr3);

var obj = {
    a: "1",
    b: 2,
    c: "13"
console.log(typeof obj);
let mkeys = Object.keys(obj);
for (var i = 0; i < mkeys.length; i++) {
    console.log(obj[mkeys[i]]);
}

"use strict"
function locate(){
  console.log(this.location);
function Maru(location){
  this.location = location;
var kitty = new Maru("cardboard box");
var locateMaru = locate.bind(kitty);
locateMaru();
//apply和call 立即执行，而bind如果不调用是不执行的
locate.apply(kitty)
locate.call(kitty)

"use strict"
var str = "aa";
var arr = [1,2,3,4,5,6];
console.info(Array.isArray(str));
console.log(Array.isArray(arr));

//这样就方便计算数组中数据了
arr.forEach(function(item,index,array){
    console.log("索引项："+index+"  数组项："+item);
})

var arrObj = [
    {name:"one",age:1},
    {name:"two",age:2},
    {name:"three",age:3},
    {name:"four",age:4},
    {name:"five",age:5},
    {name:"six",age:6},
    {name:"seven",age:7},
var ages = arrObj.map(function(obj){
    return obj.age;//返回值
console.log(ages);

"use strict"
var arrObj = [
    {name:"one",age:1},
    {name:"two",age:2},
    {name:"three",age:3},
    {name:"four",age:4},
    {name:"five",age:5},
    {name:"six",age:6},
    {name:"seven",age:7},
var arrFilter = arrObj.filter(function(obj){
    return obj.age>5;//返回值的判断条件
console.log(arrFilter);

"use strict"
var arrObj = [
    {name:"one",age:1},
    {name:"two",age:2},
    {name:"three",age:3},
    {name:"four",age:4},
    {name:"five",age:5},
    {name:"six",age:6},
    {name:"seven",age:7},
var somefour = arrObj.some(function(obj){
    return obj.age>4;//判断age有没有大于4的,如果有返回true,没有返回false
var someten = arrObj.some(function(obj){
    return obj.age>10;//判断age有没有大于10的,如果有返回true,没有返回false
console.log("判断有没有大于4的："+somefour);
console.log("判断有没有大于10的："+someten);

"use strict"
var arrObj = [
    {name:"one",age:1},
    {name:"two",age:2},
    {name:"three",age:3},
    {name:"four",age:4},
    {name:"five",age:5},
    {name:"six",age:6},
    {name:"seven",age:7},
var everyfour = arrObj.every(function(obj){
    return obj>4;
var everyten = arrObj.some(function(obj){
    return obj.age>10;//判断age有没有大于10的,如果有返回true,没有返回false
console.log("判断是不是所有都大于4:"+everyfour);
console.log("判断是不是所有都大于10:"+everyten);

var array = [1, 2, 3];
//传统写法
array.forEach(function(item, index, arr) {
    console.log(item);
//ES6
array.forEach(item = > console.log(item));

let str = 'happy';
console.log(str.includes('ha')) // true
console.log(str.repeat(3)) // 'happyhappyhappy'
console.log(str.startsWith('ha')); // true，参数2为查找的位置
console.log(str.endsWith('p', 4)); // true,参数2为查找的字符串长度

$("body").html("This demonstrates the output of HTML \
content to the page, including student's\
" + name + ", " + seatNumber + ", " + sex + " and so on.");

$("body").html(`This demonstrates the output of HTML content to the page, 
including student's ${name}, ${seatNumber}, ${sex} and so on.`);

// ES6之前，当未传入参数时要实现：text = 'default'；
function printText(text) {
    text = text || 'default';
    console.log(text);
// ES6；
function printText(text = 'default') {
    console.log(text);
printText('hello'); // hello
printText();// default

const obj1 = {
const obj2 = {
const obj = Object.assign(obj1, obj2)
console.log(obj); // {a: 1, c: 2}
console.log(obj === obj1); // true

function people(name, age) {
    return {
        name,
}

const people = {
    name: 'lux',
    getName () {    // 省略冒号(:)和function关键字
        console.log(this.name)
}

function foo(x,y,z) {
  console.log(x,y,z);
let arr = [1,2,3];
foo(...arr); // 1 2 3

function foo(...args) {
  console.log(args);
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

// 对象解构
const people = {
    name: 'xiaoming',
    age: 25
const {
    name,
} = people; // 'xiaoming', 25
// rest参数,返回的是一个对象
const obj = {
    a: 2,
    b: 3,
    c: 4,
const {
    ...rest
} = obj; // 2 { b: 3, c: 4, d: 5 }
console.log(rest);
// 数组解构 
const arr = [1, 3, 4];
const [x, y, z] = arr; // 1, 3, 4
const [x2, ...rest2] = arr; // 1, [3，4]
console.log(rest2);

// Set实例的常用方法和属性add,delete,clear,has、size
const s = new Set(['A', 'B', 'C']);
console.log(s); // Set { 'A', 'B', 'C' }
console.log(s.has('A')) // true，bool值
console.log(s.size) // 3
console.log(s.clear()) // Set {}
console.log(s.delete('A')) // true,bool值

const a =[1, 2, 3]
const b = [2, 3, 4];
// 并集
const s = Array.from(new Set([...a, ...b])); // [ 1, 2, 3, 4 ]
// 交集、差集
const bSet = new Set(b);
const interestSet = a.filter(v => bSet.has(v)); // [ 2, 3 ]
const interestSet = a.filter(v => !bSet.has(v)); // [ 1 ]

let oValue = 0o10;
console.log(oValue); // 8
let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2

let letters = ['a', 'b', 'c'];
for (let letter of letters) {
    console.log(letter);
// 结果:a,b,c

let letters = ['a', 'b', 'c'];
for (let letter in letters) {
    console.log(letter);
// 结果:0,1,2

var parent = {
  foo() {
    console.log("Hello from the Parent");
var child = {
  foo() {
    super.foo();
    console.log("Hello from the Child");
Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
             // Hello from the Child

class Student {
  constructor() {
    console.log("I'm a student.");
  study() {
    console.log('study!');
  static read() {
    console.log("Reading Now.");
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

class Phone {
  constructor() {
    console.log("I'm a phone.");
class MI extends Phone {
  constructor() {
    super();
    console.log("I'm a phone designed by xiaomi");
let mi8 = new MI();

function* inner() {
  yield 'hello!';
function* outer1() {
  yield 'open';
  yield inner();
  yield 'close';
var gen = outer1()
gen.next().value // "open"
gen.next().value // 返回一个遍历器对象
gen.next().value // "close"
function* outer2() {
  yield 'open'
  yield* inner()
  yield 'close'
var gen = outer2()
gen.next().value // "open"
gen.next().value // "hello!"
gen.next().value // "close"

function* test() {
    var str1 = yield "hello";
    var str2 = yield str1 + " world";
    return str2;
var t = test();
console.log(t.next()); // {value: "hello", done: false}
console.log(t.next()); // {value: "undefined world", done: false}
console.log(t.next()); // {value: undefined, done: true}

function* test() {
    var str1 = yield "hello";
    var str2 = yield str1 + " world";
    return str2;
var t = test();
var t1 = t.next();
var t2 = t.next(t1.value);
var t3 = t.next(t2.value);
console.log(t1); // {value: "hello", done: false}
console.log(t2); // {value: "hello world", done: false}
console.log(t3); // {value: "hello world", done: true}

function* test01(x) {
    var y = yield x + 1;
    return y;
var t1 = test01(1);
console.log(t1.next()) // {value: 2, done: false}
console.log(t1.next(3)) // {value: 3, done: true}

function* test02(x) {
    try {
        var y = yield x + 2;
    } catch (e) {
        console.log(e);
    return y;
var t2 = test02(1);
console.log(t2.next());
console.log(t2.throw("出错了"));

function loaddata() {
    var request = new XMLHttpRequest();
    request.open('GET', 'login.json', false);
    request.send(null);
    if (request.status === 200) {
        return request.responseText;
function* mytest() {
    let data = yield loaddata();
    console.log(data);
var mtest = mytest();
let mn1 = mtest.next()
console.info(mn1);
let mn2 = mtest.next(mn1.value)
console.info(mn2);

update_click:function(){
    this.$nextTick(function(){
    	// ...
}

async update_click:function(){
    // ...
    await this.$nextTick();
    // ...
}

Math.pow(3, 2) === 3 ** 2    // 9

[1, 2, 3].indexOf(3) > -1 // true
// 等同于：
[1, 2, 3].includes(3) // true

JS ES各版本特性

JS ES各版本特性

版本历史

ES5

严格模式

JSON对象

Object对象

bind/apply/call

Array对象

indexOf/lastIndexOf

isArray

forEach

map

filter

some

every

ES6

箭头操作符

变量定义let和const

字符串新增方法

字符串模版

函数参数默认值

对象合并Object.assign()

键值对重名简写

对象字面量简写

Spread / Rest 操作符

对象和数组解构和Rest操作符

Promise

Set

二进制和八进制字面量

for…of 和 for…in

对象超类

类

Generator

yield

next

yield*

示例1

示例2

示例3

示例4

ES7

async/await

求幂运算符

Array.prototype.includes()