ES6语法的新特性

AI滚雪球
87 阅读3分钟

1. ES和JS的关系

  1. JS的组成：ECMAScript + DOM + BOM
  2. JS包含了ES，JS的语法是遵循ES的
  3. ES5是经典语法，ES6+做了很多改进，增加了很多新特性

2. JS变量的作用范围

  1. let命令不存在变量提升，如果在let前使用，会导致报错

    console.log(k);
var k = 20; // undefined

    console.log(k);
let k = 2; // Cannot access 'k' before initialization

  2. 如果块区中存在let和const命令，let会创建局部变量，就会形成封闭作用域

    for (var i = 0; i < 5; i++) {
  console.log(i);//0 1 2 3 4
}
console.log("i=",i);//5

    for (let i = 0; i < 5; i++) {
  console.log(i);//0 1 2 3 4
}
console.log("i=",i);//i is not defined

  3. let不允许重复声明，因此，不能在函数内部重新声明参数

    var k = 20;
let k = 2;//Identifier 'k' has already been declared

3. 字符串处理

  1. 模板字符串输出

    let name = "sam";
let age=20;
let password = 123;
let str2="name = "+name+" , password = "+password;//传统
let str3=`name=${name},password=${password}`;//ES6新增
console.log(str2);
console.log(str3);

4. 函数扩展

  1. 函数参数的默认值

    function func1(x,y=2){
  // y的默认值为2
  return x+y 
}
console.log(func1(3)) // x=3 y=2

  2. 函数的多参数写法

    function fun2(...n) { //作为数组出现
    console.log(n.length)
}
fun2(1, 2, 3) //3
fun2(0, 2, 3, 6, 7) //5

  3. 箭头函数

    let fun3 = (x, y) => {
        return x + y;
    }
console.log(fun3(3,5));//8
let fun4=x=>x+1;//简写
console.log(fun4(4));//5

5. 函数尾调用

  1. 函数尾调用指某个函数的最后一步是调用另一个函数，如fun2所示。

  2. 如函数示例，fun3调用函数fun1之后，还有别的操作，即使语义完全一样，也不属于尾调用。fun4属于调用fun1后还有操作，即使写在一行内，也不属于尾调用。

    let fun1 = (x, y) => x + y;
//fun2是尾调用
let fun2 = () => {
  return fun1(3, 4);//尾调用必须在最后一步
}
//fun3调用fun1不在最后一步，不属于尾调用 
let fun3 = () => {
  let n = fun1(3, 4);
  return n;
}
//fun4调用fun1后参与运算，不属于尾调用 
let fun4= () => {
  return fun1(3, 4)+1;
}

  3. 函数最后一步调用自己是递归，最后一步调用其他函数是嵌套；递归使用尾调用会共用一个内存空间，防止溢出，函数递归的尾调用优化，就是把所有用到的内部变量改写成函数的参数。

    let fun1 = (n, p = 1) => {
  if (n <= 1) {
    return 1 * p
  }
  else {
    let result = n * p;
    return fun1(n - 1, result)
  }
}
console.log(fun1(4)) // 24

6. 循环

  1. 常规循环方法: while、for.....

  2. for...in循环

    let list = [1, 4, 6, 2, 3, 5];
for (const i in list) {
  console.log(i);//0 1 2 3 4 5
  console.log(list[i]);//1 4 6 2 3 5
}

  3. for...of循环

    let list = [1, 4, 6, 2, 3, 5];
for (const n of list) {
  console.log(n);//1 4 6 2 3 5         
}

  4. forEach循环

    let list = [1, 4, 6, 2, 3, 5];
list.forEach((n,i) => {
  console.log('n=',n);//1 4 6 2 3 5   
  console.log('i=',i);//0 1 2 3 4 5
});

7. Set

  1. ...：扩展运算符，解决参数不确定的情况，简化参数，让书写更方便

    let add = (...nums) => {
  let sum = 0
  for (const num of nums) {
    sum += num;
  }
  return sum;
}
let list = [1, 4, 6, 2, 3, 5];
console.log(add(...list));

  2. filter：过滤筛选

    let list = [1, 4, 6, 2, 3, 5];
