欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6

程序员文章站 2023-11-16 09:02:22
1.什么是ES6? ES的全称是ECMAScript,ES6就是ES2016之后的一个泛称,是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。 2.ES6新增语法 1. let ES6中新增的用于声明变量的关键字 特点: 1.let声明的变量具有块级作用域的特点,只在所处的块级作用域有效 i ......

 

 

 

 

1.什么是es6?

  es的全称是ecmascript,es6就是es2016之后的一个泛称,是由ecma国际标准化组织制定的一项脚本语言的标准化规范。

2.es6新增语法

  1. let

    es6中新增的用于声明变量的关键字

    特点:

    1.let声明的变量具有块级作用域的特点,只在所处的块级作用域有效

    if(true) {

      let a = 10;

    }

    console.log(a);   // a is not defined

    2.不存在变量提升

    console.log(a); //a is not defined

    let a = 10;

    3.暂时性死区

    利用let声明的变量会绑定在当前作用域,哪怕当前作用域外有相同变量名,也不会受影响。

  2.const

    声明常量,常量就是值(内存地址)不能变化的量。    

    特点:

    1.具有块级作用域的特点

    if(true) {

      const a = 10;

    }

    console.log(a);   // a is not defined

    2. 声明常量时必须赋值

    const p;      //missing initializer in const declaration

    不赋值则会报错

    3. 常量赋值后,值不能修改

 1 const p = 3;
 2 p = 100;    //assignment to constant variable.
 3 
 4 
 5 const arr = [10,20];
 6 
 7 arr[0] = 'a';
 8 
 9 arr[1] = 'b';
10 
11 console.log(arr);    //["a","b"];
12 
13 //直接给数组重新赋值则会报错
14 arr = ["a","b"]   //assignment to constant variable.

    常量不能重新进行赋值,如果是基本数据类型,不能更改值,如果是复杂数据类型,不能更改地址值。

  3.解构赋值

    在es6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构

    1.数组解构

      let[a,b,c] = [1,2,3];

      console.log(a,b,c);   //输出结果  1  2  3

      如果解构不成功,变量的值是undefined

    2.对象解构

      let person = {name:'书记',age:22};

      let{name, age} = person;

      console.log(name,age)   // 输出结果  '书记'  22

 

      let {name: myname, age: myage} = person;  // myname myage 属于别名

      console.log(myname); // 'zhangsan'

      console.log(myage); // 20

      

      小结:

      解构赋值就是把数据结构分解,然后给变量进行赋值

      如果解构不成功,变量跟数值个数不匹配的时候,变量的值为undefined

      数组解构用中括号包裹,多个变量用逗号隔开,对象解构用花括号包裹,多个变量用逗号隔开

      利用解构赋值能够让我们方便的去取对象中的属性和方法

  4.箭头函数

    es6新增的定义函数的方式

    () => {}   //()代表函数,=>必须要给的符号,指向那一块代码 {}函数体

    const  fn() => {}     //代表把一个函数赋值给fn

    特点:

      1.如果函数体只有一句代码,且代码的执行结果就是返回值,可以省略大括号

function fn(n1,n2){
   return   n1 + n2;
}
//es6箭头函数写法
const fn = (n1,n2)=>n1 +n2;

      2.如果形参只有一个,可以省略小括号

function fn(num){
    return num;
}
//es6箭头函数写法
const fn = num => num;

      3. 箭头函数不绑定this,箭头函数中的this指向的是函数定义位置的上下文this

      ES6

 

  5.剩余函数

    在不知道有多少个参数的时候使用,允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明一个不知道参数情况下的一个函数

    

function sum (first,...args){
    console.log(first);    // 10
    console.log(args);   // [20,30]
  
}
sum(10,20,30);

    剩余参数和解构配合使用

let uname = ['andy','tony','tommy'];
let [s1,...s2] = uname;
console.log(s1);   //'andy'
console.log(s2);   //['tony','tommy']
 

