美文网首页
JavaScript学习笔记

JavaScript学习笔记

作者: 乌云老思 | 来源:发表于2019-05-30 16:20 被阅读0次

几点注意:

  • Javascript不用写分号,写也可以。
  • script标签按标准应该写在<head></head>里面或者</body>前面,如果写在</body>后面,浏览器会自动改到里面,使用上不会有影响(不会解决任何bug)。
  • var特点:声明前置(预解析)——无论在前后哪里声明,都会放在最前面,声明函数的时候好用;无视低级作用域——只被函数作用域限制。ES6的let可以解决这些问题。

ES6

  • let局部变量
  • "${value}":字符串中使用这个可以代表嵌入变量,代替之前的""+value+"".
  • 箭头函数:var func = (para) => {}函数体可用常规的也可以直接写返回值
  • 面向对象——类
// 本质上还是一个function,继承用extends
class Person extends Animal{
    // 静态成员
    static str = "静态数据"
    // 构造函数,可省略
    constructor(name){
    // 子类要在此加一个super,可以拿到父类包括静态的所有成员,也可用传参
        super(name)
    // 用this代表实例对象的成员,可以在此写函数
        this.name = name
    }
    // 方法,放在原型上面(__proto__),公用空间,相当于静态
    action(){
        // 可以先执行父类的成员方法
        super.action()
        console.log(this.name)
    }
}

简单输出:

  • 弹窗:
    alert("str"+value);
  • 文档内:
    document.write("Hello World!"+value);
  • 控制台
    console.log('')

Switch 语句

请使用 switch语句来选择多个需被执行的代码块之一。

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 

重要数据结构

字符串

字符串字面量(直接量):

var str1 = '123abc'

字符串变量类型本身不含方法,但可以直接使用方法,因为使用的是字符串对象的方法(包装方法)。

字符串对象:

var str2 = new String('123abc')

是一种类似数组,属性和方法与数组类似,但比数组少一些方法。
console.log(str1,str2)通过输出可以看到,str1就是一个字符串,str2更像数组。二者都可以像数组一样用str[index]取其中的元素,也可以用str.charAt(index=0)兼容IE8以下。
字符串变量和字符串对象用法基本一样,平时使用不推荐用字符串对象。

字符串比较:
var c1 = '中'
var c2 = '文'
console.log(c1 > c2)
比较的是unicode

字符串方法 描述
str.charCodeAt(index=0) 查看unicode值
String.fromCharcode(unicode1,unicode2) 参数是unicode码,可以放多个
str.indexOf(str0[,index]) 查找是否有对应的字符串str0,如果有返回第一次出现的索引值;如果没有返回-1。可选参数index,查找起点
str.lastIndexOf(str0[,index]) 同上,从后往前查找

数组

虽然叫array,但功能很多,可以储存多种类型的变量,相当于list,也可以叫列表

新建数组:

var infos = new Array();(不推荐)
或者
var infos = []

数组长度

arr.length

数组方法[1]

常用:


数组属性,返回

查找

arr.indexOf(item[,startIndex])
从左往右查找item,找到返回第一次出现的索引,找不到返回-1。从startIndex开始查找,如果不填就是0.

数组连接

arrayObject.concat(arrayX,......)
连接两个或多个数组。

  • arrayX 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。添加的是数组中的元素,而不是数组。

数组切片

arrayObject.slice(start,end)
数组切片.返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。原来的数组不改变。

  • start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
  • end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。 如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

添加/移除

arrayObject.splice(startIndex[,howmany,item1,.....,itemX])
数组元素添加/移除。可删除从 startIndex 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

  • index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
  • howmany 可选。要删除的项目数量。如果不设置此值,则从index处删除后面的所有。如果设置为 0,则不会删除项目。
  • item1, ..., itemX 可选。向数组startIndex的位置添加的新元素。

ES6和数组

ES6的展开运算符写成...的形式,可以用于数组复制和类数组转化数组。

var arr1 = [1,2,3]; //如果arr是类数组也可以
var arr2 = [...arr]; //ES6的展开运算符(性能稍高)
var arr2 = Array.from(arr); //ES6

如果直接把旧数组赋值给新数组,只会将引用传递过去,这样改变新数组时旧数组的内容也会变。
类数组缺少一些数组的方法,如果要使用那些方法,要先用上面的方式转化成数组。

JS类型转换

ECMAScript中可用的3种强制类型转换如下:

  1. Boolean(value)——把给定的值转换成Boolean型;
  2. Number(value)——把给定的值转换成数字(可以是整数或浮点数);
  3. String(value)——把给定的值转换成字符串。

字符串转数字:

