forfrank / notes Goto Github PK
View Code? Open in Web Editor NEW笔记整理
License: MIT License
笔记整理
License: MIT License
传统的前端页面布局:基于盒模型
,依赖于display
、float
、position
属性,对于那些特殊的布局很不方便。现在有了flex
,让布局变得更简单。目前,它得到所有浏览器的支持,使开发更简便!
Flexible Box
:弹性布局,为盒模型提供灵活布局;flex容器
中有几概念:
flex项目
:flex容器包裹flex项目主轴
:默认水平方向,从左到右侧轴
:默认垂直方向,从上到下.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意:设为Flex
布局以后,子元素的float
、clear
和vertical-align
属性将失效。
flex-direction
:设置主轴方向,即项目的排列方向;flex-direction: row | row-reverse | column | column-reverse;
row
(默认):主轴为水平方向,从左向右;row-reverse
:水平方向,从右向左;column
:垂直方向,从上到下;column-reverse
:垂直方向,从下到上。flex-wrap
:设置项目的换行方式;flex-wrap: nowrap | wrap | wrap-reverse;
nowrap
(默认):如果项目一行排不下,不换行;wrap
:换行,第二行在下方;wrap-reverse
:换行,第二行在上方。flex-flow
:flex-direction
+flex-wrap
的简写;flex-flow: row nowrap;
justify-content
:定义项目在主轴上的对齐方式justify-content: flex-start | flex-end | center | space-between | space-around;
row
,水平从左到右:
flex-start
(默认):左对齐;flex-end
:右对齐;center
:居中;space-between
:两端对齐,项目之间间隔相等;space-around
:每个项目两侧都有间隔且相等。align-items
:项目在侧轴上的对齐方式;align-items: flex-start | flex-end | center | baseline | stretch;
flex-start
:侧轴起点对齐;flex-end
:侧轴终点对齐;center
:居中;baseline
:项目第一行文字的基线
对齐;stretch
:如果项目高度为auto
,将其拉伸占满容器高度。align-content
:项目有多根轴线(多行)的对齐方式;align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-grow
+flex-shrink
+flex-basis
的简写,默认:0 1 auto
;align-self: auto | flex-start | flex-end | center | baseline | stretch;
function debounce(func, wait, immediate) {
var timeout, result;
return function () {
var context = this;
var args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
// 如果已经执行过,不再执行
var callNow = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait)
if (callNow) result = func.apply(context, args)
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
return result;
}
}
//template
<p> 1:<input name="demo" v-model="checkValue" :value="1" type="checkbox" /></p>
<p>2:<input name="demo" v-model="checkValue" :value="2" type="checkbox" /></p>
<p> 3:<input name="demo" v-model="checkValue" :value="3" type="checkbox" /></p>
<p>数组:{{checkValue}}</p>
//data
data(){
return{
checkValue:[]
}
},
filter它用于把Array的某些元素过滤掉,然后返回剩下的元素。
和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。
例如,在一个Array中,删掉偶数,只保留奇数,可以这么写:
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
then()方法是异步执行。
意思是:就是当.then()前的方法执行完后再执行then()内部的程序,这样就避免了,数据没获取到等的问题。
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。
let targetObj1 = { a: 1 };
let sourceObj1 = { b: 1 };
let sourceObj11 = { c: 3 };
Object.assign(targetObj1, sourceObj1, sourceObj11);
console.log(targetObj1);
注:如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
错误写法
const helloWorld = 'Welcome to the Road to learn React';
helloWorld = 'Bye Bye React';
正确写法
let helloWorld = 'Welcome to the Road to learn React';
helloWorld = 'Bye Bye React';
允许的写法
const helloWorld = {
text: 'Welcome to the Road to learn React'
};
helloWorld.text = 'Bye Bye React';
// function expression
function () { ... }
// arrow function expression
() => { ... }
关于 this 对象的不同行为。一个普通的函数表达式总会定义它自己的 this 对象。但是箭头函数表达式仍然会使用包含它的语境关于箭头函数的括号还有一个值得关注的点。
如果函数只有一个参数,你就可以移除掉参数的括号,但是如果有多个参数,你就必须保留这个括号。
Code Playground
// allowed
item => { ... }
// allowed
(item) => { ... }
// not allowed
item, key => { ... }
// allowed
(item, key) => { ... }
在 ES6 的箭头函数中,你可以用简洁函数体来替换块状函数体(用花括号包含的内
容),简洁函数体的返回不用显示声明。这样你就可以移除掉函数的 return 表达式。
繁体
{list.map(item => {
return (
<div key={item.objectID}>
<span>
<a href={item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>{item.num_comments}</span>
<span>{item.points}</span>
</div>
);
})}
简体
{list.map(item =>
<div key={item.objectID}>
<span>
<a href={item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>{item.num_comments}</span>
<span>{item.points}</span>
</div>
)}
繁写
const name= 'frank';
const user = {
name: name,
};
简写
const name = 'frank';
const user = {
name,
};
ES5
var userService = {
getUserName: function (user) {
return user.firstname + ' ' +user.lastname;
},
};
ES6
const userService = {
getUserName(user) {
return user.firstname + ' ' + user.lastname;
},
};
实例:检测数组site是否包含runoob
let site = ['runoob', 'google', 'taobao'];
site.includes('runoob');
// true
site.includes('baidu');
// false
语法
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)
参数说明
const user = {
firstname: 'Robin',
lastname: 'Wieruch',
};
// ES5
var firstname = user.firstname;
var lastname = user.lastname;
console.log(firstname + ' ' + lastname);
// output: Robin Wieruch
// ES6
const { firstname, lastname } = user;
console.log(firstname + ' ' + lastname);
// output: Robin Wieruch
它只由三个点组成: ...。当使用它时,数组
或对象中的每一个值都会被拷贝到一个新的数组或对象。
const userList = ['Robin', 'Andrew', 'Dan'];
const additionalUser = 'Jordan';
const allUsers = [ ...userList, additionalUser ];
console.log(allUsers);
// output: ['Robin', 'Andrew', 'Dan', 'Jordan']
这里 allUsers 是一个全新的数组变量,而变量 userList 和 additionalUser 还是和原来一
样。用这个运算符,你甚至可以合并两个数组到一个新的数组中。
const oldUsers = ['Robin', 'Andrew'];
const newUsers = ['Dan', 'Jordan'];
const allUsers = [ ...oldUsers, ...newUsers ];
console.log(allUsers);
// output: ['Robin', 'Andrew', 'Dan', 'Jordan']
react.min.js
:React 的核心库react-dom.min.js
:提供与 DOM 相关的功能babel.min.js
:Babel
将Rract
需要的语法JSX,转码为浏览器认识的语法;可以将ES6
代码转为ES5
代码,这样我们就能在目前不支持ES6
浏览器上执行React
代码<script type="text/babel">……</script>
。React 关键词:
将一个HTML标签
渲染到真实的DOM节点:
var myDivElement = <div className="foo" />;
ReactDOM.render(
myDivElement,
document.getElementById('example')
);
创建React组件类
:
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
class MyComponent extends React.Component
创建React组件类
;MyComponent
继承了基类React.Component的所有属性和方法:render()
:return自定义组件的输出样式<MyComponent/>
实例化自定义组件类。class MyComponent extends React.Component {
render(){
return <h1>Hello World</h1>;
}
//或者:
/*render:function(){
return <h1>Hello World</h1>;
}*/
};
ReactDOM.render(
<MyComponent/>,
document.getElementById('example')
);
this.props
:传参-->例如:属性name
的值可以通过this.props.name
获得。getDefaultProps()
:为 props 设置默认值注意:在添加属性时,class
属性需要写成className
,for
属性需要写成htmlFor
,这是因为class和for是JavaScript的保留字。
getInitialState
:设置初始state状态。constructor
:组件类构造函数,一旦实例化组件调用,可设置this.state
的初始状态。this.setState
:重置this.state
,一旦调用该方法,就会自动引发组件重新渲染。示例:
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
/*或者:
constructor(...args) {
super(...args);
this.state = {
liked: false
};
}*/
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? '喜欢' : '不喜欢';
return (
<p onClick={this.handleClick}>
你<b>{text}</b>我。点我切换状态。
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
setState
replaceState
setProps
replaceProps
forceUpdate
:强制更新,调用render()
重新渲染组件findDOMNode
:返回DOM元素,可获取已经挂载到DOM中的组件isMounted
:判断组件挂载状态,返回bool值Mounting
:已插入真实 DOMUpdating
:正在被重新渲染Unmounting
:已移出真实 DOM方法有:
componentWillMount
:组件渲染前被调用componentDidMount
:组件第一次渲染后调用,只执行一次componentWillUpdate
:组件更新前被调用(收到新的props或者state但还没有render时)componentDidUpdate
:组件更新后调用componentWillUnmount
:组件从DOM中移除的时调用。componentWillReceiveProps
:组件接受新的参数时调用shouldComponentUpdate
:返回一个bool值,在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。一般使用方法:在render()
的返回值上绑定ref
属性;
<input ref="myInput" />
示例:
var MyComponent = React.createClass({
handleClick: function() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
},
render: function() {
// 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick}
/>
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
通过绑定ref属性,可以获得组件的子组件或者原生DOM节点。
var Button = React.createClass({
getInitialState: function() {
return {
data:0
};
},
setNewNumber: function() {
this.setState({data: this.state.data + 1})
},
render: function () {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>
);
}
})
var Content = React.createClass({
componentWillMount:function() {
console.log('Component WILL MOUNT!')
},
componentDidMount:function() {
console.log('Component DID MOUNT!')
},
componentWillReceiveProps:function(newProps) {
console.log('Component WILL RECEIVE PROPS!')
},
shouldComponentUpdate:function(newProps, newState) {
return true;
},
componentWillUpdate:function(nextProps, nextState) {
console.log('Component WILL UPDATE!');
},
componentDidUpdate:function(prevProps, prevState) {
console.log('Component DID UPDATE!')
},
componentWillUnmount:function() {
console.log('Component WILL UNMOUNT!')
},
render: function () {
return (
<div>
<h3>{this.props.myNumber}</h3>
</div>
);
}
});
ReactDOM.render(
<div>
<Button />
</div>,
document.getElementById('example')
);
Content
和Button
,其中Content
是Button
的子组件;Button
中的状态this.state.data
通过onClick
事件在不断加一Button
中,Content
子组件通过属性myNumber = {this.state.data}
传参给子组件中;Content
子组件通过this.props.myNumber
调用;var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
this.state.value
的值给input
和h4
渲染显示;handleChange
函数,通过this.setState
改变state的值,重新render父组件中:state和函数通过属性,传参到子组件中:
var Content = React.createClass({
render: function() {
return <div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>;
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
<script type="text/babel" src="helloworld_react.js"></script>
if else
语句,但可以使用conditional (三元运算)
表达式来替代。ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>……</h1>,
document.getElementById('example')
);
{/*注释...*/}
;/*注释 */
var arr = [<h1>元素1</h1>,<h2>元素2</h2>,];
<HelloMessage /> == <HelloMessage></HelloMessage>
onClick={this.handleClick}
return <h3 style={style}>我是一个组件</h3>
return(<div><h3 style={style}>我是一个组件</h3></div>)
return加括号。直接量语法
/pattern/attributes
创建RegExp对象的语法
new RegExp(pattern, attributes);
参数
参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。
用 create-react-app 创建的项目有一个优点,那就是可以让你在更改源代码的时候浏览器自
动刷新页面。试试改变 src/App.js 文件中的变量 helloWorld ,修改过后浏览器应该就会刷
新页面。但有一个更好的方式来实现这个功能。
模块热替换(HMR)是一个帮助你在浏览器中重新加载应用的工具,并且无需再让浏览
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
//开启热替换代码
if (module.hot) {
module.hot.accept();
}
if (num === 1) {
num--;
} else {
num++;
}
// 转换成三元符
(num === 1) ? num-- : num++;
//ES5:
var book = {name: '学习JavaScript数据结构与算法'};
console.log('你正在阅读' + book.name + '。 \n这是新的一行\n 这也是。 ');
//ES6
console.log(`你正在阅读${book.name}。
这是新的一行
这也是。 `);
function Book(title, pages, isbn){ //{1}
this.title = title;
this.pages = pages;
this.isbn = isbn;
}
Book.prototype.printTitle = function(){
console.log(this.title);
};
//我们可以用ES6把语法简化如下:
class Book { //{2}
constructor (title, pages, isbn) {
this.title = title;
this.pages = pages;
this.isbn = isbn;
}
printIsbn(){
console.log(this.isbn);
}
}
class Stack {
constructor () {
this.items = []
}
push(item) {
return this.items.push(item)
}
pop() {
return this.items.pop()
}
peek() {
return this.items[this.items.length - 1]
}
isEmpty() {
return this.items.length === 0
}
clear() {
return this.items = []
}
size() {
return this.items.length
}
}
function div2(dec){
var remStack = new Stack(),
rem,binaryString='';
while (dec > 0) {
rem = Math.floor(dec % 2);
remStack.push(rem);
dec = Math.floor(dec/2);
}
while (!remStack.isEmpty()) {
binaryString += remStack.pop().toString();
}
return binaryString;
}
console.log(div2(20));
class Queue {
constructor () {
this.items = []
}
enqueue(item) {
return this.items.push(item)
}
dequeque() {
return this.items.shift()
}
font() {
return this.items[0]
}
isEmpty() {
return this.items.length === 0
}
clear() {
return this.items = []
}
size() {
return this.items.length
}
}
class Node {
constructor(element) {
this.element = element
this.next = null
}
}
class LinkDist {
constructor() {
this.length = 0
this.head = null
}
append(element) {
return append.call(this, element)
}
search(postion, cb) {
return search.call(this, postion, cb)
}
insert(position, element) {
return insert.call(this, position, element)
}
removeAt(postion) {
return removeAt.call(this, postion)
}
indexOf(element, cb) {
var cur = this.head, pre = null
while(cur.next) {
if (cur.element === element) {
cb.call(this, pre, cur)
}
pre = cur
cur = cur.next
}
return null
}
remove(element) {
this.indexOf(element, (pre, cur) => {
if (pre && cur) {
pre.next = cur.next
this.length--
} else if (cur) {
this.head = cur.next
this.length--
}
})
}
isEmpty() {
return this.length === 0
}
size() {
return this.length
}
toString() {
var res = '', cur = this.head, index = 0
while (index++ < this.length) {
res += cur.element
cur = cur.next
}
return res
}
getHead() {
return this.head
}
}
function append(element) {
var node = new Node(element)
var cur = null
if (this.head === null) {
this.head = node
} else {
cur = this.head // 先指向当前的第一个元素
while(cur.next) { // 只要有next就往下迭代
cur = cur.next
}
cur.next = node // 没有next的时候, 保存下next指向node
}
this.length++
}
function search(position, cb) {
if (position > -1 && position < this.length) {
var cur = this.head, pre = null, index = 0
if (position === 0) {
cb.call(this, null, cur)
} else {
while (index++ < position) {
pre = cur
cur = cur.next
}
cb.call(this, pre, cur)
}
return cur
} else {
cb.call(this, null, null)
return null
}
}
function removeAt(position) {
return this.search(position, (pre, cur) => {
if (pre) {
pre.next = cur.next
this.length--
} else if (cur) {
this.head = cur.next
this.length--
} else {
throw new Error('未找到元素')
return false
}
})
}
function insert(position, element) {
this.search(position, (pre, cur) => {
if (pre && cur) {
// 除第一项以外的
pre.next = new Node(element)
pre.next.next = cur
} else if (cur) {
// 第一项
this.head = new Node(element)
this.head.next = cur
} else {
throw new Error('元素并不存在')
}
this.length++
})
}
var list = new LinkDist
list.append(15)
list.append(10)
list.append(5)
list.insert(1, 9)
list.remove(10)
var res = list.toString()
function Set() {
this.dataStore = [];
this.add = add;
this.remove = remove;
this.size = size;
this.union = union; //求并集
this.intersect = intersect; //求交集
this.subset = subset; //判断本集合是否是另一个集合的子集
this.difference = difference; //求本集合相对于另一个集合的补集
this.show = show;
this.contains = contains;
}
function add(data) {
if (this.dataStore.indexOf(data) < 0) {
this.dataStore.push(data);
return true;
}else {
return false;
}
}
function Dictionary() {
let items = {}
this.set = function (key, value) {
items[key] = value
}
this.has = function (key) {
return key in items
}
this.remove = function (key) {
if (this.has(key)) {
delete items[key]
return true
}
return false
}
this.get = function (key) {
return this.has(key) ? items[key] : undefined
}
this.values = function () {
let values = []
for (let k in items) {
if (this.has(k)) {
values.push(items[k])
}
}
return values
}
this.clear = function () {
items = []
}
this.size = function () {
return Object.keys(items).length
}
this.keys = function () {
return Object.keys(items)
}
this.getItems = function () {
return items
}
}
let dic = new Dictionary()
dic.set('name', 'hello')
dic.set('age', 22)
console.log(dic.has('name')) // true
dic.remove('age')
console.log(dic.values()) // [ 'hello' ]
function HashMap() {
let items = []
let loseloseHashCode = function (key) {
let hash = 0
for (let i = 0; i < key.length; i++) {
hash += key.charCodeAt(i)
}
// 为了得到比较小的数值,我们会使用hash值和一个任意 数做除法的余数(mod)。
return hash % 37
}
this.put = function (key, value) {
let position = loseloseHashCode(key)
console.log(position + '-' + key)
items[position] = value
}
this.get = function (key) {
return items[loseloseHashCode(key)]
}
this.remove = function (key) {
// 对于HashMap类来说,我们不需要像ArrayList类一样从items数组中将位置也移除。
// 由于元素分布于整个数组范围内,一些位置会没有任何元素占据,并默认为undefined值。
// 我们也不能将位置本身从数组中移除(这会改变其他元素的位置),否则,当下次需要获得或移除一个 元素的时候,这个元素会不在我们用散列函数求出的位置上。
items[loseloseHashCode(key)] = undefined
}
}
let map = new HashMap()
map.put('name', 'hello') // 10-name
map.put('age', 22) // 5-age
console.log(map.get('name')) // hello
map.remove('name')
console.log(map.get('name')) // undefined
console.log(map.get('age')) // 22
function bubbleSort(arr){
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr.length-1-i;j++){
if(arr[j+1]<arr[j]){
temp = arr[j+1];
arr[j+1] = arr[j];
arr[j] = temp;
}
console.log(j);
}
}
return arr;
}
var array = [2,3,5,4,1]
console.log(bubbleSort(array));
function quickSort(arr) {
for (var i=0; i<arr.length; i++) {
for(var j=i+1; j<arr.length; j++) {
if (arr[j]<arr[i]) {
var temp = arr[j];
arr[j]=arr[i];
arr[i]=temp;
}
}
}
return arr;
}
console.log('----选择排序----');
console.log(quickSort(array));
test
在table调用row-class-name属性,将index添加到row里面,之后再用scop.row.index就可以获取行号了
//.vue
<el-table
:data="msg.Field"
border
style="width: 100%"
size="small"
:row-class-name="tableRowClassName"
>
//medths方法
tableRowClassName({ row, rowIndex }) {
//把每一行的索引放进row
row.index = rowIndex;
}
总结
1.this指的是直接调用当前方法(函数)的那个对象,也就是说函数在谁那被调用,this就指的是谁。
eg:
oBtn.onclick = function(){
alert(this); //oBtn
}
oBtn.onclick = fn1;
function fn1(){
alert(this); //oBtn
}
很容易看出,函数是在按钮对象被点击的时候调用,所以this指的是obtn,这两种情况是等同的是,只是调用函数的写法不同。
2.当函数里面嵌套函数的时候,嵌套的那个函数里面的this指的是widows,这是JS的一个特性。
eg:
oBtn.onclick = function(){
alert(this); //oBtn(记得这里还是oBtn)
fn1();
}
function fn1(){
alert(this); // window
}
eg:
oBtn.onclick = function(){
alert(this); //oBtn
fn1(this); 1 将上面的this作为参数传函数去
}
function fn1(obj){
alert(obj); // oBtn
}
eg:
var that = null;
oBtn[i].onclick = function(){
alert(this); //oBtn
that = this ;// 将上面的this保存起来赋给另一个变量
fn1();
}
function fn1(){
alert(that); // 指向oBtn
}
3.如果有new关键字,this指向new出来的那个对象
eg:
function CreatePerson(name){ //函数名首字母大写
//var this=new Object(); 系统会偷偷在这里声明一个对象赋给this替咱们做,不用写
this.name = name;
this.showName = function(){
alert(this.name);
}
//return this; 函数的默认返回值就是this即这个对象(隐式返回 不用自己再写返回值)
}
var p1 =new CreatePerson('haha');
//当用new去调用一个函数:这个时候this指的就是创建出来的对象 而且函数的默认返回值就是this即这个对象(隐式返回 不用自己再写返回值)
p1.showName();
new操作符具体干了什么呢?
4.在IE下,事件的绑定的第二种形式中,obj.attachEvent(事件名称,事件函数),里面的this指的是window。
当然这不是我们想要的,所以让this指向触发事件的对象呢?这就需要提到一个方法call();它可以改变this的指向;
call(this的指向,原来函数的参数列表):它有两个参数,第一个指的是改变的this的指向,也就是你想要this指向谁就写谁,如果写的是null,this的指向就不会改变,还是指向原来的。从第二个参数开始,就代表的是函数里面的具体传入的参数了。具体用法我们来看个栗子:
eg:
//有一个函数,两个参数。
function fn1(a,b){
alert(this); // 本来默认是window,改变后为1
alert(a+b);// 30
}
//三种调用方法
fn1(); //正常调用。弹出 this指向window, a+b为 undefined
fn1.call(); // 等同于上面 ,这两种调用是一样的
fn1.call(1,10,20); // 弹出this指向 1,同时传入两个数,弹出30
let arr = [1, 2, 3, 4, 5]
let newArr = arr.map(x => x*2)
//arr= [1, 2, 3, 4, 5] 原数组保持不变
//newArr = [2, 4, 6, 8, 10] 返回新数组
let arr = [1, 2, 3, 4, 5]
num.forEach(x => x*2)
// arr = [2, 4, 6, 8, 10] 数组改变,注意和map区分
let arr = [1, 2, 3, 4, 5]
const isBigEnough => value => value >= 3
let newArr = arr.filter(isBigEnough )
//newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组
let arr = [1, 2, 3, 4, 5]
const isLessThan4 => value => value < 4
const isLessThan6 => value => value < 6
arr.every(isLessThan4 ) //false
arr.every(isLessThan6 ) //true
let arr= [1, 2, 3, 4, 5]
const isLessThan4 => value => value < 4
const isLessThan6 => value => value > 6
arr.some(isLessThan4 ) //true
arr.some(isLessThan6 ) //false
let arr = [1, 2, 3, 4, 5]
const add = (a, b) => a + b
let sum = arr.reduce(add)
//sum = 15 相当于累加的效果
与之相对应的还有一个 Array.reduceRight() 方法,区别是这个是从右向左操作的
let arr = [1, 2, 3, 4, 5]
arr.pop()
console.log(arr) //[1, 2, 3, 4]
console.log(arr.length) //4
```
let arr = [1, 2, 3, 4, 5]
arr.shift()
console.log(arr) //[2, 3, 4, 5]
console.log(arr.length) //4
let arr = [1, 2, 3, 4, 5]
arr.unshift(6, 7)
console.log(arr) //[6, 7, 2, 3, 4, 5]
console.log(arr.length) //7
let arr1 = [1, 2, 3]
arr2 = [4, 5]
let arr = arr1.concat(arr2)
console.log(arr)//[1, 2, 3, 4, 5]
```
let arr = [1, 2, 3, 4, 5];
let str = arr.toString()
console.log(str)// 1,2,3,4,5
```
let arr = [1, 2, 3, 4, 5];
let str1 = arr.toString()
let str2 = arr.toString(',')
let str3 = arr.toString('##')
console.log(str1)// 12345
console.log(str2)// 1,2,3,4,5
console.log(str3)
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.splice(2, 0 'haha')
let arr2 = arr.splice(2, 3)
let arr1 = arr.splice(2, 1 'haha')
console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一个元素
console.log(arr2) //[1, 2] 删除三个元素
console.log(arr3) //[1, 2, 'haha', 4, 5] 替换一个元素
h1 {
font-size: 8vh;
}
let arrayLike = {
0: 'tom',
1: '65',
2: '男',
3: ['jane','john','Mary'],
'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]
object.addEventListener("webkitTransitionEnd", myScript);
// Safari 3.1 到 6.0 代码object.addEventListener("transitionend", myScript);
// Standard syntaxCSS中的:root
和var
NodeList 和 Array 的区别
可以打开 proto 查看它的方法,其中有 forEach()
、item()
、keys()
等。而 Array 的 prototype 中有 map()
、pop()
等数组才有的方法。
setProperty
定义和使用
setProperty() 方法用于设置一个新的 CSS 属性,同时也可以修改 CSS 声明块中已存在的属性。
语法
object.setProperty(propertyname, value, priority)
属性
参数 | 描述
-|:-:| -:
propertyname | 必需。一个字符串,表示创建或修改的属性。
value | 可选,新的属性值。
priority| 可选。字符串,规定是否需要设置属性的优先级 important。
JavaScript 的 this 原理
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进-行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。
array.sort()方法默认是升序排序,如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
简单点:比较函数两个参数a和b,返回a-b升序,返回b-a降序
https://www.cnblogs.com/fnz0/p/7680297.html
2. reduce()方法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
const reduce = data.reduce( (obj, item) => {
if( !obj[item] ) {
obj[item] = 0;
}
obj[item]++;
return obj;
}, {});
console.log(reduce);
:first-child伪类选择器
只要E元素是它的父级的第一个子元素,就选中。它需要同时满足两个条件,一个是“第一个子元素”,另一个是“这个子元素刚好是E”。参考链接
直接量语法
/pattern/attributes
创建RegExp对象的语法
new RegExp(pattern, attributes);
参数
参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。
stringObject.replace(regexp/substr,replacement)
const isAdult = people.some( person => {
const currentYear = (new Date()).getFullYear();
return currentYear - person.year >= 19;
});
console.log({isAdult});
const allAdult = people.every( person => new Date().getFullYear() - person.year >= 19);
console.log({allAdult});
const comment = comments.find(comment => comment.id == 823423);
const index = comments.findIndex(comment => comment.id == 823423);
这两者比较相似的地方,大概只有:参数的第一个都是指的起始位置,且都接受负数,若是负数,代表倒数第几位。
而其他地方是需要区分清楚的:
slice():不修改原数组,按照参数复制一个新数组,参数表述复制的起点和终点索引(省略则代表到末尾),但终点索引位置的元素不包含在内。
splice():原数组会被修改。第二个参数代表要删掉的元素个数,之后可选的参数,表示要替补被删除位置的元素。
让我们来联想一下,看到一块纹着漂亮花纹的布料,slice 拿出相机拍了一张照,而 splice 拿出剪刀把这个花纹剪下来带走了,再用其他布料给缝回去。
所以想要删除一个元素,有两种实现思路,一是把出它之外的元素给复制下来再合在一起,二是直接把它删除。
// 删除方法一,splice()
// comments.splice(index, 1);
// 删除方法二,slice 拼接
const newComments = [
...comments.slice(0, index),
...comments.slice(index + 1)
];
1.事件委托
color
; none
:无阴影 length
,①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值 length
,②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 length
,③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 color
:设置对象的阴影的颜色。var str = " Runoob ";
alert(str.trim());
Runoob
使用 limit 参数:
var str="How are you doing today?";
var n=str.split(" ",3);
n 将输出3个数组的值:
How,are,you
1.Element.getBoundingClientRect()
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
返回值是一个DOMRect
对象,这个对象是由该元素的getClientRects()
方法返回的一组矩形的集合, 即:是与该元素相关的CSS边框集合。DOMRect
对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
DOMRect相关属性:
Attribute | Type | Description |
---|---|---|
bottom | float | Y 轴,相对于视口原点(viewport origin)矩形盒子的底部。只读。 |
height | float | 矩形盒子的高度(等同于 bottom 减 top)。只读。 |
left | float | X 轴,相对于视口原点(viewport origin)矩形盒子的左侧。只读。 |
right | float | X 轴,相对于视口原点(viewport origin)矩形盒子的右侧。只读。 |
top | float | Y 轴,相对于视口原点(viewport origin)矩形盒子的顶部。只读。 |
width | float | 矩形盒子的宽度(等同于 right 减 left)。只读。 |
x | float | X轴横坐标,矩形盒子左边相对于视口原点(viewport origin)的距离。只读。 |
y | float | Y轴纵坐标,矩形盒子顶部相对于视口原点(viewport origin)的距离。只读。 |
2.appendChild()
只能传一个节点,且不直接支持传字符串【需要 appendChild(document.createTextElement('字符串'))代替】,返回追加的 Node 节点;
若 appendChild() 的参数是页面存在的一个元素,则执行后原来的元素会被移除;
例如:document.getElement("a").appendChild(document.getElementByIdx("b")),执行后,b 元素会先被移除,然后再添加到 a 中。
在事件回调函数中调用e.stopPropagation()方法后,即可看到在该处监听到事件后不再继续传递事件
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.