ES6

最新推荐文章于 2024-10-15 14:00:48 发布

WJLSH123

最新推荐文章于 2024-10-15 14:00:48 发布

阅读量124

点赞数

分类专栏： js 文章标签： javascript node.js html

本文链接：https://blog.csdn.net/WJLSH123/article/details/120189722

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

严格模式

’use strict’;

use：使用 strict：严格的

特点：

如果写在全局，则全局是严格模式，如果写在函数里，则函数内部是严格模式。
’use strict‘一定要写在全局或局部的开头
必须使用变量符，未声明会报错
在函数中，不能使用this去指向全局对象
arguments.callee不能使用
当使用es6语法时，默认进入严格模式

优点：

消除代码运行的不安全之处，保证代码运行的安全
提高编辑器(编写代码的程序)效率，增加运行速度
为新版本的JS做铺垫

模板字符串

``（反引号）

变量和字符串连接的问题
多行字符串不需要多做+连接

let a = '一';
`...${a}大段文字...`

扩展运算符

…（它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列）

<script>
    // 场景一：数组中应用
    let arr = [1,2,3];
    let arr2 = [...arr];	

    let arr-x = document.querySelector('div');
    let arr-y = [...arr-x]	// 伪数组转化为真数组
    
    let arr3 = [1,...arr2,2];	// 数组转序列
    
    let myMax = Math.max(arr);	// 求数组最大值
</script>
<script>
	// 场景二： 函数中使用
    function play(...arr){
        console.log(arr);	// [1,2,3]
    }
    play(1,2,3);
    
    function play(name,...arr){		// 如果相传别的参数，将可变参数放到最后 
        console.log(name);	// '数组'
        console.log(arr);	// [1,2,3]
    }
    play('数组',1,2,3);
</script>
<script>
	// 场景三：在对象中使用
    let obj = {a : 3, b : 4,};
    let obj2 = {...obj};
</script>

参数默认值

<script>
    function play(a = 1,b = 2){}
    play();	// 不穿值的时候，使用默认值
    play(underfind,null); // (1,null) 传的值为undefined时，与没传效果相同。但是如果传null，则传递成功。
</script>

解构赋值

<script>
	// 字符串："how are you doing?" 将每个单词放到一个单独的变量里。
    let str = 'how are you doing?';
    let [one,two,there] = str.split(' ');	// 将用空格分割的每个单词都赋给对应的变量;
    
    // 留空，获取指定位置的元素
    let {,two,} = str.split(' ');
    
    // 结合扩展运算符
    let [first , ...arr] = str.split();
    console.log(arr instanceof Array);
    
    // 交换变量（不使用第三方中转）
    let a = 1;
    let b = 2;
    	// 方法一
    a = a + b;
    b = a - b;
    a = a - b;
    	// 方法二
    [a , b] = [b , a]
    	// 方法三：数组运算法
    a = [b,(b=a)][0]
    	// 方法四：数组异或法
    a = a ^ b
    b = b ^ a
    a = a ^ b 
    
    // 对象的解构
	let animal = {
        type: "猫科动物",
        color: "黄色",
        age: 3,
        name: "小黄",
	};
    let {type , color} = animal;	// 变量名必须与对象的属性名一至，否则而会报错
    
    // 函数形参的解构
    function play ({age}){}	// 此时形参为3【如果形参过多可以直接将对象名当作形参传入】
    play(animal);
</script>

Set集合

iterable是ES6标准引入的新的类型。而Array、Map和Set都属于iterable类型

Set声明：let mySet = new Set();
增：mySet.add = XXX;
删：mySet.delete = XXX;
找：mySet.has(XXX);
改：删老的，加新的
清空： mySet.clear()
遍历：mySet.forEach()
遍历：for(let i of mySet){ // 只输出值}
返回所有的数组集合：mySet.keys() / mySet.values()

数组去重：利用Set值为一的方式，将数组转化为Set集合（let set = new Set(arr)）,利用其唯一值的特性去重，然后利用Array.from(set)将Set集合转回数组。

    <script>
      // Set：没有下标，值是唯一的，不会重复（没有属性名，只有属性值）
      // 1.创建Set
      let mySet = new Set();
      // let obj={
      //   name:'张三'
      // }
      // console.log(obj);
      // 2.给集合添加值
      mySet.add("张三");
      mySet.add("李四");
      mySet.add("王五");
      mySet.add(true);
      mySet.add(null);
      mySet.add(undefined);
      console.log(mySet);
      // 3.删除值
      mySet.delete("李四");
      // 4.判断某个值是否存在
      console.log(mySet.has(null));
      // 5.keys()和values()返回所有的数组集合
      console.log(mySet.keys());
      console.log(mySet.values());
      // 6.清空
      // mySet.clear();
      // console.log(mySet);
      // 7.遍历 forEach()
      mySet.forEach((item) => {
        console.log(item);
      });

      // i指的是属性值
      for (let i of mySet) {
        console.log(i);
      }
      // Set没有属性名，只有属性值（无效果）
      for (let i in mySet) {
        console.log(i);
      }

      // 数组去重
      var list = ["jack", "rose", "Frank", "Peter", "Tim", "rose", "Frank"];
      var obj = new Set(list);
      // Array.from()可以将伪数组和Set转化为数组
      Array.from(obj);
      console.log(obj);
    </script>

面试题:数组去重
var arr=[...];
let obj = new Set(arr)
// Array.form()可以将伪数组，Set转化为数组
console.log(Array.form(obj))

Map集合

以键值对的方式存储，键是唯一的，值可以重复

创建：let myMap = new Map();
增：myMap.set(‘键’ , ‘值’);
改：myMap.set(‘键’ , ‘新值’)；
查：myMap.has(‘键’); 注：输入’键’，获取’值’
删：myMap.delete(‘键’);
清空：myMap.clear();
获取所有的键：myMap.keys();
获取所有的值：myMap.values();
遍历：myMap.forEach((key , value)=>{})
遍历：for(let i of myMap){console.log()} 注：输出n个数组，每个数组包含两个值（键，键对应的值）
获取所有的键值对：myMap.entries()

    <script>
      // Map：以键值对(key - value)的方式存储，key不可以重复，是无序的
      // 创建
      let myMap = new Map();
      // 增
      myMap.set("张三", "法外狂徒");
      myMap.set(true, "成功");
      myMap.set(123, 456);
      console.log(myMap);
      // 改
      myMap.set("张三", "速速枪毙");
      // 查（输入'键'，获取'值'）
      console.log(myMap.get(true));
      // 删除
      myMap.delete(123);
      // 清空
      // myMap.clear();
      // console.log(myMap);
      // 根据key判断value是否存在
      console.log(myMap.has(false));
      // 返回Map里的所有key值
      console.log(myMap.keys());
      // 返回Map里的所有value值
      console.log(myMap.values());
      // 返回Map里的所有键值对
      console.log(myMap.entries());
      // 遍历Map
      myMap.forEach((key, value) => {
        console.log(key, value);
      });
      // 遍历
      for(let i of myMap){
        console.log(i);
      }
    </script>