es5和es6的一些基础知识

基础知识"/>

es5和es6的一些基础知识

es5和es6

es5

ECMAscript 5 2009年发布的

严格模式

普通编码的话叫做怪异模式

'use strict'

1,检查代码,消除语法的一些不合理,不严谨之处

2,消除一些代码运行的不安全之处,保证代码运行的安全

3,提高编译器效率

特点:

1,不可以省略var声明变量

2,不支持八进制

3,禁止使用this关键字指向全局变量

4,不允许在非函数的代码块内声明函数

5,arguments变量的形参不同步

bind

将这个函数绑定给一个对象,那么这个函数里的this就会指向这个对象

var user = {username: '张三'}function fn() {console.log(this.username);}//bind将这个函数绑定给一个对象,那么这个函数里的this就会指向这个对象//函数对象.bind(绑定的对象)()fn.bind(user)() //张三var obj = {print: function() {console.log(this.username);}}obj.print.bind(user)() //张三setInterval(obj.print.bind(user), 2000) //每两秒打印一次张三(定时器自动调用函数,所以不用加()调用了)</script>

数组的高阶函数

以函数作为参数的函数是高阶函数

静态方法isArray

参数为任意类型

Array.isArray()//检查是否为数组类型,返回布尔类型

forEach和map

forEach

遍历的函数,没有返回值(改变原数组)

map

遍历的函数,有返回值,返回新数组(不改变原数组),且返回的数组长度一定与原数组一致

var arr = [1, 2, 3]console.log(Array.isArray(arr)); //判断是否是一个数组,返回布尔类型//以函数作为参数的函数是高阶函数//forEach   遍历的函数,没有返回值(改变原数组)arr.forEach(function(value, index, array) {//第一个参数表示值,第二个表示下标(可以省略),第三个表示遍历的数组(可以省略)console.log(value);console.log(index);console.log(array);array[index] = value + value})//map   遍历的函数,有返回值,返回新数组(不改变原数组),且返回的数组长度一定与原数组一致var newArr = arr.map(function(value, index, array) {return value + value})console.log(arr);console.log(newArr);

filter 和reduce 和reduceRight

filter 过滤

reduce 计算方法 从左到右

如从左加到右

reduceRight 从右到左

如从右加到左

var arr = [1, 2, 3, 4, 5, 6]//filter 过滤,返回值为数组  里面指定是一个函数var newArr = arr.filter(function(value, index, array) {if (value >= 4) {return value}})console.log(newArr);var strArr = ['abcabd', 'abc', 'erd', 'dfg']var newStrArr = strArr.filter(function(value, index, array) {if (!/abc/.test(value)) {return value}})console.log(newStrArr);var newStrArr1 = strArr.filter(function(value, index, array) {if (index % 2 == 0) {return value}})console.log(newStrArr1);//reduce    计算方法    从左加到右var arr1 = [1, 2, 3, 4, 5]//第一个参数是上一个值,第二个参数是当前值,第三个参数是当前下标,第四个参数是遍历的数组var newArr1 = arr1.reduce(function(preValue, currentValue, currentIndex, array) {return preValue + currentValue})console.log(newArr1);//reduceRight   从右加到左var arr2 = ['a', 'b', 'c']var newArr2 = arr2.reduceRight(function(preValue, currentValue, currentIndex, array) {return preValue + currentValue})console.log(newArr2);

every和some

every

遍历每一个是否都符合条件,返回值是布尔类型

some

是否有符合条件的,返回值是布尔类型

//every 遍历每一个是否都符合条件,返回值是布尔类型var numberArr = [1, 2, 6, 9, 10]var isTrue = numberArr.every(function(value, index, array) {return value > 0})console.log(isTrue);//some  是否有符合条件的,返回值是布尔类型var isTrue2 = numberArr.some(function(value, currentIndex, array) {return value > 9})console.log(isTrue2);

now

针对日期,新增now,获取当前日期离1970年1月1日0时0分0秒的毫秒值

var n = Date.now()console.log(n);

ES6

var与let与const关键词

var

全局变量

let

let关键词,不能重复命名(在同一作用域),作用方法只在模块内

//var 全局变量for (var i = 0; i < 3; i++) {console.log(i); //0,1,2}//let关键词,不能重复命名(在同一作用域),作用方法只在模块内for (let j = 0; j < 3; j++) {console.log(j); //0,1,2}console.log(i); //3  可以打印console.log(j); //出错,不可以打印

const关键词

const关键词 声明常量(不能变的量),一般在全局声明 不能二次赋值,不能重复命名

const a = 10

箭头函数(提升效率)

自身没有this,里面写的this会向上找,都没有就找到window

没有argument

var fn = (参数)=>{

​ 只有一个参数时可以省略(),只有一句代码执行可以省略{}

代码

}

var box = document.getElementById('box')var fn1 = name => console.log(name + '你在吗');fn1('刘德华')

es6 对应string的增强

indexOf

