Amanda_wmy的博客

但愿我们都会有那样的一天,活成了我们最想要的样子,让过去所有的狼狈与伤痕,都变成不辜负自己的勋章。谨以此帖记录我从一个无知少女转型程序媛。...

ES6新特性教程(二)

ES6新特性教程(二)

  • ES6数字操作
    • 数字验证Number.isFinite( xx ):
      可以使用Number.isFinite( )来进行数字验证,只要是数字,不论是浮点型还是整形都会返回true,其他时候会返回false。
      let a= 11/4;
      console.log(Number.isFinite(a));//true
      console.log(Number.isFinite('jspang'));//false
      console.log(Number.isFinite(NaN));//false
      console.log(Number.isFinite(undefined));//false
    • NaN验证:
      NaN是特殊的非数字,可以使用Number.isNaN()来进行验证。下边的代码控制台返回了true
      console.log(Number.isNaN(NaN));
    • 判断是否为整数Number.isInteger(xx):
      let a=123.1;
      console.log(Number.isInteger(a)); //false
    • 整数转换Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)
      let a='9.18';
      console.log(Number.parseInt(a)); // 9
      console.log(Number.parseFloat(a)); // 9.18
    • 整数取值范围操作:
      整数的操作是有一个取值范围的,它的取值范围就是2的53次方
      let a = Math.pow(2,53)-1;
      console.log(a); //9007199254740991
    • 最大安全整数
      console.log(Number.MAX_SAFE_INTEGER);
    • 最小安全整数
      console.log(Number.MIN_SAFE_INTEGER);
    • 安全整数判断isSafeInteger( )
      let a= Math.pow(2,53)-1;
      console.log(Number.isSafeInteger(a));//false
  • ES6中新增的数组知识

    • JSON数组格式转换(Array.from()):
    let  json = {
        '0': 'Hello',
        '1': '哈喽',
        '2': '你好',
        length:3
    }
    let arr=Array.from(json);
    console.log(arr)  // ["Hello", "哈喽", "你好"]
    • 文本或者变量转换成数组(Array.of()):
    let arr =Array.of(3,4,5,6); //转数字
    console.log(arr); //[3, 4, 5, 6]
    let arr =Array.of('Hello','哈喽','你好'); //转字符串
    console.log(arr);  //["Hello", "哈喽", "你好"]
    • find( )实例方法(从数组中查找,传三个参数)
      (实例的意思是指以数组开始的,数组的某个方法,而不是转成数组的方法)
      value:表示当前查找的值。
      index:表示当前查找的数组索引。
      arr:表示当前数组。
    let arr=[1,2,3,4,5,6,7,8,9];
    console.log(arr.find(function(value,index,arr){
        return value > 5;
    }))
    //打印出 6,如果找不到会显示undefined
    • fill( )实例方法(填充数组)接收三个参数,第一个参数是填充的变量,第二个是开始填充的位置,第三个是填充到的位置。

      let arr=[0,1,2,3,4,5,6,7,8,9];
      arr.fill('Hello',2,5);
      console.log(arr); //[0, 1, "Hello", "Hello", "Hello", 5, 6, 7, 8, 9]
    • 数组的遍历
      for…of循环:

      let arr=['Hello','哈喽','你好']
      for (let item of arr){
          console.log(item);  //Hello 哈喽 你好
      }

      for…of数组索引:

      let arr=['Hello','哈喽','你好']
      for (let index of arr.keys()){
          console.log(index);  // 0 1 2
      }

      同时输出数组的内容和索引:

      let arr=['Hello','哈喽','你好']
      for (let [index,val] of arr.entries()){
          console.log(index+':'+val);
        //0:Hello 1:哈喽 2:你好  
      }
  • ES6中的箭头函数和扩展

    • 可只传一个参数,可有默认值
    function add(a,b=1){
        return a+b;
    }
    console.log(add(1));
    • 函数中的严谨模式(在ES中就经常使用严谨模式来进行编程,但是必须写在代码最上边,相当于全局使用)要取消默认值的操作

      function add(a,b){
          'use strict'
          if(a == 0){
              throw new Error('This is error');
          }
           return a+b;
      }
      console.log(add(1,2));
    • 箭头函数

      es5:
      function add(a,b=1){
          return a+b;
      }
      console.log(add(1));
      es6
      var add =(a,b=1) => a+b;
      console.log(add(1));
    • {}的使用
      在箭头函数中,方法体内如果是两句话,那就需要在方法体外边加上{}括号
      var add =(a,b=1) => {
          console.log('Hello')
          return a+b;
      };
      console.log(add(1));

    箭头函数中不可加new,也就是说箭头函数不能当构造函数进行使用

    • in的用法:
      in是用来判断对象或者数组中是否存在某个值的
      对象的判断:
      let obj={
      a:'Hello',
      b:'哈喽'
      }
      console.log('a' in obj); //true

      数组的判断:
      let arr=[,,,,,];
      console.log(0 in arr); //false
      let arr1=['Hello','哈喽'];
      console.log(0 in arr1); // true

    注意:这里的0指的是数组下标位置是否为空

    • 数组的遍历方法(forEach,filter,some,map四种方法)

      1. forEach (会自动省略为空的数组元素)
        let arr=['Hello','哈喽','你好'];
        arr.forEach((val,index)=>console.log(index,val));
      2. filter
        let arr=['Hello','哈喽','你好'];
        arr.filter(x=>console.log(x));
      3. some
        let arr=['Hello','哈喽','你好'];
        arr.some(x=>console.log(x));
      4. map
        let arr=['Hello','哈喽','你好'];
        console.log(arr.map(x=>'web'));
    • 数组转字符串(join(),toString()两种方法)
      join():
      let arr=['Hello','哈喽','你好'];
      console.log(arr.join('|')); //Hello|哈喽|你好

      toString():
      let arr=['Hello','哈喽','你好'];
      console.log(arr.toString()); //Hello,哈喽,你好

  • ES6中对象
    • 对象赋值:
      let name="Hello";
      let skill= 'web';
      var obj= {name,skill};
      console.log(obj); //{name: "Hello", skill: "web"}
    • Object.is( ) 对象比较(和===的比较)

      var obj1 = {name:'Hello'};
      var obj2 = {name:'Hello'};
      console.log(obj1.name === obj2.name);//true
      console.log(Object.is(obj1.name,obj2.name)); //true

      区别:
      console.log(+0 === -0); //true
      console.log(NaN === NaN ); //false
      console.log(Object.is(+0,-0)); //false
      console.log(Object.is(NaN,NaN)); //true

      ===为同值相等,is()为严格相等
    • Object.assign( )合并对象
      var a={a:'Hello'};
      var b={b:'哈喽‘};
      var c={c:'web'};
      let d=Object.assign(a,b,c)
      console.log(d);//{a: "Hello", b: "哈喽", c: "web"};
  • Symbol在对象中的作用
    • Symbol的打印
      var g = Symbol('jspang');
      console.log(g); //红色字
      console.log(g.toString());//黑色字
    • Symbol对象元素的保护作用
      let obj={name:'jspang',skill:'web'};
      let age=Symbol();
      obj[age]=18; //对年龄进行保护
      for (let item in obj){
      console.log(obj[item]);
      } //{name: "jspang", skill: "web", Symbol(): 18}
      console.log(obj);
  • Set和WeakSet数据结构
    注意:是数据结构,而不是数据类型

    • Set的声明
      Set对象是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的
      声明:new Set([iterable]);(iterable是一个可迭代对象,其中的所有元素都会被加入到 Set 中。null被视作 undefined。也可以不传入[iterable])

    • Set属性:

      • Set.prototype.size:返回Set实例的成员数量。
        Set.prototype.constructor:默认的构造Set函数。
    • Set方法:
      add(value):添加某个值,返回Set结构本身。
      delete(value):删除某个值,返回一个布尔值,表示删除成功。
      has(value):返回一个布尔值,表示参数是否为Set的成员。
      clear():清除所有成员,没有返回值。
      keys() :返回一个键名的遍历器
      values() :返回一个值的遍历器
      entries() :返回一个键值对的遍历器
      forEach():使用回调函数遍历每个成员
      例子:
add():
let setArr = new Set(['jspang','技术胖','web','jspang']);
console.log(setArr);//Set {"jspang", "技术胖", "web"}
setArr.add('前端职场');
console.log(setArr); //Set {"jspang", "技术胖", "web", "前端职场"}
setArr.delete('前端职场');
console.log(setArr); //Set {"jspang", "技术胖", "web"}
delete():
let setArr = new Set(['jspang','技术胖','web','jspang']);
console.log(setArr);//Set {"jspang", "技术胖", "web"}
setArr.add('前端职场');
console.log(setArr); //Set {"jspang", "技术胖", "web", "前端职场"}
setArr.delete('前端职场');
console.log(setArr); //Set {"jspang", "技术胖", "web"}
has():查找
用has进行值的查找,返回的是true或者fals
let setArr = new Set(['jspang','技术胖','web','jspang']);
console.log(setArr);//Set {"jspang", "技术胖", "web"}
console.log(setArr.has('jspang'));//true
clear():清空clear清除所有成员,没有返回值
let setArr = new Set(['jspang','技术胖','web','jspang']);
console.log(setArr);//Set {"jspang", "技术胖", "web"}
setArr.clear();
console.log(setArray);//true
s.add(1).add(2).add(2);  
// 注意2被加入了两次  

s.size // 2  

s.has(1) // true  
s.has(2) // true  
s.has(3) // false  

s.delete(2);  
s.has(2) // false  
扩展运算符和 Set 结构相结合,就可以去除数组的重复成员
let arr = [3, 5, 2, 2, 5, 5];  
let unique = [...new Set(arr)];  
// [3, 5, 2]  
let a = new Set([1, 2, 3]);  
let b = new Set([4, 3, 2]);  

// 并集  
let union = new Set([...a, ...b]);  
// Set {1, 2, 3, 4}   
// 交集  
let intersect = new Set([...a].filter(x => b.has(x)));  
// set {2, 3}   
// 差集  
let difference = new Set([...a].filter(x => !b.has(x)));  
// Set {1}  
forof…循环:
let setArr = new Set(['jspang','技术胖','web','jspang']);
for (let item of setArr){
    console.log(item);
} 
forEach循环:
let setArr = new Set(['jspang','技术胖','web','jspang']);
setArr.forEach((value)=>console.log(value)); //jspang,技术胖,web
  • WeakSet的声明
    直接在new 的时候就放入值,将报错。WeakSet里边的值也是不允许重复
let weakObj=new WeakSet();
let obj={a:'jspang',b:'技术胖'}
weakObj.add(obj);
console.log(weakObj);

与Array相比:
Set中存储的元素是唯一的,而Array中可以存储重复的元素。
Set中遍历元素的方式:Set通过for…of…,而Array通过for…in…。
Set是集合,不能像数组用下标取值。

  • Map数据结构
    Set类似于数组,而Map就类似于键值对(Key, Value)。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键
const map = new Map([  
  ['name', '张三'],  
  ['title', 'Author']  
]);   
map.size // 2  
map.has('name') // true  
map.get('name') // "张三"  
map.has('title') // true  
map.get('title') // "Author"  
  • map方法:
    size : 返回成员总数。
    set(key, value) : 设置一个键值对。
    get(key) : 读取一个键。
    has(key) : 返回一个布尔值,表示某个键是否在Map结构中。
    delete(key) : 删除某个键。
    clear() : 清除所有成员。
set方法:新增
let json = {
    name:'jspang',
    skill:'web'
}
console.log(json.name);
var map=new Map();
map.set(json,'iam');
console.log(map);
get()取值:
console.log(map.get(json));
删除delete
删除delete的特定值:
map.delete(json);
console.log(map)
size属性
console.log(map.size);
查找是否存在has
console.log(map.has('jspang'))
清楚所有元素clear
map.clear()
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Amanda_wmy/article/details/80348902
文章标签: Svn
个人分类: Svn
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

ES6新特性教程(二)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