js基础篇

最新推荐文章于 2022-05-24 21:20:00 发布

Pvr1sC

最新推荐文章于 2022-05-24 21:20:00 发布

阅读量255

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_51911432/article/details/113101431

版权

1.编程语言

alert 弹窗

 <script>
        alert('我是网页弹出');
 </script>

2.js的三个位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style></style>
    <!-- 2.内嵌式的js -->
    <script>
        alert('2内嵌js');
    </script>
    <!-- 3. 外部js script 双标签 -->
    <script src="my.js"></script>
</head>

<body>
    <!-- 1. 行内式的js 直接写到元素的内部 -->
    <input type="button" value="button" onclick="alert('alert')">
</body>
</html>

my.js

alert('这是外部js')

3.注释

    <script>
        // 1. 单行注释  ctrl + /
        /* 2. 多行注释  默认的快捷键 shift +  alt  + a
           2. 多行注释  vscode 中修改多行注释的快捷键：  ctrl + shift + /
        */
    </script>

4.输入输出

prompt输入
alert 警示框
console 控制台
console.log(‘这是控制台’);

5.变量

<script>
var variable;
variable=value;
console.log(variable);
</script>

6.命名规范

js中由字母a~z A~Z数字0~9下划线_美元$组成
区分大小写，关键字不能作为变量名，不能以数字开头和C语言python，php一样，但无$
遵守驼峰命名法首字母小写后面的单词大写 myValueName

7.number

        // 3. 数字型的最大值
        console.log(Number.MAX_VALUE);//1.7976931348623157e+308
        // 4. 数字型的最小值
        console.log(Number.MIN_VALUE);//5e-324
        // 5. 无穷大
        console.log(Number.MAX_VALUE * 2); // Infinity 无穷大  
        // 6. 无穷小
        console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
        // 7. 非数字
        console.log('pink老师' - 100); // NaN

8.isNAN

判断是否为数字返回true 或false

9.string

长度length
console.log(str.length);类似python中的len
字符串的拼接 + 只要有字符串和其他类型相拼接最终的结果是字符串类型

        console.log(12 + 12); // 24
        console.log('12' + 12); // '1212'
        //我们变量不要写到字符串里面，是通过和 字符串相连的方式实现的
        console.log('这是' + value + '的');

10.bool & undefined

    <script>
        var flag = true; // flag 布尔型 
        var flag1 = false; // flag1 布尔型
        console.log(flag + 1); // true 参与加法运算当1来看
        console.log(flag1 + 1); // false 参与加法运算当 0来看
        // 如果一个变量声明未赋值 就是 undefined 未定义数据类型
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + 'value'); // undefinedvalue
        console.log(variable + 1); // NaN  undefined 和数字相加 最后的结果是 NaN
        // null 空值
        var space = null;
        console.log(space + 'value'); // nullvalue
        console.log(space + 1); // 1
    </script>

11.typeof typename

eg. var num = 10;
console.log(typeof num); // number
在这里插入图片描述通过颜色也可以判断蓝色是数字型，白色是字符型的

12.num–string–bool

1)数字型转换为字符串型变量**.toString()**
var str = num.toString();
2)利用 String(变量)
console.log(String(num));
3)利用 + 拼接字符串的方法实现转换效果隐式转换
console.log(num + ‘’);
1)parseInt(变量) 可以把字符型的转换为数字型得到是整数(取整)
2）parseFloat(变量) 可以把字符型的转换为数字型得到是小数浮点数
3）Number(变量)
4）利用了算数运算 - * / 隐式转换
1）boolean

console.log(Boolean('')); // false
    console.log(Boolean(0)); // false
    console.log(Boolean(NaN)); // false
    console.log(Boolean(null)); // false
    console.log(Boolean(undefined)); // false

13.关于类型

    console.log(parseInt('3.94')); // 3 取整 C语言一样
    console.log(0.1 + 0.2); // 0.30000000000000004
    console.log(0.07 * 100); // 7.000000000000001
    var num = 0.1 + 0.2;
    console.log(num == 0.3); // false C语言好像也一样

14.=,== 与===

=赋值
==等于
===强等于

