JS数组遍历的几种方式之性能对比

JS数组遍历的几种方式

JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比

第一种:普通for循环

代码如下:

for(j = 0; j < arr.length; j++) {

}

简要说明: 最简单的一种,也是使用频率最高的一种,虽然性能不弱,但仍有优化空间

第二种:优化版for循环

代码如下:

for(j = 0,len=arr.length; j < len; j++) {

}

简要说明: 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。

这种方法基本上是所有循环遍历方法中性能最高的一种

第三种:弱化版for循环

代码如下:

for(j = 0; arr[j]!=null; j++) {

}

简要说明: 这种方法其实严格上也属于for循环,只不过是没有使用length判断,而使用变量本身判断

实际上,这种方法的性能要远远小于普通for循环

第四种:foreach循环

代码如下:

arr.forEach(function(e){  

});

简要说明: 数组自带的foreach循环,使用频率较高,实际上性能比普通for循环弱

第五种:foreach变种

代码如下:

Array.prototype.forEach.call(arr,function(el){  

});

简要说明: 由于foreach是Array型自带的,对于一些非这种类型的,无法直接使用(如NodeList),所以才有了这个变种,使用这个变种可以让类似的数组拥有foreach功能。

实际性能要比普通foreach弱

第六种:forin循环

代码如下:

for(j in arr) {

}

简要说明: 这个循环很多人爱用,但实际上,经分析测试,在众多的循环遍历方式中

它的效率是最低的

第七种:map遍历

代码如下:

arr.map(function(n){  

});

简要说明: 这种方式也是用的比较广泛的,虽然用起来比较优雅,但实际效率还比不上foreach

第八种:for of遍历(需要ES6支持)

代码如下:

for(let value of arr) {  

});

简要说明: 这种方式是es6里面用到的,性能要好于forin,但仍然比不上普通for循环

各种遍历方式的性能对比

上述列举了几种方式都有一一做过对比分析,基本上可以得出的结论是:

普通for循环才是最优雅的

(PS:以上所有的代码都只是进行空的循环,没有再循环内部执行代码,仅仅是分析各自循环的时间而已)

性能对比截图

分析结果1

以下截图中的数据是,在chrome (支持es6)中运行了100次后得出的结论(每次运行10次,一共10个循环,得到的分析结果)

image

可以看出,for in循环最慢。优化后的普通for循环最快

分析结果2

以下截图数据是,在chrome (支持es6)中运行了1000次后得出的结论(每次运行100次,一共10个循环,得到的分析结果)

image

(完)

分享到

ES6中模块化操作

在ES5中我们要进行模块华操作需要引入第三方类库,随着前后端分离,前端的业务日渐复杂,ES6为我们增加了模块话操作。模块化操作主要包括两个方面。

export :负责进行模块化,也是模块的输出。

import : 负责把模块引,也是模块的引入操作。

export的用法:

export可以让我们把变量,函数,对象进行模块话,提供外部调用接口,让外部进行引用。先来看个最简单的例子,把一个变量模块化。我们新建一个temp.js文件,然后在文件中输出一个模块变量。

export var a = 'hello';

然后可以在index.js中以import的形式引入。

import {a} from './temp.js';

console.log(a);

这就是一个最简单的模块的输出和引入。

多变量的输出
这里声明了3个变量,需要把这3个变量都进行模块化输出,这时候我们给他们包装成对象就可以了。

var a ='hello';
var b ='world';
var c = 'web';

export {a,b,c}

函数的模块化输出

export function add(a,b){
return a+b;
}

as的用法
有些时候我们并不想暴露模块里边的变量名称,而给模块起一个更语义话的名称,这时候我们就可以使用as来操作。

var a ='hello';
var b ='world';
var c = 'web';

export {
x as a,
y as b,
z as c
}

export default的使用

加上default相当是一个默认的入口。在一个文件里export default只能有一个。我们来对比一下export和export default的区别

1.export
export var a ='awesome';

export function add(a,b){
return a+b;
}

对应的导入方式

import {a,add} form './temp';//也可以分开写
2.export defalut
export default var a='awesome';

对应的引入方式

import str from './temp';

ES6的模块化不能直接在浏览器中预览,必须要使用Babel进行编译之后正常看到结果。

分享到

ES6中map数据结构与使用Proxy进行预处理