检索是否包含某个内容 indexOf (存在返回第一个下标,不存在返回-1)

includes

检索是否包含某个内容 includes,返回布尔类型

let str = 'hello'
console.log(str.includes('he')); //true
//第二个参数是从什么位置开始找console.log(str.includes('he', 0)); //false

endsWith

结束是否为传递值 返回布尔类型

let str = 'hello'
console.log(str.endsWith('he')); //false
console.log(str.endsWith('he', 2)); //true    不包含指定的下标

startsWith

是否为开始的值 返回布尔类型

let str = 'hello'
console.log(str.startsWith('he')); //true
//第二个参数是结束的下标    包含指定的下标
console.log(str.startsWith('he', 1)); //true

repeat

平铺,返回一个新string,参数为个平铺个数

let str = 'hello'
var newStr = str.repeat(2)
console.log(newStr); //hellohello

es6对数组的增强(静态方法)

Array.of

返回一个新的数组,将指定的元素组成一个新的数组

let arr = [1, 2, 3]
var newArr = Array.of('a', 'b', 'c')console.log(newArr);

…

扩展运算符 可以打开对应的数组取出里面的内容

let arr = [1, 2, 3]
var newArr = Array.of('a', 'b', 'c')
var newArr1 = Array.of(...arr, ...newArr)console.log(newArr1);
var objArr = [{age: 18,name: 'jack'}, {age: 19,name: 'tom'}]console.log(objArr[1]);console.log(...objArr); //返回全部

Array.from

可以将类似数组的类型转为数组

    <a href="">1</a><a href="">2</a><a href="">3</a><script>var htmlColltion = document.getElementsByTagName('a')var newArr3 = Array.from(htmlColltion)console.log(newArr3);//添加第二个参数    进行map遍历var newArr4 = Array.from(htmlColltion, function(value, index, array) {var n = Number(value.innerText)if (n % 2 == 1) {value.href = ''} else {value.href = ''}return value})console.log(...newArr4);</script>

find 查找

let strArr = ['a', 'b', 'c']var str = strArr.find(function(value, index, array) {return value > 'a'})console.log(str); //b

findIndex

查找下标,找到返回第一个下标,找不到返回-1

let strArr = ['a', 'b', 'c']var str1 = strArr.findIndex(function(value, index, array) {return value > 'a'})console.log(str1); //1

for in与for of

for of 是es6新增 不能遍历对象

因为数组属于对象,所以for in可以遍历数组 一般遍历数组用for of,遍历对象用for in

forEach是方法,不是循环,不可以用continue break return