注意：while（str!==value）

15.短路运算

逻辑与短路运算 如果表达式1 结果为真则返回表达式2 如果表达式1为假那么返回表达式1
console.log(123 && 456); // 456
console.log(0 && 456); // 0
console.log(0 && 1 + 2 && 456 * 56789); // 0
console.log(’’ && 1 + 2 && 456 * 56789); // ‘’
逻辑或短路运算 如果表达式1 结果为真则返回的是表达式1 如果表达式1 结果为假则返回表达式2
console.log(123 || 456); // 123
console.log(123 || 456 || 456 + 123); // 123
console.log(0 || 456 || 456 + 123); // 456
逻辑中断很重要它会影响我们程序运行结果
var num = 0;
console.log(123 || num++);
console.log(num); // 0

16.if语句switch语句与C语言一样

if （条件）
{
语句；
}

17.for循环和C语言一样

    <script>
        var str = '';
        for (var i = 1; i <= 9; i++) { 
            for (var j = 1; j <= i; j++) 
            {
                str += j + '×' + i + '=' + i * j + '\t';
            }
            str += '\n';
        }
        console.log(str);
    </script>

18.while break，continue 和C语言一样

        do {
            var message = prompt('你爱我吗?');
        } while (message !== '我爱你')
        alert('我也爱你啊');

19.array 和php有点像

    // 1.数组(Array) ：就是一组数据的集合 存储在单个变量下的优雅方式 
    // 2. 利用new 创建数组
    var arr = new Array(); // 创建了一个空的数组
    // 3. 利用数组字面量创建数组 []
    var arr = []; // 创建了一个空的数组
    // 4. arr.length 动态监测数组元素的个数
    for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);

	//[]创建数组
	$arr=['arr1']='values';
	//array建立数组
	$arr=array('arr1'=>'value1',
			   'arr2'=>'value2');
	foreach ($arr as $arra => $values)
		echo "$arra : $values";

20.函数和php好像

function 名字（value1，value2）
{
……；
}
名字（va1，va2）；
函数表达式(匿名函数)
var 变量名 = function() {};
php 一模一样

21.Arguement

<script>
    // arguments 的使用  只有函数才有 arguments对象  而且是每个函数都内置好了这个arguments
    function fn() {
        // console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]
        // console.log(arguments.length);
        // console.log(arguments[2]);
        // 我们可以按照数组的方式遍历arguments
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);

        }
    }
    fn(1, 2, 3);
    fn(1, 2, 3, 4, 5);
    // 伪数组 并不是真正意义上的数组
    // 1. 具有数组的 length 属性
    // 2. 按照索引的方式进行存储的
    // 3. 它没有真正数组的一些方法 pop()  push() 等等
</script>

22.reverse

        var arr1 = reverse([1, 2, 3, 4, 5]);
        console.log(arr1);