这节课主要学习map的这种ES6新加的数据结构。在一些构建工具中是非常喜欢使用map这种数据结构来进行配置的,因为map是一种灵活,简单的适合一对一查找的数据结构。我们知道的数据结构,已经有了json和set。那map有什么特点。

Json和map格式的对比

map的效率和灵活性更好

先来写一个JSON,这里我们用对象进行模拟操作。

let json = {
name:'Hello',
skill:'web'
}
console.log(json.name);

但是这种反应的速度要低于数组和map结构。而且Map的灵活性要更好,你可以把它看成一种特殊的键值对,但你的key可以设置成数组,值也可以设置成字符串,让它不规律对应起来。

let json = {
name:'Hello',
skill:'Web'
}
console.log(json.name);

var map=new Map();
map.set(json,'iam');
console.log(map);

当然也可key字符串,value是对象。我们调换一下位置,依然是符合map的数据结构规范的。

map.set('World',json);
console.log(map);

Map(1){{…} => "iam"}
Map(2){{…} => "iam", "World" => {…}}

map的增删查

上边我们已经会为map增加值了,就是用我们的set方法,这里我就不重复讲解了。直接看如何取出我们的值。

取值get

现在取json对应的值。

console.log(map.get(json));
删除delete

删除delete的特定值:

map.delete(json);
console.log(map)
size属性
console.log(map.size);
查找是否存在has
console.log(map.has('json'))
清楚所有元素clear
map.clear()

总结:map在现在开发中已经经常使用,它的灵活性和高效性是我们喜欢的。开发中试着去使用map吧,你一定会喜欢上它的。

用Proxy进行预处理

当我们在操作一个对象或者方法时会有几种动作,比如:在运行函数前初始化一些数据,在改变对象值后做一些善后处理。这些都算钩子函数,Proxy的存在就可以让我们给函数加上这样的钩子函数,你也可以理解为在执行方法前预处理一些代码。你可以简单的理解为他是函数或者对象的生命周期。

Proxy的应用可以使函数更加强大,业务逻辑更加清楚,而且在编写自己的框架或者通用组件时非常好用。Proxy涉及的内容非常多,那这里我就带你入门并且介绍给你后续的学习方法。

在学习新知识之前,先来回顾一下定义对象的方法。

var obj={
add:function(val){
return val+10;
},
name:'I am Jspang'

};
console.log(obj.add(100));
console.log(obj.name);

声明了一个obj对象,增加了一个对象方法add和一个对象属性name,然后在控制台进行了打印。

声明Proxy

我们用new的方法对Proxy进行声明。可以看一下声明Proxy的基本形式。

new Proxy({},{});

需要注意的是这里是两个花括号,第一个花括号就相当于我们方法的主体,后边的花括号就是Proxy代理处理区域,相当于我们写钩子函数的地方。

现在把上边的obj对象改成我们的Proxy形式。

var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'I am Jspang'
}, {
get:function(target,key,property){
console.log('come in Get');
return target[key];
}
});

console.log(pro.name);

可以在控制台看到结果,先输出了come in Get。相当于在方法调用前的钩子函数。

get属性

get属性是在你得到某对象属性值时预处理的方法,他接受三个参数

target:得到的目标值
key:目标的key值,相当于对象的属性
property:这个不太常用,用法还在研究中,还请大神指教。

set属性

set属性是值你要改变Proxy属性值时,进行的预先处理。它接收四个参数。

  • target:目标值。
  • key:目标的Key值。
  • value:要改变的值。
  • receiver:改变前的原始值。
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'I am GanPing'
}, {
get:function(target,key){
console.log('come in Get');
return target[key];
},
set:function(target,key,value,receiver){
console.log(`setting ${key} = ${value}`);
return target[key] = value;
}

});

console.log(pro.name);
pro.name='Gan';
console.log(pro.name);

apply的使用

apply的作用是调用内部的方法,它使用在方法体是一个匿名函数时。看下边的代码。

let target = function () {
return 'I am GanPing';
};
var handler = {
apply(target, ctx, args) {
console.log('do apply');
return Reflect.apply(...arguments);
}
}

var pro = new Proxy(target, handler);

console.log(pro());

其实proxy的知识是非常多的,我这里只能算是入门课程

(完)

分享到

ES6中class类的使用