console.log(list.filter(x=>x>2));

  3. set去重数组

    let list = [1, 2, 4, 3, 4];
let set1 = new Set(list);//去重
console.log(set1)//{1, 2, 4, 3}

  4. set添加和删除

    let set2 = new Set([2, 3, 2, 5, 6, 9])
set2.add(7);
set2.delete(2);
console.log(set2);// {3, 5, 6, 9, 7}

  5. 合并两个set并去重

    let set1 = new Set([2, 3, 8, 5, 6, 9])
let set2 = new Set([1, 3, 4, 5, 6, 9])
let set3 = new Set([...set1, ...set2]);
console.log(set3);//{ 2, 3, 8, 5, 6, 9, 1, 4 }

  6. 两个set差集

    let set1 = new Set([2, 3, 8, 5, 6, 9])
let set2 = new Set([1, 3, 4, 5, 6, 9])
let set3 = new Set([...set1].filter(x=>!set2.has(x)));
console.log(set3);//{2, 8}

  7. 两个set交集

    let set1 = new Set([2, 3, 8, 5, 6, 9])
let set2 = new Set([1, 3, 4, 5, 6, 9])
let set3 = new Set([...set1].filter(x=>set2.has(x)));
console.log(set3);//{3, 5, 6, 9}

8. Map

  1. 任何值（对象或者原始值）都可以作为一个键或一个值。

    let num = 123;
let arr = [1, 2, 3]
let fun = function () { }
let obj = {};
const map1 = new Map();
map1.set(num, "q1");
map1.set(arr, "q2");
map1.set(fun, "q3");
map1.set(obj, "q4");
map1.set("aaa","q5");
for (const key of map1.keys()) {
  console.log(key);            
}

  2. map增删改查

    const map2=new Map([
  ["s1","as1"],
  ["s2","as2"],
  ["s3","as3"],
  ["s4","as4"]
]);
map2.set("s2","as5555");
map2.delete("s3");
console.log(map2.has("s3")); 
console.log(map2);

  3. 将values转成数组和列表对象显示

    let arr1=[...map2.values()];
let arr2=[...map2.keys()];
let arr3=[...map2.entries()];
console.log(arr1,arr2,arr3);
// (4) ["as1", "as2", "as3", "as4"] 
// (4) ["s1", "s2", "s3", "s4"]
// Array(4)

9. Module语法

  1. 应用 export 和 import ，在HTML中引用JS文件

    //js1.js
function fun2 () {
    return 888
}
export default {
    userName: "xiaoming",
    fun1: (x) => {
        console.log(`fun1=${x}`);
    },
    fun2: () => {
        return fun2()
    }
}

    //show.html
<script type="module">
  import js1 from './js1.js'
  console.log(js1.fun1('1'))
  console.log(js1.userName)
  console.log(js1.fun2())
</script>

  2. 应用 export 和 import ，在JS文件中引用另一JS文件

    //js2.js
let m = 100;
export default {
    "m": m,
}

    //js1.js
import js2 from './js2.js'
function fun2 () {
    return 888+js2.m;
}
export default {
    fun2: () => {
        return fun2()//988
    }
}

    //show.html
<script type="module">
  import js1 from './js1.js'
console.log(js1.fun2())
</script>

  3. 使用解构函数引用

    //js1.js
export function fn () {
    console.log('fn')
}

export const name = 'a'
export const obj = {
    name: "zhangsan"
}

//show.html
<script>
 import { fn, name, obj } from './js1.js'
fn()
console.log(name)
console.log(obj)
</script>
  1. 使用解构函数打包引用
//js1.js

function fn () {
    console.log('fn')
}
const name = 'a'
const obj = {
    name: "zhangsan"
}
export {
    fn,
    name,
    obj
}

//show.html
<script>
 import { fn, name, obj } from './js1.js'
fn()
console.log(name)
console.log(obj)
</script>
avatar
文章
阅读
粉丝