23.eg

        function sort(arr) {
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = 0; j < arr.length - i - 1; j++) {
                    if (arr[j] > arr[j + 1]) {
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        var arr1 = sort([1, 4, 2, 9]);
        console.log(arr1);

24.块级作用域（es6）

块级作用域 {} if {} for {}

25.作用域链

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值这种结构我们称为作用域链就近原则

26.预解析（面试常考点）

        console.log(num); // undefined  
        var num = 10;
        fun(); // 报错  
        var fun = function() {
                console.log(10);
        // 1. 我们js引擎运行js 分为两步：  预解析  代码执行
        // (1). 预解析 js引擎会把js 里面所有的 var  还有 function 提升到当前作用域的最前面
        // (2). 代码执行  按照代码书写的顺序从上往下执行
        // 2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
        // (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面  不提升赋值操作
        // (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面  不调用函数

声明，函数，赋值/打印

26.1.eg

99999报错

        f1();
        console.log(c);
        console.log(b);
        console.log(a);

        function f1() {
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        // 以下代码
        // function f1() {
        //     var a;
        //     a = b = c = 9;
        // 相当于 var  a  = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当全局变量看
        // 集体声明  var a = 9, b = 9, c = 9;
        //     console.log(a);
        //     console.log(b);
        //     console.log(c);
        // }
        // f1();
        // console.log(c);
        // console.log(b);

27 对象object

对象是相关属性和方法的集合{}

        var obj = {
                uname: '张三',
                age: 18,
                sex: '男',
                sayHi: function() {//方法冒号后面跟的是一个匿名函数
                    console.log('hi');

                }
            }
        // (1). 调用对象的属性 我们采取 对象名.属性名
        console.log(obj.uname);
        // (2). 调用属性还有一种方法 对象名['属性名'] ·要加引号啊
        console.log(obj['age']);
        obj.sayHi();
        new来创建对象
        var obj = new Object(); // 创建了一个空的对象
        obj.uname = '张三';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
                console.log('hi~');

            }

28.对象类似python,php 的class
js
构造函数的语法格式
function 构造函数名() {
this.属性 = 值;
this.方法 = function() {}
}
new 构造函数名();
var value = new 函数名（vale1，……）
python
class Duck():
def __init__(self,tall):
self.tall=tall

class Test
{
	// 属性
    public $val_1;
    public $val_2;
	// 类的方法
    public function __construct($val_1, $val_2)
    {
        $this->val_1 = $val_1;
        $this->val_2 = $val_2;
    }
    public function get_max()
    {
        return $this->val_1 > $this->val_2 ? $this->val_1:$this>val_2;
    }
}
// 实例化类，$test 是由类 Test 生成的对象
$test = new Test(83, 34);
echo $test->get_max();

29.可以用函数来构造对象用new来创建
new关键字执行过程
1. new 构造函数可以在内存中创建了一个空的对象
2. this 就会指向刚才创建的空对象
3. 执行构造函数里面的代码给这个空对象添加属性和方法
4. 返回这个对象
30.遍历对象

for (var k in obj) {
            console.log(k); // k 变量 输出  得到的是 属性名
            console.log(obj[k]); // obj[k] 得到是 属性值

        }

内置对象

Math

不是构造函数，不需要new
console.log(Math.ceil());//向上取整
console.log(Math.PI);
Math.round() 四舍五入其他数字都是四舍五入，但是 .5 特殊它往大了取
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // 这个结果是 -1
Math.random()返回一个随机的小数 0 =< x < 1里面不跟参数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

Date

是构造函数
var arr = new Array();
var obj = new Object();
var date= new Date();
var date1 = new Date(2019, 10, 1);
console.log(date1); // 返回的是 11月不是 10月
getFullYear()
getMonth() 返回的月份小1个月记得月份+1
getDate()返回的是几号
getDay ()周一返回的是 1 周六返回的是 6 但是周日返回的是 0

    <script>
        // 格式化日期 时分秒
        var date = new Date();
        console.log(date.getHours()); // 时
        console.log(date.getMinutes()); // 分
        console.log(date.getSeconds()); // 秒
        // 要求封装一个函数返回当前的时分秒 格式 08:08:08
        function getTimer() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTimer());
    </script>

        // 1. 通过 valueOf()  getTime()
        var date = new Date();
        console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
        console.log(date.getTime());
        // 2. 简单的写法 (最常用的写法)
        var date1 = +new Date(); // +new Date()  返回的就是总的毫秒数
        console.log(date1);
        // 3. H5 新增的 获得总的毫秒数
        console.log(Date.now());

       function countDown(time) {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var d = parseInt(times / 60 / 60 / 24); // 天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2021-5-1 00:00:00'));
        var date = new Date();
        console.log(date);

array

var arr=[1,2,3];
console.log(arr[0])
var arr1 = new Array(2);//空间大小为2，有两个空数组
var arr1 = new Array(2, 3); // 等价于 [2,3] 这样写表示里面有2个数组元素是 2和3

检查是否为数组

// (1) instanceof  运算符 它可以用来检测是否为数组
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array);
        console.log(obj instanceof Array);
        // (2) Array.isArray(参数);  H5新增的方法  ie9以上版本支持
        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));