我们在ES5中经常使用方法或者对象去模拟类的使用,虽然可以实现功能,但是代码并不优雅,ES6为我们提供了类的使用。需要注意的是我们在写类的时候和ES5中的对象和构造函数要区分开来,不要学混了。

类的声明

先声明一个最简单的coder类,类里只有一个name方法,方法中打印出传递的参数。

class coder{
name(val){
console.log(val);
}
}

类的使用

我们已经声明了一个类,并在类里声明了name方法,现在要实例化类,并使用类中的方法。

class Coder{
name(val){
console.log(val);
}
}
let awesome= new Coder;
awesome.name('awesome233333');

// awesome233333

类的多方法声明


class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('awesome')+':'+'Skill:'+val);
}
}

let awesomeObj= new Coder;
awesomeObj.name('GanPing');
awesomeObj.skill('web');
//GanPing
//obj.html:59 awesome
//obj.html:63 awesome:Skill:web

这里需要注意的是两个方法中间不要写逗号了,还有这里的this指类本身,还有要注意return 的用法。

类的传参

在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。

class Coder{

constructor(a,b){
this.a=a;
this.b=b;
}

add(){
return this.a+this.b;
}
}

let awesomeObj=new Coder(1,2);
console.log(awesomeObj.add());

// 3

我们用constructor来约定了传递参数,然后用作了一个add方法,把参数相加。这和以前我们的传递方法有些不一样,所以需要小伙伴们多注意下。

class的继承

如果你学过java,一定知道类的一大特点就是继承。ES6中也就继承,在这里我们简单的看看继承的用法。

class htmler extends Coder{

}
let awesomeObj=new htmler;
awesomeObj.name('HelloWorld');

声明一个htmler的新类并继承Coder类,htmler新类里边为空,这时候我们实例化新类,并调用里边的name方法。结果也是可以调用到的。

(完)

分享到

ES6中的Set和WeakSet数据结构

学习Set数据结构,注意这里不是数据类型,而是数据结构。它是ES6中新的东西,并且很有用处。Set的数据结构是以数组的形式构建的。

Set的声明

let setArr = new Set(['hello','world','web','awesome']);
console.log(setArr);
//Set(4){"hello", "world", "web", "awesome"}

Set和Array 的区别是Set不允许内部有重复的值,如果有只显示一个,相当于去重。虽然Set很像数组,但是他不是数组。

Set值的增删查

追加add:

在使用Array的时候,可以用push进行追加值,那Set稍有不同,它用更语义化的add进行追加。

let setArr = new Set(['hello','world','web','awesome']);
console.log(setArr);//Set(4){"hello", "world", "web", "awesome"}

setArr.add('webDev');
console.log(setArr);
删除delete:
let setArr = new Set(['hello','world','web','awesome']);
console.log(setArr);//Set(4){"hello", "world", "web", "awesome"}

setArr.add('webDev');
console.log(setArr); //Set(5){"hello", "world", "web", "awesome", "webDev"}

setArr.delete('webDev');
console.log(setArr); //Set(4){"hello", "world", "web", "awesome"}
查找has:

用has进行值的查找,返回的是true或者false。

let setArr = new Set(['hello','world','web','awesome']);
console.log(setArr);//Set(4){"hello", "world", "web", "awesome"}

console.log(setArr.has('awesome'));//true
删除clear:
let setArr = new Set(['hello','world','web','awesome']);
console.log(setArr);//Set(4){"hello", "world", "web", "awesome"}
setArr.clear();

console.log(setArr);//Set(0){}

set的循环

for…of…循环:
let setArr = new Set(['hello','world','web','awesome']);
for (let item of setArr){
console.log(item);
}
size属性

size属性可以获得Set值的数量。

let setArr = new Set(['hello','world','web','awesome']);
for (let item of setArr){
console.log(item);
}

console.log(setArr.size);
forEach循环
let setArr = new Set(['hello','world','web','awesome']);
setArr.forEach((value)=>console.log(value));

WeakSet的声明

let weakObj=new WeakSet();
let obj={a:'hello',b:'world'}
weakObj.add(obj);

console.log(weakObj);

这里需要注意的是,如果你直接在new 的时候就放入值,将报错。

WeakSet里边的值也是不允许重复的,我们来测试一下。

