引言：ES5,ES6在高级框架如Vue,React,Angular框架具有很好的支持,在某些不支持ES6语法的浏览器中也可以通过Babel转码器把ES6转为ES5语法，所以可以放心使用ES6语法

在开发环境中可能会用到的操作：

  • 赋值操作
  • 字符串操作
  • 判断操作
  • 常用数组操作
  • 常用对象操作
  • for循环

ES6

１．变量的解构赋值

基本用法

ES6 以前的用法

var a=1;
var b=2;
var c=3

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

let [a,b,c]=[1,2,3];
高级用法

(1).默认值

//解构赋值允许指定默认值
let [foo=true] = []; //true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

(２)．对象解构赋值

// 不用按次序，但是要名相同
let {foo,bar} = {bar:'World',foo:'Hello'}
console.log(foo+bar) //HelloWorld
//如果解构前，已经定义了变量，需要在解构的语句外面加一个圆括号
let foo;
({foo}={foo:'Hello1'})

(3).从函数返回多个值

//返回数组
function example(){
return [1,2,3]
}
let [a,b,c]=example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();

(4).提取JSON数据

let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
//data: number, key值重命名
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
错误用法
//等号右边不等与数组或右边不是可遍历的结构就会报错
let [a]=1;
let [a]=false;
let [a]={};
...

２．字符串操作

(1).字符串是否包含

传统使用indexOf()判断是否包含

  • -includes(str,number)：返回布尔值，表示是否找到了参数字符串。
  • -startsWith(str,number)：返回布尔值，表示参数字符串是否在原字符串的头部。
  • -endsWith(str,number)：返回布尔值，表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
//第二个参数
s.endsWith('Hello', 5) // 返回true,搜索前５个字符
//即
s.endsWith('Hello', 5)＝＝’Hello’.endsWith('Hello')
s.includes('Hello',6)　　//返回false,从第６个字符传开始搜索
//即
s.includes('Hello',6)==' world!'.includes('Hello');

注意：endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

(2)字符串重复
str.repeat(param);尽量使用大于0的整数，详情可参考语法标准

let str='x'.repeat(3);
console.log(str); //xxx

３.判断操作

(1)数字判断
模块化的思想，正常可以使用isNaN判断

//NaN验证 NaN是特殊的非数字
console.log(Number.isNaN(NaN)) //true
// 判断是否为整数
console.log(Number.isInteger(123.4)) //false

4.数组操作

Array.from

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3 //必须
};
let array1 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.of

Array.of方法用于将一组值，转换为数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3,11,8).length //直接获取数组长度
数组用法

(1)数组唯一
Array.from(new Set(array));

let array1=Array.from(new Set([1,1,1]));//[1]
//不支持对象数组,错误的用法
let array2=Array.from(new Set([{x:1},{x:1}]));//[{x:1},{x:1}]
let array3=Array.from(new Set([1,'1'}]))//[1,'1']不同类型不能去重

(2)字符串转数组

'abc'.split(''); //[a,b,c];
Array.from('abc');//[a,b,c];

(3)判断数组是否包含

[1, 2, 3].includes(2) //返回true
//传统
if(array.indexOf(2)!==-1){
doSomething();
}
//es2016
if(array.includes(2)){
doSomething();
}

(4)数组查找
Array.find(func)方法返回第一个符合条件的数组元素，没有符合条件返回undefined

[1,2,3,4].find(function(item){
return item>2;
}) //3

(5)数组索引位置查找Array.find(func)方法返回第一个符合条件的数组元素索引，没有符合条件返回-1

const index=[1,2,3,4].findIndex(function(item){
return item>5;
})
console.log(index)//-1
for循环

(1)【ES5语法】for in
不建议用于数组遍历，数组索引只是具有整数名称的枚举属性，并且与通用对象属性相同。不能保证for … in将以任何特定的顺序返回索引。for … in循环语句将返回所有可枚举属性，包括非整数类型的名称和继承的那些。参考连接

//不建议用于数组遍历
const array=[1,2,3,4];
for(const x in array){console.log(array[x]);}

//遍历对象，注意原型污染,使用hasOwnProperty函数，
//hasOwnProperty函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有，返回true，否则返回false,该方法属于Object对象，由于所有的对象都"继承"了Object的对象实例，因此几乎所有的实例对象都可以使用该方法。
Object.prototype.value=3;
const object={x:1,y:2};
for(const x in object){
if(object.hasOwnProperty(x)){
console.log(object[x]);
}
}

(2)【ES6语法】for of
for…of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for…of 循环，以替代 for…in 和 forEach() ，并支持新的迭代协议。for…of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。注意：不可遍历对象,如需遍历对象需要结合Object.keys(someObject)使用