删除添加

    <script>
        // 添加删除数组元素方法
        // 1. push() 在我们数组的末尾 添加一个或者多个数组元素
        var arr = [1, 2, 3];
        // arr.push(4, 'red');
        console.log(arr.push(4, 'pink'));
        console.log(arr);
        // push完毕之后，返回的结果是 新数组的长度 
        
        // 2. unshift 在我们数组的开头 添加一个或者多个数组元素
        console.log(arr.unshift('red', 'purple'));
        console.log(arr);
        //  unshift完毕之后，返回的结果是 新数组的长度 
        
        // 3. pop() 它可以删除数组的最后一个元素  
        console.log(arr.pop());
        console.log(arr);
        //  pop完毕之后，返回的结果是 删除的那个元素 
        
        // 4. shift() 它可以删除数组的第一个元素  
        console.log(arr.shift());
        console.log(arr);
        // shift完毕之后，返回的结果是 删除的那个元素 
    </script>

排序

		arr.reverse();
        arr1.sort(function(a, b) {
            //  return a - b; 升序的顺序排列
            return b - a; // 降序的顺序排列
        });

index

str.indexOf(‘要查找的字符’, [起始的位置])
indexOf 从前往后找
和lastIndexOf 从后往前找
return 找到的第一个
找不到 return -1

eg

        function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }

将数组转化成字符串

`1. to string

        var arr = [1, 2, 3];
        console.log(arr.toString()); // 1,2,3

php

class Info {
    public function __toString()
    {
        return "info";
    }
}
$info = new Info();

2.join 与python一样
js

        var arr1 = ['green', 'blue', 'red'];
        console.log(arr1.join()); // green,blue,red
        console.log(arr1.join('-')); // green-blue-red

s = ("a", "b", "c") 
print " ".join(s)#a b c

基本包装对象

        var str = 'andy';
        console.log(str.length);
        // 对象 才有 属性和方法   复杂数据类型才有 属性和方法 
        // 简单数据类型为什么会有length 属性呢？ 
        // 基本包装类型：  就是把简单数据类型 包装成为了 复杂数据类型 
        // (1) 把简单数据类型包装为复杂数据类型 
        var temp = new String('andy');
        // (2) 把临时变量的值 给 str
        str = temp;
        // (3) 销毁这个临时变量
        temp = null;

new String new Number new Boolean
字符串的不可变所以不要大量的拼接字符串
var a=‘one’;
console.log(‘str’);
var a=‘first’;
one 这个空间不会删除
所以字符串用的所有方法都不会修改字符串本身，只会开辟新的空间

返回字符函数

charAt(index)
charCodeAt(index)返回ASCII
str[index]（h5新增的）

eg

        var str = 'Yooooohopnl';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i); // chars 是 字符串的每一个字符
            if (o[chars]) { // o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        // 2. 遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
            // k 得到是 属性名
            // o[k] 得到的是属性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);

字符串方法（这不是mysql）

1.concat(str1,str2…)
2.substr(start,length)

    var str1 = 'weixinbian';
    console.log(str1.substr(2, 2));//ix

mysql:SUBSTR(str,pos,len);从pos开始的位置，截取len个字符
3.slice(start,end)
4.substring(start,end)

替换字符串（和python一样）

replace

        // 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
        var str = 'andyandy';
        console.log(str.replace('a', 'b'));
        // 2. 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
        var str2 = 'red, yellow, blue';
        console.log(str2.split(','));//array(3)0: "red"1: " yellow"2: " blue"

数据类型

    1. 简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
    2. 复杂数据类型 首先在栈里面存放地址 十六进制表示  然后这个地址指向堆里面的数据

简单数据类型

null 返回的是一个空的对象 object
如果有个变量我们以后打算存储为对象，暂时没想好放啥，这个时候就给 null

复杂数据类型

        function Person(name) {
            this.name = name;
        }

        function f1(x) { // x = p地址赋值
            console.log(x.name); // 2. 这个输出什么 ?  red   
            x.name = "snt";
            console.log(x.name); // 3. 这个输出什么 ?   snt
        }
        var p = new Person("red");
        console.log(p.name); // 1. 这个输出什么 ?   red
        f1(p);
        console.log(p.name); // 4. 这个输出什么 ?   snt

Pvr1sC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础篇

1.编程语言alert 弹窗 <script> alert('我是网页弹出'); </script>2.js的三个位置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