【JavaScript高级篇】ES6​

BMG_Princess
71 阅读5分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。 ​

1、ES6语法：let和const

好处：

let用来声明变量，类似于var，但是所声明的变量，只在let命令所在的代码块内有效
特点：
1）存在块级作用域
2）不存在变量提升（考虑暂时性死区）
3）不允许重复声明（包括普通变量和函数参数）

1、存在块级作用域

const声明常量

        let a = [];

        for (let i=0;i<10;i++){
            a[i] = function () {
                console.log(i)
            };
        }
        a[6]();

 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算

2、不存在变量提升

var命令会发生”变量提升“现象，即变量可以在声明之前使用.。                        值为undefined。

let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。    报错ReferenceError

3、不允许重复声明 

  • let不允许在相同作用域内，重复声明同一个变量。
  • 不能在函数内部重新声明参数

2、ES6变量赋值

//旧
let a = 1
let b = 2

//新
let [a,b] = [1,2]

3、ES6箭头函数

function(){} 等价于 ()=>{}

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

let asd=[1, 2, 3, 4, 5]

asd.forEach((item,index) => {

             //处理
            })

使用 return 语句实现 continue 关键字的效果：

var arr = [1, 2, 3, 4, 5];

arr.forEach(function (item) {
    if (item === 3) {
        return;     
    }
    console.log(item);
});


//跳过3
//1
//2
//4
//5

 some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

  • 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

var arr = [1, 2, 3, 4, 5];

arr.some(function (item) {
        if (item === 2) {
                return;      // 不能为 return false
        }
        console.log(item);
});


//1
//3
//4
//5
//false

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

  • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

var arr = [1, 2, 3, 4, 5];

arr.every(function (item) {
        console.log(item);
        return item !== 3;
});

//1
//2
//3
//false

4、Promise构造函数

Promise自身有我们常用的all、race、resoleve、reject等方法，原型中还有catch、then等方法，所以我们创建Promise实例时，将then会作为callback使用，避免回调地狱的出现。

Promise.all的提供了并行的操作能力，并且是在所有的一步操作执行完成后才执行回调。

all接收一个数组参数，它会把所有异步操作的结果放进一个数组中传给then。

// all的使用
function async1 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('async1');
      resolve('async1完成')
    }, 1000);
  })
}

function async2 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('async2');
      resolve('async2完成')
    }, 2000);
  })
}

function async3 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
    console.log('async3');
      resolve('async3完成')
    }, 3000);
  })
}
Promise.all([async1(), async2(), async3()]).then((result) => {
  console.log(result);
  // do something...
}).catch((err) => {
  console.log(err);
});

// result:
async1
async2
async3
[ 'async1完成', 'async2完成', 'async3完成' ]

5、新增的实例方法：includes() ，startsWith() ，endsWith()

​编辑

6、repeat()

​编辑

7、padStart() padEnd()

​编辑

8、rest参数（形式为“…变量名”）

用于获取函数的多余参数

注意，rest 参数之后不能再有其他参数（即只能有最后一个参数），否则会报错。 

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

​编辑

9、扩展运算符 （…）

  • 它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

  • 扩展运算符可以用于函数的调用
function push(array, ...items) {
  array.push(...items);
}

function add(x,y){
    return x + y;
}

var numbers = [3,7];
console.log(add(...numbers)); //10

  • 扩展运算符还可以与正常函数参数结合使用
  function f(a,b,c,d,e){
    console.log(a,b,c,d,e)
  }

  var number = [3,5];
  f(1,...number,...[7,9])  //1,3,5,7,9

  • 通过push函数，将一个数组添加到另一个数组的尾部
//ES5的写法
var arr1 = [0,1,2];
var arr2 = [3,4,5];
Array.prototype.push.apply(arr1,arr2);

//ES6的写法
var arr1 = [0,1,2];
var arr2 = [3,4,5];
arr1.push(...arr2)

  •  合并数组
// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]



   var arr1 = ['a','b'];
   var arr2 = ['c'];
   var arr3 = ['b'];

   //ES5写法
   var array = arr1.concat(arr2,arr3);
   console.log(array);    

  //ES6写法
  var array2 = [...arr1,...arr2,...arr3];
   console.log(array2);
   //["a", "b", "c", "b"]

注意：

将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错！

加了扩展符就注定是数组！

const [first, ...rest] = [];
first // undefined
rest  // []:

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

  • 可以将字符串转为真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]

10、字符串新增的方法

  •  includes()、startsWith()、endsWith():判断字符是否包含某个字符
  • trim()、trimStart()、trimEnd()、trimLeft()、trimRight(): 消除字符串空格
  • ‘字符’.replace() 和 '字符’replaceAll()；替换字符中的某些字符
  • ‘字符’.at(索引)：获取指定位置的字符

  includes()、startsWith()、endsWith():判断字符是否包含某个字符

