ES5-ES6笔记

最新推荐文章于 2024-09-10 22:32:32 发布

原创最新推荐文章于 2024-09-10 22:32:32 发布 · 527 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了ECMAScript 6 (ES6) 的新特性，包括变量声明方式let与const的区别，解构赋值简化变量赋值过程，模版字符串方便字符串拼接，箭头函数简化函数定义，find和findIndex方法定位数组元素，以及Set数据结构解决数组去重等问题。

学习ESMAScript6

前言

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

提示：以下是自己学习内容，如果有错误，请指出，谢谢

ECMAScript与Javascript的关系

ECMAScript，简称ES，是由Ecma国际（欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）按照标准制定的一种脚本语言规范。

JavaScript是按ECMAScript规范实现的一种脚本语言，JavaScript除了实现了ECMAScript规范，还提供了BOM和DOM的操作。

ECMAScript版本历史

ES1.0, 1997年06月发布
ES2.0, 1997年06月发布
ES3.0, 1999年12月发布
ES4.0, 由于关于语言的复杂性出现了分歧。放弃发布
ES5.0, 2009年12月发布，增加了严格模式，增加了少量语法，为ES6铺路
ES6.0, 2015年6月发布，增加了大量的新概念和语法特性
- 第六版的名字，可以叫做ECMAScript6.0(ES), 也可以叫做ECMAScript 2015（ES2015）
- ECMA组织决定以后每年6月份都会发布一版新的语法标准，比如ES7(ECMAScript 2016)
- 通过我们说的ES6泛指ES5之后的下一代标准，涵盖了ES6, ES7, ES8…

ES5-数组的新方法

forEach

forEach() 方法对数组的每个元素执行一次提供的函数。功能等同于for循环.

应用场景：为一些相同的元素，绑定事件处理器！

//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
arr.forEach(function(element, index, array){
  console.log(element, index, array);
});

map

map() 方法返回一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

需求：遍历数组，求每一项的平方存在于一个数组中

var arr = [1,2,3,4,5];  // 1 4 9 16 25
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：一个新数组，每个元素都是回调函数的结果。
var newArray = arr.map(function(element, index, array){
  return element * element;
});
console.log(newArray);//[1,4,9,16,25]

filter

filter用于过滤掉“不合格”的元素
返回一个新数组，如果在回调函数中返回true，那么就留下来，如果返回false，就扔掉

需求：遍历数组，将数组中工资超过5000的值删除[1000, 5000, 20000, 3000, 10000, 800, 1500]

var arr = [1000, 5000, 20000, 3000, 10000, 800, 1500];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：一个新数组，存储了所有返回true的元素
var newArray = arr.filter(function(element, index, array){
  return element > 5000;
});
console.log(newArray);//[1000, 5000, 3000, 800, 1500]

some

some用于遍历数组，如果有至少一个满足条件，就返回true，否则返回false。

需求：遍历数组，判断数组是否包含奇数，[2,4,6,8,10,9]

var arr = [2,4,6,8,10,21];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：布尔类型的值，只要有一个回调函数返回true，就返回true
var flag = arr.some(function(element, index, array){
  console.log(element, index, array);
   return  element % 2 == 0;
});
console.log(flag);//true

every

every用于遍历数组，只有当所有的元素返回true，才返回true，否则返回false。

需求：遍历数组，判断数组是否都是偶数，[2,4,6,8,10,9]

  var arr = [2,4,6,8,10,21];
  //第一个参数：element，数组的每一项元素
  //第二个参数：index，数组的下标
  //第三个参数：array，正在遍历的数组
  //返回值：布尔类型的值，只有当所有的元素返回true，才返回true，否则返回false。
  var flag = arr.every(function(element, index, array){
    console.log(element, index, array);
	return element %2 == 0;
  });
  console.log(flag); //false

ES6

变量

ES6中提供了两个声明变量的关键字：const 和 let

let的使用

ES6 新增了let命令，用来声明变量。它的用法类似于var。

let声明的变量只有在当前作用域有效

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

不存在变量提升

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

不允许重复声明

let a = 10;
let a = 1;//报错 Identifier 'a' has already been declared

const的使用

const声明一个只读的常量。常量：值不可以改变的量

const声明的量不可以改变

const PI = 3.1415;
PI = 3; //报错

const声明的变量必须赋值

const num;

如果const声明了一个对象，仅仅保证地址不变

const obj = {name:'zs'};
obj.age = 18;//正确
obj = {};//报错

其他用法和let一样

1. 只能在当前代码块中使用
2. 不会提升
3. 不能重复

let与const的使用场景