let weakObj=new WeakSet();
let obj={a:'hello',b:'world'}
let obj1=obj;

weakObj.add(obj);
weakObj.add(obj1);

console.log(weakObj);

总结:在实际开发中Set用的比较多,WeakSet用的并不多,但是他对传入值必须是对象作了很好的判断,我们灵活应用还是有一定的用处的。

(完)

分享到

ES6中的对象与Symbol

对象对于Javascript是非常重要的。在ES6中对象有了很多新特性,

对象赋值

ES6允许把声明的变量直接赋值给对象,我们看下面的例子。

let name="helloworld";
let skill= 'web';
var obj= {name,skill};
console.log(obj); //Object {name: "helloworld", skill: "web"}
对象Key值构建

有时候我们会在后台取出key值,而不是我们前台定义好的,这时候我们如何构建我们的key值那。比如我们在后台取了一个key值,然后可以用[ ] 的形式,进行对象的构建。

let key='skill';
var obj={
[key]:'web'
}
console.log(obj.skill);
自定义对象方法

对象方法就是把兑现中的属性,用匿名函数的形式编程方法。这个在以前就有应用,我们这里只是简单的复习一下。

var obj={
add:function(a,b){
return a+b;
}
}
console.log(obj.add(1,2)); //3
object.is( ) 对象比较

对象的比较方法,以前进行对象值的比较,经常使用===来判断,比如下面的代码:

var obj1 = {name:'hello'};
var obj2 = {name:'hello'};
console.log(obj1.name === obj2.name);//true

那ES6为我们提供了is方法进行对比。

var obj1 = {name:'hello'};
var obj2 = {name:'hello'};
console.log(obj1.name === obj2.name);//true
console.log(Object.is(obj1.name,obj2.name)); //true

区分=== 和 is方法的区别是什么,看下面的代码输出结果。

console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

这太诡异了,我要怎么记忆,告诉你一个小妙招,===为同值相等,is()为严格相等。

Object.assign( )合并对象

操作数组时我们经常使用数组合并,那对象也有合并方法,那就是assgin( )。看一下啊具体的用法。

var a={a:'hello'};
var b={b:'world'};
var c={c:'web'};

let d=Object.assign(a,b,c)
console.log(d);

记得学完了练习一下啊,因为基础知识的点是非常杂的,你不练习很快就忘记了。

Symbol在对象中的作用

我们通过场景应用的方式学习Symbol,它的意思是全局标记。我们先看看它的声明方式。

声明Symbol

我们先来回顾一下我们的数据类型,在最后在看看Symbol如何声明,并进行一个数据类型的判断。

var a = new String;
var b = new Number;
var c = new Boolean;
var d = new Array;
var e = new Object;
var f= Symbol();
console.log(typeof(d));

Symbol的打印
我们先声明一个Symbol,然后我们在控制台输出一下。

var g = Symbol('Hello');
console.log(g);
console.log(g.toString());

这时候我们仔细看控制台是有区别的,没有toString的是红字,toString的是黑字。

Symbol在对象中的应用

看一下如何用Symbol构建对象的Key,并调用和赋值。

var XXX = Symbol();
var obj={
[name]:'Hello'
}
console.log(obj[name]);
obj[name]='web';
console.log(obj[name]);

Symbol对象元素的保护作用

在对象中有很多值,但是循环输出时,并不希望全部输出,那我们就可以使用Symbol进行保护。

没有进行保护的写法:

var obj={name:'GanPing',skill:'web',age:20};

for (let item in obj){
console.log(obj[item]);
}

现在我不想别人知道我的年龄,这时候我就可以使用Symbol来进行循环保护。

let obj={name:'GanPing',skill:'web'};
let age=Symbol();
obj[age]=21;
for (let item in obj){
console.log(obj[item]);
}
console.log(obj);

(完)

分享到

ES6中的 Promise的使用

ES6中的promise的出现给我们很好的解决了回调地狱的问题,在使用ES5的时候,在多层嵌套回调时,写完的代码层次过多,很难进行维护和二次开发,ES6认识到了这点问题,现在promise的使用,完美解决了这个问题。那我们如何理解promise这个单词在ES5中的作用那,你可以想象他是一种承诺,当它成功时执行一些代码,当它失败时执行一些代码。它更符合人类的行为思考习惯,而不在是晦涩难懂的冰冷语言。