'asdfrew345'.includes('fre') // true --> 'asdfrew345' 是否包含 ’fre‘
 'asdfrew345'.includes('aaa') // false --> 'asdfrew345' 是否包含 ’aaa‘

 'asdfrew345'.startsWith('fre') // false --> 'asdfrew345' 的前部是否是 ’fre‘
 'asdfrew345'.startsWith('asd') // true --> 'asdfrew345' 的前部是否是 ’asd‘

 'asdfrew345'.startsWith('fre') // false --> 'asdfrew345' 的尾部是否是 ’fre‘
 'asdfrew345'.startsWith('345') // true --> 'asdfrew345' 的尾部是否是 ’345‘

trim()、trimStart()、trimEnd()、trimLeft()、trimRight(): 消除字符串空格

' aa  da  '.trim() // 消除字符串的头部和尾部所有空格 --- >  'aa  da'
' aa  da  '.trimStart() // 消除字符串头部的所有空格 --- >  'aa  da  '
' aa  da  '.trimLeft() // 消除字符串头部的所有空格 --- >  'aa  da  '
' aa  da  '.trimEnd() // 消除字符串尾部的所有空格 --- >  ' aa  da'
' aa  da  '.trimRight() // 消除字符串尾部的所有空格 --- >  ' aa  da'

 ‘字符’.replace() 和 '字符’replaceAll()；替换字符中的某些字符

// 替换字符串中的从左往右第一个字符 'a' 为 '-'
'aagafewrqw'.replace('a', '-') // '-agafewrqw'
// 替换字符串中的所有字符 'a' 为 '-' 
'aagafewrqw'.replace(/a/g, '-') // '--g-fewrqw'
// 替换字符串中的从左往右第一个字符(不区分大小写) 'a' 为 '-'
'Aagafewrqw'.replace(/a/i, '-') // '-agafewrqw'

// 替换字符串中的所有字符 'a' 为 '-'
'aagafewrqw'.replaceAll('a', '-') // '--g-fewrqw'
// 第二个参数可以是函数
'aabbcc'.replaceAll('b', () => '_') // 'aa__cc'
// $& 表示匹配的字符串本身，即`b`本身， 所以返回结果与原字符串一致
'abbc'.replaceAll('b', '$&')  // 'abbc'
// $` 表示匹配结果之前的字符串， 对于第一个`b`，$` 指代`a`， 对于第二个`b`，$` 指代`ab`
'abbc'.replaceAll('b', '$`') // 'aaabc'
// $' 表示匹配结果之后的字符串， 对于第一个`b`，$' 指代`bc`， 对于第二个`b`，$' 指代`c`
'abbc'.replaceAll('b', `$'`) // 'abccc'
// $1 表示正则表达式的第一个组匹配，指代`ab`，$2 表示正则表达式的第二个组匹配，指代`bc`
'abbc'.replaceAll(/(ab)(bc)/g, '$2$1') // 'bcab'
// $$ 指代 美元符号 $
'abc'.replaceAll('b', '$$') // 'a$c'


const str = 'aa123abc456aa',  regex = /(\d+)([a-z]+)(\d+)/g;
function replacer(match, p1, p2, p3, offset, string) {
  console.log(match) // 匹配的内容 ---》 123abc456
  console.log(p1) // 组1 ---》 123
  console.log(p2) // 组2 ---》 abc
  console.log(p3) // 组3 ---》 456
  console.log(offset) // 匹配内容的位置 ---》 0
  console.log(string) // 完整字符串 ---》 aa123abc456aa
  return [p1, p2, p3].join(' - ');
}
str.replaceAll(regex, replacer) // aa123 - abc - 456aa

 ‘字符’.at(索引)：获取指定位置的字符

'das'.at(-1) // 's'
'das'.at(-2) // 'a'
'das'.at(-3) // 'd'
'das'.at(-4) // undefined

'das'.at(666) // undefined
'das'.at(2) // 's'
'das'.at(1) // 'a'
'das'.at(0) // 'd'

'das'.at(true) // 'a'
'das'.at(false) // 'd'
'das'.at(NaN) // 'd'
'das'.at('fafdafdafdsafa') // 'd'

11、函数前面加上async，他就成异步函数

async作为一个关键字放在函数前面，用于表示函数是一个异步函数。（函数前面加上async，就是异步函数。）

因为async就是异步的异步，异步函数也就是意味着这个函数的执行不会阻塞后面代码的执行。简单的写一个async函数

async function hello(){
    return 'hello world';
}

async异步函数返回的是一个promise对象，如果要获取到promise返回值，我们就应该使用.then方法。

async function hello(){
  return 'hello world';
}
hello().then(result=>{
  console.log(result);
})
console.log('我是先执行的');

async函数，从而可以使用await关键字，await后面放置的是返回promise对象的一个表达式，所以它后面可以写上awaitMethod函数的调用。

async function test (){
  let result = await awaitMethod(30);
  console.log(result);
}
//调用
test();

调用test函数时，它遇到了里面的await关键字，await代表等待，代码到这里会暂停，等待后面的promise对象执行完成，然后拿到promise的返回值，拿到返回值之后它继续往下执行。

​

avatar
文章
阅读
粉丝