<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<script type="text/javascript">
//ES6字符串扩展方法,三个方法都支持第二个参数，表示开始搜索的位置;
let str = 'Hello world!';
console.log(str.includes('o')) // true ----表示是否找到了参数字符串;类似ES5 indexOf()
console.log(str.startsWith('Hello')) // true ----表示参数字符串是否在原字符串的头部;
console.log(str.endsWith('!')) // true ----表示参数字符串是否在原字符串的尾部;
//ES6字符串扩展方法----模板字符串
let hello = '你好';
let str1 = `${hello}，这节课学习字符串模板`;
console.log(str1); //你好，这节课学习字符串模板,省去拼接的烦恼；
alert `123`
// 等同于
alert(123)
//ES6解构赋值
let res = {
id: 1,
status: "OK",
list: [{
name: 'bob',
age: 20
}]
}
let {
id,
status,
list
} = res;
console.log(id, status, list);
// 1, "OK", [{name: 'bob',age: 20}]
//const 声明常量 === var a = 1, b = 2, c = 3;or const a = 1;const b = 2;const c = 3;
const [a, b, c] = [1, 2, 3];
console.log(a, 'aaaaa'); //1 "aaaaa"
console.log(b, 'bbbbb'); //2 "bbbbb"
console.log(c, 'ccccc'); //3 "ccccc"
//使用扩展运算符（...）拷贝数组
let test = [1, 2, 3, 4, 5]
let [...test1] = test
test[2] = 5
console.log(test, '原数组') //[1, 2, 5, 4, 5] "原数组"
console.log(test1, '深拷贝的数组') //[1, 2, 3, 4, 5] "深拷贝的数组"
//不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一个默认输出（export default）。
// bad
//import * as myObject from './importModule';
// good
//import myObject from './importModule';
//reset参数---rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中
function add(...values) {
let sum = 0;
for(var val of values) {
sum += val;
}
return sum;
}
console.log(add(2, 5, 3)) // 10
//箭头函数
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
console.log(sum(1, 4), '求和') //5 "求和"
//如果只有单个参数
var fun = age => age; //or var fun = (age) => age;
// 等同于
var fun = function(age) {
return age;
};
console.log(fun(20), '箭头函数单个参数') //20 "箭头函数单个参数"
//扩展运算符加箭头函数
const sumList = (...num) => num;
console.log(sumList(1, 2, 3, 4, 5), '扩展运算符运用场景一') // [1, 2, 3, 4, 5] "扩展运算符运用场景一"
const getList = (name, ...obj) => [name, obj];
console.log(getList(1, 2, 3, 4, 5), '扩展运算符运用场景二') // [1,[2,3,4,5]] "扩展运算符运用场景二"
//ES6数组扩展******将一个数组添加到另一个数组的尾部
// ES5的 写法
var test2 = [0, 1, 2];
var test3 = [3, 4, 5];
//console.log(test2.push(test3),'push直接跟数组')// 4 "push直接跟数组" push方法的参数不能是数组;
Array.prototype.push.apply(test2, test3);
console.log(test2, '没用...前') //[0, 1, 2, 3, 4, 5] "没用...前"
// ES6 的写法
let test4 = [0, 1, 2];
let test5 = [3, 4, 5];
test4.push(...test5);
console.log(test4, '使用...后') //[0, 1, 2, 3, 4, 5] "使用...后"
//ES6将类数组转为数组的方法；dom类似除了document.getElementById()之外的找到的dom都为类数组;另外有length属性的;
let toList = {
'0': 'bob',
'1': '20',
'2': 'man',
length: 3
};
// ES5的写法
var newArr = [].slice.call(toList);
console.log(newArr, '[].slice.call的方法') //["bob", "20", "man"] "[].slice.call的方法"
// ES6的写法
let newArr1 = Array.from(toList);
console.log(newArr1, 'Array.from方法') //["bob", "20", "man"] "Array.from方法"
//find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组;如果没有符合条件的成员，则返回undefined。
let numList = [1, 5, 15, 20, 25];
let newNumList = numList.find((value, index, arr) => {
return value > 20;
})
console.log(newNumList,'数组find方法')//25 "数组find方法"
//findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
let numLogs = [5, 10, 15, 20];
let newNumLogs = numLogs.findIndex((value, index, arr) => {
return value > 10
})
console.log(newNumLogs,'数组findIndex方法')//2 "数组findIndex方法"
//ES6数组的 includes() 第一个参数是否包含一个指定的值，第二个参数表示搜索的起始位置，默认为0;
//如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始;
//没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值;
console.log([1, 2, 3].includes(4),'includes一个参数')//false "includes一个参数"
console.log([1, 2, 3].includes(3, -1),'includes两个参数')//true "includes两个参数"
//ES6对象的结构和扩展运算符的运用*****...扩展运算符 解构赋值必须是最后一个参数(数组和对象都是一样) 解构赋值的拷贝是浅拷贝；
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x,'对象的第一个值');//1 "对象的第一个值"
console.log(y,'对象的第二个值');//2 "对象的第二个值"
console.log(z,'对象的第三个值');//{a: 3, b: 4} "对象的第三个值"
let obj = {
name:'bob',
age:20
}
let obj1 = {
sex:'sex',
cash:22
}
let newObj = {...obj,...obj1};//等同于 let newObj = Object.assign({}, obj,obj1);
console.log(newObj,'扩展运算符合并对象')//{name: "bob", age: 20, sex: "sex", cash: 22} "扩展运算符合并对象"
//ES6 async 函数 await 是顺序执行的，Promise.all() 是并行的;
function fun1(){
console.log('第一')//第一
}
function fun2(){
console.log('第二')//第二
}
function fun3(){
console.log('第三')//第三
}
async function testasync () {
try {
await fun1()
await fun2()
await fun3()
} catch (error) {
console.log(error)
}
}
testasync ();
//let [res1, res2, res3] = await Promise.all([fun1(), fun2(),fun3()])
//async 函数中 return 的结果将作为回调的参数;
async function testCallback () {
return 'this is a test async function'
}
testCallback().then(
userName => console.log(userName)
)
// this is a test async function
</script>
</body>