promise的基本用法

promise执行多步操作非常好用,那我们就来模仿一个多步操作的过程,那就以吃饭为例吧。要想在家吃顿饭,是要经过三个步骤的。

  1. 洗菜做饭。
  2. 坐下来吃饭。
  3. 收拾桌子洗碗。

这个过程是有一定的顺序的,你必须保证上一步完成,才能顺利进行下一步。我们可以在脑海里先想想这样一个简单的过程在ES5写起来就要有多层的嵌套。那我们现在用promise来实现。

<script>
let state = 1
var step1 = function (resolve,reject) {
if (state==1){
resolve('第一步执行')
}else {
reject('第一步错误')
}
}
var step2 = function (resolve,reject) {
if (state==1){
resolve('第二部执行')
}else {
reject('第二部错误')
}
}
var step3 = function (resolve , reject) {
if (state==1){
resolve('第三部执行')
}else {
reject('第三部错误22')
}
}
var step4 = function (resolve , reject) {
if (state==1){
resolve('第四部执行2222')
}else {
reject('第三四错误')
}
}

new Promise(step1).then(function (val) {
console.log(val)
return new Promise(step2)
}).then(function (val) {
console.log(val)
return new Promise(step3)
}).then(function (val) {
console.log(val)
return new Promise(step4)
}).then(function (val) {
console.log(val)
})


//依次输出 , 如果遇到错误 , 将停止运行 , 后面的函数不再执行

</script>

(完)

分享到

ES6中的箭头函数和结构及扩展

先不着急看ES6中的函数,而是回顾一下ES5中的函数写法。写一个函数,进行一个加法计算。

function add(a,b){
return a+b;
}
console.log(add(1,2));

我们声明了一个add函数,然后传入a和b两个值,返回a+b的值。 然后我们在控制台打印了这个函数的返回结果,这里是3.

默认值

在ES6中给我们增加了默认值的操作,我们修改上边的代码,可以看到现在只需要传递一个参数也是可以正常运行的。

function add(a,b=1){
return a+b;
}
console.log(add(1));
主动抛出错误

在使用Vue的框架中,可以经常看到框架主动抛出一些错误,比如v-for必须有:key值。那尤大神是如何做到的那?其实很简单,ES6中我们直接用throw new Error( xxxx ),就可以抛出错误。

function add(a,b=1){

if(a == 0){
throw new Error('This is error')
}
return a+b;
}

console.log(add(0));
函数中的严谨模式

我们在ES中就经常使用严谨模式来进行编程,但是必须写在代码最上边,相当于全局使用。在ES6中我们可以写在函数体中,相当于针对函数来使用。

function add(a,b=1){
'use strict'
if(a == 0){
throw new Error('This is error');
}
return a+b;
}

console.log(add(1));

上边的代码如果运行的话,你会发现浏览器控制台报错,这是ES6中的一个坑,如果没人指导的话,可能你会陷进去一会。这个错误的原因就是如果你使用了默认值,再使用严谨模式的话,就会有冲突,所以我们要取消默认值的操作,这时候你在运行就正常了。

function add(a,b){
'use strict'
if(a == 0){
throw new Error('This is error');
}
return a+b;
}

console.log(add(1,2));
获得需要传递的参数个数

如果你在使用别人的框架时,不知道别人的函数需要传递几个参数怎么办?ES6为我们提供了得到参数的方法(xxx.length).我们用上边的代码看一下需要传递的参数个数。

function add(a,b){
'use strict'
if(a == 0){
throw new Error('This is error');
}
return a+b;
}

console.log(add.length);

这时控制台打印出了2,但是如果我们去掉严谨模式,并给第二个参数加上默认值的话,这时候add.length的值就变成了1, 也就是说它得到的是必须传入的参数。

箭头函数

在学习Vue的时候,我已经大量的使用了箭头函数,因为箭头函数真的很好用,我们来看一个最简单的箭头函数。也就是上边我们写的add函数,进行一个改变,写成箭头函数。

var add =(a,b=1) => a+b;
console.log(add(1));
{}的使用

在箭头函数中,方法体内如果是两句话,那就需要在方法体外边加上{}括号。例如下边的代码就必须使用{}.

var add =(a,b=1) => {
console.log('HelloWorld')
return a+b;
};
console.log(add(1));

