ECMAScript 6

ES6 :ESMAScript 6,新的javascript语法标准 2015正式推出 为了js更加快捷与方便

新增

let

局部变量

1. 局部作用域,(在一对{}启用)
2. 不能变量提升
3. 在一个作用域里面不能重复声明

const

常量

1. let 一样
2. 变量名建议大写
3. 声明必须赋值
4. 值类型不允许修改

for (let i = 0; i < 2; i++) console.log(i); //输出: 0,1
			const ARR = [5, 6];
			ARR.push(7);
			console.log(ARR); // [5,6,7]
			ARR = 10; // TypeError报错

解构

数组
[] 解构符号, 一位 …rest 剩余 c=10 默认参数 (有顺序的)

var [a,b,,c=20,...rest] = [1,2,3,4,5,6];

对象
{} 符号 没有顺序 …rest 剩余

// let o = {
			// 	p: 42,
			// 	q: true
			// };
			// let {
			// 	p,
			// 	q
			// } = o;
			// console.log(p, q);//解构赋值
			// console.log(o);//原对象不变
let {
				a = 10, b = 5
			} = {
				b: 3
			};
			console.log(a, b);// 10 3  传入的对象 只有一个属性名一样的键值对 则只匹配一样的

字符串ES6扩展方法

trim移除空白

var str2=" 5231 ";
			console.log(str2.trim());//去除两端空白

repeat重复

var r, arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
			r = arr.filter(function(element, index, self) {
				return self.indexOf(element) === index;
			});

includes查找是否包含

var arr1=[1,2,5,4];
			console.log(arr1.includes(5));//true

startsWith 以…开头 endsWith以…结尾

var str2="五星红旗迎风飘扬";
			console.log(str2.startsWith("五星"));//开头 true
			console.log(str2.endsWith("五星"));//结尾 false

字符串模板

var a=1;
var b=2;
var str=`${a+b}`;//3

字符串扩展方法

for of遍历

for(let s of str){
  console.log(s)
}

indexOf,lastIndexOf :返回值下标|-1

includes(查找字符串) true | false

console.log("number", [1, 2, NaN].includes(2));
			console.log([1, 2, 3, 4, 5, 6].find(function(item) {
				return item > 3
			}))

startsWith(查找字符串) true | false

endsWith(查找字符串) true | false

repeat(重复的次数)

console.log("fill7", [1, "a", null].fill(7));//7 7 7
			console.log("fill7", [1, "a", null,2].fill(8, 1, 3));//从第一个开始 填充到3的位置 8
			// .制定开始和结束位置填充。实际填充结束位置是前一位迭代器遍历

padStart(填充总位数,填充字符串)

var a=x
a.padStart(5, 'ab') // 'ababx'
a.padStart(4, 'ab') // 'abax'

padEnd(填充总位数,填充字符串)

var a=1
a.padStart(3, '0') // "001"
a.padStart(4, '0') // "0001"

拼接

var  str = `啦啦啦啦啦啦${num}?`

数组新增方法

去重

var r, arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
			r = arr.filter(function(element, index, self) {
				return self.indexOf(element) === index;
			});

映射

// map
			// 把Array的所有数字转为字符串
			var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
			arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

reduce

//计算数组累计和
var arr = [1, 3, 5, 7, 9];
			arr.reduce(function(x, y) {
				return x + y;
			}); // 25

filter过滤

ar arr = [1, 2, 4, 5, 6, 9, 10, 15];
			var r = arr.filter(function(x) {
				return x % 2 !== 0; //删除偶数
			});
			r; // [1, 5, 9, 15]

Array.from 把类数组对象转换为数组

let p = document.querySelectorAll("p");
			let parr = Array.from(p);
			parr.forEach(function(item) {
				console.log(item.textContent);
				console.log(item);
			})

函数

箭头函数

箭头左边:参数
箭头右边:返回值
例:function(str){return “love”+str;}
箭头函数:str => “love”+str;

参数

(0个或多个参数要用括号包括)

返回值

如果返回是一个对象,那么用括号包裹

执行语句:

如果执行有多行,返回语句要用return 执行语句要用{} 包裹

函数参数

//扩展参数(执行)
//传统方法
function metting(a1,a2,a3){}
var  arr = ["A","B","D"];
// metting(arr[0],arr[1],arr[2])
// metting.apply(null,arr);
metting(...arr);
//不定参数方法
function add(...list){
  return  list.reduce((a,b)=>a+b);
  //retrun  Array.from(arguments).reduce((a,b)=>a+b)
}

class 类

extends 继承

super 父构造函数(要在所有方法最前面执行)

constructor 构造函数

this 指向实例

static 静态的

new Box() 实例化类