Javascript使用模板字符串，find，findIndex，some，every查找数据以及map，filter过滤数据，reduce求和或平均值

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title></title><script>/******************* es6 中模板字符串的使用 *****************************///es6 使用``(windows键盘英文输入法下tab键上面那个键)来定义一个字符串。let str = '中国';const message = `我的祖国是 ${str}` //我的祖国是 中国console.log(message)function fn1() {return 'i am fn1'}var fn2 = function () {return 'i am fn2'}console.log(`${fn1()} xxx ${fn2()}`) //i am fn1 xxx i am fn2//换行let str2 = `我的祖国
是中国，
现住地
深圳`console.log(str2)let str3 = "我的祖国\n"+ "是中国\n"+ "现住地\n"+ "深圳\n"console.log(str3)//日期转换成 yyyy-MM-dd hh:mm:sslet dt = new Date().toLocaleString('cn', { hour12: false });console.log(dt);//数组转字符串let arr = [1, true, "hello"];console.log(arr.toString())const bruce = { name: '张三' }function update(birthYear, occupation) {this.birthYear = birthYear;this.occupation = occupation;}//call 第一个参数为想要绑定的值 剩下的参数为调用函数传递的参数update.call(bruce, 1949, 'dsadsad')console.log(bruce);  //{name: "张三", birthYear: 1949, occupation: "dsadsad"}//apply 第一个参数为想要绑定的值 剩下的参数为调用函数传递的参数(数组方式)update.apply(bruce, [1949, 'dsadsad'])console.log(bruce);  //{name: "张三", birthYear: 1949, occupation: "dsadsad"}const arr1 = [2, 3, -5, -11, 9];console.log(Math.min.apply(null, arr1)); // -11console.log(Math.max.apply(null, arr1)); //9//查找数据let peoples = [{ id: 1000, name: '张三', age: 21 },{ id: 1001, name: '李四', age: 18 },{ id: 1002, name: '王五', age: 20 },{ id: 1003, name: '赵六', age: 21 },]console.log(peoples.find(p => p.id === 1002)); //{id: 1002, name: "王五", age: 20}console.log(peoples.find(p => p.id === 5000)); //undefinedconsole.log(peoples.findIndex(p => p.id === 1002)); //2console.log(peoples.findIndex(p => p.id === 5000)); //-1let arr2 = [1, 2, 3].map(function (item) {return `<li>${item}</li>`      //['<li>1</li>','<li>2</li>','<li>3</li>']})console.log(arr2.join(''))         //<li>1</li><li>2</li><li>3</li>console.log("---------------------------------------------------")//some找到第一个符合条件的元素后，就会停止查找，返回trueconsole.log(peoples.some(p => p.age === 21)); //true//every集合中的所有元素都符合条件，才返回true，发现第一个不符合条件后，则停止查找，返回falseconsole.log(peoples.every(p => p.age === 21)); //true/********************  map 和filter 功能 **************************/console.log(peoples.map(p => p.name))  //["张三", "李四", "王五", "赵六"]console.log(peoples.map(p => p.age + 10)) //[ 31, 28, 30, 31 ]peoples.map(function (item, index, arr) {console.log('value值为：', item); //10 20 30console.log('index值为：', index); //0 1 2})//符合条件的所有元素console.log(peoples.filter(p => p.age === 18)); //[{ id: 1001, name: "李四", age: 18 }]console.log("---------------------------------------------------")const users = peoples.map(item => ({userId: item.id,userName: item.name,userAge: item.age,}));console.log(users)//reduce 计算数组元素相加后的总和/*arr.reduce(callback,[initialValue])callback （执行数组中每个值的函数，包含四个参数）previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））currentValue （数组中当前被处理的元素）index （当前元素在数组中的索引）array （调用 reduce 的数组）initialValue （作为第一次调用 callback 的第一个参数。初始值）*/var items = [10, 120, 1000];var reducer = function add(sumSoFar, item) { return sumSoFar + item; };console.log(items.reduce(reducer, 0));  //1130console.log(items.reduce((a, x) => a += x)); //1130console.log(items.reduce((a, x) => a += x, 0)); //1130console.log(items.reduce((a, x) => a += x, 10)); //1140//求平均值console.log(items.reduce((a, b) => a + b) / items.length);  //376.6666666666667//求上面peoples集合平均年龄var pItems = peoples.map(p => p.age);console.log(pItems.reduce((a, b) => a + b) / pItems.length); //20//循环集合数据for (let item of peoples) {console.log(item)}console.log("---------------------------------------------------")Object.keys(peoples).forEach(p => console.log(peoples[p]))//console.log(peoples.filter(p => p.age.match(/^2/)));//js类的使用class Point {constructor(x, y) {this.x = x;this.y = y;}toString() {return '(' + this.x + ', ' + this.y + ')';}add() {return this.x + this.y}}var point = new Point(1, 2);console.log(point)console.log(point.add())console.log("---------------------------------------------------")//map存储键值对let userMaps = new Map([[1, 'one'],[2, 'two'],[3, 'three'],[1, 'one'],[3, 'three'],]);console.log(userMaps)//try...catch....finallytry {foo.bar()} catch (e) {console.log(e.message)} finally {console.log('出错与否最后都要执行')}//正则表达式const input = "i am going to shenzhen";const reg = /\w{3,}/ig  //i忽略大小写 g全局搜索console.log(reg.test(input)) //匹配包含三个或三个以上字母的  trueconsole.log(input.match(/\w{3,}/ig)) //匹配包含三个或三个以上字母的  ["going", "shenzhen"]console.log(input.replace(/\w{3,}/ig, '***')) //i am *** to ***</script>
</head>
<body></body>
</html>

Javascript使用模板字符串，find，findIndex，some，every查找数据以及map，filter过滤数据，reduce求和或平均值相关推荐

JavaScript之模板字符串的使用
本文主要介绍JavaScript中模板字符串的使用.相对于字符串拼接而言,模板字符串提供了更加简洁的方法.下面介绍模板字符的几个特性. 1.支持单双引号同时书写模板字符串由反引号"`&qu ...
【javascript】模板字符串
目录模板字符串示例1:单行.多行字符串示例2:嵌入表达式示例3:模板嵌套示例4:eval + 模板字符串示例5:模板字符串获取参数值示例6:模板字符串获取表单元素的值参考模板字符串 ...
高级JavaScript #ES6(模板字符串,let,箭头函数,forof,参数增强,解构,class,promise)
模板字符串 1.模板字符串: 只要拼接字符串都用模板字符串代替+a.整个字符串包裹在一对儿反引号 ` ` 中b.反引号``中支持换行 c.反引号中需要动态生成的内容必须放在${}里d. ${}里: ...
js javaScript array 取指定元素索引、判断是否相同、重复、过滤数据
最近写js也多了,Array中有好多方法不够用.自己加了些以后还可能用到. <script type="text/javascript"> //找到返回所在索引,不存在 ...
javascript模板字符串（标签函数）
前面介绍了javascript的模板字符串的基本知识,今天深入学习一下标签函数模板字符串概述这里先简单说一下模板字符串的概念 1.模板字符串,从名字上可以得出其实返回的是字符串,普通使用其实就想引 ...
JAVA 模板字符串替换
功能:word模板字符串替换代码: * @param htmlTemplate 要进行替换的字符串* * */public static String getLogText(Map<Strin ...
ES6/07/Array的扩展方法，...扩展运算符,Array.from()，（arr.find(),arr.findIndex()和arr.includes()）模板字符串,Set数据结构
ES6扩展的内置对象 1,Array的扩展方法 -扩展运算符(展开语法) 1,扩展运算可以的将数组或者对象转为用逗号分隔的参数序列: let ary =[1,2,3]; //-ary;//" ...
es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串，在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...
javaScript模板字符串、严格模式、编码字节长度
一.模板字符串 var str=`hello`模板字符串模板语法`${变量}` ${简单运算} <script>// +号连接字符function test2(){var a=10var ...

Javascript使用模板字符串，find，findIndex，some，every查找数据以及map，filter过滤数据，reduce求和或平均值

Javascript使用模板字符串，find，findIndex，some，every查找数据以及map，filter过滤数据，reduce求和或平均值相关推荐

最新文章

热门文章