02.ES6新特性

最新推荐文章于 2024-08-15 10:17:29 发布

程序员冷冷

最新推荐文章于 2024-08-15 10:17:29 发布

阅读量205

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/C_leng/article/details/104865885

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.ES6是什么？

ECMAScript 6.0（简称 ES6，也称ES2015）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标与愿景：1.是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。2.实现代码库之间的共享。3.不断迭代维护新版本。4.支持更多语法，使用更方便。

二.ES6核心特征：

在这里插入图片描述

三.let和const命令：

let:声明变量,不可重复声明,块级作用域

let a = 1;
a = 2;
console.log(a); //2

let a = 1;
let a = 2;
console.log(a); //error:Uncaught SyntaxError: Identifier 'a' has already been declared

const:声明常量,不可重复声明,块级作用域

const a = 1;
console.log(a); //1

const a = 1;
const a = 2;
console.log(a); //error:Uncaught SyntaxError: Identifier 'a' has already been declared

练习：网页有三个按钮，点击三个按钮，让其弹出0，1，2

 <input type="button1" value="0">
 <input type="button1" value="1">
 <input type="button1" value="2">

    <script>
    var a = document.getElementsByTagName('input');
      for(let i = 0;i<a;i++){
           alert(i);
        }
    </script>

四.解构赋值：

什么是解构函数:解构函数是JS的一种表达式,可以将数组中的值或对象中的属性提取出来,对变量进行赋值.

例:定义一个对象,表示2维空间中的一个点,需要用这些坐标进行开平方计算

let newPoint = {
    x:2,
    y:4,
    z:5
};
let {x,y,z} = newPoint;
console.log(Math.sqrt(x*x+y*y+z*z).toFixed(2));

例:数组解构赋值:

let [x,y,z] = [1,2,3];
console.log(x + "," + y + "," +z);

注:1.两边的结构必须一致. 2.右边必须是一个实际的内容:数组或对象.

五.箭头函数：

箭头函数是ES6提供的新的语法结构,用于替换匿名函数
相当于简写了function,使用()代替,使用=>代替{}

//无参箭头函数
var show = function (){
    console.log("hello world");
}
show();
var show2 = () => console.log("hello world");
show2();

//有参箭头函数
var show3 = function (name){
    console.log(name);
}
show3('hhh');
var show4 = (name) => console.log(name);
show4('hhh');

var add1 = function (a,b){
    return a + b;
};
console.log(add1(1,2));

var add2 = (a,b) => {
    return a + b;
}
console.log(add2(1,2));

var add3 = (a,b) => a + b;
console.log(add3(1,2));

注:传递两个参数,参数必须使用括号包裹着

箭头函数与普通匿名函数的区别:
① 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象.
② 不可以当作构造函数,不能使用new命名,否则会抛出一个错误.
③ 不可以使用使用arguments对象,该对象在函数体内不存在.可以用rest参数代替.
④ 不可以使用yield命令,因此箭头函数不能用作Generator函数.

六.剩余参数：

…用于声明剩余的参数,它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列.

function show (a,b,...c){
    console.log(a);
    console.log(b);
    console.log(c);
}
show(1,2,4,5,6,7,8,9);

…也称拓展运算符,通过…运算使得两个数组实现深拷贝

let h = [1,2,3,4];
let h1 = h;
console.log(h1); //[1,2,3,4]
h1.push(9);
console.log(h);  //[1,2,3,4,9]

let h2 = [...h];
console.log(h2);  //[1,2,3,4,9]
h2.push(8);
console.log(h);  //[1,2,3,4,9]
console.log(h2);  //[1,2,3,4,9,8]

传递三个参数,实现一个计算机任意个数之和的函数

let x = [1,2,3];
console.log(x);  //[1,2,3]
console.log(...x);  //1,2,3
function f (a,b,c){
    console.log(a+b+c); //6
}
f(...x);

let arr1 = [1,2,3];
let arr2 = [3,4,5];
let arr = [...arr1,...arr2];
console.log(arr);
function add(...arr){
    return arr.reduce((previous,current) => {
        return previous + current;
    })
}

注:1. …之后不能再有其他参数（即只能是最后一个参数），否则会报错。2.函数的length属性，不包括 rest 参数。

七.模板字符串

模板字符串是为了解决使用"+"号拼接字符串的不便利而出现的.
格式: ${变量名称/常量名称} ,外面使用``包裹

例:

let a = "hello";
let b = "world";
let c = `${a + b}`;
let d = `${a} ${b}`;
console.log(c);  //helloworld
console.log(d);  //hello world

//对运算的支持
let x = 1;
let y = 2;
let result = `${x + y}`;
console.log(result);

八.数组方法:

Array.from方法用于将json字符串转为数组,json字符串务必要有长度属性。

例:

let json = {
    '0': 'niit',
    '1': 'computer',
    '2': 'mobile',
    length:3
}
let arr1 = Array.from(json);
console.log(arr1);

function test(a,b){
    let arr = Array.from(arguments,value => value +2);
    console.log(arr)
}
test(1,2) //[3,4]

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

let arr3 = [1,2,3,4,5,6,7];
console.log(arr3.find(function(value,index,arr){
    return value > 0;  //1
}));

Array.of:将变量转为数组,可以不要再使用eval进行转换,替代Array()或new Array().

let arr2 = Array.of(1,24,5)
console.log('arr2',arr2);  //[1,24,5]

实例方法fill(value,start,end):使用给定值填充数组,数组中的原有元素会被抹去,从start位置开始填充,不包括end位置。

let arr4 = [1,2,3,5,6,7,4];
arr4.fill(1,4,6);
console.log(arr4); //[1,2,3,5,1,1,4]

map():返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值.

let a = [1,2,3,4,5,6,7,8,9];
let b = a.map(a =>{
        return a;
    });
console.log(b);  //[1,2,3,4,5,6,7,8,9]

reduce():接收函数作为累加器,数组的元素从左到右缩减,最终计算为一个值.

let scores = [23,42,41,56,87];
let average = scores.reduce((tmp,score,index) =>{
    console.log(tmp,score,index);
    if(index == scores.length - 1){
        return(tmp + score) / scores.length;
    }else{
        return tmp + score;
    }
})
console.log(average.toFixed(2)); //49.80

filter():创建新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素.

let scores = [23,42,41,56,87];
let average = scores.filter(item =>{
    if(item % 2 == 0){
        return true;
    }else{
        return false;
    }
})
console.log(average);  //[42,56]