请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

Js语法学习实战 -数据类型

2023-07-13


1

JS语法学习实战系列合集

  javascript包括九种数据类型:1、Undefined;2、Null;3、Boolean;4、Number;5、String;6、Symbol类型;7、Object;8、Array;9、Function。其中,Undefined类型只有一个值,即特殊值undefined。在使用var声明变量,但未对其加以初始化时,这个变量值就是undefined。

1. undefined

  Undefined类型只有一个值,即特殊值undefined。在使用var声明变量,但未对其加以初始化时,这个变量值就是undefined。

回到目录

2. null

  Null类型是第二个只有一个值的数据类型。其特殊值就是Null。从逻辑角度上看,null是一个空的对象指针。而这也正是使用typeof操作符检测null值,会返回“object”的原因。

null和undefined的区别:
1.null:表示值为空,指定和清空一个变量的时候可以使用 age = null
2.undefined:表示从未被定义过,当声明一个变量且未初始化时,该变量的默认值是undefined

回到目录

3. Boolean

  即布尔类型,该类型只有两个值:true、false。需要注意的是,Boolean类型的字面值true和false是区分大小写的。也就是说,True和False(以及其它的混合大小形式)都不是Boolean值,只是标识符。

  1. Boolean函数:
  • 判断为假 - false:0、空字符串、undefined、NaN、null
    1
    当Boolean(表达式)为false时,if(表达式)也为false:
    1
  • 判断为真 - true:除上述外
  1. 布尔值操作:
  • 定义示例:var flag = true;
  • 赋值示例:flag = false;

回到目录

4. Number

  该类型的表示方法有两种形式,第一种是整数,第二种为浮点数。整数:可以通过十进制,八进制,十六进制的字面值来表示。浮点数:就是该数值中必须包含一个小数点,且小数点后必须有一位数字。

回到目录

5. String

  String类型用于表示由零或多个16位的Unicode字符组成的字符序列,即字符串。至于用单引号,还是双引号,在js中还是没有差别的。记得成对出现。
基本定义:

var s1 = "字符串";
var s2 = '字符串';

5.1 常用方法

var l1 = “efghij”;

方法功能示例
.length字符串的长度l1.length
charAt(index)访问字符串中特点字符l1.charAt(1) 等价于 l1[1] -> f
charCodeAt(index)得到字符编码l1.charCodeAt(1) -> 101
concat(str)用于将一个或多个字符串拼接起来,返回拼接后的新字符串l1.concat(“der”) 等价于 l1+“der” -> efghijder
slice(s,e)截取字符串(s子字符串开始位置,e子字符串结束位置)l1.slice(1,5)
substring(s,e)截取字符串(s子字符串开始位置,e子字符串结束位置)l1.substring(1,5)
indexOf(substr)从字符串的开头向后搜索子字符串,返回第一个匹配子字符串的位置,若没有找到,则返回-1l1.indexOf(“krd”) -> -1
lastIndexOf(substr,index)从字符串的末尾向前搜索子字符串,返回第一个匹配子字符串的位置,若没有找到,则返回-1l1.indexOf(“e”) -> 0
trim()删除前置及后缀的所有空格l1.trim()
includes()判断一个字符串是否包含在另一个字符串中,返回 true 或 falsel1.includes(“ef”)->true
startsWith()判断当前字符串是否以另外一个给定的子字符串开头,返回 true 或 falsel1.startsWith(“fs”) ->false
toUpperCase()所有字符转大写l1.toUpperCase()
toLowerCase()所有字符转小写l1.toLowerCase()
match(exe)匹配,接收一个正则表达式或者RegExp对象,结果会返回一个数组bfg
search(exe)检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。返回第一个匹配项的索引,若没有匹配,返回-1。l1.search(“df”)
replace(s1,s2)替换子字符串的方法l1.replace(“gh”,“fe”)
split(s1,index)指定的分隔符将一个字符串分割成多个子字符串,并将结果放在一个数组中l1.split(‘,’, 2) .split(‘,’)
localeCompare(s1)具体返回的正数和负数未必是1和-1,需看实现l1.localeCompare(‘yellow’)
fromCharCode()接收一个或多个字符编码,然后将它们转换成一个字符串var s = String.fromCharCode(104,101,108,108,111)

