起风了

Appearance

JavaScript ​

JavaScript是一种运行在浏览器中的解释型的编程语言。MDN Web Docs查询函数的使用方法。

JavaScript有三种调用方式

html
<html>
    <head> </head>
    <body>
        <!-- 行内调用 -->
        <a href="javascript:alert('百度一下')" onclick="alert('百度一下')">百度一下</a>
        <!-- 加载完成后执行里面的函数 -->
        window.load=function(){

        }
        <!-- script标签中 -->
        <a class="google" href="#">Google一下</a>
        <script>
            const googleEl = document.querySelector(".google")
            googleEl.onclick = function(){
                alert("谷歌一下")
            }
        </script>

        <!-- 外部引用,HTML是逐行解析的,在使用时需要将引用的 JavaScript 文件放在 body 结束标签前面 -->
        <script src="./bing.js"> </script>
    </body>
</html>

注意：HTML是逐行解析的，在使用JavaScript时，需要将引用的 JavaScript 放在 body 结束标签前面，或者使用window.load=function(){}的方式告诉浏览器在界面加载完成之后进行执行里面的代码。

如果运行的浏览器不支持JavaScript, 通过 <noscript> 元素给不支持 JavaScript 的浏览器提供替代内容

html
<body>
    <noscript>
        <p>您的浏览器不支持或者关闭运行JavaScript</p>
    </noscript>
</body>

调试JavaScript在需要的地方打断点或者debugger

定义变量 ​

在 ES6 之前，JavaScript 可以先使用变量，再定义变量。这是因为浏览器在解析JavaScript代码之前会进行预处理操作,将当前JavaScript中所有定义变量和函数的代码放到最前面。

javascript
var x; // 如果初始化不赋值，默认值是undefined
var x = 1; // 表示定义一个变量x
let x = 1; // 在ES6之后，使用let表示定义一个变量 
const x = 1; // 表示定义一个常量x

strict模式: 如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量。不同页面的js代码如果有同一个全局变量，会被互相影响变得难以调试。为了预防这一问题，在ES5中出现了strict模式，开启strict模式，需要在所有语句之前放一个特定语句 "use strict"; （或 'use strict';）

javascript
// 整个脚本都开启严格模式的语法
"use strict";
var v = "Hi!  I'm a strict mode script!";

基本数据类型 ​

基本数据类型有 Number、 String、 Boolean、Undefined、Null、Object,当我们不知道当前数据是什么类型时，使用typeof查看数据类型，例如typeof 123或者typeof(123)

  • Number: JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型
JavaScript
    123; // 整数123
    0.456; // 浮点数0.456
    1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
    -99; // 负数
    NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示,NaN属于Number类型
    Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity
    isNaN; //用于判断是否不是一个数字。不是数字返回true，是数字返回false。
  • 类型之间的转换
  1. Number、Bool、Undefined、Null 转String类型
javascript
// number 转 string
let num = 123;
let string = num.toString();
// 这样也可以转成字符串类型，本质是调用String()函数
let str = 123 + ""; 
// bool 转 string
let bool = true;
let string1 = bool.toString();
// undefined 转 string
let str = String(undefined)
// null 转 string
let str = String(null)
  1. String、Bool、Undefined、Null 转Number类型
javascript
// 字符串 转 Number类型，如果字符串是空，默认转为0 ，如果不是纯数字字符串，转成NaN = Not a Number
let num = Number("123")
// 通过 + 号或者 - 号也可以将字符串转 Number类型
let num = +"123"
// Bool 转 Number类型,true返回1，false返回0
let num = Number(true);
// parseInt和parseFloat 从左到右从字符串中提取数值
let str = "3.1415px"
let num = parseInt(str); // 3
let num = parseFloat(str); // 3.1415
  1. String、Number、Undefined、Null 转Bool类型
javascript
// 字符串转Bool
let flag = Boolean("123");
// Number转Bool,只有数值为0和NaN时才会转换成false
let flag = Boolean(123);
// Undefined 转Bool
let flag =  Boolean(undefined);
// Null 转Bool
let flag =  Boolean(null);

0, null, undefined, NaN, "" false转化成Bool类型都为false

判断 null 和 undefined ​

null 表示一个“空”的值，它和 0 以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。

JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。 undefined仅仅在判断函数参数是否传递的情况下有用。

  1. 仅判断是否为 undefined
