1.includes()方法
用于判断字符串,数组等是否包含指定的子字符。如果找到匹配的字符串则返回 true,否则返回 false。相较于indexOf()方法更加直观简洁。
[1, 2, 3].includes(1) // true [1, 2, 3].includes(4) // false [1, 2, NaN].includes(NaN) // true [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true
2.数组的解构赋值
//es5,为变量赋值,可以直接指定值 let a = 1; let b = 2; let c = 3; // ES6中允许这样 let [a, b, c] = [1, 2, 3]; // 可以从数组中提取值,按照对应位置,对变量赋值。 console.log(a) //1 console.log(b) //2 console.log(c) //3
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [head, tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] let [x, y, z] = ['a']; x // "a" y // undefined - 如果解构不成功,变量的值就等于 undefined。 z // []
如果等号的右边不是数组,那么将会报错。
let [foo] = 1; //VM177:1 Uncaught TypeError: 1 is not iterabl at <anonymous>:1:13
3. Spread operator 展开运算符
Spread operator也是es6一个新特性,写法是…,也就是三个点用来组装数组
//数组组装 const arr1=[1,2,3]; const arr2=[arr1,4,5,6]; console.log(arr2); //[1, 2, 3, 4, 5, 6] //替换push方法 //es5 var a1=[1,2,3]; var a2=[4,5,6]; Array.prototype.push.apply(a1,a2); //[1, 2, 3, 4, 5, 6] //es6 a1.push(a2); //[1, 2, 3, 4, 5, 6]
4.函数默认值
ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。
//ES5 function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World //ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。 function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello -- ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于 undefined ,默认值才会生效。
5.箭头函数
箭头函数写法更加简洁,省略了function关键字申明,省略return,例如 :
[1,2,3].map( x => x + 1 ) //相当于: [1,2,3].map(function(x){ return x + 1 })
=> 前面的部分是函数的参数,=> 后面的部分是函数的代码块。
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
var f = () => 5; //等同于 var f = function (v) { return 5 }; var sum = (num1, num2) => num1 + num2; //等同于 var sum = function(num1, num2){ return num1 + num2; }
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用 return 语句返回。
var sum = (num1,num2) => { return num1 + num2; }
由于大括号会被解释为代码块,所以如果箭头函数直接返回一个对象,就必须在对象外面加上括号,否则会报错。
// 报错 let getTempItem = id => { id: id, name: "Temp" }; // 不报错 let getTempItem = id => ({ id: id, name: "Temp" }); getTempItem(1);//{id: 1, name: "Temp"} let getTempItem = id => { return { id: id, name: "Temp" }; } getTempItem(1);// {id: 1, name: "Temp"}
6.模板字符串
ES5在字符串拼接的时候,常常会用+号把值和字符拼接起来,如果要拼接dom元素的话,会很麻烦,ES6很好的解决了这个问题 。
(1) 在模板字符串中嵌入变量,需要将变量名写在 ${} 之中。
(2) 大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。
(3) 模板字符串之中还能调用函数。
(4) 如果大括号中的值不是字符串,将按照一般的规则转为字符串。如: 如果大括号中是一个对象,将默认调用对象的 toString 方法。
(5) 如果模板字符串中的变量没有声明将会报错。
(6) 如果大括号内部是一个字符串,将原样输出。
//es5 const name='meng'; console.log('hellow '+name);//hello meng //es6 const name1='meng'; console.log(`hellow ${name1}`); // hello meng //注意,是键盘1左边那个字符符号,不是普通的单引号哦!
ES5常用反斜杠(\)来做多行字符串的拼接,ES6只需要用(`)就可以了,这样以后拼接dom串的时候就方便多啦!
//es5 let demo1="<div> \ <span>AAA</span>\ </div> \ "; console.log(wrap); //es6 let demo2=` <div> <span>AAA</span> </div> `;
7.对象的扩展
初始化简写,键值对重名的情况:
//es5 var a=1,b=2; var obj={ a:a, b:b } console.log(obj); //{a: 1, b: 2} //es6 let a=1,b=2; let obj={ a, b } console.log(obj); //{a: 1, b: 2}
对象方法简写 :
//es5 var person={ run:function(){ console.log('run'); } } person.run(); //es6 let person={ run(){ console.log('run'); } } person.run();
8. 新增常用数组方法
Array.from() :方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES5的写法 var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c'] // ES6的写法 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c'] //如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组。 Array.from([1, 2, 3]) // [1, 2, 3]
find() 和 findIndex():用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。findIndex返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
[1, 4, -5, 10].find((n) => n < 0) // -5 [1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2
Array.of():用于将一组值,转换为数组。
Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1 Array.of(undefined) // [undefined]
entries(),keys() 和 values()
for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1 for (let elem of ['a', 'b'].values()) { console.log(elem); } // 'a' // 'b' for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" // 1 "b"
fill():使用给定值,填充一个数组
['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7]
9.let和const
ES6 新增了let命令,用来声明变量。类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
ES6通常用let和const申明变量,const是申明常亮(申明后值不可修改,修改会报错),let是变量,都是块级作用域,在{}内有效:
function test(){ console.log(i); //undefined for(var i=0;i<10;i++){} console.log(i); //10 } function test(){ console.log(i); //报错 for(let i=0;i<10;i++){} console.log(i); }
ES5 只有两种声明变量的方法:var命令和function命令。
ES6 除了添加let和const命令,另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有 6 种声明变量的方法。
顶层对象:在浏览器环境指的是window
对象,在 Node 指的是global
对象。ES5 之中,顶层对象的属性与全局变量是等价的。
ES6为了保持兼容性,规定:a. var 命令和 function 命令声明的全局变量,依旧是顶层对象的属性。b. let,const,class 命令声明的全局变量,不属于顶层对象的属性。
var a = 1; window.a; // 1 let b = 2; window.b; // undefined
10.export和import
ES6之前,都是用requireJS进行模块化开发,ES6export导出模块、import导入模块,可以直接支持module了,现在的vue和react,都是用ES6开发了,对于组件的引入就用到这个知识点了
//全部导入 import people from './person' //整个模块导入并且使用as关键字重命名 //该模块的所有导出都会作为对象的属性存在 import * as person "./person.js" console.log(person.sex) console.log(person.num) console.log(person.getNum()) //导入部分 import {name, age} from './person' // 导出默认, 有且只有一个默认 export default App //1.当用export default people导出时,就用 import people 导入(不带大括号) //2.一个文件里,有且只能有一个export default。但可以有多个export。 //3.当用export name 时,就用import { name }导入(记得带上大括号) //4.当一个文件里,既有一个export default people, 又有多个export name 或者 export age时,导入就用 import people, { name, age } //5.当一个文件里出现n多个 export 导出很多模块,导入时除了一个一个导入,也可以用import * as example