回到目录

5.2 字符串迭代遍历方法

var str = ‘hello’
(1)循环遍历

for (let i = 0; i < str.length; i++) {
      console.log(str[i]) // 字符串每项的值
}

(2)of 遍历

for (const n of str) {
      console.log(n) // 字符串每项的值
}

(3)in遍历

for (const i in str) {
      console.log(i) // 字符串每项的索引值(string类型)
}

5.3 字符串替换

js中字符串替换主要使用 str.replace() 方法:

  • 只替换第一个查找到的字符:str.replace(“需要替换的字符串”,“新字符串”)
  • 全局替换查找到的字符:str.replace(/需要替换的字符串/g,“新字符串”)
>var s = "one three five ";
>console.log("首个替换:"+s.replace("e", "1"));
首个替换:on1 three five 
>console.log("替换全部:"+s.replace(/e/g,"1"));
替换全部:on1 thr11 fiv1 

回到目录

6. Symbol类型

  符号 (Symbols) 是 ECMAScript 第 6 版新定义的。符号类型是唯一的并且是不可修改的。Symbol 函数前不能使用 new 命令,否则会报错。这是因为生成的 Symbol 是一个原始类型的值,不是对象。Symbol 函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述

回到目录

7. Object

  Object数据类型,称为对象,是一组数据和功能(函数)的集合。可以用new操作符后跟要创建的对象类型的名称来创建。也可以用字面量表示法创建。在其中添加不同名(包含空字符串在内的任意字符串)的属性。

7.1 基本使用

  1. 自定义对象方法:
    (1)let a = new Object;
    (2)let b = {};let s1 = {'usernane':'xie', 'age':18}
  2. 自定义对象的赋值:对象名.属性名 = 属性值

含有相同的键的赋值,新的赋值会替换原来的值

  1. 自定义对象取值:对象名.属性名
>let a = new Object;
>let b = {};
>let s1 = { 'usernane': 'xie', 'age': 18 }
>a.sex = "女";
>b.sex = "女";
>b.sex = "男";
>s1.sex = "女";
>console.log("a:" + a);
a:[object Object]
>console.log("a.sex:"+a.sex);
a.sex:女
>console.log("b:"+b);
b:[object Object]
>console.log("b.sex:" + b.sex);
b.sex:男
>console.log("s1:" +s1);
s1:[object Object]
>console.log("s1.usernane:" + s1.usernane);
s1.usernane:xie
>console.log("s1.sex:" + s1.sex);
s1.sex:女

7.2 对象遍历

for (var key in s1) {  
    let v = s1[key];
    console.log(key + ":" + v);
}

输出结果:
1

7.3 复制对象方法

(1)遍历每个元素复制:

var obj1 = {};
for (var i in obj) {  //遍历obj对象,把它的所有成员赋值给对象obj1
    obj1[i] = obj[i];
}

(2)直接赋值:直接用=的方式把一个对象赋值给另一个对象,JavaScript 中对象的赋值是默认引用赋值的(两个对象指向相同的内存地址),会导致修改新对象时,原对象也发生变化

var obj1 = {'name': '1111'};
var obj2 = obj1;
obj2.name = '2222';
console.log(obj1.name); //'2222'

(3)使用 Object.assign() 方法复制对象:Object.assign()只是让对象里第一层的数据没有了关联性,但是对象内的对象则跟被复制的对象有着关联性的。

// 使用 Object.assign() 方法复制对象
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
 
obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
 
obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
  • Object.assign(obj) --浅拷贝
  • Object.assign({},obj) --只有第一层深拷贝 (ES6中扩展运算符…也是如此

回到目录

8. 数组 - Array

  使用单独的变量名来储存一系列值,相当于python中的列表。JavaScript 数组用方括号书写,数组的项目由逗号分隔。
基本定义及使用:

>var l1 = [1,2,3,4,5]
>console.log(l1[1])
2

8.1 数组的常用方法

方法功能示例
.length数组的长度l1.length
.push尾部追加l2.push(1000)
.pop获取尾部元素l2.pop()
.unshift头部插入l2.unshift(200)
.shift()移除头部元素l2.shift()
.slice()切片操作,顾头不顾尾l1.slice(1,3)
.reverse()反转l1.reverse()
.join()将数组元素连接成字符串l1.join()
.concat()连接数组l1.concat(l2)
.sort()排序l1.sort()
.forEach()将数组的每个元素传递给回调函数
.splice()删除元素,并向数组添加新元素l2.splice(0,1,1000)
.map()返回一个数组元素调用函数处理后的值的新数组

回到目录

8.2 数组遍历

arr 是要遍历的数组
(1)循环遍历

for(var i = 0; i < arr.length; i++){
        arr[i] 是遍历的数组的元素,i 是数组的元素对应的下标(索引号)
}

(2)for of 方法

for(var item of arr) {
        item 遍历的数组的元素
}

(3)foreach遍历

arr.forEach(function(item,index,self){
        item 遍历出的每一个元素  index 元素对应的下标   self 数组本身
        无返回值
})
# 示例
var arr = [1,2,3];
arr.forEach(function(item,index,self){
    console.log(index+":"+item);
});

输出:
1
(4)map 映射:

arr.map(function(item,index,self){
        item 遍历出的每一个元素  index 元素对应的下标  self 数组本身
        有返回值  : 数组元素个数不变,但是按照一定的条件转换
})

(5)、filter 过滤

arr.filter(function(item,index,self){
        item 遍历出的每一个元素  index 元素对应的下标  self 数组本身
        有返回值:返回满足某个条件的元素构成的数组

})

(6)reduce 高阶函数(迭代(累加器))

arr.reduce(function(total,item,index,self){
        total 初始值或计算结束后的返回值
        item 遍历出的每一个元素  index 元素对应的下标  self 数组本身
        有返回值 : 返回计算结束后的total值
},初始值);

(7)every

arr.every(function(item,index,self){
		item 遍历出的每一个元素  index 元素对应的下标  self 数组本身
        有返回值 : 检测数组里的每一个值是否满足指定条件:
        			* 如果有一个值不满足,返回false,剩余的值不再进行检测
        			* 如果所有的值都满足,则返回true

});

(8)some

arr.some(function(item,index,self){
       	item 遍历出的每一个元素  index 元素对应的下标  self 数组本身
        有返回值 : 检测数组里的每一个值是否满足指定条件
    	    * 如果有一个值满足,返回true,剩余的值不再进行检测
       		*  如果所有的值都不满足,则返回false
});

回到目录

9. Function

  ECMAScript中的函数是对象,与其他引用类型一样具有属性和方法。因此,函数名实际是一个指向函数对象的指针。

  1. 语法结构
function func(形参){
    函数体代码
    return 返回值
}
  1. 参数:参数个数不需要一一对应 如果需要限制参数个数需要使用关键字arguments
function func(a,b){
    if (arguments===2){
        console.log(a,b)
    }else{
        console.log('参数没有意义对应')
    }
}
  1. 匿名函数
function(a,b) {
    return a-b;
}
  1. 箭头函数
var f = v => v;
等同于
var function f(v){
    return v;
}

示例:

var f = () => 5;
等同于
var f=function(){
    return 5;
}
var sum = (num1,num2) => num1 + num2;
等同于
var sum = function(num1, num2){
    return num1+num2;
}

回到目录

相关阅读

热门文章

    手机版|MSIPO技术圈 皖ICP备19022944号-2

    Copyright © 2024, msipo.com

    返回顶部