javascript
var a;
var b = null;
 
if(typeof(a) == 'undefined') {
  console.log('a 是 undefined'); // 打印 a 是 undefined
}else{
  console.log('a 不是 undefined');
}
 
if(typeof(b) == 'undefined') {
  console.log('b 是 undefined');
}else{
  console.log('b 不是 undefined'); // 打印 b 不是 undefined
}
  1. 仅判断是否为 null
javascript
var a;
var b = null;
if(!a && typeof(a) !== 'undefined' && a != 0) {
  console.log('a 是 null');
}else{
  console.log('a 不是 null'); // a 不是 null
}
 
if(!b && typeof(b) !== 'undefined' && b != 0) {
  console.log('b 是 null'); // b 是 null
}else{
  console.log('b 不是 null');
}
  1. 非空判断,实际开发中我们可能不需要区分地这么细，而是只要简单地进行非空判断
javascript
var a;
var b = null;
 
if(!a) {
  console.log('a 为空'); // a 为空
}else{
  console.log('a 不为空');
}
  
if(!b) {
  console.log('b 为空'); // b 为空
}else{
  console.log('b 不为空');
}

运算符 ​

  • 数值运算符: + 、- 、* 、/、%、++、--
  • 布尔运算符: &&、||、！
  • 赋值运算符: =、+=、-=、*=、/=、%=
  • 比较运算符: >、>=、===、!===、<=、<、,注意比较两个值是否相等时使用===。
    • 另外NaN这个特殊的Number与所有其他值都不相等，包括它自己。唯一能判断 NaN 的方法是通过isNaN()函数：
javascript
isNaN(NaN); // true

=== 和 == 的区别

  1. 普通的相等性检查 == 存在一个问题，**它不能区分出 0 和 false，或者空字符串和 false这类运算。**这是因为在比较不同类型的值时，处于判断符号 == 两侧的值会先被转化为数字，空字符串和 false 也是如此，转化后它们都为数字 0。
  2. 如果我们需要区分 0 和 false，使用===。严格相等运算符 === 在进行比较时不会做任何的类型转换, 换句话说，如果 a 和 b 属于不同的数据类型，那么 a === b 不会做任何的类型转换而立刻返回 false。

流程控制 ​

JavaScript使用if () { ... } else { ... }来进行条件判断，其中else语句是可选的。多个条件语句时使用if() {...} else if() {...} else {....}

javascript
var age = 20;
if (age >= 18) { // 如果age >= 18为true，则执行if语句块
    alert('adult');
} else { // 否则执行else语句块
    alert('teenager');
}

也可以使用switch来进行条件判断。

javascript
var age = 20;
switch (age) {
    case 10:
        console.log("age = 10");
        break;
    case 20:
        console.log("age = 20");
        break;
    default:
        console.log("默认是0");
}

循环 ​

JavaScript循环有多个表示方式：while、do...while、for、for...in。

javascript
// while循环
let x = 0;
while (x <= 10) {
    x++;
}

// do...while循环，每次循环完成的时候判断条件
let n = 0;
do {
    n++;
} while (n < 10);

// for 循环
let arr = ['Apple', 'Google', 'Microsoft'];
let i, x;
for (i=0; i<arr.length; i++) {
    x = arr[i];
    console.log(x);
}

// for ... in循环，它可以把一个对象的所有属性依次循环出来
var obj = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in obj) {
    console.log(key); // 'name', 'age', 'city'
}

