JS 基础

一切实例都参照于  菜鸟教程、表严肃

• 页面文字改变

<p id="demo">
    JavaScript 能改变 HTML 元素的内容。
</p>
<script>
　　document.write(Date());  //直接在html中显示页面刷新时间
　　console.log(Date());

    function myFunction()
    {
    x=document.getElementById("demo");  // 找到元素
    y=document.getElementById("dem 　　　//在输出中可能由于内容太长，可以通过  换行，便于阅读
o2"); 
    x.innerHTML="Hello JavaScript!";    // 改变内容
    y.innerHTML=x.innerHTML;
    }
</script>
    
<p id="demo2">
    ddddd
</p>
<button type="button" onclick="myFunction()">点击这里</button>

innerHTML  用于修改元素的 HTML 内容

将灰色位置 内容 都变成 Hello JavaScript!（demo位置是直接改变，demo2位置参照demo的新值）

• 判断

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" 
     src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

match() 方法可在字符串内检索指定的值（通过在src属性中检索是否含有bulbon这个值）

•  变量

function varTest() {
    var x = 1;
    if (true) {
        var x = 2;       // 同样的变量!
        console.log(x);  // 2
    }
    console.log(x);  // 2
}

function letTest() {
    let x = 1;
    if (true) {
        let x = 2;       // 不同的变量    
        console.log(x);  // 2  
    }
    console.log(x);  // 1
}

let 声明的变量只在其声明的块或子块中可用（let 内外是不一样的）

• 数据类型

number
在其他类型前加+可以快速将其转换为数字类型
+'1' // 1
+'' // 0
+'1.1' // 1.1
+true // 1
+false // 0

string
`我是个模板字符串，我叫 ${name}` //使用`（反引号,1左边）定义模板字符串，可以传入变量，还可以直接断行
'yo'.charAt(0); // "y" 程序员是从0开始数的,获得字符串中的某一个字符
'yo'[0]; 　　// "y"
'花花你好'.includes('花花'); // true，检查一段字符是否包含另一段字符
'花花→_→拴蛋→_→背背'.split('→_→'); // ["花花", "拴蛋", "背背"] //用字符串将字符串分割为数组
'y'.concat('ooo', 'oo', 'o'); // "yoooooo"，依次连接传入的字符，传参数量不限 连接字符串
var str = '王花花和小熊跳舞跳呀跳呀一二一';　　//截取字符串
str.slice(3, 8); // "和小熊跳舞"，第一个传参为开始索引，第二个传参为结束索引 
str.slice(3); // "和小熊跳舞跳呀跳呀一二一"，若省略第二个传参将会截取至最后一个字符
'  yo  '.trim(); // "yo"    .trim 移除两头的空格

 对象

<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
        return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
docuument.write(person.firstName);
</script>
//获取对象属性
person.firstName
person['firstName']

array
var arr = [3, 4, 5];

.push(新元素) 从末尾添加
arr.push(6); // 4 返回修改后的长度
console.log(arr); // [3, 4, 5, 6]

.unshift(新元素) 从开头添加
arr.unshift(2); // 4 返回修改后的长度
console.log(arr); // [2, 3, 4, 5]

.pop() 从末尾删
arr.pop(); // 6 返回被删除的数
console.log(arr); // [3, 4, 5]

.shift() 从开头删
arr.shift(); // 2 返回被删除的数
console.log(arr); // [3, 4, 5]

.reverse() 颠倒顺序
[1, 2, 3].reverse(); // [3, 2, 1]

.splice(从哪剪, 剪多长, 替换元素1, 替换元素2) 剪接
var 片儿 = ['a', 'b', '辣鸡1', '辣鸡2', 'c'];
// 从第3格开始剪，剪2格
片儿.splice(2, 2); // ["辣鸡1", "辣鸡2"] 返回减掉的东西
console.log(片儿); // ["a", "b", "c"]
// 注意，现在片儿已经剪成了['a', 'b', 'c']
// 从第2格开始剪，剪1格，进两个广告
片儿.splice(1, 1, '广告1', '广告2');
console.log(片儿); // ["a", "广告1", "广告2", "c"]

.slice(从哪剪，在哪停) 剪裁  返回剪裁的新数组，不影响原数组。
var 片儿 = ['a', 'b', '辣鸡1', '辣鸡2', 'c'];
// 从第3格开始剪，剪2格
var 垃圾堆 = 片儿.slice(2, 4); // ["辣鸡1", "辣鸡2"] 返回减掉的东西
console.log(垃圾堆); // ["辣鸡1", "辣鸡2"]

.forEach(回调函数) 迭代
    ['a', 'b', 'c'].forEach(function(string,index) { 
    console.log('第' + index + '条：' + string);
    });

.filter(回调函数) 过滤器    (通过你给他的条件返回一个新数组)
var 旧数组 = [1, 2, 3, 4];
var 新数组 = 旧数组.filter(
  // 传入一个函数，每迭代一个元素就执行一次
  function(元素, 索引, 原始数组) {
    // 只要大于2的元素
    var 条件 = 元素 > 2;
    return 条件;
  }
);
console.log(新数组); // [3, 4]

.every(回调函数) 查看是否满足条件
var 满足 = [1, 2, 3].every(
  // 传入一个函数，每迭代一个元素就执行一次
  function(元素, 索引, 原始数组) {
    // 是否小于10
    var 条件 = 元素 < 10;
    return 条件;
  }
);
/*只有当所有条件都满足时才返回true*/
console.log(满足); // true

this 
一般是指代父类
但是要看它的引用位置

    var person={
        fname:'y',
        lname:'f',
        full:function(){
            console.log(this);  //window    若是在严格模式（'use strict';）就是undefined
            return this.lname + this.fname;
        }
    }
    // var get_fullName = person.full;
    // console.log(get_fullName());    //NaN
    console.log(person.full());     //就等于父级对象
    function yo(){
        console.log('yo.');
    }
   
    //可以在不同的父级动态绑定
    function yo(nam,a){
        console.log('yo, '+nam+' 我是'+this.name +' '+a);
    }
    // yo();
    var f ={
        name:'f',
    }
    // f.yo = yo;
    // f.yo();
    yo.call(f,'aa',1); //  call可以绑定this
    yo.apply(f,['b',2])
    yo2 = yo.bind(f);
    yo2('c',3);

•  回调函数

    function yo(callback){
        if(callback){
            callback();
        }
    }
    yo(function(){
        console.log('222');
    });

    function each(arr,callback){
        for(var i =0;i<arr.length;i++){
           var item = arr[i];
           callback(item);
        }
    }
    each(['a','b','c'],eqc);
    function eqc(item){
        if(item=='c')
            console.log(item);
    }

•  闭包

function user(name){
    var name,age;
    return {
        getName:function(){
        return name;
        },
        setName:function(NewName){
        name = NewName;
        }
    }
}
var ss = new user('sss');
ss.setName('wwww');
var name = ss.getName();
console.log("name:",name); 

• window对象

    // alert('这是一个弹框');

    // var r = confirm('这是一个可以选择是否的弹框，你点的是什么？');
    // console.log("r:",r);    //返回true 或者 false

    //var name = prompt('这是一个可供输入的弹框');
    //console.log("name:",name);

三个弹框都会使程序暂时停止

    //定时操作
    setTimeout(function(){
        console.log("it's 2 sec");
    },2000)

    //间隔多久执行一次
    setInterval(function(){
        console.log("ok");
    },1000)

    //每秒报数
    var count = 0;
    var timer = setInterval(function(){
        count++;
        if(count>3){
            clearInterval(timer);
            return; //若没有return 外面依然会执行一次
        } 
        console.log("ok"+count);
    },1000)

console.log因为一直在程序内，所以不管定时器是否0秒执行（计时器在程序外有一个队列）
都是先打印console的内容