前端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基础知识，先把这一点基础知识学会，在学难点知识！！！的主要内容，如果未能解决你的问题，请参考以下文章