3.es6内置对象扩展

  array的扩展方法

    1.扩展运算符:可以将数组或对象转为用逗号隔开的参数序列

let arr = [1,2,3];
...arr;
console.log(...arr); //1 2 3
console.log(1,2,3)  //1 2 3

    可以用于合并数组,也可以将伪数组或可遍历对象转换为真正的数组

// 合并数组
// 方法一
let ary1 = [1, 2, 3]; 
let ary2 = [3, 4, 5]; 
let ary3 = [...ary1, ...ary2];
console.log(ary3);   //[1,2,3,3,4,5]
//方法二
ary1.push(...ary2);
console.log(ary1)    //[1,2,3,3,4,5]
// 转为真的数组
var divs = document.queryselectorall('div');
divs = [...divs];
console.log(divs);

    构造函数方法 array.from() 

     将伪数组或可遍历对象转换为真正的数组

let obj = {
    '0': "a",
    '1': "b",
    '2': "c",
    length : 3
};
let arr = array.form(obj);
console.log(arr);   //["a","b","c"]

    方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组

let arraylike = {
     "0": 1, 
     "1": 2,
     "length": 2
 }
let newary = array.from(arraylike, item => item *2)
console.log(newary)   //[2,4]
// 如果是对象,那么属性需要写对应的索引

  find() :用于找出数组里第一个符合条件的元素对象,没有找到则返回undefined

let arr = [{
     id: 1,
     name : 'andy'
},{
    id : 2,
    name: 'tom'
}];
let result = arr.find((item, index) => item.id == 2) ////找数组里面符合条件 的值,当数组中元素id等于2的查找出来,注意,只会匹配第一个

   

  findindex():用于找出数组里第一个符合条件的元素的位置,返回的是符合条件的元素的索引号,如果没有找到返回-1

let arr = [1, 2, 3, 4, 5];
let result = arr.findindex((value,index) => { return value > 4 });
console.log(result);  // 4

  includes(): 判断某个数组是否包含给定的值,返回布尔值

let arr = [1,2,3,4];
console.log(arr.includes('a'));  // false
console.log(arr.includes(2));   // true

  string的扩展方法

  es6中新增的创建字符串的方式,使用反引号定义

     let str = `hello world`; 

  特点:

    1.模板字符串中可以解析变量 ( 用${变量名}包裹变量名 )

let name = `王书记`; 
let sayhello = `你好,我的名字叫${name}`; 
console.log(sayhello); // 你好,我的名字叫王书记

    2.模板字符串里可以换行

let result = {
        name : '张三',
        age : 22,
        sex : '男'
}
let str = `
       <div>${result.name}</div>
       <div>${result.age}</div>
       <div>${result.sex}</div>
`;
console.log(str);   

    3. 在模板字符串中可以调用函数

function fn(){
       return `我亚索真的很快乐`
};
let str = `${fn()},你相信我`;
console.log(str);  //我亚索真的很快乐,你相信我

  方法:

    startswith()和endswith()方法

      startswith() 表示参数字符串是否在原字符串的头部,返回布尔值  

      endswith() 表示参数字符串是否在原字符串的尾部,返回布尔值

let str1 = `hello world`;
console.log(str1.startswith('h'));   // true
console.log(str1.endswith('d'));    // true

    repeat(n) 方法:表示将字符串重复n次,返回一个新的字符串

let str2 = 'panpan';
let newstr = str2.repeat(3);
console.log(newstr);  //panpanpanpanpanpan

 

   set数据结构

    类似数组,但是成员的值都是唯一的,没有重复的值

      set本身是一个构造函数,用来生成 set 数据结构

        const  s = new set();

      set函数可以接收一个数组作为参数,用来初始化

        const s = new set([1,2,3,4]);    // {1,2,3,4}

   方法:

    ES6

    遍历:

      set结构的实例和数组一样,也拥有foreach方法,用于对每个成员执行某种操作,没有返回值

      语法:s.foreach( (value) => {console.log(value)})        打印每一个成员值