前端JS基础知识,先把这一点基础知识学会,在学难点知识!!!

Posted 武三水

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端JS基础知识,先把这一点基础知识学会,在学难点知识!!!相关的知识,希望对你有一定的参考价值。

System.out.println() = console.log(\'\')

js的输出语句:console.log(\'\')

document是浏览器里面的css文档

/** js怎么使用*/
class User{
    constructor(name,age){
        this.name = name ;
        this.age = age ;
    }

    print(){
        console.log(this.name + \'今年\' 
        + this.age + "了")
    }
}

let user = new User(\'三水\',18);
user.print();
----------------------------------
    运行结果:三水今年18了

JS

JS概述

介绍

1、javascript是一门解释性的脚本语言,主要用来给html网页增加动态功能

2、通常的js是运行在浏览器环境下的,可以帮助我们去控制页面,实现丰富的功能。会有dom和bom的api去操作html文档和浏览器的一些功能。

3、但是nodejs的出现给js提供了蓬勃的生命力,让js更加强大,比如现在流行的一些编程模式,都需要nodejs的支持

JS解释器,了解一下

无论是node还是各大浏览器,都需要有解释JS代码的引擎,参考下表浏览器使用的JS解释器

- Mozilla       --    Spidermonkey       火狐 
- Chrome        --    v8                 谷歌 
- Safari        --    JavaScriptCore     苹果 
- IE、Edge      --    Chakra              ie 
- node          --    v8                  nodejs

JS哪里可以执行

(1)放在html标签中
<body>
    <!-- 中间放页面标签-->


    <!--JS放在body的结束标签之前-->
    <script type="text/javascript">
    document.write(\'<h1>123</h1>\')
    </script>
</body>
(2)引入外部的js
<body> 
//中间放页面标签 

//放在body的结束标签之前   
<script src="./index.js">
</script> </body>
(3)调试练习可以再控制台 或者node环境下
1、浏览器中点击F12或者右键→检查,选择console项(element项是css类的)
2、vscode新建js文件夹,点击终端,在终端中进入目录

数据类型

1、js是一种弱类型自动推断类型的编程语言

数字(number)

字符串(string)

布尔型(boolean)

空和未定义不是一回事,不要看ppt

null是有值但为空,undefined是压根没有被定义

空(null)

未定义(undefined)

定义变量

弱类型,不需要申明这个变量的类型,统一用 var

但是定义var,取得名称相同,不会报错,并且后面的会把前面覆盖,

而let会直接报错。

constant常量,不会被改变

字符串用单引号(‘ ‘)或者双引号(“ ”)都行

var name = \'三水\'
console.log(name)
VM958:1 三水

var name = \'sanshui\'
console.log(name)
VM999:1 sanshui

var num = 123
console.log(num)
VM1068:1 123

var bool = true;
console.log(bool)
VM1140:1 true

var nul = null;
console.log(nul)
VM1210:1 null

var und = undefined;
console.log(und)
VM1282:1 undefined
//整形浮点型都能定义
var num = 10; 
var money = 1.2; 
//字符串单引号和双引号都行 
var str = \'str\';
var str2 = "str2"; 
var nul = null; 
var flag = true; 
//压根就没有定义叫undefined 
//数组和对象 
var arr = []; 
var obj = {};

因为var有一些弊端,今天就说一个,如果前边定义了一个变量,后边再次定义,就会覆盖,这样 会有问题,所有在ES6语法当中新增了let和const两个关键字来定义变量,除此之外还有作用域的问 题,有兴趣可以去研究。

var num = 3; 
var num = 4;
//前边的值会被后边的覆盖
----------------------
    输出结果:num = 4
//let 和 const 定义的变量不能不覆盖,不能重复定义。 let num = 3; 
let num = 4; 
//直接会报错
//cosnt定义的叫常量,定义之后的数据不能被修改 
const num = 3; 
num = 4; 
//直接会报错

方法

没有参数的方法

1、定义方法

function 方法名称(){console.log(\'方法名称\')}

function test1(){console.log(\'test1\')}

调用方法

test1();
-------------------------------
    运行结果:test1

2、定义方法也可以

var test = function(){console.log(1234)}
test();
-------------------------------------
    运行结果:
VM2313:1 1234
有参数的方法

function 方法名称(要传的东西){console.log(\'方法名称\')}

//传一个参数
function test(name){console.log(\'test--\' + name)}
test(\'武三水\');
-------------------------------
运行结果:test--武三水
test(123);
---------------------------------
运行结果:test--123


//传两个参数
function test1(name,age){console.log(\'test1--\' + name + \'-\' + age)}
test1(\'武三水\',18);
-----------------------------------
    运行结果:
VM1962:1 test1--武三水-18

//他有返回值,但是不写,自动推断
function test2(name,age){return name + \'今年\'+ age}
var str = test2(\'武三水\',18)
console.log(str)
----------------------------
运行结果:
VM2231:1 武三水今年18
//碰到return就结束,并且将后面的返回出去,这里是用str来接受

数组

定义的方式

(1)使用方法调用
var arr = Array(); 
//Array 是个函数,猜一猜他的返回值就是个空数组

(2)使用new关键字
var arr = new Array();
//js里函数可以当类使用

(3)使用json数组的方式,推荐这种
var arr = [];

注:js中初始化数组不需要初始化长度

赋值的方式

(1)定义之后去赋值
arr[0] = 123; 
arr[1] = 234;
(2)定义的时候赋值
//这样当然方便 
var arr = [123,234];

var arr1 = Array();
arr1
[]

var arr2 = [];
arr2
[]

var arr3 = new Array();
arr3
[]

arr1[0] = 1;
1

arr1[1] = 2;
2

arr1[3] = 4;
4

arr1
(4) [1, 2, empty, 4]0: 11: 23: 4length: 4__proto__: Array(0)

console.log(arr1[2])
VM2734:1 

console.log(arr1[1])
VM2748:1 2

对象(object)

对象是js里最灵活的。 ****

定义对象

(1)使用方法调用
var obj = Object(); 
//Array 是个函数,猜一猜他的返回值就是个空数组

(2)使用new关键字
var obj = new Object(); 
//js里函数可以当类使用

(3)使用json对象的方式,推荐
var obj = {};
(4)自定义对象类型,有点高级,了解

这一点很是灵活,function定义的函数,既能直接调用,也可以像类一样使用new关键字来生成。
其中要注意,要想给new出来的对象添加属性或方法,必须使用this关键字,不写不行。 命名规范和java一样,首字母大写,驼峰式命名。

function User(name){    this.name = name; }
var user = new User(\'武三水\'); console.log(user.name)

给对象添加属性和方法

(1)定义了对象之后
obj.name = \'zhangsan\'; 
obj.age = 18; 
obj.eat = function(){    
	console.log(" I am eating! ") 
}

(2)定义类的时候
//直接用json对象写一个对象出来 
var user = {    
	name: \'zhangsan\',    
	age: 10,    
	eat: function(){
		console.log("i am eating!");    
	} 
}

(3)自定义类的时候
function User(name){    
	this.name = name;    
	this.age = 18;    
	this.eat = function(){        
		console.log("I am eating!")    
	} 
}
var user = new User(\'wusanshui\');
//new 出来的对象自然而然就拥有这些属性和方法

获取对象的属性和方法

(1)使用()
console.log(user.name);
//调用方法 
user.eat();

(2)使用[]
console.log(user[\'name\']); 
//调用方法 
user[\'eat\']();

判断和循环

if选择结构

var flag = true;
if(flag){   
	alert(true) 
}else{   
	alert(false) 
}

switch选择结构

var m = 2;
var x; 
switch (m) {   
	case 0:x="今天是星期日";  
    break;   
    case 1:x="今天是星期一";   
    break;   
    case 2:x="今天是星期二";   
    break; 
}
console.log(x);

js循环数组

//在页面显示
let cars = [\'兰博基尼\',\'劳斯莱斯\',\'法拉利\',\'玛莎拉蒂\',\'路虎\']; 
for (var i=0;i<cars.length;i++) { 
    console.log(cars[i]);
}
//在控制台显示
for(var i =0;i<cars.length;i++){console.log(cars[i])};

冒泡排序法

var arr = [3,7,4,9,5,4,1];
for(var i = 0;i<arr.length - 1;i++){
    for(var j =0;j<arr.length - 1;j++){
        if(arr[j] > arr[j + 1]){
            var max = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = max;
        }
    }
}  
for(var a = 0;a <arr.length;a++){
    console.log(arr[a])
};

以上是关于前端JS基础知识,先把这一点基础知识学会,在学难点知识!!!的主要内容,如果未能解决你的问题,请参考以下文章

前端知识-JavaScript

JavaScript难点系列:作用域

Web前端中的难点是什么? 浏览器兼容问题如何解决

学会这5种JS函数继承方式,前端面试你至少成功50%

web前端之每天学一点js知识

FPGA知识大梳理对FPGA行业的一点感言