</html>

常用ES6语法的更多相关文章

  1. React Native中常用ES6语法

    一:模块导入导出 //ES6 import React, { Component, PropTypes, } from 'react'; import { Image, Text } from 're ...

  2. 常用ES6语法总结

    参考链接:http://es6.ruanyifeng.com/ const 声明一个只读的常量. 改变常量的值会报错.只声明不赋值也会报错.只在声明所在的块级作用域内有效.声明的常量不会提升,只能在声 ...

  3. 把JavaScript代码改成ES6语法不完全指南

    目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变 ...

  4. 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

  5. ES6语法知识

    let/const(常用) let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域) 这里外部的 ...

  6. es6语法快速上手（转载）

    一.相关背景介绍 我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5.这个版本己经很多年了,且完美被各大浏览器所支持.所以很多学js的朋友可以一直分不清楚es5 ...

  7. ES6语法的新特性

    ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也 ...

  8. 前端项目中常用es6知识总结 -- Async、Await让异步美如画

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

  9. 前端项目中常用es6知识总结 -- Promise逃脱回调地狱

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

随机推荐

  1. 利用Java.util.UUID来生成唯一ID(用来做数据库主键好用)

    UUID(Universally Unique Identifier)全局唯一标识符,是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.按照开放软件基金会(OSF)制定的标准计算, ...

  2. 重新学习MySQL数据库1：无废话MySQL入门

    重新学习Mysql数据库1:无废话MySQL入门 开始使用 我下面所有的SQL语句是基于MySQL 5.6+运行. MySQL 为关系型数据库(Relational Database Manageme ...

  3. JavaScript---js的模块化

    js的模块模式被定义为给类提供私有和公共封装的一种方法,也就是我们常说的“模块化”. 怎么实现“模块化”? 通过闭包的原理来实现“模块化”  ,具体实现:1.必须有外部的封闭函数,该函数必须至少被调用 ...

  4. jersey实现跨服务器上传

    1.导入跨服务器上传文件jar文件 <dependency> <groupId>commons-io</groupId> <artifactId>com ...

  5. 轮播图插件 SuperSlide2.1滑动门jQuery插件

    http://down.admin5.com/demo/code_pop/18/562/ SuperSlide2.1滑动门jQuery插件

  6. C# 设计模式巩固 - 简单工厂模式

    前言 设计模式的文章很多.鄙人不才文笔也不咋地.写这篇只为巩固下基础知识,万一不小心帮到了您,是我莫大的荣幸!写的不好欢迎码友指正,废话结束开始进入正题. 介绍 - 简单工厂模式 官方定义:(尴尬~貌 ...

  7. bzoj 3197

    题解: 先找到中信 然后dp 代码: #include<bits/stdc++.h> using namespace std; ; ],a[N],b[N],s[N],c[N],f[N]; ...

  8. python金融分析项目

    1.进入ipython: C:\Users\Administrator>ipython Python (v3. , ::) [MSC v. bit (AM D64)] Type 'copyrig ...

  9. Linux系统下超级用户密码的修改

    1)重启系统:在虚拟机刚启动界面,不停地按上下键,停止系统的自动引导(界面底部有提示) 2) 按 e 进入编辑模式 3) 编辑内容如下:完成后按Ctrl+x    (具体编辑内容为下图:删除倒数第三行 ...

  10. WIN7不能上网

    http://zhidao.baidu.com/link?url=lYL0Sti_nX3JDz3pA3cVh49nyYDEQBJ6P5fxwB4La0FurHlgmWGMdgfMGjQSWxj17sH ...