const string="abc";
const array=[1,2,3,4];
for(const item of string){
console.log(item);//a b c
}
for(const item of array){
console.log(item); //１２３４，直接返回值，而不是索引，注意与for in 区别
}
for(const item of array){
console.log(item);　//1
break; //可以退出迭代
}
for(const item of array){
continue; 　　//继续
console.log(item);　 //将不会输出任何东西
}

(3)优化版for循环
使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。这种方法基本上是所有循环遍历方法中性能最高的一种

for(let i = 0,len=arr.length; i < len; i++) {
　　console.log(arr[i]);
}

(4)map循环
比如返回对象数组的某个值，组成新数组

const users = [
{name: "张含韵", "email": "zhang@email.com"},
{name: "江一燕", "email": "jiang@email.com"},
{name: "李小璐", "email": "li@email.com"}
];
//传统方法
const email=[];
for(const i=0;i<users.length;i++){
email.push(users.email);
}
//map方法
const emails2 = users.map(function (user) { return user.email; });

(5)forEach循环
缺点不能break,但可以return false中止循环,效率第二

const arr = [1, 2, 3];
arr.forEach((item, index, arr) => { // item为arr的元素，index为下标，arr原数组
console.log(item); // 1, 2, 3
console.log(index); // 0, 1, 2
console.log(arr); // [1, 2, 3]
});
//中止循环
arr.forEach(item=>{
if(item==2){
return false;
}
})

(6)some
判断数组重是否有元素符合某条件，如符合返回true,不符合返回false

const arr = [1, 2, 3];
//传统
let isFlag=false;
for(let i=0;i<arr.length;i++){
if(arr[i]===2){
isFlag=true;
break;
}
}
console.log(isFlag);//true
//some
const isFlag2=arr.some((item, index, arr) => { // item为数组中的元素，index为下标，arr为目标数组
return item===5;
})
console.log(isFlag2);//false

(7)every
判断数组所有元素是否都符合某条件，如全符合返回true,不全符合返回false

const arr = [1, 2, 3];
arr.every((item, index, arr) => { // item为数组中的元素，index为下标，arr为目标数组
return item > 0; // true
return index == 0; // false
})

(8)filter
根据条件过滤，返回新的数组,vue中已经熟练使用了

const newArray=[1,2,3,4].filter(item=>{
return item>2;
})
console.log(newArray); //[3, 4]

总结：数组操作的几个方法，PHP中也有，应减少使用for(let i=0;i<array.length;i++)

常用数组操作整合
ES5

(1)判断是否为数组

value instanceof Array //如果来自不同全局执行环境将无法真确解析，如浏览器环境，node.js环境
Array.isArray(arr) //IE9+
常用对象操作整合

(1)【ES5语法】Object.keys()获取对象本身（不包括原型链上的属性）的键名
Object.keys():返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致（两者的主要区别是 for-in 还会遍历出一个对象从其原型链上继承到的可枚举属性）。

const o = {a:1, b:2,c:3};
Object.keys(o) // ["a", "b", "c"]

(2)【ES5语法】删除对象某个属性参考链接

const user={id:1,name:'zhu','created_at':'2018-11-12'};
console.log(user);//{id: 1, name: "zhu", created_at: "2018-11-12"}
delete user.created_at;　//或者　delete user['created_at'];
console.log(user);//{id: 1, name: "zhu"}

//错误用法,严格模式下会报错
const user='1';
delete user;
console.log(user);
常用判断注意事项
Number.isInteger('100')
//false,即字符串为false,如Number.isInteger($('#dom').text())就有可能为false,慎用

Number.isInteger(NaN) //false

const array=[],object={};
if(array){console.log('[]为真')}
if(object){console.log('{}为真')}

if(-1){console.log('负数为真')}
if([]==[]){console.log('相等')}//不相等
if(null==undefine){console.log('相等')}
if(null==0){console.log('相等')}　//不相等
if(undefined==0){console.log('相等')}　//不相等
if(undefined===void 0){console.log('全等')}　//使用void 0可以节省字符，undefined在某些浏览器可以被重写，所以都建议用void 0判断
let test=[]
while(test){
console.log('死循环，因为if([])为真，一直输出，所以数组应该慎用while循环');
}
while(test==[]){
console.log('test==[]永远为false,不会输出')；
}

参考链接：

[1]http://es6.ruanyifeng.com/#docs/object
[2]https://blog.csdn.net/huhao0829/article/details/79315457
[3]http://www.sohu.com/a/256702171_647584

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue