首页 💂H5-css3

基本介绍

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

会大量用到ES6中的一些新语法,es6中提供的新语法

javascript的诞生

  • 1992年底,美国国家超级电脑应用中心(NCSA)开始开发一个独立的浏览器,叫做 Mosaic。这是人类历史上第一个浏览器,从此网页可以在图形界面的窗口浏览。
  • 1994年10月, Netscape (网景)公司,就是在 Mosaic 的基础上,开发面向普通用户的新一代的浏览器 Netscape Navigator。
  • 1994年12月,Navigator 发布了1.0版,市场份额一举超过90%。
  • Netscape 公司很快发现,Navigator 浏览器需要一种可以嵌入网页的脚本语言,用来控制浏览器行为。 因为当时网速特别的慢,很多表单的校验不适合放在服务器端进行校验。管理层对于这种脚本语言的设想是:功能不需要太强大,语法要简单,容易学习和使用
  • 1995年,Netscape 公司雇佣了程序员Brendan Eich 布兰登·艾奇 开发这种网页脚本语言。
  • 1995年5月,Brendan Eich 只用了10天,就设计完成了这种语言的第一版,叫做LiveScript。它是一个大杂烩,语法有多个来源。

    • 基本语法:借鉴 C 语言和 Java 语言。
    • 数据结构:借鉴 Java 语言,包括将值分成原始值和对象两大类。
    • 函数的用法:借鉴 Scheme 语言和 Awk 语言,将函数当作第一等公民,并引入闭包。
    • 原型继承模型:借鉴 Self 语言(Smalltalk 的一种变种)。
    • 正则表达式:借鉴 Perl 语言。
    • 字符串和数组处理:借鉴 Python 语言。
  • 为了保持简单,这种脚本语言缺少一些关键的功能,比如块级作用域、模块、子类型(subtyping)等等,但是可以利用现有功能找出解决办法。 后果:对于其他的编程语言,你需要只需要学习该语言提供的各种语法即可。对于javascript,你需要学习解决问题的各种模式,比如原型,原型链实现继承,闭包等等
  • 1995年 12月,Netscape 公司与 Sun 公司合作,后者允许将这种语言叫做 JavaScript。把LiveScript改名成了Javascript
  • 注意:javascript实质上和java没有什么关系

ECMAScript与Javascript的关系

1996年11月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript ,这个版本就是1.0版。

该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript ,有两个原因。一是商标,Java是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA ,不是 Netscape ,这样有利于保证这门语言的开放性和中立性。

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

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

ECMAScript版本历史

  • ES1.0, 1997年06月发布
  • ES2.0, 1998年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....
  • 参考书籍: https://es6.ruanyifeng.com/

ES5-数组的新方法

forEach

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

应用场景:为一些相同的元素,绑定事件处理器!

需求:遍历数组["张飞","关羽","赵云","马超"]

var arr = ["张飞","关羽","赵云","马超"];
//第一个参数: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){
  if(element > 5000) {
    return false;
  }else {
    return true;
  }
});
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);
  if(element %2 == 1){
    return true;
  }else {
    return false;
  }
});
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);
    if(element %2 == 0){
      return true;
    }else {
      return false;
    }
  });
  console.log(flag);//false

reduce

**reduce()** 方法对数组中的每个元素执行一个由您提供的reducer函数,将其结果汇总为单个返回值

语法:reduce(callback, initValue)

callback: 每个元素都会执行一次的回调函数

initValue: 初始值

callback的4个参数

  • prev: 上一次的值,第一次为初始值
  • item: 当前值
  • index: 下标
  • arr: 数组

案例:计算数组所有值的和

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 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法)。


  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'

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

`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`

字符串模版的优点

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

字符串方法

  • 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);

findexIndex

findIndex是ES6新增的语法

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

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

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

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

includes

函数-箭头函数

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;

案例

  1. 有一个数组[1,3,5,7,9,2,4,6,8,10],请对数组进行排序
  2. 有一个数组['a','ccc','bb','dddd'],请按照字符串长度对数组进行排序
  3. 有一个数组,[57,88,99,100,33,77],请保留60分以上的成绩,返回一个新的数组

箭头函数的注意点

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

【定义一个对象,定时器打招呼】

苦口婆心一下:箭头函数刚开始用,肯定会有点不习惯,但是任何东西都有一个习惯的过程,慢慢接受就好了,多用,多练

默认参数

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

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

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

对象

简写

属性简写

方法简写

class和extends

综合大练习

给定一个数组

let list = [
  // wu: 武力    zhi:智力
  { id: 1, name: '张飞', wu: 97, zhi: 10 },
  { id: 2, name: '诸葛亮', wu: 55, zhi: 99 },
  { id: 3, name: '赵云', wu: 97, zhi: 66 },
  { id: 4, name: '周瑜', wu: 80, zhi: 98 },
  { id: 5, name: '吕布', wu: 100, zhi: 8 },
  { id: 6, name: '司马懿', wu: 30, zhi: 98 }
]
  • 求数组中所有英雄的武力平均值
  • 得到一个新数组,只保留英雄的名字, ['张飞', '诸葛亮', '赵云', '周瑜', '吕布', '司马懿']
  • 得到一个新数组,新数组中只保留武力值超过90的英雄
  • 删除数组中名字为周瑜的英雄
  • 判断数组中所有英雄的武力是否都超过60, 最终打印结果: 全是猛将 还有弱鸡 使用两种方式实现
  • 删除数组中名字叫所有智力低于60的英雄
  • 找到数组中id为2的英雄,求他的武力+智力的综合
    
    const inventors = [
      { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
      { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
      { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
      { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
      { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
      { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
      { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
      { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
      { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
      { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
      { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
    ];

    要求1:筛选出生日期在16世纪(1500-1599年)的发明家。
    要求2:列出发明家的名和姓的数组。[{first: '', last: ''}]
    要求3:根据发明家的出生日期,按照从大到小的顺序进行排序。
    要求4:所有的发明家一共活了多少岁。
    要求5:按照发明家的年龄大小排序


文章评论

目录