箭头函数中不可加new,也就是说箭头函数不能当构造函数进行使用。

最后我还是要重复强调的是,你一定要动手敲一下代码,要不你是学不会的,在工作中的改变就是学习了ES6得语法,在写新项目的时候尽量使用ES6带来的便利和特点,这样才能快速成长。

ES6中的函数和数组补漏

对象的函数解构

我们在前后端分离时,后端经常返回来JSON格式的数据,前端的美好愿望是直接把这个JSON格式数据当作参数,传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值。

let json = {
a:'hello',
b:'world'
}

var fun = ({a,b='hello'}) => console.log(a,b)

fun(json);

print ------> helloworld

是不是感觉方便了很多,我们再也不用一个个传递参数了。

数组的函数解构

函数能解构JSON,那解构我们的数组就更不在话下了,我们看下边的代码。我们声明一个数组,然后写一个方法,最后用…进行解构赋值。

<script>
let arr = ['Hello','World','Friend'];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr);
</script>
//输出 Hello World Friend

这种方法其实在前面的课程中已经学过了,这里我们就当复习了。

in的用法

in是用来判断对象或者数组中是否存在某个值的。我们先来看一下用in如何判断对象里是否有某个值。

对象判断
<script>
let obj={
a:'Hello',
b:'World'
}
console.log('a' in obj); //true
</script>
数组判断

先来看一下ES5判断的弊端,以前会使用length属性进行判断,为0表示没有数组元素。但是这并不准确,或者说真实开发中有弊端。

let arr=[,,,,,];
console.log(arr.length); //5

上边的代码输出了5,但是数组中其实全是空值,这就是一个坑啊。那用ES6的in就可以解决这个问题。

let arr=[,,,,,];
console.log(0 in arr); //false

let arr1=['Hello','World'];
console.log(0 in arr1); // true

注意:这里的0指的是数组下标位置是否为空。

数组的遍历方法

1.forEach
let arr=['Hello','World','Friend'];

arr.forEach((val,index)=>console.log(index,val));

forEach循环的特点是会自动省略为空的数组元素,相当于直接给我们筛空了。当是有时候也会给我们帮倒忙。

2.filter
let arr=['Hello','World','Friends'];

arr.filter(x=>console.log(x));

这种方法在Vue实战里我讲过,他其实也有循环的功能,这里我们在复习一遍。

3.some
let arr=['Hello','World','Friends'];

arr.some(x=>console.log(x));
4.map
let arr=['Hello','World','Friends'];

console.log(arr.map(x=>'web'));

map在这里起到一个替换的作用,这个我们后续课程会详细讲解。

数组转换字符串

在开发中我们经常会碰到把数组输出成字符串的形式,我们今天学两种方法,你要注意两种方法的区别。

join()方法
let arr=['Hello','World','Friends']

console.log(arr.join('|'));

join()方法就是在数组元素中间,加了一些间隔,开发中很有用处。

toString()方法
let arr=['Hello','World','Friends']

console.log(arr.toString());

转换时只是是用逗号隔开了。

(完)

分享到

ES6中新的数组

JSON数组格式转换

JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式,我们先来看一下JSON的数组格式怎么写。

let  json = {
'0': 'OSganping',
'1': '233',
'2': '233333',
length:3
}

这就是一个标准的JSON数组格式,跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操作都存在于Array对象里。我们就用Array.from(xxx)来进行转换。我们把上边的JSON代码转换成数组,并打印在控制台。

<script>
let json = {
'0': 'OSganping',
'1': '233',
'2': '233333',
length: 3
}
let arr = Array.from(json);
console.log(arr)
</script>

实际开发中这种方法还是比较常用的,毕竟节省了我们代码行数,也让我们的程序更清晰。

Array.of()方法:

它负责把一堆文本或者变量转换成数组。在开发中我们经常拿到了一个类似数组的字符串,需要使用eval来进行转换,如果你一个老手程序员都知道eval的效率是很低的,它会拖慢我们的程序。这时候我们就可以使用Array.of方法。我们看下边的代码把一堆数字转换成数组并打印在控制台上:

let arr =Array.of(3,4,5,6);
console.log(arr);

当然它不仅可以转换数字,字符串也是可以转换的,看下边的代码:

