原生js--js介绍,数据类型,比较运算符,数组,引入js -01-USB迷|专注于互联网分享

原生js--js介绍,数据类型,比较运算符,数组,引入js -01

js 简介：一门完备的动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。
主要功能：在前端主要负责页面数据的交互，让页面动起来，必须点击按钮实现表单数据的提交,点击某个区域实现区域样式的变化，鼠标移入时实现鼠标样式的变化等等，这样用户的体验才会更好。
应用场景：简单到幻灯片、照片库、浮动布局和响应按钮点击。复杂到游戏、2D 和 3D 动画、大型数据库驱动程序，等等

传送门javascript官方文档mdn

数据类型

String 字符类型
Number - 数字
Boolean 布尔类型
Object 对象
undefined
null

javascript 声明变量没有java那么严格，浏览器会根据写的类型字型判断类型
eg: var num = 1; 浏览器控制台输入 typeof num 输出的是Number
js是弱类型语言, 使用关键字var或者let来定义变量区别
使用var关键字可以这样声明
var sofency =“cool”;
var sofency=“upset”;
console.log(sofency);// -->upset 不会因为变量名的相同而无法赋值后者会覆盖前者的内容可想而知 10天开发出来的语言肯定有好些不严谨因素。
而使用let关键字不能这样命名当两个变量名相同式不能同时使用let关键字在变量前面修饰。
说说undefined和null的异同
相同点都表示"无"的意思
不同点：undefined表示缺少值，就是此处应该有一个值但是还没有定义 eg:
var num;
console.log(num);// —>undefined 声明变量没有赋值
null表示没有对象，即此处不应该有值
典型用法：
作为函数的参数，表示函数的参数不是对象
作为对象原型链的终端（后续介绍）
其中String和Number的用法借鉴了java中相应的方法
eg: String
var test =“sofency”;
console.log(test.length);// —>7
console.log(test.slice(2,4));// fe 切割从下标2到4(不包括)的字符
console.log(test.replace(“so”,“s”));// sfency
console.log(test.indexOf(‘s’)); // —> 0 计算第一次出现s的下标
console.log(test.substring(0,2)) ; // --“so” 切割字符串
console.log(test.charCodeAt(1));// -得出下标为1的ascii码一般字符在0-255之间，汉字大于255
console.log(test.charAt(2)); // 输出下标为2的字符
。。。
上述方法都在java中有所体现

eg:Number 对于数字来说一般部分浮点数或者整数正如数据类型中没有int float double一样
首先提一个bug 在控制台输入 0.14 *100 你会发现最后面一位是2，精度不准。

NaN 表示不是一个数字
在进行运算操作时如何保留响应的位数使用函数toFixed(位数)
var num =10.11;
console.log(num.toFixed(1)); // 10.1
同理其中的Math中的所有方法和java中都一样。

使用typeof 能够识别上面的所有吗
肯定是不能的 null array 属于对象
所以只能识别出 string undefined number object boolean function

比较运算符

js中的运算符和java中有所改动
在这里js定义了新的比较规则新填比较运算符 !== 和===符号

var  name = "sofency";
var  name1 = new String("sofency");
var name2 = "sofency";
console.log(name == name1);
console.log(name === name2);  //参考java常量池的定义
常量池是为了避免频繁的创建和销毁对象而影响系统性能，其实现了对象的共享。
例如字符串常量池，在编译阶段就把所有的字符串文字放到一个常量池中。
（1）节省内存空间：常量池中所有相同的字符串常量被合并，只占用一个空间。
（2）节省运行时间：比较字符串时，==比equals()快。对于两个引用变量，只用==判断引用是否相等，也就可以判断实际值是否相等。console.log(name ===name1);

总结规律
== 是弱比较，只要值相等就判断为true
而 === 是强比较不仅判断值而且判断对象是否相等
其他的比较规则参考java的比较规则

数组

js中的数组无类型差别里面的值存储的可以是任何类型的
eg
常规操作-存储同一类型：

var  shopping=['bread',‘vegetable’,‘cheese’,'milk'];

存储不同类型：

var  random =['tree',10,[0,1,2],{name:"sofency",age:18}]

从上述可以看到 random中存储的有字符串数字数组，对象

那么我们如何对上述的random数组进行读取哪
console.log(random[0]);// ‘tree’
console.log(random[2][2]); //读到数字2
console.log(random[3].name);//读到 “sofency”

常用的数组方法
将字符串通过分割符转化为数组 split(“符号”)；

var  myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
var myData = myData.split(',');//  通过逗号 `,`将上述字符串分割成数组
console.log(myData);//   ["Manchester", "London", "Liverpool", "Birmingham", "Leeds", "Carlisle"]

通过join(“符号”) 进行相反的操作

 var  shopping=['bread',‘vegetable’,‘cheese’,'milk'];
var shopping = shopping.join(" : ");
console.log(shopping);// `bread:vegetable:cheese:milk`

将数组转化为字符串 toString()

let dogNames = ["Rocket","Flash","Bella","Slugger"];
dogNames.toString(); // "Rocket,Flash,Bella,Slugger"  //类似执行dogNames.join(",");

删除和添加数组项
在数组末尾添加和删除一个项目 push(“content”) ,pop()

var student=['sofency','aalice'.,'sophia'];
student.push('mack');
student; // ['sofency','aalice'.,'sophia','mack'];
student.pop();
student;//['sofency','aalice'.,'sophia']

从数组前面添加和删除元素

var student=['sofency','aalice'.,'sophia'];
student.unshift('mack');
student; // ['mack','sofency','aalice'.,'sophia','mack'];
student.shift();
student;//['sofency','aalice'.,'sophia']

复制一个数组

var fruits=["apple","banana","strawberry"];
var  fruitsCopy = fruits.slice();

判断是否是数组

var  num =1；
Array.isArray(num);// false

Array.from()的妙用法

//当我们在写ul中的li的功能时需要锁定特定的li元素
//我们可以将li变成数组
var arr = Array.from(document.getElementsByTagName("li"));
console.log(arr[1].innerHTML) //调用特定下标中的内容

引入js文件

内部引入时注意写到body的底部,原因这就要谈到页面的加载问题，如果script放在上面的话dom 树没有建立完毕的话里面就无法获取到页面上的标签名就会容易报错。

在页面写js文件
在特定的脚本文件夹中写js文件然后在网页中进行引入