var arr = ['a', 'b', 'c']var user = {name: 'jack',age: 18,sex: '男'}for (let i in arr) {console.log(i); //       for in 遍历数组时i表示下标console.log(arr[i]);}for (let i in user) {console.log(i); //for in    遍历对象时i表示键console.log(user[i]);}for (let v of arr) {console.log(v); //for of 遍历时v表示值}for (let k of arr.keys()) {console.log(k); //抽取数组里面的键作为一个数组}for (let v1 of arr.values()) {console.log(v1);//抽取数组里面的值作为一个数组}for (let v2 of arr.entries()) {console.log(v2);    //抽取数组里面的键和值作为一个数组}

指定参数默认值

没有指定时

var fn = name => {console.log(name);}fn('张三') //张三fn() //打印默认值,也就是undefined

指定默认值时

var fn1 = function(name = 'jack') {console.log(name);}fn1('李四') //李四fn1() //jack

箭头函数指定默认值

里面的参数指定默认值时必须要带上()

var fn2 = (name = 'rose') => {console.log(name);//rose}
fn2() //调用

求幂方 **

//以前
console.log(Math.pow(5, 2));
//**
console.log(5 ** 2);

使用箭头函数简写

var arr = [1, 2, 3]//使用箭头函数简写var newArr = arr.reduce((pre, v) => {return pre + v})console.log(newArr); //6

es6新增object里的

属性简写,方法简写(简写要写在对象中)

方法简写

//正常var obj = {name: 'jack',fn: function() {console.log(this.name);}}
//方法简写var obj1 = {name: 'rose',fn() {console.log(this.name);}}

属性简写

var newObj = new Object()// 正常newObj.obj = objconsole.log(newObj);console.log(newObj.obj);//属性简写newObj = {obj}console.log(newObj);console.log(newObj.obj);

拼接

//属性名拼接let object = {}object['a' + 'ge'] = 18console.log(object.age); //18
//方法名拼接object = {['say' + 'hello']() {console.log('你好');}}object.sayhello() //你好

object.is的静态方法

判断两个对象是否是一个

        var str = 'a'var str1 = 'a'console.log(str === str1); //trueconsole.log(Object.is(str, str1)); //true
//Object.is方法和===的区别
//区别1console.log(NaN === NaN); //falseconsole.log(Object.is(NaN, NaN)); //true
//区别2var i = +0var j = -0console.log(i === j); //trueconsole.log(Object.is(i, j)); //false

Object.assign 静态方法(对象合并)

提取对象的所有属性和方法,合并为一个对象,返回这个新对象

//提取属性var newObj1 = Object.assign({a: 'a'}, {b: 'b'}, {c: 'c'})console.log(newObj1); //{a:'a',b:'b',c:'c'}
//提取方法var a = {click() {console.log('hello');}}var b = {click2() {console.log('world');}}console.log(Object.assign(a, b));Object.assign(a, b).click()

新增的数据结构(对象)

set

set构建使用new关键词 里面可以传参数(数组),可以不传 set没有下标

里面存储的数据不能重复,有重复会自带删除重复的

var set1 = new Set()console.log(set1);//set存在增删改查//增var set2 = set1.add('a')set2.add('a') //这个数据时重复的,会被自动删除console.log(set2);set2.add('b')//删set2.delete('a') //删aset2.clear() //清空console.log(set2);set2.add('c')set2.add('d')set2.add('e')//size属性  个数       console.log(set2.size);//has   判断是否存在,返回布尔类型console.log(set2.has('c')); //true//有keys,values,entries方法,所以时类数组,可以用from转成数组console.log(set2.keys());console.log(set2.values());console.log(set2.entries());var set2Arr = Array.from(set2)console.log(set2Arr);//forEach   跟数组的forEach一样,遍历,但是键不允许重复set2.forEach((v, v1, set2) => {//v表示值,v1表示键,set2指向本身遍历console.log(v);})

map

map是一个键值对 键可以是任意类型 值也可以是任意类型

        let map = new Map()console.log(map);//添加数据有set方法var keyObj = {age: 18}var valueObj = {name: 'jack'}map.set(keyObj, valueObj)console.log(map);//使用get获取,通过键获取值console.log(map.get(keyObj));//删除方法 delete   根据键来删除map.delete(keyObj)console.log(map);//重复添加键    覆盖之前的,相当于改值map.set(keyObj, valueObj)map.set(keyObj, 'hello')console.log(map);//删除所有  clear// map.clear()//has   判断有没有这个键    返回布尔类型console.log(map.has(keyObj));//因为map也有keys,values,entries方法,所以也是类数组,可以用from转成数组//将map转为数组时,会把键和值分别作为数组的元素var mapArr = Array.from(map)console.log(mapArr);

//map在构建的时候,如果需要传递参数,那么也可以传递一个数组,但必须是二维数组var arr = [[1, 2],[2, 3],[3, 4]]let arrMap = new Map(arr)console.log(arrMap);

解构

解除构造,打开拿到里面的内容,解构不成功,返回undefined

        //数组var arr = [1, 2, 3] //原本写法var [a, b, c] = [1, 2, 3] //1对应a,2对应b,3对应c//对象var obj = {x: 10,y: 20} //原本写法var {x,y} = {x: 10,y: 10} //将对象构造解除,进行一对一赋值//函数function fn(arr) {return arr[0] - arr[1]} //原本写法function fn1([x, y]) {return x - y}console.log(fn([2, 1]));console.log(fn1([2, 1]));

class类

对象的模板 借助他可以生成对应的对象 抽取对应的公共特点

实际这个class其实是一个function

        class Student {constructor(name, sex) { //构造方法this.name = namethis.sex = sex}eat() {console.log(this.name + '吃饭');}}var stu1 = new Student('张三', '男') //通过对应的构造函数来构建对象console.log(stu1.name); //张三stu1.eat() //张三吃饭var stu2 = new Student('李四', '男')console.log(stu2.name); //李四stu2.eat() //李四吃饭class car {constructor(name, speed) {this.name = namethis.speed = speed}run() {console.log(this.name + '在跑,时速为' + this.speed);}}var car1 = new car('跑车', '250km/h')car1.run()//继承  extends 继承可以获取父辈的非私有内容  class classStudent extends Student {constructor(name, sex) {super(name, sex) //指向父亲的构造}}var studentson = new classStudent('王五', '男')studentson.eat() //调用父类的eat方法,如果自己有eat方法就调用自己的

Symbol

Symbol是es6新增的类型 是个值类型,独一无二的值

        let a = Symbol()let b = Symbol()console.log(a == b); //falese  //里面可以传参,里面的参数是string类型或者number类型let c = Symbol('hello')let d = Symbol('hello')console.log(c == d); //false//通过键构建一个Symbol类型,如果没有这个键的Symbol就会创建一个全局变量,如果有就会找到它let e = Symbol.for('ok') //通过键构建一个Symbol类型let f = Symbol.for('ok') //已经有ok键的Symbol类型,所以是找到它console.log(e == f); //true//通过keyFor获取key   console.log(Symbol.keyFor(e)); //ok//iterator获取迭代器    可以进行数据迭代,也就是数据遍历console.log(Symbol.iterator);//Symbol一般用来作为枚举类型的值使用//枚举var sex = {b: '男',g: '女'}