// 使用for...in循环数组
var arys = ['A', 'B', 'C'];
for (var i in arys) {
    console.log(i); //索引 '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}

字符串 ​

点击跳转到菜鸟教程查看

方法描述
charAt()返回在指定位置的字符。
charCodeAt()返回在指定的位置的字符的 Unicode 编码。
concat()连接两个或更多字符串，并返回新的字符串。
fromCharCode()将 Unicode 编码转为字符。
indexOf()返回某个指定的字符串值在字符串中首次出现的位置。
includes()查找字符串中是否包含指定的子字符串。
lastIndexOf()从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match()查找找到一个或多个正则表达式的匹配。
repeat()复制字符串指定次数，并将它们连接在一起返回。
replace()在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。
search()查找与正则表达式相匹配的值。
slice()提取字符串的片断，并在新的字符串中返回被提取的部分。
split()把字符串分割为字符串数组。
startsWith()查看字符串是否以指定的子字符串开头。
substr()从起始索引号提取字符串中指定数目的字符。
substring()提取字符串中两个指定的索引号之间的字符。
toLowerCase()把字符串转换为小写。
toUpperCase()把字符串转换为大写。
trim()去除字符串两边的空白
toLocaleLowerCase()根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase()根据本地主机的语言环境把字符串转换为大写。
valueOf()返回某个字符串对象的原始值。
toString()返回一个字符串。
javascript
 var name = "jack" // 整数123
 var msg = `hello world ${name} ${3 + 2}` //ES6新语法${变量/表达式}
 console.log(name.length) // 字符串长度

JSON序列化 ​

javascript
var obj = {
    "name": "xiaowang",
    "age": 18,
    "family":{
        "father": "dawang"
    }
}
// stringify方法：将JavaScript类型转成对应的JSON字符串；
console.log(JSON.stringify(obj)); // 打印结果: {"name":"xiaowang","age":18,"family":{"father":"dawang"}}
console.log(JSON.stringify(obj,["name","age"])); //只选择name和age  打印结果: {"name":"xiaowang","age":18}
var str =  JSON.stringify(obj,(key,value) => {
    if (key == "name") {
        return "xiaoli"
    }
    return value
})
console.log(str); //在转换String字符串时，可以替换key对应的值，打印结果 {"name":"xiaoli","age":18,"family":{"father":"dawang"}}

// parse方法：解析JSON字符串，转回对应的JavaScript类型；
console.log(JSON.parse(JSON.stringify(obj)));

如果对象本身包含toJSON方法，使用JSON.stringify()会直接使用toJSON方法的结果。

Javascript 中调用网络请求 ​

javascript
<script>

var first = 1
var skip = 1
request()
mounted()

// 网络请求
function request(){
    url = "http://service.picasso.adesk.com/v1/vertical/category/4e4d610cdf714d2966000007/vertical?limit=30&adult=false&first=" + first + "&order=new&skip=" + skip 
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    // 设置请求头,必须在open方法后面设置
    xhr.setRequestHeader("User-Agent","Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1");
    xhr.send();

    // 加载成功
    xhr.onload = function () {
        // 输出接收到的文字数据
        console.log(xhr.responseText)
        // 解析成json数据
        var json = JSON.parse(xhr.responseText);
        var list = json["res"]["vertical"]
        // 根据类名查询到对应的节点，因为类名是可以有多个重复的，所以获取的是一个数组
        var body = document.getElementsByClassName("content")[0];
        for (var dict of list) {
            // 生成节点，把节点添加到content节点下
            var img = document.createElement("img")
            img.src = dict["img"]
            // img.width = 100
            img.height = 550
            body.appendChild(img)
        }
    }

    // 加载失败 
    xhr.onerror = function () {
        document.getElementById("demo").innerHTML="请求出错";
    }
}

// 监听页面滚动,判断是否加载到下一个页面了
function mounted () {
    var that = this
    window.addEventListener("scroll", function () {
        console.log(document.body.scrollHeight,window.screen.height,document.body.scrollTop)
        if(document.body.scrollHeight <= window.screen.height + document.documentElement.scrollTop){
            first += 1
            skip += 30
            request()
        }else{

        }
    })
}

</script>

Map ​

Map的 常用方法

javascript
var map = new Map();
//设值
map.set("A","aaaa");
map.set("B","bbbb");
map.set("C","cccc");
map.set("D","dddd");
console.log(map)
//结果
// 0: {"A" => "aaaa"}
// 1: {"B" => "bbbb"}
// 2: {"C" => "cccc"}
// 3: {"D" => "dddd"}
//取值
let v =map.get("A")
console.log(v)
//结果：aaaa

//根据Key修改Value
map.set("B","XXX")
console.log(map)
//结果
// 0: {"A" => "aaaa"}
// 1: {"B" => "XXX"}
// 2: {"C" => "cccc"}
// 3: {"D" => "dddd"}

//判断key是否存在
let boo =  map.has("D");
console.log(boo)
//结果 true

//删除
map.delete("C");
//结果
// 0: {"A" => "aaaa"}
// 1: {"B" => "XXX"}
// 3: {"D" => "dddd"}

//获取key，value
map.forEach(function (value, key, map) {
    alert("key:"+key+"~~~"+"value:"+value)
})
本站已安全运行
Copyright © 2020 - 至今
Mr.Panda