前端一些知识点

es6的特性

es6很多地方和python3特别像 有很多相通的地方

1.变量声明const和let 不会被变量提升

块级作用域 即只在{}内部可以访问 不会污染环境变量

2.模板字符串 类似于python

字符串插值 使用时注意反引号``代替了引号''

const name = '哪有剧本'

console.log(`hello $(name)`) //hello 哪有剧本

多行字符串 注意使用反引号

const template = `<p>

test多行字符串

<p/>`

3.函数

现在可以给函数传递一个默认参数了，就如同python函数一样的作用

function fun(obj='123'){

console.log(obj)

}

4.箭头函数 =>

不需要function关键字创建函数

省略了return

继承上下文的this

    [1,2,3].map(x=>x+2)

等同于下面的

    [1,2,3].map((function(x){

        return x+2

        }).bind(this))

一种常用写法

当你的函数有且仅有一个参数时，可以省略括号()

当你的函数返回有且仅有一个表达式时，可以省略大括号{}

let people = name => 'hello' +name

let peoplee = (name,age) => {

    const fullname = 'God' +name

    return fullname

}//这里不可以缺少括号或者大括号

5.扩展的对象功能

function people(name,age){

    return{

        name:name,

        age,age

}}

相当于es6中的（es6中如果键值对重名了，允许简写成下面这样）

function people(name,age){

    return{

        name,

        age

}}

es6还改进了对象字面量赋值的语法

const ppp = {

    name:'哪有剧本',

    getname:function(){

        console.log(this.name)

    }

}

es6中是这样赋值的 去掉了function关键字，可以看出 function在es6中被diss的程度

const ppp = {

    name:'哪有剧本',

    getname(){

        console.log(this.name)

    }

}

6.更方便的数据访问，解构

const po = {

    name:'哪有剧本'，

    age：18

}

在es6中可以这样解构

let {name, age} = po//按关键字

console.log(`${name}----${age}`)

还可以按位置

const op=['first','second']

let [f,s]=op

7.import和export

import 导入模块 export导出模块

    1)当用export default people导出时，导入使用import poeple from '...'

    2)在一个js文件中只能有一个export default,但是可以有多个export

    3)当用export people导出时，使用import {people} from '...'导入

    4)当一个文件既有export default和export时，使用import people,{name1,name2} form '...'

    5)当一个文件中有很多export时，可以使用import * as obj from '...'导入全部，然后使用obj.xxx访问

8.Promise

用于异步请求，给你一个承诺，成功了dosomething，失败了doanotherthing

更多详细了解

 ajax底层的实现

核心--XMLHttpRequest对象 即XHR

什么是XMLHttpRequest
XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信，这就是我们熟悉的AJAX。

早期，各个浏览器的实现都不同，HTML5之后，W3C进行了统一。

属性

 
readyState
请求状态，开始请求时值为0直到请求完成这个值增长到4
responseText
目前为止接收到的响应体,readyState<3此属性为空字符串，=3为当前响应体，=4则为完整响应体
responseXML
服务器端相应，解析为xml并作为Document对象返回
status
服务器端返回的状态码，=200成功，=404表示“Not Found”
statusText

用名称表示的服务器端返回状态，对于“OK”为200，“Not Found”为400

方法

 
setRequestHeader()
向一个打开但是未发生的请求设置头信息
open()
初始化请求参数但是不发送
send()
发送Http请求
abort()
取消当前相应
getAllResponseHeaders()
把http相应头作为未解析的字符串返回
getResponseHeader()
返回http相应头的值
事件句柄
 
onreadystatechange

每次readyState改变时调用该事件句柄，但是当readyState=3有可能调用多次

js的实现

var Ajax={
    get: function(url, fn) {
        var xhr = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // readyState == 4说明请求已完成
                fn.call(this, xhr.responseText);  //从服务器获得数据
            }
        };
        xhr.send();
    },
    post: function (url, data, fn) {         // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  // 添加http头，发送信息至服务器时内容编码类型
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
                fn.call(this, xhr.responseText);
            }
        };
        xhr.send(data);
    }
}

类数组的概念

类数组首先是一个常规对象

类似于 var a = {}

其次 他的要满足key为number类型

最后 还要有length属性

举个例子

 a = {'0':'first','1':'second','2':'third',length:3}

当然这是标准的类数组

如果key值不是number类型，

例如 var b = {'key1':'gg',length:1}

但是有length属性也会被jq的isArrayLike判定为类数组，因为数组里那些不是number的都会变成undefined

所以有了这样的判定

1.有length属性

2.length属性的值为number类型 例如 length:1

function isArrayLike(){
    if(o&&
        typeof o === 'object'&&
        isFinite(o.length)&&
        o.length>=0&&
        o.length===Math.floor(o.length)&&
        o.length<4294967296 //2^32
        )
        return true;
    else
        return false;
}

在document.getElementsByTagName()会返回一个类数组

数组的方法

Array.join() 连接

    var a = [1,2,3]

    a.join() //'1,2,3'

    a.join('') //'123'

Array.reverse()倒序

Array.sort()排序 默认按照字母表顺序 可以接收一个匿名function声明排序方式

Array.concat()组合

    var a = [1,2,3]

    a.concat(4,5) //[1,2,3,4,5]

    a.concat([4,5]) //[1,2,3,4,5]

    a.concat(4,[5,[6,7]]) //[1,2,3,4,5,[6,7]]

Array.slice()切片

Array.splice()插入或删除元素 会修改原数组

Array.push()/Array.pop() 修改原数组

Array.unshift()/Array.shift() 在数组的头部添加/删除元素 返回数组长度

Array.toString()作用和Array.join()一样

ES5中的数组方法

forEach()遍历

map()映射 返回新数组

filter()过滤

every()每个 some()存在  检测

reduce() reduceRight()注入 折叠

indexOf() lastIndexOf() 从头找/从尾找 一个元素 返回位置

css的知识点

太杂了，以后补充