for 循环 和 Array 数组对象
博客地址:https://ainyi.com/12
for 循环 和 Array 数组对象方法
for for-in for-of forEach效率比较
- 效率速度:for > for-of > forEach > for-in
// 面试: for, forEach, for-in, for-of(es6) let arr = [1,2,3,4,5];
arr.b = '100'; // 自定义私有属性 // for循环 速度最快
for (let i = 0; len = arr.length, i < len; i++) { // 编程式
console.log("for循环"+arr[i]);
} // forEach 不支持return和break,无论如何都会遍历完,
arr.forEach(function(item){
console.log("forEach循环"+item);
}); // for-in 遍历的是 key 值,且 key 会变成字符串类型,包括数组的私有属性也会打印输出
for(let key in arr){
console.log("for in循环"+key);
console.log(typeof key);
} // for-of 遍历的是值 val,只能遍历数组 (不能遍历对象)
for(let val of arr){
console.log("for of循环"+val);
} // Object.keys 将对象的 key 作为新的数组,这样 for-of 循环的就是原数组的 key 值
let obj = {school:'haida',age:20};
// 变成 ['school','age']
for(let val of Object.keys(obj)){
console.log(obj[val]);
}
JavaScript Array 数组对象方法
重点难点解析
// filter 过滤:可用于删除数组元素
// 不改变原数组,过滤后返回新数组
// 回调函数的返回值:若 true:表示这一项放到新数组中
let newArr = [1,2,3,4,5].filter(item => item>2 && item <5);
//数组元素>2且<5的元素返回true,就会放到新数组
console.log("新数组:"+newArr); // map 映射,将原有的数组映射成一个新数组 [1,2,3],用于更新数组元素
// 不改变原数组,返回新数组
// 回调函数中返回什么这一项就是什么
// 若要拼接 <li>1</li><li>2</li><li>3</li>
let arr2 = [1,2,3].map(item => `<li>${item}</li>`);
// join方法用于把数组中的所有元素放入一个字符串。每个元素通过指定的分隔符进行分隔。
// 这里使用''空字符分割
console.log(arr2.join('')); // 若只要 name 的 val 值,不要 key 值
let arrJson = [{'name':'krry'},{'name':'lily'},{'name':'xiaoyue'},{'name':'krry'}];
let newArrJson = arrJson.map( val => val.name);
console.log(`newArrJson:${newArrJson}`); // find:返回找到的那一项
// 不改变原数组
// 找到后停止循环,找不到返回的是 undefined
let arrFind = [1,2,3,4,55,555];
let result = arrFind.find((item,index) => {
return item.toString().indexOf(5) > -1;// 找数组元素中有5的第一项
});
console.log(result); // 输出 55 // includes 数组中是否包含某个元素,返回 true or false
let arr3 = [1,2,3,4,55,555];
console.log(arr3.includes(5)); // some:如果有一个元素满足条件,则表达式返回 true, 剩余的元素不会再执行检测。
// 如果没有满足条件的元素,则返回 false
let arrSF = [1,2,3,4,555];
let result = arrSF.some((item,index)=>{
return item > 3;
});
console.log(result); // 输出true // every:如果有一个元素不满足,则表达式返回 false,剩余的元素不会再进行检测。
// 如果所有元素都满足条件,则返回 true
let arrSE = [1,2,3,4,555];
let result = arrSE.every((item,index)=>{
return item > 3;
});
console.log(result); // 输出 false // reduce 收敛函数, 4个参数 返回的是叠加后的结果
// 不改变原数组
// 回调函数返回的结果:
// prev:数组的第一项,next是数组的第二项(下一项)
// 当前 return 的值是下一次的 prev
let sum = [1,2,3,4,5].reduce((prev,next,index,item)=>{
// console.log(arguments);
// 1 2
// 3 3
// 6 4
// 10 5
console.log(prev,next);
return prev+next; // 返回值会作为下一次的 prev
});
console.log(sum); // reduce 可以默认指定第一轮的 prev,那么 next 将会是数组第一项(下一项)
// 例子:算出总金额:
let sum2 = [{price:30,count:2},{price:30,count:3},{price:30,count:4}];
let allSum = sum2.reduce((prev,next)=>{
// 0+60
// 60+90
// 150+120
console.log(prev,next);
return prev+next.price*next.count;
},0); // 默认指定第一次的 prev 为 0
console.log(allSum); // 利用reduce把二维数组变成一维数组
let flat = [[1,2,3],[4,5,6],[7,8,9]].reduce((prev,next)=>{
return prev.concat(next); // 拼接数组
});
console.log(flat); // slice 从已有的数组中返回选定的元素
// 不改变原数组
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1,3);
console.log(citrus); // 输出 Orange,Lemon // pop 用于删除数组的最后一个元素并返回删除的元素
// 改变原数组
let fur = ["Banana", "Orange", "Apple", "Mango"];
fur.pop();
console.log(fur); // 输出 Banana,Orange,Apple // shift 用于把数组的第一个元素从其中删除,并返回第一个元素的值
// 改变原数组
let fts = ["Banana", "Orange", "Apple", "Mango"];
fts.shift();
console.log(fts);// 输出 Orange,Apple,Mango // unshift 向数组的开头添加一个或更多元素,并返回新的长度
// 改变原数组
let fse = ["Banana", "Orange", "Apple", "Mango"];
fse.unshift("Lemon","Pineapple");
console.log(fse); // 输出 Lemon,Pineapple,Banana,Orange,Apple,Mango // splice 用于插入、删除或替换数组的元素
// 改变原数组
let myArrs = ["Banana", "Orange", "Apple", "Mango"];
myArrs.splice(2,1); // 从数组下标为 2 开始删除,删除 1 个元素
console.log(myArrs); // 输出 Banana,Orange,Mango
额外谈一下arguments
// arguments 是一个对应于传递给函数的参数的类数组对象
// 此对象包含传递给函数的每个参数的条目,第一个条目的索引从0开始。
// 例如,如果一个函数传递了三个参数,你可以以如下方式引用他们:
// arguments[0]
// arguments[1]
// arguments[2]
let xx = sumAll(1, 123, 500, 115, 44, 88); function sumAll() {
let i, sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
console.log(sum); // 返回总和 871
}
for 效率测试代码
let arr = new Array();
for(let i = 0, len = 1000000;i < len; i++){
arr.push(i);
} function foradd(my_arr){
let sum = 0;
for(let i = 0; i < my_arr.length; i++){
sum += my_arr[i];
}
} function forinadd(my_arr){
let sum = 0;
for(let key in my_arr){
sum += my_arr[key];
}
} function forofadd(my_arr){
let sum = 0;
for(let val of my_arr){
sum += val;
}
} function forEachadd(my_arr){
let sum = 0;
my_arr.forEach(val => {
sum += val;
});
} function timeTest(func,my_arr,str) {
var start_time = null;
var end_time = null;
start_time = new Date().getTime();
func(my_arr);
end_time = new Date().getTime();
console.log(str,(end_time - start_time).toString());
} timeTest(foradd,arr,'for');
timeTest(forinadd,arr,'for-in');
timeTest(forofadd,arr,'for-of');
timeTest(forEachadd,arr,'forEach');
博客地址:https://ainyi.com/12
for 循环 和 Array 数组对象的更多相关文章
- Javascript进阶篇——( JavaScript内置对象---下)--Array数组对象---笔记整理
Array 数组对象数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的数组定义的方法: 1. 定义了一个空数组: var ...
- JavaScript 常用内置对象(字符串属性、Math对象、Array数组对象)
1.字符串属性 <script> var test_var = "I Iove you"; console.log(test_var.charAt(3)) // ...
- JS对象 Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的
Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个"下标",用来表示它在数组中的位置,是从零开始的 数组定义的方法: 1. 定 ...
- Java Script基础(八) Array数组对象
一.Array数组 JavaScript中的数组也是具有相同数据类型的一个或者多个值得集合.用法和Java中的数组类似. Array对象的常用属性和方法: 属性: length:获取数组的长度: 方法 ...
- js array数组对象操作方法汇总
--------------------------更新自2018.6.11 js 数组对象操作方法如下: 1. 创建数组 var array1 = [1,2] //方法一 var array2 = ...
- js Array数组对象常见方法总结
Array对象一般用来存储数据. 其常用的方法包括: 1.concat()方法 concat() 方法用于合并两个或多个数组.它不会更改现有数组,而是返回一个新数组. 例如: var arr1=[1, ...
- JavaScript中Array(数组) 对象
JavaScript中Array 对象 JavaScript中创建数组有两种方式 (一)使用直接量表示法: var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建 ...
- Python当中的array数组对象
计算机为数组分配一段连续的内存,从而支持对数组随机访问:由于项的地址在编号上是连续的,数组某一项的地址可以通过将两个值相加得出,即将数组的基本地址和项的偏移地址相加.数组的基本地址就是数组的第一项的机 ...
- Array数组对象方法
Array 对象方法 方法 描述 concat() 连接两个或更多的数组,并返回结果. copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中. entries() 返回数组的可迭 ...
随机推荐
- pom.xml文件模板、application文件模板、configuration逆向生成文件、
pom: <?xml version="1.0" encoding="UTF-8"?><project xmlns="http:// ...
- hbuilder下用plus.barcode.Barcode做二维码扫描,当二维码容器的高度设置过低时,启动扫描会发生闪退
解决办法: 将固定高度改为百分比
- storm学习总结
1.storm shell端常用指令: 提交Topologies命令格式:storm jar [jar路径] [拓扑包名.拓扑类名] [拓扑名称]样例:storm jar /storm-starter ...
- 在windows上安装wamp时遇到apache无法启动,图标为橙色
1.首先测试端口号是否被占用,如果端口号被占用,修改相对应文件的端口号,修改端口号的方法网上很容易搜到. 2.如果端口号没有被占用,cd到httpd.exe目录下,查看错误原因,这里我显示的错误是ht ...
- 背水一战 Windows 10 (115) - 后台任务: 通过 toast 激活后台任务, 定时激活后台任务
[源码下载] 背水一战 Windows 10 (115) - 后台任务: 通过 toast 激活后台任务, 定时激活后台任务 作者:webabcd 介绍背水一战 Windows 10 之 后台任务 通 ...
- 腾迅云获取免费SSL证书并布置
上次申请了SSL证书一直没时间布置,今天重新再来操作一次 首先需要申请SSL证书,腾迅云买的域名有免费一年的SSL证书申请,网址:https://console.cloud.tencent.com/s ...
- Javascript高级编程学习笔记(18)—— 引用类型(7)单体内置对象
什么是内置对象呢? js高级程序设计中给出的定义为:由ES规定不依赖于宿主环境的对象,这些对象在JS执行前就已经存在 前面我们介绍的引用类型都是内置对象 除了这些对象外ECMA还规定了两个单体内置对象 ...
- 8.快速索引、listview
实现这样的效果 布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- 使用《JAVA面向对象编程》总结
抽象和封装 现实世界是“面向对象”的,面向对象就是采用“现实模拟” 的方法设计和开发程序. 面向对象设计是目前计算软件开发中最流行的技术.面向对象设计的过程就是抽象的过程. 类是对某一类事物的描述,是 ...
- 关于动画的几种状态表示的含义以及能够使用2d动画表述为什么要使用3d动画表述
transform 四种转换 translate 位置scale 缩放rotate 旋转skew 倾斜 以上四种转换方式是比较特殊的,其实他们都是由matrix 矩阵转换来: animation的五种 ...