开发中常见的ES6语句
<!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>
<!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语句的更多相关文章
- Java开发中常见的危险信号（中）
本文来源于我在InfoQ中文站原创的文章,原文地址是:http://www.infoq.com/cn/news/2013/12/common-red-flags-in-java-1 Dustin Ma ...
- 对开发中常见的内存泄露，GDI泄露进行检测
对开发中常见的内存泄露,GDI泄露进行检测 一.GDI泄露检测方法: 在软件测试阶段,可以通过procexp.exe 工具,或是通过任务管理器中选择GDI对象来查看软件GDI的对象是使用情况. 注意点 ...
- PHP开发中常见的安全问题详解和解决方法（如Sql注入、CSRF、Xss、CC等
页面导航: 首页 → 网络编程 → PHP编程 → php技巧 → 正文内容 PHP安全 PHP开发中常见的安全问题详解和解决方法(如Sql注入.CSRF.Xss.CC等) 作者: 字体:[增加 减小 ...
- PHP开发中常见的漏洞及防范
PHP开发中常见的漏洞及防范 对于PHP的漏洞,目前常见的漏洞有五种.分别是Session文件漏洞.SQL注入漏洞.脚本命令执行漏洞.全局变量漏洞和文件漏洞.这里分别对这些漏洞进行简要的介绍和防范. ...
- web开发中常见的安全漏洞及避免方法
1.安全攻击 1.SQL.HTML.JS.OS命令注入 2.XSS跨站脚本攻击,利用站内信任的用户,在web页面插入恶意script代码 3.CSRF跨站请求伪造,通过伪装来自信任用户的请求来利用受信 ...
- 提升代码幸福度，五个技巧减少js开发中的if else语句
壹 ❀ 引 在JavaScript开发中,条件判断语句的使用频率是极高的,而对于条件判断简单易读的if else应该都是大家的首选.可是代码写的久了,我们总是希望自己的代码看着能更为简洁规范(逼格更 ...
- asp.net开发中常见公共捕获异常方式总结(附源码)
本文实例总结了asp.net开发中常见公共捕获异常方式.分享给大家供大家参考,具体如下: 前言:在实际开发过程中,对于一个应用系统来说,应该有自己的一套成熟的异常处理框架,这样当异常发生时,也能得到统 ...
- ios开发——错误总结篇&开发中常见错误和警告总结（四）
ios开发——开发总结&开发中常见错误和警告总结(四) 网易彩票实战总结(错误) 错误总结之类的实现 经典错误之重复定义与导入错误 经典错误关于父类的实现 通知对象: 控制器的定义 Xcode ...
- Java开发中常见的危险信号（上）
本文来源于我在InfoQ中文站原创的文章,原文地址是:http://www.infoq.com/cn/news/2013/12/common-red-flags-in-java-1 Dustin Ma ...
随机推荐
- 英语词根与单词的说文解字---词根示例1、第10页 st(at)
英语词根与单词的说文解字---词根示例1.第10页 st(at) 一.总结 一句话总结: 站 state,establish,constitution 英 [ɪ'stæblɪʃ; e-] 美 [ɪˈ ...
- CodeForces 297D Color the Carpet (脑补题)
题意 一个h*w的矩阵上面涂k种颜色,并且每行相邻格子.每列相邻格子都有=或者!=的约束.要求构造一种涂色方案使得至少有3/4的条件满足. 思路 脑补神题--自己肯定想不出来T_T-- 官方题解: 2 ...
- poj3308 Paratroopers 最大流 最小点权覆盖
题意:有一个n*m的矩阵,告诉了在每一行或者每一列安装大炮的代价,每一个大炮可以瞬间消灭这一行或者这一列的所有敌人,然后告诉了敌人可能出现的L个坐标位置,问如何安置大炮,使花费最小.如果一个敌人位于第 ...
- 二十三、DBMS_METADATA(提供提取数据库对象的完整定义的接口)
1.概述 作用:提供提取数据库对象的完整定义的接口.这些定义可以用XML或SQL DDL格式描述.提供两种类型接口:可编程控制的接口:用于Ad Hoc查询的简单接口. 2.包的组成 dbms_meta ...
- Oracle 常用系统包
一.DBMS_OUTPUT(用于输入和输出信息) 二.DBMS_JOB(用于安排和管理作业队列) 三.dbms_pipe(类似UNIX系统的管道) 四.dbms_alert(用于生成并传递数据库预警信 ...
- c# 加密工具类
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Sec ...
- Xcode Server （Xcode9）搭建CI
Xcode 9将Xcode Server集成进来了,这是Xcode一个新特性,不用去单独下载server了,server可以用来做CI.自动化Test等等.这里主要介绍搭建CI,相当简单 打开开关,新 ...
- ASP.NET后台怎么输出方法中间调试信息?
后台方法,不止是aspx.cs,而是页面调用的一些其它方法.想调试这些方法,我以前winform都是MessageBox.Show一些中间结果,现在我也想用这种方式.但想想,网页会触发 Message ...
- （转）MapReduce Design Patterns（chapter 4 （part 1））（七）
Chapter 4. Data Organization Patterns 与前面章节的过滤器相比,本章是关于数据重组.个别记录的价值通常靠分区,分片,排序成倍增加.特别是在分布式系统中,因为这能提高 ...
- PHPStorm 添加支持 PSR-4 命名空间前缀设置
许久没有更新博客啦, 太忙了, 七月这最后一天来写点自己在使用 PHPStorm 上的小却很有用的功能吧. PHPStorm 默认是使用 PSR-0 命名空间规范的, 前提是你需要标记好项目中的源码根 ...