方案一代码: Number(str)

方案二代码: parseInt(str)parseFloat()

第二个方法有两个参数,第一个参数就是要转换的对象,第二个参数是进制基数。不写默认十进制。
注意: parseInt方法在 '00'开头的数字是会当做2进制转10进制的方法进行转换('0x'开头是16进制,'0'开头是8进制)。所以建议string转int类型最好用Number方法;

数字转换成字符串

方案一代码:String(value)

方案二代码:

var i = 10;
var s = i.toString();
alert(typeof s); //将输出 String

字符串(json)与对象的转换

var obj = JSON.parse(str)
var str = JSON.stringify(obj)

对象

判断对象中是否有某个键

  1. myObj.hasOwnProperty('myKey');
  2. if ('key' in myObj)

获得对象的键数组或值数组:
Object.keys(myObj)
Object.values(myObj)

获得对象的长度大小
Object.keys(myObj).length

删除一个键值对

  1. delete myObj.myKey
  2. delete myObj[myKey]

通信

上传文件

在网页中,从本地目录添加

 <!-- 添加 s -->
<!-- [ATTENTION!!] 切换 .on -->
<div data-action="upload" >
    <input id="_upload_html5_input" 
    name="file" 
    type="file" 
    multiple="multiple" 
    aria-label="上传文件,按空格选择文件。" 
    style="display: none;" />
    <label for="_upload_html5_input">
        <span class="btn btn-l btn-upload">
            <img src="文件按钮.jpg" width="103" height="73" alt=""/>
        </span>
    </label>
    
  
<pre>菜单</pre>
</div>

AJAX

共分为四个步骤:

  • XMLHttpRequest对象的创建
  • 开启请求
  • 返回数据后程序行为的绑定
  • 发送

步骤一、三:

let xhr=new XMLHttpRequest();  // 创建对象
xhr.onreadystatechange=function(){   // 行为的绑定,onreadystatechange这个方法每次状态改变都调用
    if (xhr.readyState==4 && xhr.status==200)
    {  // 判断当前状态是服务器响应成功,则修改UI
    document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
  }
xhr.onload = () => {  // 行为的绑定的另一种形式,只在服务器响应成功后调用
    console.log(xhr.responseText)
}

步骤二、四:

  • GET请求,如果希望通过 GET 方法发送信息,则向 URL 添加信息(query string或者直接带参数):
xhr.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xhr.send()

open()中的最后一个参数写true代表同步,false代表异步。

  • POST请求,如果需要像 HTML 表单那样 POST 数据,使用 setRequestHeader() 来添加 HTTP 头,然后在 send() 方法中规定希望发送的数据:
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");

setRequestHeader表示向HTTP协议头中添加信息,以上代码意味着添加一条CONTENT-TYPE:application/x-www-form-urlencoded,含义是表示客户端提交给服务器文本内容的编码方式是URL编码,即除了标准字符外,每字节以双字节16进制前加个“%”表示。当然还有其他编码方式,如:CONTENT-TYPE:multipart/form-data可以通过表单上传文件图片等。
一个使用例子:

let xhr = new XMLHttpRequest()
xhr.open('get','/check?username=123','true') // true同步,false异步
xhr.onload = () => {
    console.log(xhr.responseText)
}
xhr.send()

form表单用Ajax提交数据

正常情况下form表单不能通过Ajax提交数据,因为其有自动提交自动跳转的功能。有一个方法可以取消自动提交和跳转,改为手动使用Ajax,等返回成功信息后再跳转。

<form>
姓名:<input class="inputStyle" type="text" name="username" /><br />
密码:<input class="inputStyle" type="password" name="pwd" /><br />
  <input class="loginStyle" type="submit" value="登录" />
</form>
// 使用form.onsubmit,不要使用form.submit
form.onsubmit = (ev) => {
    console.log(form[0].value,form[1].value)
    let xhr = new XMLHttpRequest()
    xhr.open('post','/login')
    xhr.onload = () => {
        const res = JSON.parse(xhr.response);
        console.log(res);
            if(res.message='success'){
            // 如果正常收到了信息,再使用location.href跳转
            location.href = '/photo.html'
        }else{
            console.log("err")
        }
    }
    xhr.setRequestHeader("content-type", "application/json");
    xhr.send(JSON.stringify({
        username:form[0].value,
        password:form[1].value
    }))
// 让form的onsubmit返回false,可以取消自动提交和跳转
    return false
}

  1. JavaScript Array 对象-w3school

相关文章

网友评论

      本文标题:JavaScript学习笔记

      本文链接:https://www.haomeiwen.com/subject/qyxvtctx.html