<script>
let arr =Array.of('OSganping','233','233333');
console.log(arr);
</script>

find( )实例方法:

所谓的实例方法就是并不是以Array对象开始的,而是必须有一个已经存在的数组,然后使用的方法,这就是实例方法(不理解请看下边的代码,再和上边的代码进行比对,你会有所顿悟)。这里的find方法是从数组中查找。在find方法中我们需要传入一个匿名函数,函数需要传入三个参数:

  • value:表示当前查找的值。
  • index:表示当前查找的数组索引。
  • arr:表示当前数组。

在函数中如果找到符合条件的数组元素就进行return,并停止查找。你可以拷贝下边的代码进行测试,就会知道find作用。

let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
return value > 5;
}))

控制台输出了6,说明找到了符合条件的值,并进行返回了,如果找不到会显示undefined。

fill( )实例方法:

fill()也是一个实例方法,它的作用是把数组进行填充,它接收三个参数,第一个参数是填充的变量,第二个是开始填充的位置,第三个是填充到的位置。

let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('OSganping',2,5);
console.log(arr);

上边的代码是把数组从第二位到第五位用OSganping进行填充。

数组的遍历

for…of循环:

这种形式比ES5的for循环要简单而且高效。先来看一个最简单的for…of循环。

<script>
let arr=['GanPing','233','233333']

for (let item of arr){
console.log(item);
}
</script>

for…of数组索引:有时候开发中是需要数组的索引的,那我们可以使用下面的代码输出数组索引。

<script>
let arr=['GanPing','233','2333333']
for (let index of arr.keys()){
console.log(index);
}
</script>

可以看到这时的控制台就输出了0,1,2,也就是数组的索引。

同时输出数组的内容和索引:
let arr=['GanPing','233','23333333']
for (let [index,val] of arr.entries()){
console.log(index+':'+val);
}
entries( )实例方法:

entries()实例方式生成的是Iterator形式的数组,那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。我们来看下面的代码:

<script>
let arr=['GanPing','2333','2333333']
let list=arr.entries();
console.log(list.next().value);
console.log(list.next().value);
console.log(list.next().value);
</script>

总之, 多敲代码

(完)

分享到

ES6中的数字操作

前端编程工作中对数字的操作是非常多的,如果你对数字操作的不好,就很难写出令人惊奇的程序

二进制声明:

二进制的英文单词是Binary,二进制的开始是0(零),然后第二个位置是b(注意这里大小写都可以实现),然后跟上二进制的值就可以了。

let binary = 0B010101;
console.log(binary);

这时候浏览器的控制台显示出了21。

八进制声明:

八进制的英文单词是Octal,也是以0(零)开始的,然后第二个位置是O(欧),然后跟上八进制的值就可以了。

let b=0o666;
console.log(b);

这时候浏览器的控制台显示出了438。

数字判断和转换

数字验证Number.isFinite( xx )

可以使用Number.isFinite( )来进行数字验证,只要是数字,不论是浮点型还是整形都会返回true,其他时候会返回false。

let a= 11/4;
console.log(Number.isFinite(a));//true
console.log(Number.isFinite('error'));//false
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(undefined));//false
NaN验证

NaN是特殊的非数字,可以使用Number.isNaN()来进行验证。下边的代码控制台返回了true。

console.log(Number.isNaN(NaN));
判断是否为整数Number.isInteger(xx)
let a=123.1;
console.log(Number.isInteger(a)); //false
整数转换Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)
let a='9.18';
console.log(Number.parseInt(a));
console.log(Number.parseFloat(a));

整数取值范围操作

整数的操作是有一个取值范围的,它的取值范围就是2的53次方。我们先用程序来看一下这个数字是什么.

let a = Math.pow(2,53)-1;
console.log(a); //9007199254740991

在我们计算时会经常超出这个值,所以我们要进行判断,ES6提供了一个常数,叫做最大安全整数,以后就不需要我们计算了。

最大安全整数

console.log(Number.MAX_SAFE_INTEGER);

最小安全整数

console.log(Number.MIN_SAFE_INTEGER);

安全整数判断isSafeInteger( )

let a= Math.pow(2,53)-1;
console.log(Number.isSafeInteger(a));//false

总结:我们学习了ES6数字的操作,方法很多,很零散,需要经常复习或者实战中慢慢熟悉。

(完)

分享到