1. 如果声明的变量不需要改变，那么使用const
2. 如果声明的变量需要改变，那么用let
3. 学了const和let之后，尽量别用var

解构赋值

数组解构

以前，为变量赋值，只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

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

解构默认值

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

对象解构

解构不仅可以用于数组，还可以用于对象。

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

如果变量名与属性名不一致，必须写成下面这样。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

函数的参数也可以使用解构赋值。

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

字符串

模版字符串

传统的 JavaScript 语言，拼接字符串如下：

let str = "大家好， 我叫" + name + ",今年" + age + "岁了, 是" + sex + "生"

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

let str = `大家好， 我叫${name}, 今年${age}岁了， 是${sex}生`;

字符串模版的优点

允许换行
可以使用插值 ${}

字符串方法

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

数组

find

find是ES6新增的语法

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

// 获取第一个大于10的数
var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});
console.log(found);

findIndex

findIndex是ES6新增的语法

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

// 获取第一个大于10的下标
var array1 = [5, 12, 8, 130, 44];

function findFirstLargeNumber(element) {
  return element > 13;
}

console.log(array1.findIndex(findFirstLargeNumber));

对象

简写

1- 在对象中，如果属性名和变量名相同的话，可以省略一个
2- 在对象中，方法也可以简写，不写function

    let name = 'zs'
    let age = 18 

    // 在对象中，如果属性名和变量名相同的话，可以省略一个
    // 在对象中，方法也可以简写

    let obj = {
      name: name,
      age: age
    }

    let obj = {
      gender: '男',
      name,
      age
    }
    
    // 在对象中的方法可以简写
    // 不写function
    let obj = {
      // say: function () {}
      say(n1) {
        console.log(n1)
      }
    }
    
	//调用
    obj.say(1)

展开运算符 …

思考：

let arr1 = [11, 22, 33]; let arr2=[‘one’, ‘two’, ‘three’] 合并成一个新数组

展开运算符（spread operator）允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用

1-展开数组

2-展开数组

      // 展开运算符:  ...
      const arr = [1, 2, 3]
      console.log(...arr)

      const arr = [1, 2, 3]
      const arr2 = [4, 5, 6]
      const newArr = [...arr, ...arr2, 5, 6, 7, ...arr]
      console.log(newArr)


      // const result = Math.max(...arr)
      // console.log(result)

      // ...还可以展开一个对象
      const obj = {
        name: 'zs',
        age: 18,
        gender: '男'
      }

      const obj1 = {
        money: 100,
        house: '房子'
      }

      const obj2 = {
        ...obj,
        ...obj1,
        sayHi() {
          console.log('哈哈')
        }
      }
      console.log(obj2)

函数-箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

为什么叫Arrow Function？因为它的定义用的就是一个箭头：

基本使用

var fn = function(x, y) {
    console.log(x + y);
}

相当于
//语法： (参数列表) => {函数体}
var fn = (x, y) => {
    console.log(x + y);
}

参数详解

如果没有参数列表，使用()表示参数列表

var sum = () => {
    console.log('哈哈')
};
// 等同于：
var sum = function() {    
    console.log('哈哈')
};

如果只有一个参数，可以省略()

// 等同于：
var sum = function(n1) {    
    console.log('哈哈')
};

var sum = n1 => {
    console.log('哈哈')
};

如果有多个参数，需要使用()把参数列表括起来

var sum = function(n1, n2) {    
    console.log('哈哈')
};

var sum = (n1, n2) => {
    console.log('哈哈')
};

返回值详解

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来

var sum = function(n1) {    
    console.log('哈哈')
};

var sum = n1 => {
    console.log('哈哈')
};

如果函数体只有一行一句，那么可以省略{}和return

var fn = function(n1, n2) {
    return n1 + n2;
}

var fn = (n1, n2) => n1 + n2;

箭头函数的注意点

箭头函数内部没有this，因此箭头函数内部的this指向了外部的this
箭头函数不能作为构造函数，因为箭头函数没有this

默认参数

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

Set 数据类型

let arr = [1, 2, 3, 4, 2, 3, 5 ] 如何去重？

// 答案：
arr = [...new Set(arr)];

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用 ,　ES6提供了新的数据类型Set**，**Set对象不是数组，可以用来保存对象或者基本类型，所有保存的值都是唯一的

let set = new Set();
set.add(1)  // {1}
set.add(2)  // {1, 2}
set.add(1)  // {1, 2}
//或者 
let set = new Set([1,2,3,4,4,4,4,4]);
console.log(set) // Set(4)  {1, 2, 3, 4} -->对象
console.log([...set]); //输出：[ 1, 2, 3, 4 ]  --> 数组