重温ES6新特性及用法

1.includes()方法

用于判断字符串,数组等是否包含指定的子字符。如果找到匹配的字符串则返回 true,否则返回 false。相较于indexOf()方法更加直观简洁。

includes()的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它的绝对值大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。

[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
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