前端常见知识点2

前端常见知识点2

1、五种基本数据类型

• 字符类型‘11’被引号引起来的数据 ---- string
• 数值型 123 正数、负数、小数、NaN ---- number
• 布尔型 只有true和false ---- boolean
• 空值型 只有null ---- object
• 未定义型 只有undefined ---- undefined
  typeof 检测基本数据类型 console.log(typeof data1);

2、数据类型的转换

• 强制转换：string(XXX); string();
• 隐式转换：+string 可以转成数字, a+""可以转成字符串,!var 可以转成布尔值

转换成为false的6种情况：null underfined false 0 NaN ‘’

3、自调用函数

var result = (function (age = 18) {alert('这个人的年龄是' + age);return age;})(20);console.log(result);

4、Math对象（不需要new关键词创建）

und()    四舍五入
il()        向上取整
Math.floor()      向下取整
Math.random()   获取随机数
Math.floor(Math.random()*(5+1))function randomint(num = 5) {return Math.floor(Math.random() * (num + 1)); //返回随机数           
}

5、几种遍历方法

• for…in

for (const key in obj){console.log('属性名'，key,'值'，obk[key]);
}

• Object.keys（obj） Object.values（obj）

const obj = {id:1,name:'小明',age:18}console.log(Object.keys(obj))console.log(Object.values(obj))

• forEach（）遍历普通数组

 const arr = [{ id: 1, name: '小明' },{ id: 2, name: '小红' },{ id: 3, name: '小吕' }]// 写法1arr.forEach(function (item) {console.log(item.id + '---' + item.name)})// 写法2arr.forEach( (v)=> {console.log(v.id + '---' + v.name)})

• map()映射数组

const arr = [{ id: 1, name: '小明' },{ id: 2, name: '小红' },{ id: 3, name: '小吕' }]// 写法1arr.map(function (item) {console.log(item.id + '---' + item.name)})// 写法2arr.map( (v)=> {console.log(v.id + '---' + v.name)})

• forEach：用来遍历数组中的每一项，没有返回值，不影响原数组
• map：相当与原数组克隆了一份，支持return，可以改变克隆的每项，也不影响原数组

6、数组对象的方法

push   向数组的末尾添加一个或更多元素，并返回新的长度 用法：arrs.push('d', 'e', 'f')
unshift 向数组的开头添加一个或更多元素，并返回新的长度用法： arrs.unshift(44, 55, 66);
pop     删除并返回数组的最后一个元素用法：arrs.pop();
shift    删除并返回数组的第一个元素用法：arrs.shift();
reverse   颠倒数组中元素的顺序用法：.reverse()；
sort       对数组的元素进行排序
从小到大 用法：arrs.sort(function (a, b) {return a - b;});
splice   删除元素，并向数组添加新元素
用法：// 参数1：要删除元素的索引值   可以用-1代表最后一位// 参数2：删除的个数// 参数3往后：添加的元素
arrs.splice(0, 1); //删除第一个
arrs.splice(arrs.length, 0, 55, 66, 77);   // 在最后追加数据slice    从某个已有的数组返回选定的元素
用法：// 参数1：选取的开始索引值// 参数2：选取的结束索引值(不包括该元素)
arrs.slice(1, 3); //抽取第2第3个数join    把数组用分隔符号连接成新的字符串
用法:   
arrs.join(',')//用逗号分隔.concat()  连接两个或更多的数组，并返回结果。
用法:// 把 boys 和 girls 合并成一个新的数组all写法1：     const all = [].concat(boys, grils);写法2：     const all = at(grils);indexOf  返回当前查找数据的索引值//  参数1: 要查找的位置的数据//  参数2: 查找起始索引值
用法：arrs.indexOf(33, 3);  //从第4位开始查找33includes()  判断一个数组是否包含一个指定的值用法：  array1.includes(3);  //查看是否包含3.forEach()   遍历数组
用法：
写法1：arrs.forEach(function (item, index) {console.log(item, index);});
写法2：arrs.forEach((item, index) => console.log(index, item));.map() 创建一个新数组，给元素加标签
用法：
写法1： const newArrs = arrs.map(function (item) {return '<a>' + item + '</a>';});
写法2：const newArrs = arrs.map(item => '<a>' + item + '</a>');.filter() 过滤原数组返回一个新数组
用法： const result = arrs.filter(function (item) {// return 返回满足过滤规则的数据return item > 30;});

7、string 对象方法

.split()  把字符串分割为字符串数组
用法：const strObj = 'apple-banner-cat';const arrs = strObj.split('-');//根据-来分隔.substring()  提取字符串中两个指定的索引号之间的字符
用法：  var str = "Hello world!";console.log(str.substring(3, 7));//提取4~6的字符.replace() 替换字符
用法：const strObj = new String('吃饭了吗？');const newStr = place('吗？', '。');.toLowerCase() 把字符串转换为小写
.toUpperCase()`把字符串转换为大写
用法： const lowStr = LowerCase();const lowStr = UpperCase();.trim() 消除字符串空格
用法：const str = '     你 好 吗？      ';const newStr = im();.charAt() 返回在指定位置的字符
用法：
var str="你好呀，在吃饭了吗"console.log(str.charAt(5))

8、事件冒泡和事件委托

• 事件冒泡:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到 DOM 树的最上层。
• 事件委托:让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行。
• 阻止默认事件:为了不让 a 点击之后跳转,我们就要给他的点击事件进行阻止 return false; e.preventDefault();

lick = function (e) {// 标签名判断的时候注意大小写if (deName === 'LI') {alert('实现方式2：你点击了li');}}

 lick = function (e) {console.log('是否包含 on 类名', e.ains('on'));if (e.ains('on')) {alert('你点击带 on 类名的 元素');}}

事件委派添加li 的 父级只需要给父级绑定一次即可只需要确保 li 的父级在页面中即可。事件委派在 列表数据量大的时候，更有优势，如 微博首页数据都是数百上千条，微博列表内容都是后添加的内容。